From e258978b7330273d38d14da093b99428b3ca44fb Mon Sep 17 00:00:00 2001
From: yannis-mlgrn <yannismalgorn@gmail.com>
Date: Mon, 7 Mar 2022 21:25:56 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8improve=20the=20css=20by=20adding?=
 =?UTF-8?q?=20css=20variables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/App.vue                      |  8 ++++++++
 front/src/components/ActivityBar.vue   | 28 +++++++++++++-------------
 front/src/components/Login.vue         | 14 ++++++-------
 front/src/components/MessageEditor.vue |  8 ++++----
 front/src/components/MessageList.vue   |  4 ++--
 front/src/components/RoomEditor.vue    | 24 +++++++++++-----------
 front/src/components/RoomList.vue      |  8 ++++----
 front/src/components/UserList.vue      |  2 +-
 8 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/front/src/App.vue b/front/src/App.vue
index 24e833c..aa6d7e5 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -170,12 +170,20 @@ export default defineComponent({
     probably not final style, just a kind of draft
 */
 * {
+    /* background colors */
+    --bg0 : rgba(0, 0, 0, 0.2);
     --bg1: #1e1d24;
     --bg2: #4c4953;
     --bg3: #393842;
     --bg4: #2a2931;
     --accent: rgb(14, 247, 149);
+    /* text fonts */
+    --font-text: white ;
+    --light-text:rgb(189, 189, 189);
+    --dark-text: rgb(158, 158, 158);
+    /* size */
     --font-size: 25px;
+    --small-font-size : 0.8em;
     --border-radius: 6px;
 }
 
diff --git a/front/src/components/ActivityBar.vue b/front/src/components/ActivityBar.vue
index 59a6c91..fa942ad 100644
--- a/front/src/components/ActivityBar.vue
+++ b/front/src/components/ActivityBar.vue
@@ -73,8 +73,8 @@ export default defineComponent({
     padding: 10px 15px;
     display: flex;
     justify-content: space-evenly;
-    color: white;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    color: var(--font-text);
+    box-shadow: 0 0 10px var(--bg0);
 }
 
 .room_id {
@@ -82,14 +82,14 @@ export default defineComponent({
 }
 
 .room_id > span {
-    color:white;
+    color:var(--font-text);
 }
 
 .share_popup_background {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: var(--bg0);
     position: fixed;
     top: 0;
     left: 0;
@@ -114,7 +114,7 @@ export default defineComponent({
 }
 
 .share_label {
-    color: rgb(189, 189, 189);
+    color: var(--light-text);
     font-size: 0.9em;
     margin-bottom: 0;
 }
@@ -126,13 +126,13 @@ export default defineComponent({
     border-radius: 4px;
     padding: 5px;
     font-size: 0.9em;
-    color: rgb(173, 173, 173);
+    color: var(--dark-text);
     background-color: var(--bg2);
     transition: 0.1s;
 }
 
 .share_input:focus {
-    color: white;
+    color: var(--text-font);
 }
 
 .share_submit_wrapper {
@@ -145,7 +145,7 @@ export default defineComponent({
     transition: 0.1s;
     border-radius: 4px;
     background-color: var(--accent);
-    color: white;
+    color: var(--font-text);
     padding: 4px 8px;
     cursor: pointer;
     font-size: 0.8em;
@@ -162,7 +162,7 @@ export default defineComponent({
     display: flex;
     background-color: var(--bg3);
     margin: 0;
-    color: white;
+    color: var(--font-text);
     padding: 10px;
     align-items: center;
     padding-left: 20px;
@@ -172,12 +172,12 @@ export default defineComponent({
 .activity_bar_writing {
     padding-left: 10px;
     font-size: smaller;
-    color: rgb(168, 168, 168);
+    color: var(--dark-text);
 }
 
 .activity_bar_room::before {
     content: "# ";
-    color: rgb(172, 172, 172);
+    color: var(--font-text);
 }
 
 .activity_bar_writing::before {
@@ -185,7 +185,7 @@ export default defineComponent({
 }
 .room_id_input{
     text-align: left;
-    color : white ;
+    color : var(--font-text) ;
     font-size: 25px ;
     border-top-style: hidden;
     border-right-style: hidden;
@@ -201,7 +201,7 @@ export default defineComponent({
     width: 100px;
     font-size: 16px;
     font-weight: 600;
-    color: #fff;
+    color: var(--font-text);
     cursor: pointer;
     height: 30px;
     margin: auto;
@@ -229,7 +229,7 @@ export default defineComponent({
 }
 
 .copy_button.gradient {
-    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
+    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, var(--accent));
     box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
 }
 .copy_wrapper {
diff --git a/front/src/components/Login.vue b/front/src/components/Login.vue
index c30a674..b5a6426 100644
--- a/front/src/components/Login.vue
+++ b/front/src/components/Login.vue
@@ -25,7 +25,7 @@ export default defineComponent({
 
 <style scoped>
 .login_wrapper {
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: var(--bg0);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -44,8 +44,8 @@ export default defineComponent({
     padding: 10px 15px;
     display: flex;
     justify-content: space-evenly;
-    color: white;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    color: var(--font-text);
+    box-shadow: 0 0 10px var(--bg0);
 }
 
 .login_popup > * {
@@ -62,7 +62,7 @@ export default defineComponent({
 }
 
 .login_label {
-    color: rgb(189, 189, 189);
+    color: var(light-text);
     font-size: 0.9em;
     margin-bottom: 0;
 }
@@ -74,13 +74,13 @@ export default defineComponent({
     border-radius: 4px;
     padding: 5px;
     font-size: 0.9em;
-    color: rgb(173, 173, 173);
+    color: var(--dark-text);
     background-color: var(--bg2);
     transition: 0.1s;
 }
 
 .login_input:focus {
-    color: white;
+    color: var(--font-text);
 }
 
 .login_submit_wrapper {
@@ -93,7 +93,7 @@ export default defineComponent({
     transition: 0.1s;
     border-radius: 4px;
     background-color: var(--accent);
-    color: white;
+    color: var(--font-text);
     padding: 4px 8px;
     cursor: pointer;
     font-size: 0.8em;
diff --git a/front/src/components/MessageEditor.vue b/front/src/components/MessageEditor.vue
index 9afd482..72299c3 100644
--- a/front/src/components/MessageEditor.vue
+++ b/front/src/components/MessageEditor.vue
@@ -41,7 +41,7 @@ export default defineComponent({
     border-radius: var(--border-radius);
     font-size: calc(var(--font-size) - 5px);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    color: rgb(158, 158, 158);
+    color: var(--dark-text);
     transition: all 0.2s;
     height: calc(var(--font-size) * 2);
     resize: none;
@@ -65,13 +65,13 @@ export default defineComponent({
 }
 
 .message_editor_input:focus {
-    color: white;
+    color: var(--font-text);
 }
 
 .message_editor_button {
     background-color: var(--accent);
     border: none;
-    font-size: 20px;
+    font-size: var(--font-size);
     display: flex;
 
     --size: calc(var(--font-size) * 2);
@@ -92,7 +92,7 @@ export default defineComponent({
 }
 
 .message_editor_send_icon {
-    background-color: white;
+    background-color: var(--font-text);
     clip-path: polygon(20% 47%, 12% 20%, 90% 50%, 12% 80%, 20% 53%, 50% 50%);
     width: 100%;
     height: 100%;
diff --git a/front/src/components/MessageList.vue b/front/src/components/MessageList.vue
index eece9ba..d665ec3 100644
--- a/front/src/components/MessageList.vue
+++ b/front/src/components/MessageList.vue
@@ -76,12 +76,12 @@ export default defineComponent({
 .messages_timestamp {
     color: var(--bg2);
     filter: brightness(1.5);
-    font-size: 0.6em;
+    font-size: var(--small-font-size);
 }
 
 .messages_content {
     margin-top: 5px;
-    color: #ddd;
+    color: var(--font-text);
     font-size: smaller;
 }
 </style>
diff --git a/front/src/components/RoomEditor.vue b/front/src/components/RoomEditor.vue
index 52db9ee..e2b385b 100644
--- a/front/src/components/RoomEditor.vue
+++ b/front/src/components/RoomEditor.vue
@@ -53,7 +53,7 @@ export default defineComponent({
 
 <style scoped>
 .room_editor_wrapper {
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: var(--bg0);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -72,8 +72,8 @@ export default defineComponent({
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
-    color: white;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    color: var(--font-text);
+    box-shadow: 0 0 10px var(--bg0);
 }
 
 .room_editor_content_wrapper > *,
@@ -97,7 +97,7 @@ export default defineComponent({
 }
 
 .room_editor_selected_tab {
-    border-bottom: solid white 2px;
+    border-bottom: solid var(--font-text) 2px;
 }
 
 .room_editor_content_wrapper {
@@ -114,8 +114,8 @@ export default defineComponent({
 }
 
 .room_editor_label {
-    color: rgb(189, 189, 189);
-    font-size: 0.8em;
+    color: var(--light-text);
+    font-size: var(--small-font-size);
     margin-bottom: 0;
 }
 
@@ -125,8 +125,8 @@ export default defineComponent({
     border: none;
     border-radius: 4px;
     padding: 5px;
-    font-size: 0.9em;
-    color: rgb(173, 173, 173);
+    font-size: var(--small-font-size);
+    color: var(--light-text);
     background-color: var(--bg2);
     transition: 0.1s;
     width: 30vw;
@@ -134,7 +134,7 @@ export default defineComponent({
 }
 
 .room_editor_input:focus {
-    color: white;
+    color: var(--font-text);
 }
 
 textarea.room_editor_input {
@@ -152,10 +152,10 @@ textarea.room_editor_input {
     border: none;
     transition: 0.1s;
     border-radius: 4px;
-    color: white;
+    color: var(--font-text);
     padding: 8px 12px;
     cursor: pointer;
-    font-size: 0.9em;
+    font-size: var(--small-font-size);
 }
 
 .room_editor_button:hover {
@@ -167,6 +167,6 @@ textarea.room_editor_input {
 }
 
 .room_editor_cancel {
-    background-color: rgb(145, 145, 145);
+    background-color: var(--dark-text);
 }
 </style>
diff --git a/front/src/components/RoomList.vue b/front/src/components/RoomList.vue
index dcbf2cf..0b72791 100644
--- a/front/src/components/RoomList.vue
+++ b/front/src/components/RoomList.vue
@@ -41,7 +41,7 @@ export default defineComponent({
     margin: 3px;
     padding: 5px;
     margin-left: 0;
-    color: rgb(146, 146, 146);
+    color: var(--dark-text);
     transition: all 0.1s;
     cursor: pointer;
     border-radius: 4px;
@@ -62,15 +62,15 @@ export default defineComponent({
     cursor: pointer;
     width: 0;
 
-    --room_list_quit: rgb(145, 145, 145);
+    --room_list_quit: var(--dark-text);
 }
 
 .room_list_quit:hover {
-    --room_list_quit: white;
+    --room_list_quit: var(--font-text);
 }
 
 .room_list_room:hover {
-    color: white;
+    color: var(--font-text);
 }
 
 .room_list_item:hover > .room_list_quit {
diff --git a/front/src/components/UserList.vue b/front/src/components/UserList.vue
index df59653..dfb9e9e 100644
--- a/front/src/components/UserList.vue
+++ b/front/src/components/UserList.vue
@@ -32,7 +32,7 @@ export default defineComponent({
 }
 
 .user_list_item {
-    color: white;
+    color: var(--font-text);
     margin-top: 5px;
     white-space: nowrap;
     text-overflow: ellipsis;