Styling Application tab

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+preferences/preferences.tsx

@@ -20,6 +20,7 @@ import { Tab, Tabs } from "../tabs";
 
 enum PreferencesTab {
   Application = "application",
+  Proxy = "proxy",
   Kubernetes = "kubernetes",
   Extensions = "extensions"
 }
@@ -109,32 +110,9 @@ export class Preferences extends React.Component {
                 onChange={({ value }: SelectOption) => preferences.colorTheme = value}
               />
             </section>
-            <section id="proxy">
-              <h2>Proxy</h2>
-              <SubTitle title="HTTP Proxy"/>
-              <Input
-                theme="round-black"
-                placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
-                value={this.httpProxy}
-                onChange={v => this.httpProxy = v}
-                onBlur={() => preferences.httpsProxy = this.httpProxy}
-              />
-              <small className="hint">
-                Proxy is used only for non-cluster communication.
-              </small>
 
-              <SubTitle title="Certificate Trust"/>
+            <hr/>
-              <Checkbox
+
-                label="Allow untrusted Certificate Authorities"
-                value={preferences.allowUntrustedCAs}
-                onChange={v => preferences.allowUntrustedCAs = v}
-              />
-              <small className="hint">
-                This will make Lens to trust ANY certificate authority without any validations.{" "}
-                Needed with some corporate proxies that do certificate re-writing.{" "}
-                Does not affect cluster communications!
-              </small>
-            </section>
             <section id="shell">
               <h2>Terminal Shell</h2>
               <SubTitle title="Shell Path"/>
@@ -145,10 +123,13 @@ export class Preferences extends React.Component {
                 onChange={v => this.shell = v}
                 onBlur={() => preferences.shell = this.shell}
               />
-              <small className="hint">
+              <div className="hint">
                 The path of the shell that the terminal uses.
-              </small>
+              </div>
             </section>
+
+            <hr/>
+
             <section id="startup">
               <h2>Start-up</h2>
               <SubTitle title="Automatic Start-up"/>
@@ -160,6 +141,34 @@ export class Preferences extends React.Component {
             </section>
           </section>
         )}
+        {this.activeTab == PreferencesTab.Proxy && (
+          <section id="proxy">
+            <h2>Proxy</h2>
+            <SubTitle title="HTTP Proxy"/>
+            <Input
+              theme="round-black"
+              placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
+              value={this.httpProxy}
+              onChange={v => this.httpProxy = v}
+              onBlur={() => preferences.httpsProxy = this.httpProxy}
+            />
+            <small className="hint">
+              Proxy is used only for non-cluster communication.
+            </small>
+
+            <SubTitle title="Certificate Trust"/>
+            <Checkbox
+              label="Allow untrusted Certificate Authorities"
+              value={preferences.allowUntrustedCAs}
+              onChange={v => preferences.allowUntrustedCAs = v}
+            />
+            <small className="hint">
+              This will make Lens to trust ANY certificate authority without any validations.{" "}
+              Needed with some corporate proxies that do certificate re-writing.{" "}
+              Does not affect cluster communications!
+            </small>
+          </section>
+        )}
 
         {this.activeTab == PreferencesTab.Kubernetes && (
           <section id="kubernetes">

src/renderer/components/app.scss

@@ -105,12 +105,6 @@ ol, ul {
   list-style: none;
 }
 
-hr {
-  margin: $margin 0 !important;
-  height: 1px;
-  background: $grey-800;
-}
-
 h1 {
   color: $textColorPrimary;
   font-size: 28px;
@@ -226,6 +220,11 @@ a {
   }
 }
 
+// Margins
+.marginTop40 {
+  margin-top: 40px;
+}
+
 // app's common loading indicator, displaying on the route transitions
 #loading {
   position: absolute;

src/renderer/components/layout/page-layout.scss

@@ -106,11 +106,6 @@
     color: var(--colorInfo);
   }
 
-  .SubTitle {
-    text-transform: none;
-    margin-bottom: 0 !important;
-  }
-
   .Select {
     &__control {
       box-shadow: 0 0 0 1px #20222580;
@@ -133,10 +128,9 @@
   section {
     display: flex;
     flex-direction: column;
-    margin-bottom: var(--spacing);
 
-    > :not(:last-child) {
+    &:not(:first-child) {
-      margin-bottom: var(--spacing);
+      margin-top: 40px;
     }
 
     h1, h2 {
@@ -144,24 +138,30 @@
       text-transform: uppercase;
     }
 
-    h1 {
-      font-size: x-large;
-      border-bottom: 1px solid var(--borderFaintColor);
-      padding-bottom: var(--padding);
-    }
-
     h2 {
       font-size: 16px;
       line-height: 20px;
       font-weight: 600;
+      margin-bottom: 20px;
     }
 
-    small.hint {
+    .hint {
-      margin-top: calc(var(--unit) * -1.5);
+      margin-top: 4px;
+      font-size: 14px;
+      color: var(--textColorDimmed);
     }
 
     .SubTitle {
       margin-top: 0;
+      margin-bottom: 8px;
+      padding-bottom: 0;
+      font-size: 12px;
+    }
+
+    hr {
+      margin-top: 40px;
+      height: 1px;
+      border-top: thin solid #ffffff0f;
     }
   }
 }

src/renderer/themes/lens-dark.json

@@ -9,13 +9,14 @@
     "golden": "#ffc63d",
     "halfGray": "#87909c80",
     "primary": "#3d90ce",
-    "textColorPrimary": "#87909c",
+    "textColorPrimary": "#8e9297",
     "textColorSecondary": "#a0a0a0",
     "textColorAccent": "#ffffff",
+    "textColorDimmed": "#8e92978c",
     "borderColor": "#4c5053",
     "borderFaintColor": "#373a3e",
-    "mainBackground": "#36393f",
+    "mainBackground": "#2b3035",
-    "secondaryBackground": "#2f3136",
+    "secondaryBackground": "#212427",
     "contentColor": "#262b2f",
     "layoutBackground": "#2e3136",
     "layoutTabsBackground": "#252729",

src/renderer/themes/lens-light.json

@@ -12,6 +12,7 @@
     "textColorPrimary": "#555555",
     "textColorSecondary": "#51575d",
     "textColorAccent": "#333333",
+    "textColorDimmed": "#8e92978c",
     "borderColor": "#c9cfd3",
     "borderFaintColor": "#dfdfdf",
     "mainBackground": "#f1f1f1",