From 395571bd89498fce46d37f3853cf718387fd0d9a Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 27 Dec 2021 11:20:26 +0100
Subject: chore: add a theme toggle

Dark theme is not implemented yet.
---
 src/components/Buttons/ButtonTheme/ButtonTheme.tsx | 40 ++++++++++++++++++++++
 src/components/Buttons/Buttons.module.scss         |  7 ++--
 src/components/Buttons/index.tsx                   |  3 +-
 3 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Buttons/ButtonTheme/ButtonTheme.tsx

(limited to 'src/components/Buttons')

diff --git a/src/components/Buttons/ButtonTheme/ButtonTheme.tsx b/src/components/Buttons/ButtonTheme/ButtonTheme.tsx
new file mode 100644
index 0000000..afbac89
--- /dev/null
+++ b/src/components/Buttons/ButtonTheme/ButtonTheme.tsx
@@ -0,0 +1,40 @@
+import { CloseIcon, ThemeIcon } from '@components/Icons';
+import { t } from '@lingui/macro';
+import { SetStateAction } from 'react';
+import styles from '../Buttons.module.scss';
+
+const ButtonTheme = ({
+  isActivated,
+  setIsActivated,
+}: {
+  isActivated: boolean;
+  setIsActivated: (value: SetStateAction<boolean>) => void;
+}) => {
+  const btnClasses = isActivated
+    ? `${styles.theme} ${styles['theme--opened']}`
+    : styles.theme;
+
+  return (
+    <button
+      className={btnClasses}
+      type="button"
+      onClick={() => setIsActivated(!isActivated)}
+    >
+      <span className={styles.icon}>
+        <span className={styles.front}>
+          <ThemeIcon />
+        </span>
+        <span className={styles.back}>
+          <CloseIcon />
+        </span>
+      </span>
+      {isActivated ? (
+        <span className="screen-reader-text">{t`Close theme options`}</span>
+      ) : (
+        <span className="screen-reader-text">{t`Open theme options`}</span>
+      )}
+    </button>
+  );
+};
+
+export default ButtonTheme;
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index fb93d5a..9f046d2 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -2,7 +2,6 @@
 
 .btn {
   display: block;
-  margin: auto;
   border: none;
   font-size: var(--font-size-md);
 }
@@ -81,7 +80,8 @@
   }
 }
 
-.search {
+.search,
+.theme {
   display: block;
   width: var(--btn-size);
   height: var(--btn-size);
@@ -125,7 +125,8 @@
   z-index: 10;
 }
 
-.search--opened {
+.search--opened,
+.theme--opened {
   .icon {
     transform: rotateY(180deg);
   }
diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx
index aa1291e..53d4e91 100644
--- a/src/components/Buttons/index.tsx
+++ b/src/components/Buttons/index.tsx
@@ -1,5 +1,6 @@
 import Button from './Button/Button';
 import ButtonSearch from './ButtonSearch/ButtonSearch';
 import ButtonSubmit from './ButtonSubmit/ButtonSubmit';
+import ButtonTheme from './ButtonTheme/ButtonTheme';
 
-export { Button, ButtonSearch, ButtonSubmit };
+export { Button, ButtonSearch, ButtonSubmit, ButtonTheme };
-- 
cgit v1.2.3