new: theme selector

Author: dmaximyuk

src/components/Page/Page.tsx

@@ -2,19 +2,23 @@ import "./Page.sass";
 
 import { AllHTMLAttributes, FC } from "react";
 import cn from "clsx";
-import clsx from "clsx";
+
+import { ModalProvider } from "modals";
 
 interface PageProps extends AllHTMLAttributes<HTMLElement> {
   containerClassName?: string;
 }
 
 const Page: FC<PageProps> = (props) => {
   return (
-    <section className={clsx("Page", props.className)}>
-      <div className={cn("Page__container", props.containerClassName)}>
-        {props.children}
-      </div>
-    </section>
+    <>
+      <ModalProvider />
+      <section className={cn("Page", props.className)}>
+        <div className={cn("Page__container", props.containerClassName)}>
+          {props.children}
+        </div>
+      </section>
+    </>
   );
 };
 

src/components/ThemeCard/ThemeCard.sass

@@ -0,0 +1,51 @@
+.ThemeCard
+  cursor: pointer
+
+  &_active
+    border: 1px solid var(--accent) !important
+
+    & ~ p
+      color: var(--accent) !important
+      opacity: 1
+
+  & > p
+    text-align: center
+    margin-top: 6px
+
+    &::first-letter
+      text-transform: uppercase
+    
+  &__content
+    width: 100px
+    aspect-ratio: 2 / 1.5
+    position: relative
+    overflow: hidden
+    border-radius: 10px
+  
+  &_light
+    background:  var(--light-theme_background)
+    border: 1px solid var(--dark-theme_background)
+
+    &::before
+      content: ""
+      background: var(--light-theme_secondary)
+      width: 100%
+      aspect-ratio: 1 / 1
+      border-radius: 999999px
+      position: absolute
+      left: -50%
+      top: -50%
+
+  &_dark
+    background: var(--dark-theme_background)
+    border: 1px solid var(--light-theme_background)
+
+    &::before
+      content: ""
+      background: var(--dark-theme_secondary)
+      width: 100%
+      aspect-ratio: 1 / 1
+      border-radius: 999999px
+      position: absolute
+      right: -50%
+      top: -50%

src/components/ThemeCard/ThemeCard.tsx

@@ -0,0 +1,31 @@
+import "./ThemeCard.sass";
+
+import { FC } from "react";
+import cn from "clsx";
+
+import { Text } from "uikit";
+
+import { THEME, themes } from "vars";
+
+const ThemeCard: FC<{ type: (typeof themes)[number] }> = (props) => {
+  const handleChangeTheme = () => {
+    if (props.type === THEME) return;
+    localStorage.setItem("theme", props.type);
+    location.reload();
+  };
+
+  return (
+    <div className="ThemeCard" onClick={handleChangeTheme}>
+      <div
+        className={cn(
+          "ThemeCard__content",
+          `ThemeCard_${props.type}`,
+          props.type === THEME && "ThemeCard_active",
+        )}
+      />
+      <Text isDescription>{props.type}</Text>
+    </div>
+  );
+};
+
+export default ThemeCard;

src/components/index.ts

@@ -6,3 +6,4 @@ export { default as FilePreview } from "./FilePreview/FilePreview";
 export { default as Files } from "./Files/Files";
 export { default as Help } from "./Help/Help";
 export { default as ResourceCell } from "./ResourceCell/ResourceCell";
+export { default as ThemeCard } from "./ThemeCard/ThemeCard";

src/core/Home/Home.tsx

@@ -3,6 +3,7 @@ import "./Home.sass";
 import { type FC } from "react";
 import { useTranslation } from "i18nano";
 import { useSelector } from "react-redux";
+import { useModal } from "hooks";
 import { objectToArray } from "utils";
 
 import { FileLoader, Files, Help, Page, ResourceCell } from "components";
@@ -17,13 +18,16 @@ import {
   IconLanguage,
 } from "assets/icons";
 
