update themes

src/components/board-nav/board-nav.tsx

@@ -28,11 +28,7 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
         ]
       </span>
       <span className={styles.navTopRight}>
-        [
+        [<Link to='/settings'>{t('settings')}</Link>] [<Link to='/'>{t('home')}</Link>]
-        <Link to='/settings' onClick={(e) => e.preventDefault()}>
-          {t('settings')}
-        </Link>
-        ] [<Link to='/'>{t('home')}</Link>]
       </span>
     </div>
   );

src/themes.css

@@ -31,23 +31,23 @@
   --button-background-color-mobile: #f0e0d6;
   --button-border-mobile: 1px solid #c0a69d;
 
-  /* main colors */
-  --color1: #800;
-  --color2: #fca;
-  --color3: #fed;
-
   /* horizontal rule */
   --hr-border: none;
   --hr-border-top: 1px solid #d9bfb7;
   --hr-height: 0px;
 
-  /* homepage boxes */
+  /* homepage */
-  --homepage-infobox-bar-text-color: #fff;
   --homepage-infobox-text-color: #000;
+  --homepage-infobox-bar-text-color: #fff;
+  --homepage-infobox-bar-background-color: #800;
   --homepage-box-background-color: #fff;
   --homepage-box-border-color: #800;
   --homepage-box-bar-text-color: #800;
   --homepage-box-bar-text-color-hover: #c63;
+  --homepage-box-bar-background-color: #fca;
+
+  /* footer */
+  --footer-item-background-color-desktop: #fed;
 
   /* links */
   --link-external-text-color: #00f;
@@ -85,13 +85,15 @@
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
 
-  /* homepage boxes */
+  /* homepage */
+  --homepage-infobox-text-color: #000;
+  --homepage-infobox-bar-text-color: #000;
+  --homepage-infobox-bar-background-color: #98e;
   --homepage-box-background-color: #fff;
   --homepage-box-border-color: #000;
   --homepage-box-bar-text-color: #000;
   --homepage-box-bar-text-color-hover: #fff;
-  --homepage-infobox-text-color: #000;
+  --homepage-box-bar-background-color: #98e;
-  --homepage-infobox-bar-text-color: #000;
 
   /* desktop buttons */
   --button-text-color: #34345c;
@@ -105,10 +107,8 @@
   --button-background-color-mobile: #d6daf0;
   --button-border-mobile: 1px solid #b7c5d9;
 
-  /* main colors */
+  /* footer */
-  --color1: #98e;
+  --footer-item-background-color-desktop: #eef2ff;
-  --color2: #98e;
-  --color3: #eef2ff;
 
   /* horizontal rule */
   --hr-border: none;
@@ -135,13 +135,15 @@
   --body-font-family: times new roman, serif;
   --body-font-size: 12pt;
 
-  /* homepage boxes */
+  /* homepage */
+  --homepage-infobox-text-color: #000;
+  --homepage-infobox-bar-text-color: #fff;
+  --homepage-infobox-bar-background-color: #800;
   --homepage-box-background-color: #fff;
   --homepage-box-border-color: #800;
   --homepage-box-bar-text-color: #800;
   --homepage-box-bar-text-color-hover: #c63;
-  --homepage-infobox-text-color: #000;
+  --homepage-box-bar-background-color: #fca;
-  --homepage-infobox-bar-text-color: #fff;
 
   /* board nav */
   --boardnav-font-size: 11pt;
@@ -159,10 +161,8 @@
   --button-text-color-hover: red;
   --button-text-decoration: underline;
 
-  /* colors */
+  /* footer */
-  --color1: #800;
+  --footer-item-background-color-desktop: #fed;
-  --color2: #fca;
-  --color3: #fed;
 
   /* links */
   --link-external-text-color: #00f;
@@ -200,23 +200,23 @@
   --body-font-family: times new roman, serif;
   --body-font-size: 12pt;
 
