windowsboy111
/
website-wip
forked from CyberOS/website-wip
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

footer edit + dark mode in cookie

Browse Source
master
krystofex 2 years ago
parent 6c62418210
commit ec11f94061
6 changed files with 59 additions and 46 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      package.json
  2. 72
      src/components/Footer.tsx
  3. 12
      src/components/Navbar.tsx
  4. 6
      src/components/useDarkMode.ts
  5. 9
      src/pages/index/InfoBox.tsx
  6. 5
      yarn.lock

1
package.json
Unescape View File

@ -19,6 +19,7 @@
"@headlessui/react": "^1.2.0",
"get-user-locale": "^1.4.0",
"i18next": "^20.3.0",
"js-cookie": "^2.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.8.15",

72
src/components/Footer.tsx
Unescape View File

@ -30,10 +30,44 @@ const Footer = (): JSX.Element => {
return (
<div
css={tw`w-full md:flex block justify-around items-center bg-light-bg-tertiary dark:bg-dark-bg-tertiary py-4 text-center`}
css={tw`w-full bg-light-bg-secondary dark:bg-dark-bg-tertiary py-4 text-center`}
>
<div></div>
<div
css={tw`w-full pb-2 md:flex block justify-around items-center bg-light-bg-secondary dark:bg-dark-bg-tertiary py-4 text-center`}
>
<div
css={tw`relative block justify-around flex text-center items-center bg-light-bg-secondary dark:bg-dark-bg-tertiary `}
>
<Menu as="div">
<Menu.Button css={tw`focus:outline-none mr-2`}>
<a>{i18n.language}</a>
</Menu.Button>
<Transition
{...{
as: Fragment,
enter: cx(css(tw`transition ease-linear duration-200`)),
enterFrom: cx(css(tw`transform opacity-0`)),
enterTo: cx(css(tw`transform opacity-100`)),
leave: cx(css(tw`transition ease-linear duration-200`)),
leaveFrom: cx(css(tw`transform opacity-100`)),
leaveTo: cx(css(tw`transform opacity-0`)),
}}
>
<Menu.Items
css={tw`absolute text-left pl-2 border rounded-lg w-16 bottom-8 bg-light-bg-secondary dark:bg-dark-bg-secondary`}
>
{languageSelector}
</Menu.Items>
</Transition>
</Menu>
<button
css={tw`focus:outline-none bg-light-bg-secondary dark:bg-dark-bg-tertiary`}
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
>
{theme === 'dark' ? <HiSun size={32} /> : <IoMdMoon size={32} />}
</button>
</div>
</div>
<div css={tw`focus:outline-none mx-10 text-center`}>
{t('footerCopyright')}
<br />
@ -48,38 +82,6 @@ const Footer = (): JSX.Element => {
.
</span>
</div>
<div
css={tw`relative flex mr-4 text-center items-center bg-light-bg-tertiary dark:bg-dark-bg-tertiary `}
>
<Menu as="div">
<Menu.Button css={tw`focus:outline-none mr-2`}>
<a>{i18n.language}</a>
</Menu.Button>
<Transition
{...{
as: Fragment,
enter: cx(css(tw`transition ease-linear duration-200`)),
enterFrom: cx(css(tw`transform opacity-0`)),
enterTo: cx(css(tw`transform opacity-100`)),
leave: cx(css(tw`transition ease-linear duration-200`)),
leaveFrom: cx(css(tw`transform opacity-100`)),
leaveTo: cx(css(tw`transform opacity-0`)),
}}
>
<Menu.Items
css={tw`absolute w-16 bottom-8 bg-light-bg-tertiary dark:bg-dark-bg-tertiary`}
>
{languageSelector}
</Menu.Items>
</Transition>
</Menu>
<button
css={tw`focus:outline-none bg-light-bg-tertiary dark:bg-dark-bg-tertiary`}
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
>
{theme === 'dark' ? <HiSun size={32} /> : <IoMdMoon size={32} />}
</button>
</div>
</div>
)
}

12
src/components/Navbar.tsx
Unescape View File

@ -39,7 +39,7 @@ const Navbar = (): JSX.Element => {
return (
<a
css={tw`m-2 inline-block no-underline hover:underline`}
key="{link.url}"
key={link.url}
href={link.url}
>
{link.title}
@ -63,7 +63,7 @@ const Navbar = (): JSX.Element => {
return (
<>
<div
css={tw`hidden md:flex sticky shadow-navbar w-full top-0 bg-light-bg-tertiary dark:bg-dark-bg-tertiary justify-around items-center h-20`}
css={tw`hidden md:flex absolute z-10 sticky shadow-navbar w-full top-0 bg-light-bg-tertiary dark:bg-dark-bg-tertiary justify-around items-center h-20`}
>
<a href="#/" css={tw`flex text-3xl items-center `}>
<img css={tw`w-14 h-14 mx-4`} alt="CyberOS" src={Logo} />
@ -72,7 +72,7 @@ const Navbar = (): JSX.Element => {
<div css={tw`text-light-text-link`}>{navbarItems}</div>
</div>
<div
css={tw`md:hidden sticky shadow-navbar w-full top-0 bg-light-bg-tertiary dark:bg-dark-bg-tertiary flex justify-around items-center h-20`}
css={tw`md:hidden absolute z-10 sticky shadow-navbar w-full top-0 bg-light-bg-tertiary dark:bg-dark-bg-tertiary flex justify-around items-center h-20`}
>
<a href="#/" css={tw`flex text-3xl items-center `}>
<img css={tw`w-14 h-14 mx-4`} alt="CyberOS" src={Logo} />
@ -80,7 +80,7 @@ const Navbar = (): JSX.Element => {
</a>
<Menu>
<Menu.Button css={tw`focus:outline-none `}>
<button css={tw`flex border rounded-md border-gray-200`}>
<div css={tw`flex border rounded-md border-gray-200`}>
<svg
css={tw`w-6 h-6 my-1.5 mx-3`}
xmlns="http://www.w3.org/2000/svg"
@ -96,7 +96,7 @@ const Navbar = (): JSX.Element => {
d="M2 6h20M2 12h20M2 18h20"
/>
</svg>
</button>
</div>
</Menu.Button>
<Transition
{...{
@ -110,7 +110,7 @@ const Navbar = (): JSX.Element => {
}}
>
<Menu.Items
css={tw`absolute shadow-navbar top-20 w-full bg-light-bg-tertiary dark:bg-dark-bg-tertiary`}
css={tw`absolute shadow-navbar top-20 w-full bg-light-bg-tertiary dark:bg-dark-bg-tertiary`}
>
{burgerItems}
</Menu.Items>

6
src/components/useDarkMode.ts
Unescape View File

@ -1,11 +1,11 @@
import { useEffect, useState } from 'react'
import Cookie from 'js-cookie'
export default function useDarkMode() {
const [theme, setTheme] = useState('dark')
useEffect(() => {
// set theme by system theme
setTheme('dark')
setTheme(Cookie.get('theme') === 'dark' ? 'dark' : 'light')
return
}, [])
@ -15,6 +15,8 @@ export default function useDarkMode() {
root.classList.remove(previousTheme)
root.classList.add(theme)
Cookie.set('theme', theme)
return
}, [theme])

9
src/pages/index/InfoBox.tsx
Unescape View File

@ -10,16 +10,19 @@ export type InfoBoxProps = {
const InfoBox = (props: InfoBoxProps): JSX.Element => {
const { t } = useTranslation()
const img = <img src={props.iconPath} css={tw`w-24 md:w-48 h-24 md:h-48`} />
const img = (
<img src={props.iconPath} css={tw`w-24 md:w-48 h-24 md:h-48 rounded-lg`} />
)
return (
<div
css={[
tw`w-full flex justify-evenly p-8`,
tw`flex justify-evenly p-8`,
!props.reverse && tw`bg-light-bg-secondary dark:bg-dark-bg-secondary`,
]}
>
{props.reverse && img}
<div css={[tw`w-full max-w-xl`, props.reverse && tw`text-right`]}>
<div css={[tw`w-full max-w-md`, props.reverse && tw`text-right`]}>
<p
css={tw`text-light-text-disabled dark:text-dark-text-disabled text-xl md:text-2xl`}
>

5
yarn.lock
Unescape View File

@ -3835,6 +3835,11 @@ jest-worker@^26.6.2:
merge-stream "^2.0.0"
supports-color "^7.0.0"
js-cookie@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"
resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"

Write Preview
Loading…
Cancel
Save