From 2aefeb2075fca63bd16b5de846f33e0013c081df Mon Sep 17 00:00:00 2001
From: Tim Wijma <tim.wijma@gmail.com>
Date: Wed, 2 Nov 2022 15:36:49 +0100
Subject: [PATCH] css variables

---
 dashboard_static/index.html      | 10 +++++-----
 dashboard_static/js/code.js      |  2 +-
 dashboard_static/style/style.css | 26 +++++++++++---------------
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/dashboard_static/index.html b/dashboard_static/index.html
index ffb7f08..6d0f1c3 100644
--- a/dashboard_static/index.html
+++ b/dashboard_static/index.html
@@ -94,9 +94,10 @@
                 </div>
                 <div class="rightcol column">
                     <div class="searchcontainer column">
-                        <input class="searchbar" type="text" placeholder="SEARCH CLUCCS...">
+                        <input class="searchbar" type="text" placeholder="Search Cluccs">
+                        <input class="blockedwords" type="text" placeholder="Enter blocked words (separated by comma)">
                         <div class="button sort-btn">
-                            <span class="sortby">SORT BY <span class="material-symbols-outlined">arrow_drop_down</span></span>
+                            <span class="sortby">Sort By <span class="material-symbols-outlined">arrow_drop_down</span></span>
                             <div class="sort-dropdown">
                                 <ul class="sort-dropdown-list">
                                     <li>Time</li>
@@ -106,11 +107,10 @@
                                 </ul>
                             </div>
                         </div>
-                        <div class="button">BLOCKED WORDS</div>
-                        <div class="button">POPULARITY FILTER</div>
+                        <!-- <div class="button">BLOCKED WORDS</div> -->
                     </div>
                     <div class="popchart column">
-                        <span class="colheader chartheader">Sports Popularity Filter</span>
+                        <span class="colheader chartheader">Sports Popularity Chart</span>
                     </div>
                 </div>
             </div>
diff --git a/dashboard_static/js/code.js b/dashboard_static/js/code.js
index 8e30902..43be3fd 100644
--- a/dashboard_static/js/code.js
+++ b/dashboard_static/js/code.js
@@ -154,4 +154,4 @@ function sortTweets(tweets, likesDes=null, retweetsDes=null, repliesDes=null, da
         tweets.sort(function(a,b){return Date(a.created_at)-Date(b.reply_count)})
     }
     return tweets
-}
+}
\ No newline at end of file
diff --git a/dashboard_static/style/style.css b/dashboard_static/style/style.css
index 3642430..2046fc0 100644
--- a/dashboard_static/style/style.css
+++ b/dashboard_static/style/style.css
@@ -22,7 +22,7 @@ body {
 
 .container {
 	background-color: var(--main-bg);
-	color: white;
+	color: var(--main-dark);
 	padding: 16px 48px;
 	display: flex;
 	flex-direction: column;
@@ -68,7 +68,7 @@ body {
 	height: 30px;
 	padding: 4px;
 	margin-right: 8px;
-	border: 1px solid white;
+	border: 1px solid var(--main-light);
 	border-radius: 100px;
 	cursor: pointer;
 }
@@ -122,19 +122,19 @@ body {
 }
 
 .tweet-nickname {
-	color: white;
+	color: var(--main-light);
 	text-decoration: none;
 	font-weight: bold;
 }
 
 .tweet-nickname:active {
-	color: white;
+	color: var(--main-light);
 	text-decoration: underline;
 	font-weight: bold;
 }
 
 .tweet-username {
-	color: white;
+	color: var(--main-light);
 	text-decoration: none;
 	opacity: 0.8;
 }
@@ -217,13 +217,13 @@ body {
 }
 
 
-.searchbar {
+.searchbar, .blockedwords {
 	width: 100%;
 }
 
-.searchbar, .button {
+.searchbar, .button, .blockedwords {
 	font-weight: bold;
-	font-size: 24px;
+	font-size: 22px;
 	border-radius: 50px;
 	padding: 8px;
 	margin: 4px 8px;
@@ -231,9 +231,9 @@ body {
 }
 
 .button {
-	color: black;
+	color: var(--main-dark);
 	cursor: pointer;
-	background-color: white;
+	background-color: var(--main-light);
 	border-radius: 30px;
 	border: none;
 }
@@ -254,7 +254,7 @@ body {
     padding: 0;
     margin: 0;
 	margin-left: -8px;
-	background-color: white;
+	background-color: var(--main-light);
 	border-radius: 0 0 16px 16px;
 }
 
@@ -264,10 +264,6 @@ body {
 	padding: 0 8px;
 }
 
-.sort-dropdown-list li:hover {
-	background-color: #dddddd;
-}
-
 .radius-bottom {
 	border-bottom-left-radius: 16px;
 	border-bottom-right-radius: 16px;