diff --git a/backend/requirements.txt b/backend/requirements.txt index 79f6cfc5..ade54c0a 100644 --- a/backend/requirements.txt +++ b/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 diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 30c3dae1..bfaf5885 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -151,13 +151,15 @@ services: There was an error fetching data from your Python backend at{" "}

- + {API_BASE_URL}/{ENVIRONMENT_PATH}

Please check your app logs using

- {commands.error.user.get_logs} + + {commands.error.user.get_logs} +

); @@ -169,9 +171,9 @@ services: className={`max-w-7xl w-fill px-6 2xl:pl-0 m-auto transition duration-500`} >
-
+
-
+
Installed the Upsun CLI
  • Cloned the demo:{" "} - + {commands.first_deploy.user.clone}
  • Connected to Upsun:{" "} - + {commands.first_deploy.user.set_remote} {PROJECT_ID}
  • Pushed to Upsun:{" "} - + {commands.first_deploy.user.push}
  • Retrieved the deployed environment URL:{" "} - + {commands.first_deploy.user.get_url}
    • @@ -252,7 +254,9 @@ services: } + icon={ + + } title={"2. Create your first preview environment"} isDisabled={currentStep !== "branch"} > @@ -326,7 +330,9 @@ services: className="inline-block" copyText=".upsun/config.yaml" > - .upsun/config.yaml + + .upsun/config.yaml + {" "} and uncomment the following lines

    @@ -537,7 +543,7 @@ const EnvironmentIntroduction: React.FC = ({ return (
    <> {environment && environment.toLocaleLowerCase() === "production" ? ( diff --git a/frontend/src/assets/logo/upsun_horizontal.svg b/frontend/src/assets/logo/upsun_horizontal.svg index 447c1f81..55007f87 100644 --- a/frontend/src/assets/logo/upsun_horizontal.svg +++ b/frontend/src/assets/logo/upsun_horizontal.svg @@ -1,16 +1,16 @@ - - - - - - - + + + + + + + - + diff --git a/frontend/src/assets/utility/branch.svg b/frontend/src/assets/utility/branch.svg index 4d66a9bb..7cdbf077 100644 --- a/frontend/src/assets/utility/branch.svg +++ b/frontend/src/assets/utility/branch.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/src/components/FeatureStep.tsx b/frontend/src/components/FeatureStep.tsx index 1ef7330a..170e5723 100644 --- a/frontend/src/components/FeatureStep.tsx +++ b/frontend/src/components/FeatureStep.tsx @@ -47,7 +47,9 @@ const FeatureStep = forwardRef( }`} > {!hideContent && children && ( -
    +
    <>
    ( {isDisabled && !hideContent && (
    ); diff --git a/frontend/src/components/ThemeToggle.tsx b/frontend/src/components/ThemeToggle.tsx new file mode 100644 index 00000000..d911ac15 --- /dev/null +++ b/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(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 ( +
    + {["light", "dark", "system"].map((mode) => ( + + ))} +
    + ); +}; + +export default ThemeToggle; diff --git a/frontend/src/index.css b/frontend/src/index.css index 7905011f..c6f2677a 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -3,10 +3,16 @@ @tailwind utilities; :root { --upsun-colors-neutral-light-white: #ffffff; + --upsun-colors-neutral-weak: #f0f2f5; + --upsun-colors-neutral-300: #f2f3f4; + --upsun-colors-ebony: #302f45; + --upsun-colors-black-100: #d9d6d6; + --upsun-colors-black-300: #8b9397; --upsun-colors-black-900: #181e21; --upsun-colors-black-800: #252d31; + --upsun-colors-violet-300: #efedff; --upsun-colors-violet-600: #6046ff; --upsun-colors-violet-900: #130e33; @@ -15,7 +21,7 @@ @layer base { body { - @apply bg-black text-default text-sm font-sans-soft; + @apply bg-upsun-neutral-300 dark:bg-black text-default dark:text-defaultDark text-sm font-sans-soft; font-size: 14px; line-height: 24px; } @@ -34,16 +40,16 @@ } code { - @apply p-0 font-mono inline-flex justify-center items-center rounded-md bg-black text-xs text-upsun-yellow-400 leading-5; + @apply p-0 font-mono inline-flex justify-center items-center rounded-md text-white bg-black text-xs text-upsun-yellow-400 leading-5; } .TooltipContent { - @apply p-2 bg-[#302F45] rounded-md font-sans-soft; + @apply p-2 bg-upsun-ebony rounded-md font-sans-soft text-white; box-shadow: 0px 1px 4px 0px rgba(26, 25, 43, 0.4); } .TooltipArrow { - @apply fill-[#302F45]; + @apply fill-upsun-ebony; } .is-disabled { @@ -55,7 +61,7 @@ } a { - @apply text-upsun-yellow-400 underline; + @apply text-upsun-violet-600 dark:text-upsun-yellow-400 underline; } .bottom-right-cut-corner { @@ -83,4 +89,8 @@ /*content:'';*/ /*@apply border-b-[40px] border-l-[50px] border-b-upsun-violet-600 border-l-transparent;*/ } + + .logo { + @apply fill-black dark:fill-white; + } } diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 3147b173..2c11845b 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,5 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { + darkMode: "class", content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: { @@ -7,14 +8,21 @@ module.exports = { 15: "0.9375rem", // 15px }, textColor: { - default: "var(--upsun-colors-neutral-light-white, #FFF)", + defaultDark: "var(--upsun-colors-neutral-light-white, #FFF)", + default: "var(--upsun-colors-ebony, #302f45)", }, colors: { + "upsun-black-100": "var(--upsun-colors-black-100)", + "upsun-black-300": "var(--upsun-colors-black-300)", "upsun-black-900": "var(--upsun-colors-black-900)", "upsun-black-800": "var(--upsun-colors-black-800)", + "upsun-violet-300": "var(--upsun-colors-violet-300)", "upsun-violet-600": "var(--upsun-colors-violet-600)", "upsun-violet-900": "var(--upsun-colors-violet-900)", "upsun-yellow-400": "var(--upsun-colors-yellow-400)", + "upsun-neutral-300": "var(--upsun-colors-neutral-300)", + "upsun-neutral-weak": "var(--upsun-colors-neutral-weak)", + "upsun-ebony": "var(--upsun-colors-ebony)", }, fontFamily: { "sans-strong": [