diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts index 426a7d63..d3601bff 100644 --- a/src/hooks/use-theme.ts +++ b/src/hooks/use-theme.ts @@ -6,7 +6,7 @@ interface ThemeState { } const useThemeStore = create((set: StoreApi['setState']) => ({ - theme: localStorage.getItem('theme') || 'yotsuba-b', + theme: localStorage.getItem('theme') || 'yotsuba', setTheme: (theme: string) => { localStorage.setItem('theme', theme); set({ theme }); diff --git a/src/themes.css b/src/themes.css index 125620c8..672065b9 100644 --- a/src/themes.css +++ b/src/themes.css @@ -1,11 +1,13 @@ :root .yotsuba { --background-base-color: #ffe; --background-pattern-image: url("/public/assets/background-fade.png"); - --primary-color: #800; - --secondary-color: #fca; - --text-color-on-primary: #fff; - --text-color-on-secondary: #800; - --text-color-on-secondary-hover: #c63; + --color1: #800; + --color2: #fca; + --color3: #fed; + --text-color: maroon; + --text-color-on-color1: #fff; + --text-color-on-color2: #800; + --text-color-on-color2-hover: #c63; --text-color-standard: #000; --text-color-inverse: #fff; --background-text-color: #fff; @@ -15,16 +17,19 @@ --internal-link-text-color-hover: #e00; --internal-link-text-decoration: none; --internal-link-text-decoration-hover: underline; + --box-border-color: #800; } :root .yotsuba-b { --background-base-color: #eef2ff; --background-pattern-image: url("/public/assets/background-fade-blue.png"); - --primary-color: #98e; - --secondary-color: #98e; - --text-color-on-primary: #000; - --text-color-on-secondary: #000; - --text-color-on-secondary-hover: #fff; + --color1: #98e; + --color2: #98e; + --color3: #eef2ff; + --text-color: #000; + --text-color-on-color1: #000; + --text-color-on-color2: #000; + --text-color-on-color2-hover: #fff; --text-color-standard: #000; --text-color-inverse: #fff; --background-text-color: #fff; @@ -34,4 +39,19 @@ --internal-link-text-color-hover: #d00; --internal-link-text-decoration: none; --internal-link-text-decoration-hover: underline; + --box-border-color: #000; } + +:root .tomorrow { + --background-base-color: #1d1f21; + --background-pattern-image: none; + --color1: rgb(33, 35, 38); + --color2: rgb(33, 35, 38); + --text-color: #c5c8c6; + --text-color-standard: #c5c8c6; + --text-color-on-color1: #c5c8c6; + --text-color-on-color2: #c5c8c6; + --text-color-on-color3: #c5c8c6; + --background-text-color: #282a2e; + --box-border-color: rgb(45, 47, 51); +} \ No newline at end of file diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css index f45bb575..792758f4 100644 --- a/src/views/home/home.module.css +++ b/src/views/home/home.module.css @@ -32,7 +32,7 @@ position: relative; background: var(--background-text-color); color: var(--text-color-standard); - border: 1px solid; + border: 1px solid var(--box-border-color); margin-bottom: 0.5em; padding-bottom: 0.5em; } @@ -42,14 +42,14 @@ line-height: 2em; } -.primaryColorBar { - background: var(--primary-color); - color: var(--text-color-on-primary); +.color1ColorBar { + background: var(--color1); + color: var(--text-color-on-color1); } -.secondaryColorBar { - background: var(--secondary-color); - color: var(--text-color-on-secondary); +.color2ColorBar { + background: var(--color2); + color: var(--text-color-on-color2); } .boxBar h2 { @@ -67,7 +67,7 @@ .boxBar span:hover { cursor: pointer; - color: var(--text-color-on-secondary-hover); + color: var(--text-color-on-color2-hover); } .boxContent { @@ -78,6 +78,10 @@ padding-bottom: 0; } +.boxContent a { + text-decoration: underline; +} + .boxContent a, .boxContent a:visited{ color: var(--external-link-text-color); } @@ -147,7 +151,34 @@ font-size: 100%; font-weight: 700; text-decoration: underline; - color: var(--text-color-on-secondary); + color: var(--text-color-on-color2); +} + +.footer { + border-top: 1px solid; + width: 750px; + display: inline-flex; + align-items: center; + font-size: 12px; + justify-content: center; +} + +.footer li { + background: var(--color3); + border: 1px solid; + padding: 2px 1em 2px 1em; + border-left: none; + margin-top: -1px; + list-style: none; +} + +.footer li:first-child { + border-left: 1px solid !important; +} + +a { + color: var(--text-color-on-color2); + text-decoration: none; } @media (max-width: 768px) { diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx index 4b4c7880..25d99943 100644 --- a/src/views/home/home.tsx +++ b/src/views/home/home.tsx @@ -3,6 +3,7 @@ import useTheme from '../../hooks/use-theme'; import { Link } from 'react-router-dom'; import { Trans, useTranslation } from 'react-i18next'; import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits'; +import { useEffect } from 'react'; // TODO: remove theme and languages selectors for debugging const ThemeSettings = () => { @@ -12,6 +13,7 @@ const ThemeSettings = () => { ); }; @@ -55,7 +57,7 @@ const InfoBox = () => { const { t } = useTranslation(); return (
-
+

{t('what_is_plebchan')}

@@ -74,7 +76,7 @@ const Boards = () => { return (
-
+

{t('boards')}

{t('options')} ▼
@@ -107,7 +109,7 @@ const PopularThreads = () => { const { t } = useTranslation(); return (
-
+

{t('popular_threads')}

{t('options')} ▼
@@ -116,7 +118,67 @@ const PopularThreads = () => { ); }; +const Stats = () => { + const { t } = useTranslation(); + return ( +
+
+

{t('stats')}

+
+
+
+ ); +}; + +const Footer = () => { + return ( + + ); +}; + const Home = () => { + const [, setTheme] = useTheme(); + + useEffect(() => { + setTheme('yotsuba'); + }, [setTheme]); + return (
@@ -132,6 +194,8 @@ const Home = () => { + +
); };