Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 15:57:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

styling improvements to buttons/modals

Browse Source
This commit is contained in:
AlecM33
2023-01-29 12:31:22 -05:00
parent 35abebcb6b
commit 4d84b9c530
9 changed files with 44 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/modules/game_creation/GameCreationStepManager.js
View File

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

13
client/src/styles/GLOBAL.css
View File

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

11
client/src/styles/create.css
View File

@@ -568,6 +568,16 @@ input[type="number"] {
padding: 0 !important; padding: 0 !important;
width: 50px; width: 50px;
height: 44px; 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 { .tracker-placeholder {
@@ -583,7 +593,6 @@ input[type="number"] {
#step-back-button { #step-back-button {
left: 15%; left: 15%;
background-color: #762323;
} }
#step-1 div { #step-1 div {

9
client/src/styles/game.css
View File

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

7
client/src/styles/home.css
View File

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

14
client/src/styles/modal.css
View File

@@ -7,7 +7,7 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: #2d2c38; background-color: #16141e;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
max-width: 25em; max-width: 25em;
@@ -40,10 +40,6 @@
font-size: 16px; font-size: 16px;
} }
#close-modal-button {
background-color: #762323 !important;
}
.modal-button-container { .modal-button-container {
display: flex; display: flex;
width: 100%; width: 100%;
@@ -51,6 +47,14 @@
flex-direction: row; 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 { #custom-role-info-modal {
color: #d7d7d7; color: #d7d7d7;
text-align: left; text-align: left;

2
client/src/view_templates/CreateTemplate.js
View File

@@ -46,7 +46,7 @@ const template =
<div tabindex='-1' id='deck-template-modal' class='modal'> <div tabindex='-1' id='deck-template-modal' class='modal'>
<h2>Choose a pre-built game:</h2> <h2>Choose a pre-built game:</h2>
<div id='deck-template-container'></div> <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> <button id='close-deck-template-modal-button' class='cancel app-button'>Close</button>
</div> </div>
</div> </div>

12
package-lock.json generated
View File

@@ -6824,9 +6824,9 @@
} }
}, },
"node_modules/ua-parser-js": { "node_modules/ua-parser-js": {
"version": "0.7.31", "version": "0.7.33",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.33.tgz",
"integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==", "integrity": "sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@@ -12284,9 +12284,9 @@
} }
}, },
"ua-parser-js": { "ua-parser-js": {
"version": "0.7.31", "version": "0.7.33",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.33.tgz",
"integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==", "integrity": "sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==",
"dev": true "dev": true
}, },
"unbox-primitive": { "unbox-primitive": {

1
server/modules/singletons/EventManager.js
View File

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