From 43a720504657a4a47db42147c6d20c745f4b125b Mon Sep 17 00:00:00 2001
From: AlecM33 <leohfx@gmail.com>
Date: Sun, 10 Sep 2023 12:06:49 -0400
Subject: [PATCH] more consistent colors, change global color for evil
 alignment

---
 .../front_end_components/HTMLFragments.js     |  2 +-
 client/src/styles/GLOBAL.css                  | 20 ++++----
 client/src/styles/create.css                  | 13 +++---
 client/src/styles/game.css                    | 46 +++++++++----------
 client/src/styles/hamburgers.css              |  4 +-
 client/src/styles/home.css                    |  4 +-
 client/src/styles/join.css                    |  4 +-
 client/src/styles/modal.css                   | 11 +++--
 client/src/views/home.html                    |  2 +-
 9 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/client/src/modules/front_end_components/HTMLFragments.js b/client/src/modules/front_end_components/HTMLFragments.js
index cb6d0f6..2be68a5 100644
--- a/client/src/modules/front_end_components/HTMLFragments.js
+++ b/client/src/modules/front_end_components/HTMLFragments.js
@@ -2,7 +2,7 @@ export const HTMLFragments = {
     LOBBY:
     `<div id='lobby-header'>
         <div>
-            <label for='game-link'>Share Link</label>
+            <label for='game-link'>Share this Room:</label>
             <div tabindex='0' id='game-link'></div>
             <div id='game-code'></div>
         </div>
diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css
index ce49604..2441968 100644
--- a/client/src/styles/GLOBAL.css
+++ b/client/src/styles/GLOBAL.css
@@ -45,7 +45,7 @@ body {
 
 h1 {
     font-family: 'signika-negative', sans-serif;
-    color: #b1afcd;
+    color: #c9c9c9;
     filter: drop-shadow(2px 2px 4px black);
     margin: 0.5em 0;
 }
@@ -245,13 +245,13 @@ button {
 }
 
 .cancel {
-    background-color: #7a1a1a !important;
+    background-color: #832b2b !important;
     border: 3px solid transparent !important;
 }
 
 .cancel:hover {
-    background-color: #623232 !important;
-    border: 3px solid #7a1a1a !important;
+    background-color: #832b2b8a !important;
+    border: 3px solid #832b2b !important;
 }
 
 .submitted {
@@ -290,12 +290,12 @@ button {
     font-family: signika-negative, sans-serif;
     color: #d7d7d7;
     font-size: 20px;
-    margin: 0.5em;
 }
 
 #game-parameters > div {
     display: flex;
     align-items: center;
+    font-size: 25px;
 }
 
 #game-parameters img {
@@ -317,7 +317,7 @@ button {
 #how-to-use-container h1 {
     color: #21ba45;
     font-family: signika-negative, sans-serif;
-    background-color: #1e1b26;
+    background-color: #252525;
     width: fit-content;
     padding: 0 5px;
     border-radius: 5px;
@@ -375,10 +375,10 @@ input {
 }
 
 #how-to-use-container h3 {
-    color: #b1afcd;
+    color: #c9c9c9;
     font-weight: bold;
     font-family: signika-negative, sans-serif;
-    background-color: #1e1b26;
+    background-color: #252525;
     width: fit-content;
     padding: 0 5px;
     border-radius: 5px;
@@ -601,11 +601,11 @@ input {
 }
 
 .evil-players, #deck-evil {
-    border: 2px solid #e7333363;
+    border: 2px solid rgba(231, 51, 51, 0.39);
 }
 
 .evil, .compact-card.evil .card-role {
-    color: #dd2929 !important;
+    color: #e75555 !important;
     font-weight: bold;
 }
 
diff --git a/client/src/styles/create.css b/client/src/styles/create.css
index 69db5f2..1a58189 100644
--- a/client/src/styles/create.css
+++ b/client/src/styles/create.css
@@ -15,8 +15,8 @@
 
 .role-category-button {
     background-color: transparent;
-    color: #b1afcd;
-    border: 1px solid #b1afcd;
+    color: #c9c9c9;
+    border: 1px solid #c9c9c9;
     border-radius: 25px;
     font-size: 16px;
     padding: 5px 10px;
@@ -27,7 +27,7 @@
 
 .role-category-button-selected {
     color: black;
-    background-color: #b1afcd;
+    background-color: #c9c9c9;
 }
 
 #role-category-buttons {
@@ -102,8 +102,8 @@
 }
 
 .template-option {
-    background-color: #000000;
-    border: 1px solid #4b4b4b;
+    background-color: #5555555c;
+    border: 1px solid #55555599;
     color: #d7d7d7;
     display: flex;
     justify-content: space-between;
@@ -130,7 +130,6 @@
 
 .template-option:hover, .template-option:active {
     border: 1px solid #e7e7e7;
-    background-color: #33343c;
     cursor: pointer;
 }
 
@@ -651,7 +650,7 @@ input[type="number"] {
 
 #step-1 div.option-selected {
     border: 1px solid #e7e7e7;
-    background-color: #3a3c46;
+    background-color: #494949;
 }
 
 #step-1 div > strong {
diff --git a/client/src/styles/game.css b/client/src/styles/game.css
index 5cdd78e..754682c 100644
--- a/client/src/styles/game.css
+++ b/client/src/styles/game.css
@@ -52,8 +52,8 @@
 
 .potential-moderator {
     margin: 0.5em auto;
-    border: 2px solid #46455299;
-    background: #4645525c;
+    border: 2px solid #55555599;
+    background: #5555555c;
 }
 
 #transfer-mod-modal h2 {
@@ -73,7 +73,7 @@
 }
 
 #spectator-count {
-    color: #b1afcd;
+    color: #c9c9c9;
     text-decoration: underline;
     font-size: 17px;
     margin: 5px 0 10px 0;
@@ -265,9 +265,7 @@ h1 {
 }
 
 #end-of-game-header h2 {
-    border: 1px solid #4b4b4b;
     border-radius: 5px;
-    background-color: #232328;
     padding: 7px;
     margin: 0.5em;
 }
@@ -352,8 +350,8 @@ h1 {
 
 #game-role-info-container > div {
     width: 95%;
-    border: 1px solid #46455299;
-    background: #4645525c;
+    border: 1px solid #55555599;
+    background: #5555555c;
     padding: 5px;
     border-radius: 5px;
     margin-bottom: 5px;
@@ -379,8 +377,8 @@ h1 {
 }
 
 .player-option {
-    background-color: #4645525c;
-    border: 2px solid #46455299;
+    background-color: #5555555c;
+    border: 2px solid #55555599;
     color: #d7d7d7;
     display: flex;
     font-family: 'signika-negative', sans-serif !important;
@@ -544,6 +542,10 @@ h1 {
     overflow: hidden;
 }
 
+#game-role #role-name.evil {
+    color: #e15656 !important;
+}
+
 #role-image {
     user-select: none;
     -ms-user-select: none;
@@ -582,10 +584,8 @@ h1 {
     margin: 0.5em auto 0 auto;
     font-family: 'signika-negative', sans-serif;
     color: #d7d7d7;
-    font-size: 25px;
+    font-size: 30px;
     filter: drop-shadow(2px 2px 4px black);
-    border: 1px solid #46455299;
-    background: #4645525c;
     padding: 2px 10px;
     border-radius: 5px;
 }
@@ -628,8 +628,8 @@ h1 {
     align-items: center;
     justify-content: space-between;
     border-radius: 5px;
-    border: 1px solid #46455299;
-    background: #4645525c;
+    border: 1px solid #55555599;
+    background: #5555555c;
 }
 
 #client-name {
@@ -732,7 +732,7 @@ label[for='moderator'] {
 }
 
 #end-game-button, #leave-game-button {
-    background-color: #8a1c1c;
+    background-color: #832b2b;
 }
 
 #start-game-button:hover {
@@ -741,8 +741,8 @@ label[for='moderator'] {
 }
 
 #end-game-button:hover, #leave-game-button:hover {
-    background-color: #623232;
-    border: 3px solid #8a1c1c;
+    background-color: #832b2b8a;
+    border: 3px solid #832b2b;
 }
 
 #play-pause {
@@ -797,8 +797,8 @@ label[for='moderator'] {
     margin-bottom: 1em;
     padding: 0.5em;
     border-radius: 5px;
-    border: 1px solid #46455299;
-    background: #4645525c;
+    border: 1px solid #55555599;
+    background: #5555555c;
 }
 
 canvas {
@@ -854,7 +854,7 @@ canvas {
 }
 
 .kill-player-button:hover, .reveal-role-button:hover {
-    border: 3px solid #b1afcd;
+    border: 3px solid #c9c9c9;
 }
 
 #game-players-container {
@@ -942,8 +942,6 @@ canvas {
 }
 
 #game-parameters {
-    border: 1px solid #46455299;
-    background: #4645525c;
     border-radius: 5px;
     padding: 5px 20px;
 }
@@ -1004,8 +1002,8 @@ canvas {
     padding: 10px;
     border-radius: 5px;
     min-height: 25em;
-    border: 1px solid #46455299;
-    background: #4645525c;
+    border: 1px solid #55555599;
+    background: #5555555c;
     max-width: 35em;
     min-width: 19em;
     margin-top: 1em;
diff --git a/client/src/styles/hamburgers.css b/client/src/styles/hamburgers.css
index 11effbe..ff95766 100644
--- a/client/src/styles/hamburgers.css
+++ b/client/src/styles/hamburgers.css
@@ -28,7 +28,7 @@
 .hamburger.is-active .hamburger-inner,
 .hamburger.is-active .hamburger-inner::before,
 .hamburger.is-active .hamburger-inner::after {
-    background-color: #b1afcd; }
+    background-color: #c9c9c9; }
 
 .hamburger-box {
     width: 40px;
@@ -43,7 +43,7 @@
 .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
     width: 40px;
     height: 4px;
-    background-color: #b1afcd;
+    background-color: #c9c9c9;
     border-radius: 4px;
     position: absolute;
     transition-property: transform;
diff --git a/client/src/styles/home.css b/client/src/styles/home.css
index 583b8f3..bdac0f9 100644
--- a/client/src/styles/home.css
+++ b/client/src/styles/home.css
@@ -142,8 +142,8 @@ form > div {
 
 #join-container {
     max-width: 90%;
-    border: 1px solid #46455299;
-    background: #4645525c;
+    border: 1px solid #55555599;
+    background: #5555555c;
     padding: 0.5em;
     border-radius: 5px;
     margin: 20px
diff --git a/client/src/styles/join.css b/client/src/styles/join.css
index 452cb8d..49745cc 100644
--- a/client/src/styles/join.css
+++ b/client/src/styles/join.css
@@ -1,5 +1,5 @@
 #join-game-modal {
-    border-left: 5px solid #b1afcd;
+    border-left: 5px solid #c9c9c9;
     transform-origin: center;
     display: block;
     z-index: 1 !important;
@@ -22,7 +22,7 @@
     justify-content: center;
     padding: 5px;
     border-radius: 5px;
-    background-color: #4645525c;
+    background-color: #5555555c;
 }
 
 .modal-button-container > div > label {
diff --git a/client/src/styles/modal.css b/client/src/styles/modal.css
index e97f2da..7acecb8 100644
--- a/client/src/styles/modal.css
+++ b/client/src/styles/modal.css
@@ -58,7 +58,8 @@
 #custom-role-info-modal-image {
     margin: 0 auto;
     width: 200px;
-    background-color: #4645525c;
+    background-color: #5555555c;
+    border: 1px solid #55555599;
     border-radius: 5px;
 }
 
@@ -81,12 +82,12 @@
 
 #custom-role-info-modal-description {
     border-radius: 5px;
-    background-color: #4645525c;
+    background-color: #5555555c;
     max-height: 10em;
     overflow: auto;
     padding: 5px;
     margin-bottom: 2em;
-    border: 1px solid #46455299;
+    border: 1px solid #55555599;
 }
 
 #player-options-modal {
@@ -108,8 +109,8 @@
 
 #custom-role-info-modal-alignment {
     border-radius: 5px;
-    background-color: #4645525c;
-    border: 1px solid #46455299;
+    background-color: #5555555c;
+    border: 1px solid #55555599;
     font-size: 18px;
     font-weight: bold;
     padding: 5px;
diff --git a/client/src/views/home.html b/client/src/views/home.html
index 6b3a67c..e863999 100644
--- a/client/src/views/home.html
+++ b/client/src/views/home.html
@@ -60,7 +60,7 @@
         </div>
     </div>
     <footer id="footer">
-        <a href="https://www.buymeacoffee.com/alecm33"><img alt="Buy Me a Coffee" src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=alecm33&button_colour=333243&font_colour=ffffff&font_family=Lato&outline_colour=b1afcd&coffee_colour=b1afcd" /></a>
+        <a href="https://www.buymeacoffee.com/alecm33"><img alt="Buy Me a Coffee" src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=alecm33&button_colour=252525&font_colour=d7d7d7&font_family=Lato&outline_colour=d7d7d7&coffee_colour=d7d7d7" /></a>
         <div>
             <a aria-label="view the project on Github" href="https://github.com/AlecM33/Werewolf"><img alt="Github" src='/images/GitHub-Mark-Light-120px-plus.png'/></a>
             <a aria-label="email the creator with questions" href="mailto:play.werewolf.contact@gmail.com?Subject=Werewolf App" target="_top"><img alt="email" src='/images/email.svg'/></a>