update homepage, css themes

src/hooks/use-theme.ts

@@ -6,7 +6,7 @@ interface ThemeState {
 }
 
 const useThemeStore = create<ThemeState>((set: StoreApi<ThemeState>['setState']) => ({
-  theme: localStorage.getItem('theme') || 'yotsuba-b',
+  theme: localStorage.getItem('theme') || 'yotsuba',
   setTheme: (theme: string) => {
     localStorage.setItem('theme', theme);
     set({ theme });

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;
+  --color1: #800;
-  --secondary-color: #fca;
+  --color2: #fca;
-  --text-color-on-primary: #fff;
+  --color3: #fed;
-  --text-color-on-secondary: #800;
+  --text-color: maroon;
-  --text-color-on-secondary-hover: #c63;
+  --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;
+  --color1: #98e;
-  --secondary-color: #98e;
+  --color2: #98e;
-  --text-color-on-primary: #000;
+  --color3: #eef2ff;
-  --text-color-on-secondary: #000;
+  --text-color: #000;
-  --text-color-on-secondary-hover: #fff;
+  --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);
 }

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 {
+.color1ColorBar {
-  background: var(--primary-color);
+  background: var(--color1);
-  color: var(--text-color-on-primary);
+  color: var(--text-color-on-color1);
 }
 
-.secondaryColorBar {
+.color2ColorBar {
-  background: var(--secondary-color);
+  background: var(--color2);
-  color: var(--text-color-on-secondary);
+  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) {

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 = () => {
     <select value={theme} onChange={(e) => setTheme(e.target.value)}>
       <option value='yotsuba'>yotsuba</option>
       <option value='yotsuba-b'>yotsuba-b</option>
+      <option value='tomorrow'>tomorrow</option>
     </select>
   );
 };
@@ -55,7 +57,7 @@ const InfoBox = () => {
   const { t } = useTranslation();
   return (
     <div className={styles.box}>
-      <div className={`${styles.boxBar} ${styles.primaryColorBar}`}>
+      <div className={`${styles.boxBar} ${styles.color1ColorBar}`}>
         <h2>{t('what_is_plebchan')}</h2>
       </div>
       <div className={styles.boxContent}>
@@ -74,7 +76,7 @@ const Boards = () => {
 
   return (
     <div className={styles.box}>
-      <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
+      <div className={`${styles.boxBar} ${styles.color2ColorBar}`}>
         <h2 className={styles.capitalize}>{t('boards')}</h2>
         <span>{t('options')} ▼</span>
       </div>
@@ -107,7 +109,7 @@ const PopularThreads = () => {
   const { t } = useTranslation();
   return (
     <div className={styles.box}>
-      <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
+      <div className={`${styles.boxBar} ${styles.color2ColorBar}`}>
         <h2 className={styles.capitalize}>{t('popular_threads')}</h2>
         <span>{t('options')} ▼</span>
       </div>
@@ -116,7 +118,67 @@ const PopularThreads = () => {
   );
 };
 
+const Stats = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.box}>
+      <div className={`${styles.boxBar} ${styles.color2ColorBar}`}>
+        <h2 className={styles.capitalize}>{t('stats')}</h2>
+      </div>
+      <div className={styles.boxContent}></div>
+    </div>
+  );
+};
+
+const Footer = () => {
+  return (
+    <ul className={styles.footer}>
+      <li>
+        <a href='https://plebbit.com' target='_blank' rel='noopener noreferrer'>
+          About
+        </a>
+      </li>
+      <li>
+        <a href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
+          Twitter
+        </a>
+      </li>
+      <li>
+        <a href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
+          Telegram
+        </a>
+      </li>
+      <li>
+        <a href='https://discord.gg/E7ejphwzGW' target='_blank' rel='noopener noreferrer'>
+          Discord
+        </a>
+      </li>
+      <li>
+        <a href='https://github.com/plebbit/plebchan' target='_blank' rel='noopener noreferrer'>
+          GitHub
+        </a>
+      </li>
+      <li>
+        <a href='https://etherscan.io/token/0xEA81DaB2e0EcBc6B5c4172DE4c22B6Ef6E55Bd8f' target='_blank' rel='noopener noreferrer'>
+          Token
+        </a>
+      </li>
+      <li>
+        <a href='https://github.com/plebbit/whitepaper/discussions/2' target='_blank' rel='noopener noreferrer'>
+          Whitepaper
+        </a>
+      </li>
+    </ul>
+  );
+};
+
 const Home = () => {
+  const [, setTheme] = useTheme();
+
+  useEffect(() => {
+    setTheme('yotsuba');
+  }, [setTheme]);
+
   return (
     <div className={styles.content}>
       <div className={styles.debug}>
@@ -132,6 +194,8 @@ const Home = () => {
       <InfoBox />
       <Boards />
       <PopularThreads />
+      <Stats />
+      <Footer />
     </div>
   );
 };