Enable light dark mode

backend/requirements.txt

@@ -3,7 +3,7 @@ blinker==1.7.0
 boolean.py==4.0
 CacheControl==0.13.1
 cachelib==0.13.0
-certifi==2024.2.2
+certifi==2024.7.4
 charset-normalizer==3.3.2
 click==8.1.7
 cyclonedx-python-lib==6.4.4

frontend/src/App.tsx

@@ -151,13 +151,15 @@ services:
           There was an error fetching data from your Python backend at{" "}
         </p>
         <p>
-          <code className="px-2 py-1">
+          <code className="px-2 py-1.5 leading-[1.25rem]">
             {API_BASE_URL}/{ENVIRONMENT_PATH}
           </code>
         </p>
         <p className="mt-2 mb-2"> Please check your app logs using </p>
         <p>
-          <code className="px-2 py-1">{commands.error.user.get_logs}</code>
+          <code className="px-2 py-1.5 leading-[1.25rem]">
+            {commands.error.user.get_logs}
+          </code>
         </p>
       </ErrorPage>
     );
@@ -169,9 +171,9 @@ services:
         className={`max-w-7xl w-fill px-6 2xl:pl-0 m-auto transition duration-500`}
       >
         <Header />
-        <main className="border-t-[1px] border-upsun-violet-600 flex flex-col sm:flex-row">
+        <main className="mx-12 flex flex-col sm:flex-row">
           <Sidebar />
-          <section className="border-t-2 border-upsun-violet-600 w-full sm:w-3/4">
+          <section className="sm:border-t-4 sm:border-upsun-violet-600 w-full sm:w-3/4">
             <div
               ref={welcomeMessage}
               className="content-intro sm:w-3/4 mx-auto mt-6 mb-12"
@@ -216,25 +218,25 @@ services:
                         <li className="mt-2 ml-6">Installed the Upsun CLI</li>
                         <li className="mt-2 ml-6">
                           Cloned the demo:{" "}
-                          <code className="ml-2 px-4">
+                          <code className="ml-2 px-2.5 leading-6">
                             {commands.first_deploy.user.clone}
                           </code>
                         </li>
                         <li className="mt-2 ml-6">
                           Connected to Upsun:{" "}
-                          <code className="ml-2 px-4">
+                          <code className="ml-2 px-2.5 leading-6">
                             {commands.first_deploy.user.set_remote} {PROJECT_ID}
                           </code>
                         </li>
                         <li className="mt-2 ml-6">
                           Pushed to Upsun:{" "}
-                          <code className="ml-2 px-4">
+                          <code className="ml-2 px-2.5 leading-6">
                             {commands.first_deploy.user.push}
                           </code>
                         </li>
                         <li className="mt-2 ml-6">
                           Retrieved the deployed environment URL:{" "}
-                          <code className="ml-2 px-4">
+                          <code className="ml-2 px-2.5 leading-6">
                             {commands.first_deploy.user.get_url}
                           </code>
                         </li>
@@ -252,7 +254,9 @@ services:
                 <FeatureStep
                   data-testid="branch"
                   ref={stepCreateBranch}
-                  icon={<BranchIcon className="w-10 h-10 p-1" />}
+                  icon={
+                    <BranchIcon className="w-10 h-10 p-1 fill-upsun-ebony dark:fill-[#E6FB66]" />
+                  }
                   title={"2. Create your first preview environment"}
                   isDisabled={currentStep !== "branch"}
                 >
@@ -326,7 +330,9 @@ services:
                             className="inline-block"
                             copyText=".upsun/config.yaml"
                           >
-                            <code className="px-2">.upsun/config.yaml</code>
+                            <code className="px-2 leading-6">
+                              .upsun/config.yaml
+                            </code>
                           </CopyButton>{" "}
                           and uncomment the following lines
                         </p>
