update css variables naming

src/views/home/home.module.css

@@ -1,5 +1,4 @@
 .content {
-  color: var(--color-primary);
   width: 100%;
   height: 100%;
   margin: auto;
@@ -30,20 +29,28 @@
 }
 
 .box {
-  background: var(--text-background);
-  color: var(--text-black);
+  background: var(--background-text-color);
+  color: var(--text-color-standard);
   border: 1px solid;
   margin-bottom: 0.5em;
   padding-bottom: 0.5em;
 }
 
 .boxBar {
-  background: var(--color-primary);
-  color: var(--text-primary);
   padding-left: 0.5em;
   line-height: 2em;
 }
 
+.primaryColorBar {
+  background: var(--primary-color);
+  color: var(--text-color-on-primary);
+}
+
+.secondaryColorBar {
+  background: var(--secondary-color);
+  color: var(--text-color-on-secondary);
+}
+
 .boxBar h2 {
   font-size: 131%;
   font-weight: 700;
@@ -58,7 +65,7 @@
 }
 
 .boxContent a, .boxContent a:visited{
-  color: var(--text-link);
+  color: var(--link-text-color);
 }
 
 .searchBar {
@@ -85,7 +92,7 @@
 
 .searchBar button {
   margin-left: 4px;
-  padding: 3px 10px;
+  padding: 3px 5px;
   display: inline-block;
   text-transform: capitalize;
   font-size: 14px;
@@ -98,6 +105,8 @@
 
 @media (max-width: 768px) {
   .content {
+    min-width: 0;
     width: auto;
+    padding: 10px;
   }
 }

src/views/home/home.tsx

@@ -59,7 +59,7 @@ const Home = () => {
         <button>{t('go')}</button>
       </div>
       <div className={styles.box}>
-        <div className={styles.boxBar}>
+        <div className={`${styles.boxBar} ${styles.primaryColorBar}`}>
           <h2>{t('what_is_plebchan')}</h2>
         </div>
         <div className={styles.boxContent}>
@@ -70,11 +70,17 @@ const Home = () => {
         </div>
       </div>
       <div className={styles.box}>
-        <div className={styles.boxBar}>
+        <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
           <h2 className={styles.capitalize}>{t('boards')}</h2>
         </div>
         <div className={styles.boxContent}></div>
       </div>
+      <div className={styles.box}>
+        <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
+          <h2 className={styles.capitalize}>{t('popular_threads')}</h2>
+        </div>
+        <div className={styles.boxContent}></div>
+      </div>
     </div>
   );
 };