From a910b898c72bdca8b9ca86fcc88da804a5c24438 Mon Sep 17 00:00:00 2001 From: Sonny Date: Fri, 17 May 2024 00:44:08 +0200 Subject: [PATCH] feat: create basic settings modal --- .../common/modal/_modal_wrapper.tsx | 2 +- .../dashboard/side_nav/side_navigation.tsx | 8 ++- inertia/components/navbar/navbar.tsx | 58 ++++++++----------- .../open_settings.tsx => settings/modal.tsx} | 25 ++++---- inertia/components/theme_switcher.tsx | 25 ++++++++ package-lock.json | 50 ++++++++++++++++ package.json | 2 + 7 files changed, 124 insertions(+), 46 deletions(-) rename inertia/components/{dashboard/side_nav/open_settings.tsx => settings/modal.tsx} (51%) create mode 100644 inertia/components/theme_switcher.tsx diff --git a/inertia/components/common/modal/_modal_wrapper.tsx b/inertia/components/common/modal/_modal_wrapper.tsx index b026701..d01e15a 100644 --- a/inertia/components/common/modal/_modal_wrapper.tsx +++ b/inertia/components/common/modal/_modal_wrapper.tsx @@ -9,7 +9,7 @@ const ModalWrapper = styled.div(({ theme }) => ({ height: '100%', width: '100%', background: rgba(theme.colors.black, 0.35), - backdropFilter: 'blur(0.25em)', + backdropFilter: 'blur(0.1em)', display: 'flex', alignItems: 'center', flexDirection: 'column', diff --git a/inertia/components/dashboard/side_nav/side_navigation.tsx b/inertia/components/dashboard/side_nav/side_navigation.tsx index 30cb312..16a3b2c 100644 --- a/inertia/components/dashboard/side_nav/side_navigation.tsx +++ b/inertia/components/dashboard/side_nav/side_navigation.tsx @@ -5,8 +5,8 @@ import { IoAdd } from 'react-icons/io5'; import { MdOutlineAdminPanelSettings } from 'react-icons/md'; import FavoriteList from '~/components/dashboard/side_nav/favorite/favorite_list'; import { Item, ItemLink } from '~/components/dashboard/side_nav/nav_item'; -import OpenSettingsButton from '~/components/dashboard/side_nav/open_settings'; import UserCard from '~/components/dashboard/side_nav/user_card'; +import ModalSettings from '~/components/settings/modal'; import useActiveCollection from '~/hooks/use_active_collection'; import { appendCollectionId } from '~/lib/navigation'; @@ -21,6 +21,10 @@ const AdminButton = styled(Item)(({ theme }) => ({ color: theme.colors.lightRed, })); +const SettingsButton = styled(Item)(({ theme }) => ({ + color: theme.colors.grey, +})); + const AddButton = styled(ItemLink)(({ theme }) => ({ color: theme.colors.primary, })); @@ -34,7 +38,7 @@ export default function SideNavigation() { Administrator - + -
  • - -
    • -
  • - -
  • GitHub
    • @@ -74,22 +69,7 @@ export default function Navbar() { Dashboard
  • - - - {user.nickName} - - } - > - - Logout - - +
    • ) : ( @@ -102,13 +82,25 @@ export default function Navbar() { ); } -function ThemeSwitch() { - const { isDarkTheme, toggleDarkTheme } = useDarkTheme(); +function ProfileDropdown() { + const { user } = useUser(); return ( - toggleDarkTheme(target.checked)} - checked={isDarkTheme} - /> + + + {user!.nickName} + + } + > + + + Logout + + ); } diff --git a/inertia/components/dashboard/side_nav/open_settings.tsx b/inertia/components/settings/modal.tsx similarity index 51% rename from inertia/components/dashboard/side_nav/open_settings.tsx rename to inertia/components/settings/modal.tsx index c20fc9c..35b2fc7 100644 --- a/inertia/components/dashboard/side_nav/open_settings.tsx +++ b/inertia/components/settings/modal.tsx @@ -1,24 +1,29 @@ -import styled from '@emotion/styled'; import { BsGear } from 'react-icons/bs'; import Modal from '~/components/common/modal/modal'; -import { Item } from '~/components/dashboard/side_nav/nav_item'; +import ThemeSwitcher from '~/components/theme_switcher'; import useToggle from '~/hooks/use_modal'; -const SettingsButton = styled(Item)(({ theme }) => ({ - color: theme.colors.grey, -})); - -export default function OpenSettingsButton() { +export default function ModalSettings({ + openItem: OpenItem, +}: { + // TODO: fix this :() + openItem: any; +}) { const { isShowing, open, close } = useToggle(); - return ( <> - + Settings - + Modal settings +
    + +
    +     ); diff --git a/inertia/components/theme_switcher.tsx b/inertia/components/theme_switcher.tsx new file mode 100644 index 0000000..9d4f049 --- /dev/null +++ b/inertia/components/theme_switcher.tsx @@ -0,0 +1,25 @@ +import { Fragment } from 'react'; +import Toggle from 'react-toggle'; +import 'react-toggle/style.css'; +import useDarkTheme from '~/hooks/use_dark_theme'; + +export default function ThemeSwitcher() { + const { isDarkTheme, toggleDarkTheme } = useDarkTheme(); + + if (typeof window === 'undefined') { + return ; + } + + return ( + toggleDarkTheme(target.checked)} + checked={isDarkTheme} + name="theme-switcher" + id="theme-switcher" + icons={{ + checked: '☀️', + unchecked: '🌑', + }} + /> + ); +} diff --git a/package-lock.json b/package-lock.json index e6918d0..135efba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,7 @@ "react-i18next": "^14.1.1", "react-icons": "^5.1.0", "react-swipeable": "^7.0.1", + "react-toggle": "^4.1.3", "reflect-metadata": "^0.2.2", "uuid": "^9.0.1" }, @@ -55,6 +56,7 @@ "@types/node": "^20.12.7", "@types/react": "^18.3.1", "@types/react-dom": "^18.3.0", + "@types/react-toggle": "^4.0.5", "@types/uuid": "^9.0.8", "@vitejs/plugin-react": "^4.2.1", "eslint": "^8.57.0", @@ -2993,6 +2995,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-toggle": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@types/react-toggle/-/react-toggle-4.0.5.tgz", + "integrity": "sha512-MHHEDe7GnF/EhLtI5sT70Dqab8rwlgjRZtu/u6gmfbYd+HeYxWiUSRog16+1BCfkz7Wy2VU6+TPU2oCsDtqDzA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/semver": { "version": "7.5.8", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz", @@ -8060,6 +8071,15 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-inspect": { "version": "1.13.1", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", @@ -8795,6 +8815,23 @@ "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-3.0.0.tgz", "integrity": "sha512-mqn0kFRl0EoqhnL0GQ0veqFHyIN1yig9RHh/InzORTUiZHFRAur+aMtRkELNwGs9aNwKS6tg/An4NYBPGwvtzQ==" }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "peer": true, + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/prop-types/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "peer": true + }, "node_modules/property-information": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz", @@ -9041,6 +9078,19 @@ "react": "^16.8.3 || ^17 || ^18" } }, + "node_modules/react-toggle": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.3.tgz", + "integrity": "sha512-WoPrvbwfQSvoagbrDnXPrlsxwzuhQIrs+V0I162j/s+4XPgY/YDAUmHSeWiroznfI73wj+MBydvW95zX8ABbSg==", + "dependencies": { + "classnames": "^2.2.5" + }, + "peerDependencies": { + "prop-types": ">= 15.3.0 < 19", + "react": ">= 15.3.0 < 19", + "react-dom": ">= 15.3.0 < 19" + } + }, "node_modules/read-package-up": { "version": "11.0.0", "resolved": "https://registry.npmjs.org/read-package-up/-/read-package-up-11.0.0.tgz", diff --git a/package.json b/package.json index a712cba..f5b6899 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "@types/node": "^20.12.7", "@types/react": "^18.3.1", "@types/react-dom": "^18.3.0", + "@types/react-toggle": "^4.0.5", "@types/uuid": "^9.0.8", "@vitejs/plugin-react": "^4.2.1", "eslint": "^8.57.0", @@ -89,6 +90,7 @@ "react-i18next": "^14.1.1", "react-icons": "^5.1.0", "react-swipeable": "^7.0.1", + "react-toggle": "^4.1.3", "reflect-metadata": "^0.2.2", "uuid": "^9.0.1" },