From 0a954547b2bb8136c97f3a697274319751e046ed Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 5 Jan 2022 12:00:43 +0100 Subject: chore: replace theme button with settings I plan to add more user settings so theme options should be inside settings. --- src/assets/images/icon-cog.svg | 45 ++++++++++++ src/assets/images/icon-theme.svg | 79 ---------------------- .../Buttons/ButtonSearch/ButtonSearch.tsx | 40 ----------- src/components/Buttons/ButtonTheme/ButtonTheme.tsx | 40 ----------- .../Buttons/ButtonToolbar/ButtonToolbar.tsx | 45 ++++++++++++ src/components/Buttons/Buttons.module.scss | 4 +- src/components/Buttons/index.tsx | 5 +- src/components/Form/Form.module.scss | 7 +- src/components/Form/Form.tsx | 2 +- src/components/Icons/Cog/Cog.module.scss | 10 +++ src/components/Icons/Cog/Cog.tsx | 16 +++++ src/components/Icons/Moon/Moon.tsx | 2 + src/components/Icons/Sun/Sun.tsx | 2 + src/components/Icons/Theme/Theme.module.scss | 43 ------------ src/components/Icons/Theme/Theme.tsx | 54 --------------- src/components/Icons/index.tsx | 4 +- src/components/Settings/Settings.module.scss | 17 +++++ src/components/Settings/Settings.tsx | 17 +++++ src/components/ThemeToggle/ThemeToggle.module.scss | 4 ++ src/components/ThemeToggle/ThemeToggle.tsx | 2 +- src/components/Toolbar/Toolbar.module.scss | 26 ++++++- src/components/Toolbar/Toolbar.tsx | 34 ++++++---- 22 files changed, 214 insertions(+), 284 deletions(-) create mode 100644 src/assets/images/icon-cog.svg delete mode 100644 src/assets/images/icon-theme.svg delete mode 100644 src/components/Buttons/ButtonSearch/ButtonSearch.tsx delete mode 100644 src/components/Buttons/ButtonTheme/ButtonTheme.tsx create mode 100644 src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx create mode 100644 src/components/Icons/Cog/Cog.module.scss create mode 100644 src/components/Icons/Cog/Cog.tsx delete mode 100644 src/components/Icons/Theme/Theme.module.scss delete mode 100644 src/components/Icons/Theme/Theme.tsx create mode 100644 src/components/Settings/Settings.module.scss create mode 100644 src/components/Settings/Settings.tsx (limited to 'src') diff --git a/src/assets/images/icon-cog.svg b/src/assets/images/icon-cog.svg new file mode 100644 index 0000000..16f9c9e --- /dev/null +++ b/src/assets/images/icon-cog.svg @@ -0,0 +1,45 @@ + + + + + + + + + diff --git a/src/assets/images/icon-theme.svg b/src/assets/images/icon-theme.svg deleted file mode 100644 index aa2510e..0000000 --- a/src/assets/images/icon-theme.svg +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx b/src/components/Buttons/ButtonSearch/ButtonSearch.tsx deleted file mode 100644 index be5a9bc..0000000 --- a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { CloseIcon, SearchIcon } from '@components/Icons'; -import { t } from '@lingui/macro'; -import { SetStateAction } from 'react'; -import styles from '../Buttons.module.scss'; - -const ButtonSearch = ({ - isActivated, - setIsActivated, -}: { - isActivated: boolean; - setIsActivated: (value: SetStateAction) => void; -}) => { - const btnClasses = isActivated - ? `${styles.search} ${styles['search--opened']}` - : styles.search; - - return ( - - ); -}; - -export default ButtonSearch; diff --git a/src/components/Buttons/ButtonTheme/ButtonTheme.tsx b/src/components/Buttons/ButtonTheme/ButtonTheme.tsx deleted file mode 100644 index afbac89..0000000 --- a/src/components/Buttons/ButtonTheme/ButtonTheme.tsx +++ /dev/null @@ -1,40 +0,0 @@ -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) => void; -}) => { - const btnClasses = isActivated - ? `${styles.theme} ${styles['theme--opened']}` - : styles.theme; - - return ( - - ); -}; - -export default ButtonTheme; diff --git a/src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx b/src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx new file mode 100644 index 0000000..22da133 --- /dev/null +++ b/src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx @@ -0,0 +1,45 @@ +import { CloseIcon, CogIcon, SearchIcon } from '@components/Icons'; +import { t } from '@lingui/macro'; +import { SetStateAction } from 'react'; +import styles from '../Buttons.module.scss'; + +type ButtonType = 'search' | 'settings'; + +const ButtonToolbar = ({ + type, + isActivated, + setIsActivated, +}: { + type: ButtonType; + isActivated: boolean; + setIsActivated: (value: SetStateAction) => void; +}) => { + const ButtonIcon = () => (type === 'search' ? : ); + const btnClasses = isActivated + ? `${styles.toolbar} ${styles['toolbar--activated']}` + : styles.toolbar; + + return ( + + ); +}; + +export default ButtonToolbar; diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss index f46de82..1a0d73a 100644 --- a/src/components/Buttons/Buttons.module.scss +++ b/src/components/Buttons/Buttons.module.scss @@ -167,7 +167,7 @@ } } -.search, +.toolbar, .theme { display: block; width: var(--btn-size); @@ -212,7 +212,7 @@ z-index: 10; } -.search--opened, +.toolbar--activated, .theme--opened { .icon { transform: rotateY(180deg); diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx index 74060f7..5c034ad 100644 --- a/src/components/Buttons/index.tsx +++ b/src/components/Buttons/index.tsx @@ -1,7 +1,6 @@ import Button from './Button/Button'; import ButtonLink from './ButtonLink/ButtonLink'; -import ButtonSearch from './ButtonSearch/ButtonSearch'; +import ButtonToolbar from './ButtonToolbar/ButtonToolbar'; import ButtonSubmit from './ButtonSubmit/ButtonSubmit'; -import ButtonTheme from './ButtonTheme/ButtonTheme'; -export { Button, ButtonLink, ButtonSearch, ButtonSubmit, ButtonTheme }; +export { Button, ButtonLink, ButtonToolbar, ButtonSubmit }; diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss index 25fce19..bfb009e 100644 --- a/src/components/Form/Form.module.scss +++ b/src/components/Form/Form.module.scss @@ -3,14 +3,11 @@ .wrapper { width: 100%; - &--search { + &--search, + &--theme { display: flex; flex-flow: row nowrap; } - - &--theme { - line-height: 1; - } } .item { diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx index 048219c..74a4efb 100644 --- a/src/components/Form/Form.tsx +++ b/src/components/Form/Form.tsx @@ -10,7 +10,7 @@ const Form = ({ submitHandler: any; modifier?: string; }) => { - const withModifier = modifier ? `wrapper--${modifier}` : ''; + const withModifier = modifier ? styles[`wrapper--${modifier}`] : ''; const classes = `${styles.wrapper} ${withModifier}`; return ( diff --git a/src/components/Icons/Cog/Cog.module.scss b/src/components/Icons/Cog/Cog.module.scss new file mode 100644 index 0000000..4fad00b --- /dev/null +++ b/src/components/Icons/Cog/Cog.module.scss @@ -0,0 +1,10 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + width: var(--icon-size, #{fun.convert-px(40)}); + margin: auto; + fill: var(--color-primary-lighter); + stroke: var(--color-border); + stroke-width: 4; +} diff --git a/src/components/Icons/Cog/Cog.tsx b/src/components/Icons/Cog/Cog.tsx new file mode 100644 index 0000000..7a04d76 --- /dev/null +++ b/src/components/Icons/Cog/Cog.tsx @@ -0,0 +1,16 @@ +import styles from './Cog.module.scss'; + +const CogIcon = () => { + return ( + + + + + ); +}; + +export default CogIcon; diff --git a/src/components/Icons/Moon/Moon.tsx b/src/components/Icons/Moon/Moon.tsx index b2e5f7b..62e7203 100644 --- a/src/components/Icons/Moon/Moon.tsx +++ b/src/components/Icons/Moon/Moon.tsx @@ -1,3 +1,4 @@ +import { t } from '@lingui/macro'; import styles from './Moon.module.scss'; const MoonIcon = () => { @@ -7,6 +8,7 @@ const MoonIcon = () => { viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" > + {t`Dark theme`} ); diff --git a/src/components/Icons/Sun/Sun.tsx b/src/components/Icons/Sun/Sun.tsx index a4f5a11..612d3fa 100644 --- a/src/components/Icons/Sun/Sun.tsx +++ b/src/components/Icons/Sun/Sun.tsx @@ -1,3 +1,4 @@ +import { t } from '@lingui/macro'; import styles from './Sun.module.scss'; const SunIcon = () => { @@ -7,6 +8,7 @@ const SunIcon = () => { viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" > + {t`Light theme`} ); diff --git a/src/components/Icons/Theme/Theme.module.scss b/src/components/Icons/Theme/Theme.module.scss deleted file mode 100644 index e0ea24c..0000000 --- a/src/components/Icons/Theme/Theme.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -@use "@styles/abstracts/functions" as fun; - -.icon { - display: block; - margin: auto; - width: var(--icon-size, #{fun.convert-px(40)}); -} - -.roller { - fill: var(--color-primary-lighter); - stroke: var(--color-border); - stroke-width: 3; -} - -.guard { - fill: var(--color-primary); - stroke: var(--color-border); - stroke-width: 2; -} - -.handle { - fill: var(--color-primary-lighter); - stroke: var(--color-border); - stroke-width: 3; -} - -.bar { - fill: var(--color-bg); - stroke: var(--color-border); - stroke-width: 3; -} - -.colors { - fill: var(--color-primary-lighter); - stroke: var(--color-border); - stroke-width: 2; -} - -.palette { - fill: var(--color-bg); - stroke: var(--color-border); - stroke-width: 3; -} diff --git a/src/components/Icons/Theme/Theme.tsx b/src/components/Icons/Theme/Theme.tsx deleted file mode 100644 index 6b6c8d0..0000000 --- a/src/components/Icons/Theme/Theme.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import styles from './Theme.module.scss'; - -const ThemeIcon = () => { - return ( - - - - - - - - - - - - - ); -}; - -export default ThemeIcon; diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx index 1594775..eae50a5 100644 --- a/src/components/Icons/index.tsx +++ b/src/components/Icons/index.tsx @@ -1,6 +1,7 @@ import ArrowIcon from './Arrow/Arrow'; import BlogIcon from './Blog/Blog'; import CloseIcon from './Close/Close'; +import CogIcon from './Cog/Cog'; import ContactIcon from './Contact/Contact'; import CVIcon from './CV/CV'; import HamburgerIcon from './Hamburger/Hamburger'; @@ -8,12 +9,12 @@ import HomeIcon from './Home/Home'; import MoonIcon from './Moon/Moon'; import SearchIcon from './Search/Search'; import SunIcon from './Sun/Sun'; -import ThemeIcon from './Theme/Theme'; export { ArrowIcon, BlogIcon, CloseIcon, + CogIcon, ContactIcon, CVIcon, HamburgerIcon, @@ -21,5 +22,4 @@ export { MoonIcon, SearchIcon, SunIcon, - ThemeIcon, }; diff --git a/src/components/Settings/Settings.module.scss b/src/components/Settings/Settings.module.scss new file mode 100644 index 0000000..fe6b17b --- /dev/null +++ b/src/components/Settings/Settings.module.scss @@ -0,0 +1,17 @@ +@use "@styles/abstracts/functions" as fun; + +.title { + --icon-size: #{fun.convert-px(30)}; + + display: flex; + flex-flow: row nowrap; + gap: var(--spacing-2xs); + margin-bottom: var(--spacing-md); + color: var(--color-primary-dark); + font-size: var(--font-size-lg); + font-weight: 600; + + svg { + margin: 0; + } +} diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx new file mode 100644 index 0000000..bfef851 --- /dev/null +++ b/src/components/Settings/Settings.tsx @@ -0,0 +1,17 @@ +import { CogIcon } from '@components/Icons'; +import ThemeToggle from '@components/ThemeToggle/ThemeToggle'; +import { t } from '@lingui/macro'; +import styles from './Settings.module.scss'; + +const Settings = () => { + return ( + <> +
+ {t`Settings`} +
+ + + ); +}; + +export default Settings; diff --git a/src/components/ThemeToggle/ThemeToggle.module.scss b/src/components/ThemeToggle/ThemeToggle.module.scss index c780b96..36c91f7 100644 --- a/src/components/ThemeToggle/ThemeToggle.module.scss +++ b/src/components/ThemeToggle/ThemeToggle.module.scss @@ -9,6 +9,10 @@ align-items: center; } +.title { + margin-right: var(--spacing-xs); +} + .toggle { display: inline-flex; align-items: center; diff --git a/src/components/ThemeToggle/ThemeToggle.tsx b/src/components/ThemeToggle/ThemeToggle.tsx index 015201b..4b93ac9 100644 --- a/src/components/ThemeToggle/ThemeToggle.tsx +++ b/src/components/ThemeToggle/ThemeToggle.tsx @@ -22,7 +22,7 @@ const ThemeToggle = () => { onChange={() => setIsDarkTheme(!isDarkTheme)} />