[REFACTOR] the design of the webpage

Author: HenraL

bonus/bootstrap/asperboard.bsdesign

@@ -3,6 +3,13 @@
 ** File description:
 ** bubbles.css */
 
+:root {
+  --message-receiver-background: cadetblue;
+  --message-receiver-color: white;
+  --message-sender-background: steelblue;
+  --message-sender-color: black;
+}
+
 /* Taken from: https://codepen.io/Founts/details/AJyVOr */
 
 /* container */
@@ -265,13 +272,6 @@
   -webkit-margin-after: 0em;
 }
 
-:root {
-  --message-receiver-background: #44c2eb;
-  --message-receiver-color: white;
-  --message-sender-background: lightgreen;
-  --message-sender-color: black;
-}
-
 .receiver {
   background-color: var(--message-receiver-background);
   color: var(--message-receiver-color);
@@ -320,3 +320,8 @@
   justify-content: left;
 }
 
+.message_button {
+  border: 1px transparent;
+  border-radius: 30px;
+}
+

html/assets/css/bubbles.css

@@ -4,10 +4,10 @@
 ** chatbot.css */
 
 :root {
-  --bot-background-color: #44c2eb;
+  --bot-background-color: cadetblue;
   --bot-color: black;
   --bot-link-clicked: purple;
-  --user-background-color: lightgreen;
+  --user-background-color: steelblue;
   --user-color: black;
 }
 
@@ -21,7 +21,7 @@
 
 .chatbotButton button {
   border: none;
-  background-color: #4CAF50;
+  background-color: steelblue;
   color: inherit;
   padding: 0;
   border-radius: 50%;

html/assets/css/chatbot.css

@@ -3,6 +3,8 @@
   flex-direction: row;
   justify-content: space-between;
   flex-wrap: nowrap;
+  background-color: silver;
+  color: black;
 }
 
 .widget_button {
@@ -13,25 +15,34 @@
 
 .button_desing {
   padding: 1px 2px;
-  background-color: #007bff;
+  background-color: steelblue;
   color: white;
   border: none;
   cursor: pointer;
+  font-size: 15px;
 }
 
 .button_desing:hover {
-  background-color: #0056b3;
+  background-color: steelblue;
 }
 
 #widgets_body {
   display: flex;
 }
 
 .search_container {
+  padding-top: 10px;
+  padding-bottom: 10px;
   display: flex;
   flex-direction: row;
-  justify-content: stretch;
+  justify-content: flex-start;
   flex-wrap: nowrap;
   gap: 5px;
 }
 
+/* For the sun */
+
+svg.bi.bi-sun-fill.mb-1 {
+  color: black;
+}
+

html/assets/css/dashboard.css

@@ -14,6 +14,7 @@
 .aside-left {
   flex-basis: 33.33%;
   border-right: 1px solid black;
+  background-color: #d3d3d3ab;
 }
 
 .aside-right {
@@ -32,3 +33,13 @@
   overflow-y: auto !important;
 }
 
+section.userInput {
+  gap: 10px;
+  display: flex;
+}
+
+.message_button {
+  border: 1px transparent;
+  border-radius: 30px;
+}
+

html/assets/css/forum_frame.css

@@ -30,7 +30,7 @@
 /* Style the button when it is active */
 
 .buttonList button.active, .buttonList li.active {
-  background-color: #007bff;
+  background-color: steelblue;
   color: white;
   border-radius: 0px;
 }

html/assets/css/forum_subjects.css

@@ -6,7 +6,8 @@
 }
 
 .my-btn-group-toggle .my-btn.active {
-  background-color: #4CAF50;
-  color: white;
+  /*background-color: #4CAF50;*/
+  border-bottom: 3px steelblue solid;
+  /*color: white;*/
 }
 

html/assets/css/header_button.css

@@ -10,11 +10,12 @@
   border-radius: 10px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
   display: block;
+  background-color: gainsboro;
+  color: black;
 }
 
 .quizz_container button {
   display: block;
-  width: 100%;
   margin: 10px 0;
   padding: 10px;
   font-size: 16px;
@@ -23,6 +24,18 @@
   border-radius: 5px;
 }
 
+@media (max-width: 699px) {
+  .quizz_container button {
+    width: 80%;
+  }
+}
+
+@media (min-width: 700px) {
+  .quizz_container button {
+    width: 164px;
+  }
+}
+
 .quizz_container button:hover {
   background-color: #ddd;
 }
@@ -46,11 +59,25 @@
 .quizz_container div div {
   display: flex;
   flex-direction: column;
-  padding-left: 5px;
+  padding-left: 0px;
   padding-right: 5px;
+  gap: 5px;
+  width: 446px;
 }
 
 .quizz_container div div input {
   gap: 5px;
 }
 
+input.answer {
+  background-color: cadetblue;
+  color: black;
+  border-color: transparent;
+}
+
+.question_quizz {
+  background-color: #adb5bd;
+  color: black;
+  border-color: transparent;
+}
+

html/assets/css/question_box.css

@@ -29,6 +29,7 @@ function getIframeOfTheGame() {
     // URL for the iframe (can be dynamically set as needed)
     var iframeUrl = `${window.location.origin}${checkHtmlPath()}/games`;
     const button = document.createElement("button");
+    button.classList.add("message_button");
     button.onclick = function () {
         window.open(iframeUrl, '_blank', 'width=600,height=400');
     }