Feat UI changes to controls page (#16379)

relates to #16046

updates to various UI changes for the controls page.

includes:

- changes to header styles,
- changing layout of the os updates
- remove accordion and add tabs for os update targets
- various style fixes

- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
- [x] Manual QA for all new/changed functionality

frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx

@@ -130,7 +130,7 @@ const DiskEncryption = ({
                 value={diskEncryptionEnabled}
                 className={`${baseClass}__checkbox`}
               >
-                On
+                Turn on disk encryption
               </Checkbox>
               <p>
                 {createDescriptionText()}

frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx

@@ -80,8 +80,10 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => {
         assigned to this team.
       </p>
       <div className={`${baseClass}__content`}>
-        <div className={`${baseClass}__form-table-content`}>
+        <div className={`${baseClass}__current-version-container`}>
           <CurrentVersionSection currentTeamId={teamIdForApi} />
+        </div>
+        <div className={`${baseClass}__taget-container`}>
           <TargetSection
             currentTeamId={teamIdForApi}
             onSelectAccordionItem={handleSelectPlatform}

frontend/pages/ManageControlsPage/OSUpdates/_styles.scss

@@ -6,16 +6,35 @@
   }
 
   &__content {
+    display: grid;
     max-width: $break-xxl;
-    margin: 0 auto;
-    display: flex;
-    justify-content: center;
     gap: $pad-xxlarge;
+    margin: 0 auto;
+
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "current-version current-version"
+      "target nudge-preview";
+
+    @media (max-width: $break-md) {
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "current-version"
+        "target"
+        "nudge-preview";
+    }
   }
 
-  &__form-table-content, &__nudge-preview {
-    flex-grow: 1;
-    max-width: 640px;
+  &__current-version-container {
+    grid-area: current-version;
+  }
+
+  &__target-container {
+    grid-area: target;
+  }
+
+  &__nudge-preview-container {
+    grid-area: nudge-preview;
   }
 
   &__os-versions-card {
@@ -25,15 +44,4 @@
   &__premium-feature-message {
     margin-top: 80px;
   }
-
-  @media (max-width: $break-md) {
-    &__content {
-      flex-direction: column;
-    }
-
-    &__form-table-content,
-    &__nudge-preview {
-      max-width: none;
-    }
-  }
 }

frontend/pages/ManageControlsPage/OSUpdates/components/CurrentVersionSection/_styles.scss

@@ -1,5 +1,4 @@
 .os-updates-current-version-section {
-  margin-bottom: $pad-xxlarge;
 
   &__title {
     display: flex;

frontend/pages/ManageControlsPage/OSUpdates/components/MacOSTargetForm/MacOSTargetForm.tsx

@@ -65,14 +65,12 @@ interface IMacOSTargetFormProps {
   currentTeamId: number;
   defaultMinOsVersion: string;
   defaultDeadline: string;
-  inAccordion?: boolean;
 }
 
 const MacOSTargetForm = ({
   currentTeamId,
   defaultMinOsVersion,
   defaultDeadline,
-  inAccordion = false,
 }: IMacOSTargetFormProps) => {
   const { renderFlash } = useContext(NotificationContext);
 
@@ -84,10 +82,6 @@ const MacOSTargetForm = ({
   >();
   const [deadlineError, setDeadlineError] = useState<string | undefined>();
 
-  const classNames = classnames(baseClass, {
-    [`${baseClass}__accordion-form`]: inAccordion,
-  });
-
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const errors = validateForm({
@@ -123,7 +117,7 @@ const MacOSTargetForm = ({
   };
 
   return (
-    <form className={classNames} onSubmit={handleSubmit}>
+    <form className={baseClass} onSubmit={handleSubmit}>
       <InputField
         label="Minimum version"
         tooltip="The end user sees the window until their macOS is at or above this version."

frontend/pages/ManageControlsPage/OSUpdates/components/MacOSTargetForm/_styles.scss

@@ -1,10 +0,0 @@
-.mac-os-target-form {
-  &__accordion-form {
-    padding: $pad-large;
-    background-color: $ui-fleet-blue-10;
-  }
-
-  input {
-    background-color: $core-white;
-  }
-}

frontend/pages/ManageControlsPage/OSUpdates/components/NudgePreview/NudgePreview.tsx

@@ -15,7 +15,7 @@ interface INudgeDescriptionProps {
 const NudgeDescription = ({ platform }: INudgeDescriptionProps) => {
   return platform === "darwin" ? (
     <>
-      <h2>End user experience on macOS</h2>
+      <h3>End user experience on macOS</h3>
       <p>
         When a minimum version is saved, the end user sees the below window
         until their macOS version is at or above the minimum version.
@@ -29,7 +29,7 @@ const NudgeDescription = ({ platform }: INudgeDescriptionProps) => {
     </>
   ) : (
     <>
-      <h2>End user experience on Windows</h2>
+      <h3>End user experience on Windows</h3>
       <p>
         When a new Windows update is published, the update will be downloaded
         and installed automatically before 8am and after 5pm (end user’s local

frontend/pages/ManageControlsPage/OSUpdates/components/NudgePreview/_styles.scss

@@ -4,12 +4,12 @@
   border-radius: $border-radius;
   border: 1px solid $ui-fleet-black-10;
   padding: $pad-xxlarge;
-  max-width: 640px;
   flex-grow: 1;
 
-  h2 {
-    font-size: $x-small;
+  h3 {
+    font-size: $small;
     margin: 0;
+    font-weight: normal;
   }
 
   &__preview-img {
@@ -19,8 +19,4 @@
     max-width: 540px;
     margin: 40px auto 0;
   }
-
-  @media (max-width: $break-md) {
-    max-width: none;
-  }
 }

frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/PlatformTabs.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
+import TabsWrapper from "components/TabsWrapper";
+
+import MacOSTargetForm from "../MacOSTargetForm";
+import WindowsTargetForm from "../WindowsTargetForm";
+import { OSUpdatesSupportedPlatform } from "../../OSUpdates";
+
+const baseClass = "platform-tabs";
+
+interface IPlatformTabsProps {
+  currentTeamId: number;
+  defaultMacOSVersion: string;
+  defaultMacOSDeadline: string;
+  defaultWindowsDeadlineDays: string;
+  defaultWindowsGracePeriodDays: string;
+  onSelectAccordionItem: (platform: OSUpdatesSupportedPlatform) => void;
+}
+
+const PlatformTabs = ({
+  currentTeamId,
+  defaultMacOSDeadline,
+  defaultMacOSVersion,
+  defaultWindowsDeadlineDays,
+  defaultWindowsGracePeriodDays,
+  onSelectAccordionItem,
+}: IPlatformTabsProps) => {
+  return (
+    <div className={baseClass}>
+      <TabsWrapper>
+        <Tabs
+          onSelect={(currentIndex) =>
+            onSelectAccordionItem(currentIndex === 0 ? "darwin" : "windows")
+          }
+        >
+          <TabList>
+            <Tab>macOS</Tab>
+            <Tab>Windows</Tab>
+          </TabList>
+          <TabPanel>
+            <MacOSTargetForm
+              currentTeamId={currentTeamId}
+              defaultMinOsVersion={defaultMacOSVersion}
+              defaultDeadline={defaultMacOSDeadline}
+              key={currentTeamId}
+            />
+          </TabPanel>
+          <TabPanel>
+            <WindowsTargetForm
+              currentTeamId={currentTeamId}
+              defaultDeadlineDays={defaultWindowsDeadlineDays}
+              defaultGracePeriodDays={defaultWindowsGracePeriodDays}
+              key={currentTeamId}
+            />
+          </TabPanel>
+        </Tabs>
+      </TabsWrapper>
+    </div>
+  );
+};
+
+export default PlatformTabs;

frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/_styles.scss

@@ -0,0 +1,5 @@
+.platform-tabs {
+  .react-tabs__tab-list {
+    margin-bottom: $pad-large;
+  }
+}

frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/index.ts

@@ -0,0 +1 @@
+export { default } from "./PlatformTabs";

frontend/pages/ManageControlsPage/OSUpdates/components/PlatformsAccordion/PlatformsAccordion.tsx

@@ -1,103 +0,0 @@
-import React from "react";
-import {
-  Accordion,
-  AccordionItem,
-  AccordionItemButton,
-  AccordionItemHeading,
-  AccordionItemPanel,
-  AccordionItemState,
-} from "react-accessible-accordion";
-import classnames from "classnames";
-
-import Icon from "components/Icon";
-
-import MacOSTargetForm from "../MacOSTargetForm";
-import WindowsTargetForm from "../WindowsTargetForm";
-import { OSUpdatesSupportedPlatform } from "../../OSUpdates";
-
-const baseClass = "platforms-accordion";
-
-const generateIconClassNames = (expanded?: boolean) => {
-  return classnames(`${baseClass}__item-icon`, {
-    [`${baseClass}__item-closed`]: !expanded,
-  });
-};
-
-interface IPlatformsAccordionProps {
-  currentTeamId: number;
-  defaultMacOSVersion: string;
-  defaultMacOSDeadline: string;
-  defaultWindowsDeadlineDays: string;
-  defaultWindowsGracePeriodDays: string;
-  onSelectAccordionItem: (platform: OSUpdatesSupportedPlatform) => void;
-}
-
-const PlatformsAccordion = ({
-  currentTeamId,
-  defaultMacOSDeadline,
-  defaultMacOSVersion,
-  defaultWindowsDeadlineDays,
-  defaultWindowsGracePeriodDays,
-  onSelectAccordionItem,
-}: IPlatformsAccordionProps) => {
-  return (
-    <Accordion
-      className={`${baseClass}__accordion`}
-      preExpanded={["darwin"]}
-      onChange={(selected) =>
-        onSelectAccordionItem(selected[0] as OSUpdatesSupportedPlatform)
-      }
-    >
-      <AccordionItem uuid="darwin">
-        <AccordionItemHeading>
-          <AccordionItemButton className={`${baseClass}__accordion-button`}>
-            <span>macOS</span>
-            <AccordionItemState>
-              {({ expanded }) => (
-                <Icon
-                  name="chevron-up"
-                  className={generateIconClassNames(expanded)}
-                />
-              )}
-            </AccordionItemState>
-          </AccordionItemButton>
-        </AccordionItemHeading>
-        <AccordionItemPanel className={`${baseClass}__accordion-panel`}>
-          <MacOSTargetForm
-            currentTeamId={currentTeamId}
-            defaultMinOsVersion={defaultMacOSVersion}
-            defaultDeadline={defaultMacOSDeadline}
-            key={currentTeamId}
-            inAccordion
-          />
-        </AccordionItemPanel>
-      </AccordionItem>
-      <AccordionItem uuid="windows">
-        <AccordionItemHeading>
-          <AccordionItemButton className={`${baseClass}__accordion-button`}>
-            <span>Windows</span>
-            <AccordionItemState>
-              {({ expanded }) => (
-                <Icon
-                  name="chevron-up"
-                  className={generateIconClassNames(expanded)}
-                />
-              )}
-            </AccordionItemState>
-          </AccordionItemButton>
-        </AccordionItemHeading>
-        <AccordionItemPanel className={`${baseClass}__accordion-panel`}>
-          <WindowsTargetForm
-            currentTeamId={currentTeamId}
-            defaultDeadlineDays={defaultWindowsDeadlineDays}
-            defaultGracePeriodDays={defaultWindowsGracePeriodDays}
-            key={currentTeamId}
-            inAccordion
-          />
-        </AccordionItemPanel>
-      </AccordionItem>
-    </Accordion>
-  );
-};
-
-export default PlatformsAccordion;

frontend/pages/ManageControlsPage/OSUpdates/components/PlatformsAccordion/_styles.scss

@@ -1,36 +0,0 @@
-.platforms-accordion {
-  &__accordion {
-    // this was an arbitrary min width to make sure the accordion stays the same
-    // width regardless of which tab is open.
-    min-width: 530px;
-  }
-
-  &__accordion-button {
-    padding: $pad-medium 0;
-    border-bottom: 1px solid $ui-fleet-black-10;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    >span {
-      font-weight: $bold;
-      font-size: $x-small;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  &__accordion-panel {
-    border-bottom: 1px solid $ui-fleet-black-10;
-  }
-
-  &__item-icon {
-    transition: transform 0.25s ease;
-  }
-
-  &__item-closed {
-    transform: rotate(180deg);
-  }
-}

frontend/pages/ManageControlsPage/OSUpdates/components/PlatformsAccordion/index.ts

@@ -1 +0,0 @@
-export { default } from "./PlatformsAccordion";

frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx

@@ -15,7 +15,7 @@ import SectionHeader from "components/SectionHeader";
 
 import MacOSTargetForm from "../MacOSTargetForm";
 import WindowsTargetForm from "../WindowsTargetForm";
-import PlatformsAccordion from "../PlatformsAccordion";
+import PlatformTabs from "../PlatformTabs";
 import { OSUpdatesSupportedPlatform } from "../../OSUpdates";
 
 const baseClass = "os-updates-target-section";
@@ -117,7 +117,7 @@ const TargetSection = ({
   const renderTargetForms = () => {
     if (isMacMdmEnabled && isWindowsMdmEnabled) {
       return (
-        <PlatformsAccordion
+        <PlatformTabs
           currentTeamId={currentTeamId}
           defaultMacOSVersion={defaultMacOSVersion}
           defaultMacOSDeadline={defaultMacOSDeadline}

frontend/pages/ManageControlsPage/SetupExperience/cards/EndUserAuthentication/components/EndUserAuthForm/EndUserAuthForm.tsx

@@ -49,7 +49,7 @@ const EndUserAuthForm = ({
     <div className={baseClass}>
       <form>
         <Checkbox value={isEndUserAuthEnabled} onChange={onToggleEndUserAuth}>
-          On
+          Turn on
         </Checkbox>
         <p>
           Require end users to authenticate with your identity provider (IdP)

frontend/pages/ManageControlsPage/components/EndUserExperiencePreview/_styles.scss

@@ -7,7 +7,8 @@
 
   h3 {
     margin: 0;
-    font-size: $x-small;
+    font-size: $small;
+    font-weight: normal;
   }
 
   &__preview-img {

frontend/pages/admin/_styles.scss

@@ -26,4 +26,13 @@
     top: $pad-xxlarge; // for sticky
     z-index: 3;
   }
+
+  .side-nav__card-container {
+
+    // all side navs in the admin section we want to limit the max width
+    >* {
+      width: 100%;
+      max-width: $settings-form-max-width;
+    }
+  }
 }

frontend/pages/admin/components/SideNav/_styles.scss

@@ -19,11 +19,5 @@
 
   &__card-container {
     width: 100%;
-
-    // Global style max width of all content to 754px
-    > * {
-      width: 100%;
-      max-width: $settings-form-max-width;
-    }
   }
 }