Merge branch 'main' of https://github.com/olinpin/twitter-project into youri

dashboard_static/index.html

@@ -95,7 +95,7 @@
                 <div class="rightcol column">
                     <div class="searchcontainer column">
                         <input class="searchbar" type="text" placeholder="Search Cluccs">
-                        <input class="blockedwords" type="text" placeholder="Enter blocked words (separated by comma)">
+                        <input class="blockedwords" type="text" placeholder="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>
                             <div class="sort-dropdown">
@@ -107,7 +107,7 @@
                                 </ul>
                             </div>
                         </div>
-                        <!-- <div class="button">BLOCKED WORDS</div> -->
+                        <span class="material-symbols-outlined order-btn">arrow_downward</span>
                     </div>
                     <div class="popchart column">
 

dashboard_static/js/events.js

@@ -51,9 +51,28 @@ $(window).on("test", function(e, filter) {
 let root = document.querySelector(":root")
 
 $(".logo").on("click", function() {
-    if (root.style.getPropertyValue("--main-bg") === 'ghostwhite') {
+    if (root.style.getPropertyValue("--main-bg") === 'snow') {
+        console.log("IM here")
+        root.style.setProperty('--main-medium-dark', '#1E1E1E');
         root.style.setProperty('--main-bg', '#292929');
+        root.style.setProperty('--main-light', ' #ffffff' );
+        root.style.setProperty('--main-dark', '#ffffff');
+        root.style.setProperty('--tweet-color', '#000000')
+        root.style.setProperty('--column-color', '#1E1E1E')
     } else {
-        root.style.setProperty('--main-bg', 'ghostwhite');
+        root.style.setProperty('--main-medium-dark', '#1D9BF0');
+        root.style.setProperty('--main-bg', 'snow');
+        root.style.setProperty('--main-light', '#000000');
+        root.style.setProperty('--main-dark', ' #000000');
+        root.style.setProperty('--tweet-color', 'whitesmoke');
+        root.style.setProperty('--column-color', 'rgba(112, 128, 144, 0.388');
+    }
+})
+
+$(".order-btn").on("click", function() {
+    if($(this).html() == "arrow_downward") {    // Descending to ascending
+        $(this).html("arrow_upward")
+    } else {    // Ascending to descending
+        $(this).html("arrow_downward")
     }
 })

dashboard_static/style/style.css

@@ -3,6 +3,8 @@
 	--main-light: #ffffff;
 	--main-medium-dark: #1E1E1E;
 	--main-dark: #000000;
+	--tweet-color: #000000;
+	--column-color: #1E1E1E;
 	--secondary: #1D9BF0;
 }
 
@@ -44,6 +46,7 @@ body {
 	padding: 16px;
 	background-color: var(--main-medium-dark);
 	border-radius: 16px;
+	cursor: pointer;
 }
 
 .logo img {
@@ -90,9 +93,10 @@ body {
 
 .tweet {
 	display: flex;
-	background-color: var(--main-dark);
+	background-color: var(--tweet-color);
 	border-radius: 16px;
 	padding: 16px;
+	margin-bottom: 8px;
 }
 
 .tweet-profilepicture {
@@ -189,12 +193,8 @@ body {
 	grid-row: 1/ -1;
 }
 
-.leftcol {
+.leftcol, .centercol, .rightcol, .searchcontainer, .popchart {
-	background-color: red;
+	background-color: var(--column-color);
-}
-
-.centercol {
-	background-color: green;
 }
 
 .rightcol {
@@ -203,16 +203,13 @@ body {
 }
 
 .searchcontainer {
-	background-color: blue;
 	padding: 8px;
 	box-sizing: border-box;
 	display: flex;
 	flex-wrap: wrap;
+	margin-bottom: 32px;
 }
 
-.popchart {
-	background-color: rgba(255, 0, 255, 0.344);
-}
 
 .colheader {
 	display: block;
@@ -238,13 +235,19 @@ body {
 }
 
 .button {
-	color: var(--main-dark);
+	color: var(--main-bg);
 	cursor: pointer;
 	background-color: var(--main-light);
-	border-radius: 30px;
+	border-radius: 16px;
 	border: none;
 }
 
+.material-symbols-outlined.order-btn {
+	line-height: 52px;
+	font-weight: 600;
+	user-select: none;
+}
+
 .sort-btn {
 	user-select: none;
 	position: relative;
@@ -255,7 +258,7 @@ body {
 }
 
 .sort-dropdown-list {
-	position: absolute;
+	/* position: absolute; */
 	width: 100%;
 	list-style-type: none;
     padding: 0;