hosts: Updated to PF6 styling

Author: Venefilyn

pkg/shell/hosts.tsx

@@ -40,6 +40,7 @@ import { split_connection_string } from "./machines/machines";
 import { add_host, edit_host, connect_host } from "./hosts_dialog.jsx";
 
 import { ShellState } from "./state";
+import { Icon } from "@patternfly/react-core";
 
 const _ = cockpit.gettext;
 
@@ -243,24 +244,29 @@ export class CockpitHosts extends React.Component {
         return (
             <div className="ct-switcher">
                 <div className="pf-v6-c-select pf-m-dark">
-                    <button onClick={this.toggleMenu} id="host-toggle" aria-labelledby="host-toggle" aria-expanded={(this.state.opened ? "true" : "false")} aria-haspopup="listbox" type="button" className="ct-nav-toggle pf-v6-c-select__toggle pf-m-plain">
-                        <span className="pf-v6-c-select__toggle-wrapper desktop_v">
-                            <span className="pf-v6-c-select__toggle-text">
-                                <HostLine user={user} host={label} />
+                    <button onClick={this.toggleMenu} id="host-toggle" aria-labelledby="host-toggle" aria-expanded={(this.state.opened ? "true" : "false")} aria-haspopup="listbox" type="button" className="ct-nav-toggle pf-v6-c-select__toggle pf-v6-c-menu-toggle pf-m-plain">
+                        <span className="pf-v6-c-button__text desktop_v">
+                            <span className="pf-v6-c-select__toggle-wrapper">
+                                <span className="pf-v6-c-select__toggle-text">
+                                    <HostLine user={user} host={label} />
+                                </span>
                             </span>
                         </span>
-                        <CaretUpIcon
-                            className={`pf-v6-c-select__toggle-arrow mobile_v pf-v6-c-icon pf-m-lg ${this.state.opened ? 'clicked' : ''}`}
-                            aria-hidden="true"
-                        />
+                        <Icon size="xl" className="mobile_v">
+                            <CaretUpIcon
+                                className={`pf-v6-c-select__toggle-arrow ${this.state.opened ? 'clicked' : ''}`}
+                                aria-hidden="true"
+                            />
+                        </Icon>
                         <span className="pf-v6-c-select__toggle-wrapper mobile_v">
                             {_("Host")}
                         </span>
-                        <CaretDownIcon
-                            className={`pf-v6-c-select__toggle-arrow desktop_v pf-v6-c-icon ${this.state.opened ? 'clicked' : ''}`}
-                            aria-hidden="true"
-                        />
-
+                        <Icon size="xl" className="desktop_v">
+                            <CaretDownIcon
+                                className={`pf-v6-c-select__toggle-arrow ${this.state.opened ? 'clicked' : ''}`}
+                                aria-hidden="true"
+                            />
+                        </Icon>
                     </button>
                 </div>
 

pkg/shell/nav.scss

@@ -219,8 +219,9 @@ $desktop: $phone + 1px;
   }
 
   .header {
-    border-inline-start: 1px solid var(--pf-v5-global--BackgroundColor--dark-100);
-    background: linear-gradient(to right, var(--pf-v5-global--BackgroundColor--dark-100) -1rem, var(--pf-v5-global--BackgroundColor--dark-300) 1rem);
+    // border-inline-start: 1px solid var(--pf-v5-global--BackgroundColor--dark-100);
+    // background: linear-gradient(to right, var(--pf-v5-global--BackgroundColor--dark-100) -1rem, var(--pf-v5-global--BackgroundColor--dark-300) 1rem);
+    background-color: var(--pf-t--global--background--color--tertiary--default);
 
     .credential-unlocked {
       /* AAA contrast: simulate #a1a1a1 on #151515 */
@@ -235,7 +236,7 @@ $desktop: $phone + 1px;
   // }
 
   .ct-switcher {
-    background-color: var(--pf-t--global--background--color--control--default);
+    background-color: var(--pf-t--global--background--color--secondary--default);
     .pf-v6-c-select__toggle-wrapper {
       display: flex;
     }
@@ -379,6 +380,7 @@ $desktop: $phone + 1px;
 
   > .pf-v6-c-select {
     block-size: 100%;
+    padding: 0;
 
     .pf-v6-c-select__toggle-text {
       text-align: start;
@@ -627,7 +629,7 @@ $desktop: $phone + 1px;
 // Rework navigation toggles in desktop and (especially) mobile modes
 .super-user-indicator > button,
 .ct-nav-toggle:not(.pf-v6-c-menu) {
-  color: var(--pf-v5-global--Color--light-100) !important;
+  // color: var(--pf-v5-global--Color--light-100) !important;
   background: transparent !important;
   // The normal margin to the right of the select dropdown makes them look uncentered in the masthead.
   // https://github.com/patternfly/patternfly/issues/6632
@@ -640,7 +642,7 @@ $desktop: $phone + 1px;
   &:hover, &:active, &.active, &.interact, &[aria-expanded="true"] {
     text-decoration: none;
     // approximate --pf-v5-global--BackgroundColor--dark-400, but with opacity
-    background: rgb(249 252 255 / 32%) !important;
+    background: var(--pf-t--global--background--color--secondary--hover) !important;
 
     .hostname {
       text-decoration: underline;
@@ -733,8 +735,10 @@ $desktop: $phone + 1px;
 // Mobile sizes
 @media (max-width: $phone) {
   #host-toggle,
-  #nav-system-item,
-  button.ct-nav-toggle {
+  button.ct-nav-toggle,
+  #nav-system-item > .pf-v6-c-button__text {
+    // Remove gap between text and icon
+    --pf-v6-c-menu-toggle--Gap: 0;
     // Stretch to navbar
     block-size: 100%;
     // Don't stretch to fill content; make optimal width same as height

pkg/shell/shell.scss

@@ -27,17 +27,17 @@
 @import "@patternfly/patternfly/components/Icon/icon.css";
 
 :root {
-  --ct-color-host-accent: var(--pf-v5-global--active-color--100);
-  --ct-topnav-background: var(--pf-v5-global--BackgroundColor--dark-100);
+  --ct-color-host-accent: var(--pf-t--global--color--brand--default);
+  --ct-topnav-background: var(--pf-t--global--background--color--secondary--default);
 }
 
 #shell {
     block-size: 100%;
 }
 
-.pf-v6-theme-dark {
-  --ct-topnav-background: var(--pf-v5-global--BackgroundColor--dark-200);
-}
+// .pf-v6-theme-dark {
+//   --ct-topnav-background: var(--pf-v5-global--BackgroundColor--dark-200);
+// }
 
 /* Hacks on top for now */
 
@@ -126,7 +126,7 @@ $desktop: $phone + 1px;
   // (including the accent line)
 
   .pf-v6-c-masthead {
-    --pf-v5-c-masthead--BackgroundColor: transparent;
+    --pf-v6-c-masthead--BackgroundColor: transparent;
   }
 
   .pf-v6-c-toolbar {
@@ -168,7 +168,7 @@ $desktop: $phone + 1px;
 
     // Remove excess padding from masthead in mobile
     .pf-v6-c-masthead {
-      --pf-v5-c-masthead--inset: 0;
+      --pf-v6-c-masthead--inset: 0;
     }
   }
 
@@ -193,11 +193,6 @@ $desktop: $phone + 1px;
     > .header {
       // Shadow to the left, Line on top, Base color (with subtle glow)
       background: linear-gradient(
-        to right,
-        var(--ct-topnav-background) -1rem,
-        transparent 1rem
-      ),
-        linear-gradient(
         to bottom,
         var(--ct-color-host-accent),
         var(--ct-color-host-accent) 0.1875rem,