diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx index 79567bc2ca..32eed3d38c 100644 --- a/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx +++ b/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx @@ -130,7 +130,7 @@ const DiskEncryption = ({ value={diskEncryptionEnabled} className={`${baseClass}__checkbox`} > - On + Turn on disk encryption

{createDescriptionText()} diff --git a/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx b/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx index 91155921da..65fc5bb7c5 100644 --- a/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx +++ b/frontend/pages/ManageControlsPage/OSUpdates/OSUpdates.tsx @@ -80,8 +80,10 @@ const OSUpdates = ({ router, teamIdForApi }: IOSUpdates) => { assigned to this team.

-
+
+
+
{ const { renderFlash } = useContext(NotificationContext); @@ -84,10 +82,6 @@ const MacOSTargetForm = ({ >(); const [deadlineError, setDeadlineError] = useState(); - const classNames = classnames(baseClass, { - [`${baseClass}__accordion-form`]: inAccordion, - }); - const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); const errors = validateForm({ @@ -123,7 +117,7 @@ const MacOSTargetForm = ({ }; return ( -
+ { return platform === "darwin" ? ( <> -

End user experience on macOS

+

End user experience on macOS

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) => { ) : ( <> -

End user experience on Windows

+

End user experience on Windows

When a new Windows update is published, the update will be downloaded and installed automatically before 8am and after 5pm (end user’s local diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/NudgePreview/_styles.scss b/frontend/pages/ManageControlsPage/OSUpdates/components/NudgePreview/_styles.scss index d44868cb8c..ed6294722c 100644 --- a/frontend/pages/ManageControlsPage/OSUpdates/components/NudgePreview/_styles.scss +++ b/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; - } } diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/PlatformTabs.tsx b/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/PlatformTabs.tsx new file mode 100644 index 0000000000..8a158160b2 --- /dev/null +++ b/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 ( +

+ + + onSelectAccordionItem(currentIndex === 0 ? "darwin" : "windows") + } + > + + macOS + Windows + + + + + + + + + +
+ ); +}; + +export default PlatformTabs; diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/_styles.scss b/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/_styles.scss new file mode 100644 index 0000000000..2cf0a6f4ab --- /dev/null +++ b/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/_styles.scss @@ -0,0 +1,5 @@ +.platform-tabs { + .react-tabs__tab-list { + margin-bottom: $pad-large; + } +} diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/index.ts b/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/index.ts new file mode 100644 index 0000000000..9e90a7213a --- /dev/null +++ b/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformTabs/index.ts @@ -0,0 +1 @@ +export { default } from "./PlatformTabs"; diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformsAccordion/PlatformsAccordion.tsx b/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformsAccordion/PlatformsAccordion.tsx deleted file mode 100644 index 106a7d2e91..0000000000 --- a/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformsAccordion/PlatformsAccordion.tsx +++ /dev/null @@ -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 ( - - onSelectAccordionItem(selected[0] as OSUpdatesSupportedPlatform) - } - > - - - - macOS - - {({ expanded }) => ( - - )} - - - - - - - - - - - Windows - - {({ expanded }) => ( - - )} - - - - - - - - - ); -}; - -export default PlatformsAccordion; diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformsAccordion/_styles.scss b/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformsAccordion/_styles.scss deleted file mode 100644 index f3d56fcf2e..0000000000 --- a/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformsAccordion/_styles.scss +++ /dev/null @@ -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); - } -} diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformsAccordion/index.ts b/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformsAccordion/index.ts deleted file mode 100644 index afe8b16707..0000000000 --- a/frontend/pages/ManageControlsPage/OSUpdates/components/PlatformsAccordion/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./PlatformsAccordion"; diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx b/frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx index 200c1b1034..abde65356e 100644 --- a/frontend/pages/ManageControlsPage/OSUpdates/components/TargetSection/TargetSection.tsx +++ b/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 ( - - On + Turn on

Require end users to authenticate with your identity provider (IdP) diff --git a/frontend/pages/ManageControlsPage/components/EndUserExperiencePreview/_styles.scss b/frontend/pages/ManageControlsPage/components/EndUserExperiencePreview/_styles.scss index 83258a927d..d71e0cee5d 100644 --- a/frontend/pages/ManageControlsPage/components/EndUserExperiencePreview/_styles.scss +++ b/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 { diff --git a/frontend/pages/admin/_styles.scss b/frontend/pages/admin/_styles.scss index f8fdb0e44b..38c94c47c2 100644 --- a/frontend/pages/admin/_styles.scss +++ b/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; + } + } } diff --git a/frontend/pages/admin/components/SideNav/_styles.scss b/frontend/pages/admin/components/SideNav/_styles.scss index df0a4a4f4b..1085f0e476 100644 --- a/frontend/pages/admin/components/SideNav/_styles.scss +++ b/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; - } } }