@@ -537,7 +543,7 @@ const EnvironmentIntroduction: React.FC<EnvironmentIntroductionProps> = ({
   return (
     <div
       data-testid={`${environment.toLocaleLowerCase()}-intro`}
-      className={`rounded-lg mt-4 p-4 bg-upsun-black-900`}
+      className={`rounded-lg mt-4 p-4 bg-white dark:bg-upsun-black-900`}
     >
       <>
         {environment && environment.toLocaleLowerCase() === "production" ? (

frontend/src/components/FeatureStep.tsx

@@ -47,7 +47,9 @@ const FeatureStep = forwardRef<HTMLDivElement, FeatureStepProps>(
             }`}
           >
             {!hideContent && children && (
-              <div className={`rounded-lg p-4 bg-upsun-black-900`}>
+              <div
+                className={`rounded-lg p-4 bg-white dark:bg-upsun-black-900`}
+              >
                 <>
                   <div
                     className={`${
@@ -64,7 +66,7 @@ const FeatureStep = forwardRef<HTMLDivElement, FeatureStepProps>(
         {isDisabled && !hideContent && (
           <button
             style={{ pointerEvents: "auto" }}
-            className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-white pt-1 pr-1 cursor-pointer absolute top-0 right-0 hover:underline"
+            className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-upsun-violet-600 dark:text-white pt-1 pr-1 cursor-pointer absolute top-0 right-0 hover:underline"
             onClick={() => setIsExpanded(!isExpanded)}
           >
             {isExpanded ? "Show less" : "Show more"}

frontend/src/components/Header.tsx

@@ -4,7 +4,7 @@ import ShareButton from "./ShareButton";
 
 function Header() {
   return (
-    <header className="p-12 flex flex-col">
+    <header className="py-7 px-12 flex flex-col border-b-[1px] border-upsun-violet-600">
       <div className="flex flex-row justify-between items-center">
         <div className="flex flex-row inline-flex items-center gap-6">
           <Logo
@@ -14,9 +14,9 @@ function Header() {
           <span className="hidden md:inline-block font-sans-strong text-sm font-medium">
             Demo Guide Project
           </span>
-          <span className="hidden md:inline-block font-sans-strong text-sm font-medium">
-            |
-          </span>
+          <div className="hidden md:inline-block border-r-[1px] border-r-upsun-black-100 dark:border-r-white">
+            &nbsp;
+          </div>
           <span className="hidden md:inline-block font-sans-strong text-sm font-medium">
             Powered by Platform.sh
           </span>

frontend/src/components/ShareButton.tsx

@@ -48,7 +48,7 @@ function ShareButton() {
             alignOffset={5}
             sideOffset={10}
           >
-            Copied!
+            Copied URL to clipboard
             <Tooltip.Arrow className="TooltipArrow" />
           </Tooltip.Content>
         </Tooltip.Portal>

frontend/src/components/Sidebar.tsx

@@ -1,9 +1,21 @@
+import ThemeToggle from "./ThemeToggle";
 interface SidebarProps {}
 
+type DividerProps = React.HTMLAttributes<HTMLDivElement>;
+
+const Divider: React.FC<DividerProps> = ({ className = "", ...props }) => {
+  return (
+    <div
+      className={`w-full h-px m-1 bg-[#D8DBDC] ${className}`}
+      {...props}
+    ></div>
+  );
+};
+
 const Sidebar: React.FC<SidebarProps> = () => {
   return (
     <aside className="h-fit w-full flex flex-row sm:flex-col flex-wrap sm:w-2/5 lg:w-1/4 bottom-right-cut-corner">
-      <section className="p-6 w-full border-0 border-upsun-violet-600 bg-upsun-violet-900">
+      <section className="p-6 w-full border-0 dark:border-upsun-violet-600 bg-upsun-violet-300 dark:bg-upsun-violet-900">
         <div className="aside-title flex flex-row gap-4 items-center mt-2">
           <h1 className="text-xl">About</h1>
         </div>
@@ -13,6 +25,11 @@ const Sidebar: React.FC<SidebarProps> = () => {
             run on Upsun and teach you about it's unique features.
           </p>
         </div>
+        <Divider />
+        <div className={`font-semibold p-2 pl-0 leading-4 text-[0.8rem]`}>
+          Theme
+        </div>
+        <ThemeToggle />
       </section>
     </aside>
   );

frontend/src/components/ThemeToggle.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+const hasMatchMedia = () => {
+  return typeof window.matchMedia === "function";
+};
+const ThemeToggle: React.FC = () => {
+  const getInitialTheme = (): Theme => {
+    const storedTheme = localStorage.getItem("theme") as Theme;
+    const preferredTheme =
+      storedTheme && ["light", "dark"].includes(storedTheme)
+        ? storedTheme
+        : "system";
+
+    return preferredTheme === "system" && !hasMatchMedia()
+      ? "light"
+      : preferredTheme;
+  };
+
+  const [theme, setTheme] = useState<Theme>(getInitialTheme);
+
+  const setMode = (mode: Theme) => {
+    setTheme(mode);
+    localStorage.setItem("theme", mode);
+    document.documentElement.className =
+      mode === "system" && hasMatchMedia()
+        ? window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light"
+        : mode;
+  };
+
+  useEffect(() => {
+    if (theme === "system" && hasMatchMedia()) {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      const handleChange = () => setMode("system");
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+    document.documentElement.className = theme;
+  }, [theme]);
+
+  return (
+    <div className="flex gap-1 align-start">
+      {["light", "dark", "system"].map((mode) => (
+        <button
+          key={mode}
+          onClick={() => setMode(mode as Theme)}
+          className={`px-2 py-1.5 leading-none rounded-lg justify-center items-center gap-2.5 flex text-xs transition-background duration-300 ${theme === mode ? "bg-upsun-violet-600 text-white" : "bg-none text-upsun-black-300 border-2 border-transparent"} hover:border-[#3a2a99] hover:bg-[#3a2a99] hover:text-white`}
+        >
+          {mode.charAt(0).toUpperCase() + mode.slice(1)}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default ThemeToggle;