From 3972bb50ab8355fa02ba7ab162d40e024cf71d89 Mon Sep 17 00:00:00 2001
From: Roger Guasch <30463479+roguib@users.noreply.github.com>
Date: Wed, 19 May 2021 08:14:11 +0200
Subject: [PATCH] Theme preview tile for OS themes (#3387)

Co-authored-by: Opender Singh <opender.singh@konghq.com>
---
 .../app/ui/components/settings/theme.tsx      | 160 ++++++++++--------
 .../app/ui/css/components/themes.less         |  13 +-
 2 files changed, 105 insertions(+), 68 deletions(-)

diff --git a/packages/insomnia-app/app/ui/components/settings/theme.tsx b/packages/insomnia-app/app/ui/components/settings/theme.tsx
index 48ba917240..842a3d0f1b 100644
--- a/packages/insomnia-app/app/ui/components/settings/theme.tsx
+++ b/packages/insomnia-app/app/ui/components/settings/theme.tsx
@@ -37,6 +37,63 @@ class Theme extends PureComponent<Props, State> {
     });
   }
 
+  renderThemePreview(themeName: string) {
+    return (
+      /* @ts-expect-error -- TSCONVERSION */
+      <svg theme={themeName} width="100%" height="100%" viewBox="0 0 500 300">
+        {/*
+          A WORD TO THE WISE: If you, dear traveler from the future, are here
+          for the purpose of theming things due to changes in the app structure,
+          please remember to add `--sub` to your classes or else the selected class'
+          theme variables will apply to all theme previews.  Search your codebase
+          for `--sub` to see more.
+        */}
+
+        {/* @ts-expect-error -- TSCONVERSION */}
+        <g subtheme={themeName}>
+          {/* App Header */}
+          <g className="theme--app-header--sub">
+            <rect x="0" y="0" width="100%" height="10%" className="bg-fill" />
+          </g>
+
+          {/* Panes */}
+          <g className="theme--pane--sub">
+            {/* Response Area */}
+            <rect x="0" y="10%" width="100%" height="100%" className="bg-fill" />
+
+            {/* URL Bars */}
+            <rect
+              x="25%"
+              y="10%"
+              width="100%"
+              height="10%"
+              className="theme--pane__header--sub bg-fill"
+            />
+          </g>
+
+          {/* Sidebar */}
+          <g className="theme--sidebar--sub">
+            <rect x="0" y="10%" width="25%" height="100%" className="bg-fill" />
+          </g>
+
+          {/* Lines */}
+          <line x1="0%" x2="100%" y1="10%" y2="10%" strokeWidth="1" className="hl-stroke" />
+          <line x1="25%" x2="100%" y1="20%" y2="20%" strokeWidth="1" className="hl-stroke" />
+          <line x1="62%" x2="62%" y1="10%" y2="100%" strokeWidth="1" className="hl-stroke" />
+          <line x1="25%" x2="25%" y1="10%" y2="100%" strokeWidth="1" className="hl-stroke" />
+
+          {/* Color Squares */}
+          <rect x="40%" y="85%" width="5%" height="8%" className="success-fill" />
+          <rect x="50%" y="85%" width="5%" height="8%" className="info-fill" />
+          <rect x="60%" y="85%" width="5%" height="8%" className="warning-fill" />
+          <rect x="70%" y="85%" width="5%" height="8%" className="danger-fill" />
+          <rect x="80%" y="85%" width="5%" height="8%" className="surprise-fill" />
+          <rect x="90%" y="85%" width="5%" height="8%" className="info-fill" />
+        </g>
+      </svg>
+    );
+  }
+
   renderTheme(theme: ThemeType) {
     const { handleChangeTheme, activeTheme, autoDetectColorScheme } = this.props;
     const isActive = activeTheme === theme.theme.name;
@@ -53,54 +110,7 @@ class Theme extends PureComponent<Props, State> {
           disabled={disabled}
           onClick={() => handleChangeTheme(theme.theme.name, 'default')}
           className={isActive ? 'active' : ''}>
-          {/* @ts-expect-error -- TSCONVERSION */}
-          <svg theme={theme.theme.name} width="100%" height="100%" viewBox="0 0 500 300">
-            {/*
-              A WORD TO THE WISE: If you, dear traveler from the future, are here for the purpose of theming things due to changes in the app structure, please remember to add `--sub` to your classes or else the selected class' theme variables will apply to all theme previews.  Search your codebase for `--sub` to see more.
-                        */}
-
-            {/* @ts-expect-error -- TSCONVERSION */}
-            <g subtheme={theme.theme.name}>
-              {/* App Header */}
-              <g className="theme--app-header--sub">
-                <rect x="0" y="0" width="100%" height="10%" className="bg-fill" />
-              </g>
-
-              {/* Panes */}
-              <g className="theme--pane--sub">
-                {/* Response Area */}
-                <rect x="0" y="10%" width="100%" height="100%" className="bg-fill" />
-
-                {/* URL Bars */}
-                <rect
-                  x="25%"
-                  y="10%"
-                  width="100%"
-                  height="10%"
-                  className="theme--pane__header--sub bg-fill"
-                />
-              </g>
-
-              {/* Sidebar */}
-              <g className="theme--sidebar--sub">
-                <rect x="0" y="10%" width="25%" height="100%" className="bg-fill" />
-              </g>
-
-              {/* Lines */}
-              <line x1="0%" x2="100%" y1="10%" y2="10%" strokeWidth="1" className="hl-stroke" />
-              <line x1="25%" x2="100%" y1="20%" y2="20%" strokeWidth="1" className="hl-stroke" />
-              <line x1="62%" x2="62%" y1="10%" y2="100%" strokeWidth="1" className="hl-stroke" />
-              <line x1="25%" x2="25%" y1="10%" y2="100%" strokeWidth="1" className="hl-stroke" />
-
-              {/* Color Squares */}
-              <rect x="40%" y="85%" width="5%" height="8%" className="success-fill" />
-              <rect x="50%" y="85%" width="5%" height="8%" className="info-fill" />
-              <rect x="60%" y="85%" width="5%" height="8%" className="warning-fill" />
-              <rect x="70%" y="85%" width="5%" height="8%" className="danger-fill" />
-              <rect x="80%" y="85%" width="5%" height="8%" className="surprise-fill" />
-              <rect x="90%" y="85%" width="5%" height="8%" className="info-fill" />
-            </g>
-          </svg>
+          {this.renderThemePreview(theme.theme.name)}
         </Button>
       </div>
     );
@@ -133,26 +143,42 @@ class Theme extends PureComponent<Props, State> {
   }
 
   renderThemeSelect(scheme: 'light' | 'dark') {
-    const { activeLightTheme, activeDarkTheme, handleChangeTheme } = this.props;
+    const {
+      activeLightTheme,
+      activeDarkTheme,
+      handleChangeTheme,
+      autoDetectColorScheme,
+    } = this.props;
     const { themes } = this.state;
-    const activeColorTheme = scheme === 'light' ? activeLightTheme : activeDarkTheme;
+    const activeColorTheme =
+      scheme === 'light' ? activeLightTheme : activeDarkTheme;
     return (
-      <div className="form-control form-control--outlined">
-        <label>
-          Preferred {scheme} color scheme
-          <HelpTooltip className="space-left">
-            Lets you choose the color scheme that is used in {scheme} mode.
-          </HelpTooltip>
-          <select
-            value={activeColorTheme}
-            onChange={e => handleChangeTheme(e.target.value, scheme)}>
-            {themes.map(theme => (
-              <option key={theme.theme.name} value={theme.theme.name}>
-                {theme.theme.displayName}
-              </option>
-            ))}
-          </select>
-        </label>
+      <div>
+        <div className="form-control form-control--outlined">
+          <label>
+            Preferred {scheme} color scheme
+            <HelpTooltip className="space-left">
+              Lets you choose the color scheme that is used in {scheme} mode.
+            </HelpTooltip>
+            <select
+              value={activeColorTheme}
+              onChange={(e) => handleChangeTheme(e.target.value, scheme)}
+            >
+              {themes.map((theme) => (
+                <option key={theme.theme.name} value={theme.theme.name}>
+                  {theme.theme.displayName}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+        <div className="themes select__preview">
+          <div className="themes__theme" style={{ maxWidth: '50%' }}>
+            <Button disabled={!autoDetectColorScheme}>
+              {this.renderThemePreview(activeColorTheme)}
+            </Button>
+          </div>
+        </div>
       </div>
     );
   }
@@ -161,7 +187,7 @@ class Theme extends PureComponent<Props, State> {
     const { autoDetectColorScheme, handleAutoDetectColorSchemeChange } = this.props;
     return (
       <>
-        <div className="themes">{this.renderThemeRows()}</div>
+        <div className="themes general__preview">{this.renderThemeRows()}</div>
         <div className="form-control form-control--thin">
           <label className="inline-block">
             Use OS color scheme
diff --git a/packages/insomnia-app/app/ui/css/components/themes.less b/packages/insomnia-app/app/ui/css/components/themes.less
index 0716a76efb..597b07a280 100644
--- a/packages/insomnia-app/app/ui/css/components/themes.less
+++ b/packages/insomnia-app/app/ui/css/components/themes.less
@@ -1,5 +1,16 @@
 .themes {
-  padding-top: var(--padding-lg);
+  &.general__preview {
+    padding-top: var(--padding-lg);
+
+  }
+
+  &.select__preview {
+    padding-top: var(--padding-xxs);
+    padding-bottom: var(--padding-xxs);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
   .themes__row {
     display: flex;