-  /* homepage boxes */
+  /* homepage */
+  --homepage-infobox-text-color: #000;
+  --homepage-infobox-bar-text-color: #000;
+  --homepage-infobox-bar-background-color: #98e;
   --homepage-box-background-color: #fff;
   --homepage-box-border-color: #000;
   --homepage-box-bar-text-color: #000;
+  --homepage-box-bar-background-color: #98e;
   --homepage-box-bar-text-color-hover: #fff;
-  --homepage-infobox-text-color: #000;
-  --homepage-infobox-bar-text-color: #000;
 
   /* buttons */
   --button-text-color: #34345c;
   --button-text-decoration: underline;
   --button-text-color-hover: #d00;
 
-  /* colors */
+  /* footer */
-  --color1: #98e;
+  --footer-item-background-color-desktop: #eef2ff;
-  --color2: #98e;
-  --color3: #eef2ff;
 
   /* links */
   --link-external-text-color: #00f;
@@ -239,13 +239,15 @@
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
 
-  /* homepage boxes */
+  /* homepage */
+  --homepage-infobox-text-color: #c5c8c6;
+  --homepage-infobox-bar-text-color: #c5c8c6;
+  --homepage-infobox-bar-background-color: rgb(33, 35, 38);
   --homepage-box-background-color: #282a2e;
+  --homepage-box-bar-background-color: rgb(33, 35, 38);
   --homepage-box-border-color: rgb(45, 47, 51);
   --homepage-box-bar-text-color: #c5c8c6;
   --homepage-box-bar-text-color-hover: #c5c8c6;
-  --homepage-infobox-text-color: #c5c8c6;
-  --homepage-infobox-bar-text-color: #c5c8c6;
 
   /* board nav */
   --boardnav-font-size: 9pt;
@@ -263,10 +265,6 @@
   --button-text-color: #81a2be;
   --button-text-color-hover: #5f89ac;
 
-  /* colors */
-  --color1: rgb(33, 35, 38);
-  --color2: rgb(33, 35, 38);
-
   /* horizontal rule */
   --hr-border: none;
   --hr-border-top: 1px solid #282a2e;
@@ -284,9 +282,6 @@
   --select-border: 1px solid #575a60;
   --select-background-color: #282a2e;
   --select-color: #c5c8c6;
-
-  /* text color on color3 */
-  --text-color-on-color3: #c5c8c6;
 }
 
 :root .photon {

src/views/home/home.module.css

@@ -26,22 +26,22 @@
   padding-bottom: 0.5em;
 }
 
-.boxBar {
+.boxBar, .infoboxBar {
   padding-left: 0.5em;
   line-height: 2em;
 }
 
-.color1ColorBar {
+.infoboxBar {
-  background: var(--color1);
+  background: var(--homepage-infobox-bar-background-color);
   color: var(--homepage-infobox-bar-text-color);
 }
 
-.color2ColorBar {
+.boxBar {
-  background: var(--color2);
+  background: var(--homepage-box-bar-background-color);
   color: var(--homepage-box-bar-text-color);
 }
 
-.boxBar h2 {
+.boxBar h2, .infoboxBar h2{
   font-size: 131%;
   font-weight: 700;
 }
@@ -185,7 +185,7 @@
   }
 
   .footer li {
-    background: var(--color3);
+    background: var(--footer-item-background-color-desktop);
     border: 1px solid;
     padding: 2px 1em 2px 1em;
     border-left: none;

src/views/home/home.tsx

@@ -52,7 +52,7 @@ const InfoBox = () => {
   const { t } = useTranslation();
   return (
     <div className={styles.box}>
-      <div className={`${styles.boxBar} ${styles.color1ColorBar}`}>
+      <div className={styles.infoboxBar}>
         <h2>{t('what_is_plebchan')}</h2>
       </div>
       <div className={styles.boxContent}>
@@ -71,7 +71,7 @@ const Boards = () => {
 
   return (
     <div className={styles.box}>
-      <div className={`${styles.boxBar} ${styles.color2ColorBar}`}>
+      <div className={styles.boxBar}>
         <h2 className={styles.capitalize}>{t('boards')}</h2>
         <span>{t('options')} ▼</span>
       </div>