Fine-tuning PageLayout header

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

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

@@ -53,8 +53,8 @@ export class ClusterSettings extends React.Component<Props> {
     if (!cluster) return null;
     const header = (
       <>
-        <ClusterIcon cluster={cluster} showErrors={false} showTooltip={false}/>
-        <h2>{cluster.preferences.clusterName}</h2>
+        <ClusterIcon cluster={cluster} showErrors={false} showTooltip={false} isActive />
+        <h1>{cluster.preferences.clusterName}</h1>
       </>
     );
 

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

@@ -47,7 +47,7 @@ export class Preferences extends React.Component {
 
   render() {
     const { preferences } = userStore;
-    const header = <h2>Preferences</h2>;
+    const header = <h1>Preferences</h1>;
     let defaultShell = process.env.SHELL || process.env.PTYSHELL;
 
     if (!defaultShell) {

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

@@ -53,6 +53,17 @@
     height: var(--header-height);
     grid-column-start: 1;
     grid-column-end: 4;
+
+    .ClusterIcon {
+      --size: 32px;
+      margin-right: 15px;
+      margin-left: 4px;
+    }
+
+    h1 {
+      color: var(--textColorAccent);
+      font-size: 24px;
+    }
   }
 
   > .content-navigation {