Merge pull request #179 from AlecM33/color-consistency

more consistent colors, change global color for evil alignment
AlecM33 · Sep 10, 2023 · df56da1 · df56da1
2 parents 95f2148 + 43a7205
commit df56da1
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 54 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -60,7 +60,7 @@ <h2>Create your own game with default or custom roles.</h2>
         </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>