diff --git a/app/scenes/Settings/Details.tsx b/app/scenes/Settings/Details.tsx index f3cbb3cf3f53..7ff1bf1b6bde 100644 --- 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(null); - const [accent, setAccent] = useState(team.preferences?.customTheme?.accent); - const [accentText, setAccentText] = useState( + const [accent, setAccent] = useState( + team.preferences?.customTheme?.accent + ); + const [accentText, setAccentText] = useState( 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 && ( + <> + { + setAccent(null); + setAccentText(null); + }} + > + {t("Reset theme")} + + . + + )} + + } >