Coloring Add Cluster headings

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

src/renderer/components/+add-cluster/add-cluster.scss

@@ -42,9 +42,4 @@
   .text-primary {
     color: var(--textColorAccent);
   }
-
-  .hint {
-    display: block;
-    padding-top: 6px;
-  }
 }

src/renderer/components/+add-cluster/add-cluster.tsx

@@ -231,7 +231,7 @@ export class AddCluster extends React.Component {
           />
         </Tabs>
         {this.sourceTab === KubeConfigSourceTab.FILE && (
-          <div>
+          <>
             <div className="kube-config-select flex gaps align-center">
               <Input
                 theme="round-black"
@@ -256,10 +256,10 @@ export class AddCluster extends React.Component {
             <small className="hint">
               Pro-Tip: you can also drag-n-drop kubeconfig file to this area
             </small>
-          </div>
+          </>
         )}
         {this.sourceTab === KubeConfigSourceTab.TEXT && (
-          <div className="flex column">
+          <div className="flex column gaps">
             <AceEditor
               autoFocus
               showGutter={false}
@@ -352,45 +352,47 @@ export class AddCluster extends React.Component {
 
     return (
       <DropFileInput onDropFiles={this.onDropKubeConfig}>
-        <PageLayout className="AddClusters" header={<><Icon svg="logo-lens" big /> <h2>Add Clusters</h2></>} showOnTop={true}>
+        <PageLayout className="AddClusters" header={<h1>Add Clusters</h1>} showOnTop={true}>
-          <h2>Add Clusters from Kubeconfig</h2>
+          <section>
-          {this.renderInfo()}
+            <h1>Add Clusters from Kubeconfig</h1>
-          {this.renderKubeConfigSource()}
+            {this.renderInfo()}
-          {this.renderContextSelector()}
+            {this.renderKubeConfigSource()}
-          <div className="cluster-settings">
+            {this.renderContextSelector()}
-            <a href="#" onClick={() => this.showSettings = !this.showSettings}>
+            <div className="cluster-settings">
-              Proxy settings
+              <a href="#" onClick={() => this.showSettings = !this.showSettings}>
-            </a>
+                Proxy settings
-          </div>
+              </a>
-          {this.showSettings && (
-            <div className="proxy-settings">
-              <p>HTTP Proxy server. Used for communicating with Kubernetes API.</p>
-              <Input
-                autoFocus
-                value={this.proxyServer}
-                onChange={value => this.proxyServer = value}
-                theme="round-black"
-              />
-              <small className="hint">
-                {"A HTTP proxy server URL (format: http://<address>:<port>)."}
-              </small>
             </div>
-          )}
+            {this.showSettings && (
-          {this.error && (
+              <div className="proxy-settings">
-            <div className="error">{this.error}</div>
+                <p>HTTP Proxy server. Used for communicating with Kubernetes API.</p>
-          )}
+                <Input
+                  autoFocus
+                  value={this.proxyServer}
+                  onChange={value => this.proxyServer = value}
+                  theme="round-black"
+                />
+                <small className="hint">
+                  {"A HTTP proxy server URL (format: http://<address>:<port>)."}
+                </small>
+              </div>
+            )}
+            {this.error && (
+              <div className="error">{this.error}</div>
+            )}
 
-          <div className="actions-panel">
+            <div className="actions-panel">
-            <Button
+              <Button
-              primary
+                primary
-              disabled={submitDisabled}
+                disabled={submitDisabled}
-              label={this.selectedContexts.length < 2 ? "Add cluster" : "Add clusters"}
+                label={this.selectedContexts.length < 2 ? "Add cluster" : "Add clusters"}
-              onClick={this.addClusters}
+                onClick={this.addClusters}
-              waiting={this.isWaiting}
+                waiting={this.isWaiting}
-              tooltip={submitDisabled ? "Select at least one cluster to add." : undefined}
+                tooltip={submitDisabled ? "Select at least one cluster to add." : undefined}
-              tooltipOverrideDisabled
+                tooltipOverrideDisabled
-            />
+              />
-          </div>
+            </div>
+          </section>
         </PageLayout>
       </DropFileInput>
     );

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

@@ -3,7 +3,6 @@
   --nav-width: 180px;
   --nav-column-width: 30vw;
   --spacing: calc(var(--unit) * 2);
-  --wrapper-padding: calc(var(--spacing) * 2);
   --header-height: 64px;
   --header-height-mac: 80px;
 
@@ -48,7 +47,7 @@
 
   > .header {
     position: sticky;
-    padding: var(--spacing);
+    padding: 16px 24px;
     background-color: var(--layoutTabsBackground);
     height: var(--header-height);
     grid-column-start: 1;
@@ -57,7 +56,6 @@
     .ClusterIcon {
       --size: 32px;
       --flex-gap: 15px;
-      margin-left: 4px;
     }
 
     h1 {