Add ability to reset custom theme

FigPedro · Apr 18, 2023 · f91cdc3 · f91cdc3
1 parent c52909f
commit f91cdc3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/app/scenes/Settings/Details.tsx b/app/scenes/Settings/Details.tsx
@@ -10,6 +10,7 @@ import { buildDarkTheme, buildLightTheme } from "@shared/styles/theme";
 import { CustomTheme } from "@shared/types";
 import { getBaseDomain } from "@shared/utils/domains";
 import Button from "~/components/Button";
+import ButtonLink from "~/components/ButtonLink";
 import DefaultCollectionInputSelect from "~/components/DefaultCollectionInputSelect";
 import Heading from "~/components/Heading";
 import Input from "~/components/Input";
@@ -31,8 +32,10 @@ function Details() {
   const team = useCurrentTeam();
   const theme = useTheme();
   const form = useRef<HTMLFormElement>(null);
-  const [accent, setAccent] = useState(team.preferences?.customTheme?.accent);
-  const [accentText, setAccentText] = useState(
+  const [accent, setAccent] = useState<null | undefined | string>(
+    team.preferences?.customTheme?.accent
+  );
+  const [accentText, setAccentText] = useState<null | undefined | string>(
     team.preferences?.customTheme?.accentText
   );
   const [name, setName] = useState(team.name);
@@ -177,7 +180,24 @@ function Details() {
             border={false}
             label={t("Theme")}
             name="accent"
-            description={t("Customize the interface look and feel.")}
+            description={
+              <>
+                {t("Customize the interface look and feel.")}{" "}
+                {accent && (
+                  <>
+                    <ButtonLink
+                      onClick={() => {
+                        setAccent(null);
+                        setAccentText(null);
+                      }}
+                    >
+                      {t("Reset theme")}
+                    </ButtonLink>
+                    .
+                  </>
+                )}
+              </>
+            }
           >
             <InputColor
               id="accent"

diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
@@ -711,6 +711,7 @@
   "The workspace name, usually the same as your company name.": "The workspace name, usually the same as your company name.",
   "Theme": "Theme",
   "Customize the interface look and feel.": "Customize the interface look and feel.",
+  "Reset theme": "Reset theme",
   "Accent color": "Accent color",
   "Accent text color": "Accent text color",
   "Behavior": "Behavior",