+import { ModalID } from "models";
+
 import { LANG, THEME } from "vars";
 
 const saveCells = ["prev", "next", "all"] as const;
 
 const Home: FC = () => {
   const t = useTranslation();
   const { files } = useSelector(dndFilesSelector);
+  const { openModal } = useModal();
 
   const getFilesSize = (type: "compressed" | "default") => {
     const arr = objectToArray(files);
@@ -94,13 +98,17 @@ const Home: FC = () => {
         </div>
         <div className="Home_flex">
           <Cell
-            onClick={() => {}}
+            onClick={() => {
+              openModal(ModalID.Theme);
+            }}
             icon={<IconBrush />}
             title={t(`app.theme.title`)}
             text={t(`app.theme.${THEME}`)}
           />
           <Cell
-            onClick={() => {}}
+            onClick={() => {
+              openModal(ModalID.Language);
+            }}
             icon={<IconLanguage />}
             title={t(`app.language.title`)}
             text={t(`app.language.${LANG}`)}

src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useModal";

src/hooks/useModal.tsx

@@ -0,0 +1,27 @@
+import { useSearchParams } from "react-router-dom";
+
+import { ModalID } from "models";
+
+export const useModal = () => {
+  const key = "modal";
+  const [urlParams, setUrlParams] = useSearchParams();
+
+  return {
+    activeModal: urlParams.get(key),
+    openModal(modal: ModalID) {
+      setUrlParams((s) => {
+        s.set(key, modal);
+        return s;
+      });
+    },
+    closeModal() {
+      setUrlParams(
+        (s) => {
+          s.delete(key);
+          return s;
+        },
+        { replace: true },
+      );
+    },
+  };
+};

src/modals/Language/Language.sass

@@ -0,0 +1,9 @@
+import { type FC } from "react";
+
+import { Card } from "uikit";
+
+const Language: FC = () => {
+  return <Card>Language Select</Card>;
+};
+
+export default Language;

src/modals/Language/Language.tsx

@@ -0,0 +1,11 @@
+.ModalProvider
+  position: fixed
+  width: 100vw
+  height: 100vh
+  top: 0
+  left: 0
+  background: rgba(0,0,0,.3)
+  z-index: 10
+  display: flex
+  align-items: center
+  justify-content: center

src/modals/ModalProvider/ModalProvider.sass

@@ -0,0 +1,32 @@
+import "./ModalProvider.sass";
+
+import { FC } from "react";
+
+import { useModal } from "hooks";
+import { modals } from "routes";
+
+const ModalProvider: FC = () => {
+  const { activeModal, closeModal } = useModal();
+
+  if (!activeModal) return null;
+
+  return (
+    <div className="ModalProvider" onClick={(e) => closeModal()}>
+      {modals
+        .filter((m) => m.key === activeModal)
+        .map((m) => {
+          return (
+            <div
+              key={m.key}
+              className="ModalProvider__wrapper"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {m.component}
+            </div>
+          );
+        })}
+    </div>
+  );
+};
+
+export default ModalProvider;

src/modals/ModalProvider/ModalProvider.tsx

@@ -0,0 +1,3 @@
+.Theme
+  display: flex
+  gap: 15px

src/modals/Theme/Theme.sass

@@ -0,0 +1,21 @@
+import "./Theme.sass";
+
+import { type FC } from "react";
+
+import { Card } from "uikit";
+
+import { ThemeCard } from "components";
+
+import { themes } from "vars";
+
+const Theme: FC = () => {
+  return (
+    <Card className="Theme">
+      {themes.map((t) => (
+        <ThemeCard key={t} type={t} />
+      ))}
+    </Card>
+  );
+};
+
+export default Theme;

src/modals/Theme/Theme.tsx

@@ -0,0 +1,4 @@
+export { default as ModalProvider } from "./ModalProvider/ModalProvider";
+
+export { default as LanguageModal } from "./Language/Language";
+export { default as ThemeModal } from "./Theme/Theme";

src/modals/index.ts

@@ -1,7 +1,10 @@
-export enum RouteID {
+export const enum RouteID {
   App = "app",
 
   Home = "home",
+}
 
-  HowToUse = "howToUse",
+export const enum ModalID {
+  Theme = "theme",
+  Language = "language",
 }

src/models/service.ts

@@ -1 +1,2 @@
 export * from "./routes";
+export * from "./modals";

src/routes/index.ts

@@ -0,0 +1,10 @@
+import { LanguageModal, ThemeModal } from "modals";
+
+import { ModalID } from "models";
+
+const modals = [
+  { key: ModalID.Language, component: <LanguageModal /> },
+  { key: ModalID.Theme, component: <ThemeModal /> },
+];
+
+export { modals };

src/routes/modals.tsx

@@ -1,13 +1,18 @@
 body
+  --light-theme_background: #F4F4F4
+  --light-theme_secondary: #ffffff
+  --dark-theme_background: #171717
+  --dark-theme_secondary: #262626
+
   --red: #F54F4F
   --green: #24D33E
   --purple: #E530D9
   --accent: #e54c70
   --active: #95cbf5
   --hover: #EBEFF9
 
-  --background: #F4F4F4
-  --secondary: #ffffff
+  --background: var(--light-theme_background)
+  --secondary: var(--light-theme_secondary)
   --tertiary: #d1d1d1
   --primary: #32353e
 
@@ -20,8 +25,8 @@ body
     --active: #28292B
     --hover: #5D6169
 
-    --background: #171717
-    --secondary: #262626
+    --background: var(--dark-theme_background)
+    --secondary: var(--dark-theme_secondary)
     --tertiary: #353535
 
     --text-primary: #FFFFFF

src/styles/variables/_colors.sass

@@ -3,4 +3,5 @@
   margin: 0
   border-color: var(--background)
   color: var(--background)
-  -webkit-tap-highlight-color: var(--background)
+  -webkit-tap-highlight-color: var(--background)
+  opacity: .2

src/uikit/Form/Dropdown/Dropdown.sass

@@ -1,4 +1,3 @@
 export { default as Cell } from "./Cell/Cell";
 export { default as Separator } from "./Separator/Separator";
-export { default as Dropdown } from "./Dropdown/Dropdown";
 export { default as Button } from "./Button/Button";