Revert 4025 fix theme flash (#4254)

* Revert "Fix theme flash on paste website (#4025)"

This reverts commit fb4cbc5.

* fix(docs): build failure for changing to ssr

* fix(docs): build failure for changing to ssr

* fix(ci): resolve broken tests after delayed rendering

* fix(ci): resolve broken tests after delayed rendering

---------

Co-authored-by: Shoaib Ahmed <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

cypress/integration/sitemap-vrt/constants.ts

@@ -316,7 +316,7 @@ export const SITEMAP = [
   "/patterns/notifications-and-feedback/",
   "/patterns/pricing/",
   "/patterns/privacy/",
-  "/patterns/status/",
+  "/patterns/object-status/",
   "/primitives/combobox-primitive/",
   "/patterns/create/",
   "/primitives/",

packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx

@@ -11,9 +11,14 @@ import { SiteSearch } from "../../site-search";
 const SiteHeaderSearch: React.FC = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const { breakpointIndex } = useWindowSize();
-  const isMacOS = navigator.platform.toUpperCase().includes("MAC");
+  // navigator is not available in SSR, settign a default until it renders to client
+  const [isMacOS, setIsMacOS] = React.useState<boolean>();
   const platformTriggerKey = isMacOS ? "Meta" : "Control";
 
+  React.useEffect(() => {
+    setIsMacOS(typeof window !== "undefined" && navigator && navigator?.platform.toUpperCase().includes("MAC"));
+  }, []);
+
   const onOpen = (): void => {
     setIsOpen(true);
   };
@@ -68,7 +73,7 @@ const SiteHeaderSearch: React.FC = () => {
               Search
             </Text>
           </Box>
-          {breakpointIndex === 0 ? null : (
+          {breakpointIndex === 0 || isMacOS === undefined ? null : (
             <>
               <Box as="span" color="colorText" aria-hidden="true" marginLeft="space30" lineHeight="lineHeight20">
                 <KeyboardKeyGroup {...keyCombinationState}>

packages/paste-website/src/hooks/useDarkMode.tsx

@@ -13,7 +13,7 @@ const ValidThemes = {
 type ValidThemeName = ValueOf<typeof ValidThemes>;
 
 const isValidTheme = (themeName: ValidThemeName): boolean => {
-  return Object.values(ValidThemes).includes(themeName);
+  return themeName === ValidThemes.DEFAULT || themeName === ValidThemes.DARK;
 };
 
 export const useDarkMode = (): UseDarkModeReturn => {
@@ -36,7 +36,7 @@ export const useDarkMode = (): UseDarkModeReturn => {
   React.useEffect(() => {
     const localTheme = SimpleStorage.get("theme") as ValidThemeName;
 
-    if (window.matchMedia?.("(prefers-color-scheme: dark)").matches && !localTheme) {
+    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches && !localTheme) {
       setMode(ValidThemes.DARK);
     } else if (localTheme && isValidTheme(localTheme)) {
       setTheme(localTheme);

packages/paste-website/src/pages/_app.tsx

@@ -116,18 +116,12 @@ const App = ({ Component, pageProps }: AppProps): React.ReactElement => {
         disableAnimations={inCypress()}
         cacheProviderProps={{ key: "next" }}
       >
-        {componentMounted ? (
-          <DarkModeContext.Provider value={{ theme, toggleMode, componentMounted }}>
-            <PreviewThemeContext.Provider value={{ theme: previewTheme, selectTheme: setPreviewTheme }}>
-              <Component {...pageProps} />
-              {cookiesAccepted === null && (
-                <CookieConsent onAccept={handleCookieAccept} onReject={handleCookieReject} />
-              )}
-            </PreviewThemeContext.Provider>
-          </DarkModeContext.Provider>
-        ) : (
-          <></>
-        )}
+        <DarkModeContext.Provider value={{ theme, toggleMode, componentMounted }}>
+          <PreviewThemeContext.Provider value={{ theme: previewTheme, selectTheme: setPreviewTheme }}>
+            <Component {...pageProps} />
+            {cookiesAccepted === null && <CookieConsent onAccept={handleCookieAccept} onReject={handleCookieReject} />}
+          </PreviewThemeContext.Provider>
+        </DarkModeContext.Provider>
       </Theme.Provider>
     </>
   );

packages/paste-website/src/pages/blog/2023-06-12-paste-newsletter.mdx

@@ -140,7 +140,7 @@ We can't thank Megan enough for her contributions. Her dedication to creating a
 | **Navigation UI Kit components**   | Complementary React components to implement our Navigation UI kit.                                        |
 | **Progress Steps component**       | A highly requested component that shows a user a clear path to complete a complex multi-step task.        |
 | **Number Input component**         | An input that limits data to number entry and has styled +/- buttons.                                     |
-| **Status components**              | Components that implement the [Status Pattern](/patterns/status), including Status Badge and Status Menu. |
+| **Status components**              | Components that implement the [Object Status Pattern](/patterns/object-status), including Status Badge and Status Menu. |
 | **Checkbox and Radio Menu Items**  | A menu that presents a list of items that a user can choose to perform an action with.                    |
 | **Design of the Slider component** | A component that allows a draggable input over a range of numbers.                                        |
 

packages/paste-website/src/pages/blog/2023-08-02-paste-newsletter.mdx

@@ -123,7 +123,7 @@ Providing a common way for a user to control or edit their account, settings or
 
 <ResponsiveImage src={StatusBadgeImage} alt="Preview of the Navigation UI Kit components" />
 
-The [Status Badge](/components/status-badge) further evolves from our [Status Pattern](/patterns/status), allowing you to communicate status updates for any process or connection seamlessly. It provides an implementation of the Status Pattern using an appropriate combination of status level indicators, icons and colors.
+The [Status Badge](/components/status-badge) further evolves from our [Object Status Pattern](/patterns/object-status), allowing you to communicate status updates for any process or connection seamlessly. It provides an implementation of the Status Pattern using an appropriate combination of status level indicators, icons and colors.
 
 ### [Status Menu](/components/status-menu)
 

packages/paste-website/src/pages/components/description-list/index.mdx

@@ -89,7 +89,7 @@ Use a basic Description List for conveying small, static bits of data.
 
 ### Description List with Icon
 
-The Description List can be used with [Status Pattern](/patterns/status).
+The Description List can be used with [Object Status Pattern](/patterns/object-status).
 
 <LivePreview
   scope={{

packages/paste-website/src/pages/components/status-badge/index.mdx

@@ -90,7 +90,7 @@ export const getStaticProps = async () => {
 
 ## About Status Badge
 
-Status badge is an implementation of the [Status Pattern](/patterns/status) to display the status of a process or connectivity in your product.
+Status badge is an implementation of the [Object Status Pattern](/patterns/object-status) to display the status of a process or connectivity in your product.
 
 ### Accessibility
 

packages/paste-website/src/pages/components/status-menu/index.mdx

@@ -71,7 +71,7 @@ export const getStaticProps = async () => {
 
 ### About Status Menu
 
-Use a Status Menu to both display and change the status of a connection or process. It closely follows the [Status Pattern](/patterns/status) and comes with preconfigured options for displaying the status of both processes and connections, using the correct icons for each.
+Use a Status Menu to both display and change the status of a connection or process. It closely follows the [Object Status Pattern](/patterns/object-status) and comes with preconfigured options for displaying the status of both processes and connections, using the correct icons for each.
 
 ### Accessibility
 

packages/paste-website/src/pages/patterns/object-status/index.mdx

@@ -139,7 +139,7 @@ export const getStaticProps = async () => {
         </Heading>
         <Paragraph marginBottom="space0">
           Create a composition with <Anchor href="/primitives/box">Box</Anchor>,{' '}
-          <Anchor href="/components/icon">Icon</Anchor>, and <Anchor href="/components/text">Text</Anchor>.
+          <Anchor href="/components/icon">Icon</Anchor>, and <Anchor href="/primitives/text">Text</Anchor>.
         </Paragraph>
     </Card>
   </Column>