Merge pull request #149 from AlecM33/styling-improvements

Styling improvements

client/src/modules/game_creation/GameCreationStepManager.js

@@ -467,7 +467,6 @@ function showButtons (back, forward, forwardHandler, backHandler, builtGame = nu
         backButton.innerHTML = '<img alt="back" src="../../images/caret-back.svg"/>';
         backButton.addEventListener('click', backHandler);
         backButton.setAttribute('id', 'step-back-button');
-        backButton.classList.add('cancel');
         backButton.classList.add('app-button');
         document.getElementById('tracker-container').prepend(backButton);
     }

client/src/styles/GLOBAL.css

@@ -223,12 +223,12 @@ button {
 .app-button, input[type="submit"] {
     font-family: 'signika-negative', sans-serif !important;
     padding: 10px;
-    background-color: #13762b;
+    background-color: #1a7a31;
     border-radius: 5px;
     color: #e7e7e7;
     font-size: 18px;
     cursor: pointer;
-    border: 2px solid transparent;
+    border: 2px solid #0c541d;
     text-shadow: 0 3px 4px rgb(0 0 0 / 55%);
 }
 
@@ -237,12 +237,13 @@ button {
 }
 
 .cancel {
-    background-color: #762323 !important;
+    background-color: #7a1a1a !important;
+    border: 2px solid #540c0c !important;
 }
 
 .cancel:hover {
     background-color: #623232 !important;
-    border: 2px solid #8a1c1c !important;
+    border: 2px solid #7a1a1a !important;
 }
 
 .submitted {
@@ -269,7 +270,7 @@ button {
 
 .app-button:hover, input[type="submit"]:hover, #game-link:hover {
     background-color: #326243;
-    border: 2px solid #1c8a36;
+    border: 2px solid #1a7a31;
 }
 
 .emphasized {
@@ -349,7 +350,7 @@ input {
     align-items: center;
     padding: 5px 0;
     width: 100%;
-    background-color: #1e1b26;
+    background-color: #16141e;
     height: 45px;
     z-index: 53000;
 }

client/src/styles/create.css

@@ -568,6 +568,16 @@ input[type="number"] {
     padding: 0 !important;
     width: 50px;
     height: 44px;
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    border: 2px solid #56565673;
+}
+
+#step-forward-button:hover, #step-back-button:hover {
+    background-color: #545454 !important;
+    border: 2px solid #646464 !important;
 }
 
 .tracker-placeholder {
@@ -583,7 +593,6 @@ input[type="number"] {
 
 #step-back-button {
     left: 15%;
-    background-color: #762323;
 }
 
 #step-1 div {

client/src/styles/game.css

@@ -69,6 +69,7 @@
 
 #restart-game-button, #mod-transfer-button {
     background-color: #045EA6;
+    border: 2px solid #024070;
 }
 
 #restart-game-button:hover, #mod-transfer-button:hover {
@@ -216,6 +217,11 @@ h1 {
 
 #game-role-info-container > div {
     width: 95%;
+    border: 1px solid #46455299;
+    background: #4645523b;
+    padding: 5px;
+    border-radius: 5px;
+    margin-bottom: 5px;
 }
 
 #transfer-mod-modal-content {
@@ -234,12 +240,9 @@ h1 {
 }
 
 #game-role-info-container .role-info-name {
-    padding: 5px;
     border-radius: 5px;
     font-size: 20px;
     font-family: signika-negative, sans-serif;
-    margin: 0.5em 0;
-    background-color: #171522;
 }
 
 #role-info-modal h2 {

client/src/styles/home.css

@@ -61,7 +61,7 @@ button#home-create-button {
     justify-content: center;
     align-items: center;
     width: 100%;
-    background-color: #1e1b26;
+    background-color: #16141e;
 }
 
 form {
@@ -125,10 +125,11 @@ form > div {
 
 #join-container {
     max-width: 90%;
-    background-color: #0f0f10;
+    border: 1px solid #46455299;
+    background: #4645523b;
     padding: 0.5em;
     border-radius: 5px;
-    margin: 20px;
+    margin: 20px
 }
 
 #join-container > label {

client/src/styles/modal.css

@@ -7,7 +7,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: #2d2c38;
+    background-color: #16141e;
     align-items: center;
     justify-content: center;
     max-width: 25em;
@@ -40,10 +40,6 @@
     font-size: 16px;
 }
 
-#close-modal-button {
-    background-color: #762323 !important;
-}
-
 .modal-button-container {
     display: flex;
     width: 100%;
@@ -51,6 +47,14 @@
     flex-direction: row;
 }
 
+.modal-button-container .app-button, .modal-button-container input[type="submit"] {
+    min-width: 6em;
+}
+
+.single-button {
+    justify-content: center;
+}
+
 #custom-role-info-modal {
     color: #d7d7d7;
     text-align: left;

client/src/view_templates/CreateTemplate.js

@@ -39,14 +39,14 @@ const template =
         <div id="custom-role-info-modal-alignment"></div>
         <label for="custom-role-info-modal-alignment">description:</label>
         <div id="custom-role-info-modal-description"></div>
-        <div class="modal-button-container">
+        <div class="modal-button-container single-button">
             <button id="close-custom-role-info-modal-button" class="cancel app-button">Close</button>
         </div>
     </div>
     <div tabindex='-1' id='deck-template-modal' class='modal'>
         <h2>Choose a pre-built game:</h2>
         <div id='deck-template-container'></div>
-        <div class='modal-button-container'>
+        <div class='modal-button-container single-button'>
             <button id='close-deck-template-modal-button' class='cancel app-button'>Close</button>
         </div>
     </div>

server/modules/singletons/EventManager.js

@@ -31,6 +31,7 @@ class EventManager {
             });
         this.publisher.on('error', (e) => {
             this.logger.error('REDIS PUBLISHER CLIENT ERROR:', e);
+            throw new Error('UNABLE TO CREATE PUBLISHER CLIENT because: ' + e);
         });
         try {
             await this.publisher.connect();