Merge branch 'develop' into SP24-688-fix-your-drawing-looked-like

computas · Jul 24, 2024 · 6576fa9 · 6576fa9
2 parents 9fd263b + fb9f6d4
commit 6576fa9
Show file tree

Hide file tree

Showing 36 changed files with 451 additions and 439 deletions.
diff --git a/src/app/game/game-draw/game-draw.component.html b/src/app/game/game-draw/game-draw.component.html
@@ -7,8 +7,8 @@
           [pointerSide]="PointerSide.Left"
           [arrowAlignment]="ArrowAlignment.Center"
           [isFlipped]="false"
-          [textColor]="CustomColorsIO.black"
-          [bubbleColor]="CustomColorsIO.pastelBlue"
+          [textColor]="CustomColorsIO.white"
+          [bubbleColor]="CustomColorsIO.blue"
           [bubbleSize]="'small'"
         >
           <p slot="body-alt">
@@ -23,7 +23,7 @@
           [arrowAlignment]="ArrowAlignment.Center"
           [isFlipped]="false"
           [textColor]="CustomColorsIO.white"
-          [bubbleColor]="CustomColorsIO.indigo"
+          [bubbleColor]="CustomColorsIO.purple"
           [bubbleSize]="'small'"
         >
           <p id="guessText" slot="body-alt">

diff --git a/src/app/game/game-draw/game-draw.component.scss b/src/app/game/game-draw/game-draw.component.scss
@@ -36,7 +36,7 @@ span {
 
 #timerContainer {
   position: absolute;
-  color: $text_darker_grey;
+  color: $darker_grey_color;
 
   right: 2vw;
   margin-top: 3vh;
@@ -108,8 +108,8 @@ span {
   padding-right: 20px;
   border-radius: 50px;
 
-  background-color: #ffd6d6;
-  color: $negative_feedback_color_bright;
+  background-color: $light_red_color;
+  color: $red_color;
 
   #buttonContent {
     display: flex;

diff --git a/src/app/game/game-info/game-info.component.scss b/src/app/game/game-info/game-info.component.scss
@@ -8,7 +8,7 @@
 }
 .game-info-text-header {
   font-family: AeonikBlack;
-  color: $text_primary_color;
+  color: $white_color;
   text-align: center;
   font-size: 34px;
   font-weight: 500;
@@ -61,7 +61,7 @@
   }
 }
 .game-info-text-list {
-  color: $text_primary_color;
+  color: $white_color;
 }
 .game-info-text-list > li {
   font-size: 24px;
@@ -103,8 +103,8 @@
   }
 }
 #get-word-button {
-  background: $button_background_color;
-  color: $button_content_color;
+  background: $white_color;
+  color: $dark_blue_color;
   float: right;
 }
 @media (min-width: 600px) {
@@ -113,8 +113,8 @@
   }
 }
 #back-button {
-  background: $button_background_color;
-  color: $button_content_color;
+  background: $white_color;
+  color: $dark_blue_color;
 }
 .button-text {
   display: flex;
@@ -123,7 +123,7 @@
   align-items: center;
 }
 .button-icon {
-  color: $button_content_color;
+  color: $dark_blue_color;
   margin-right: 16px;
   font-size: 36px !important;
   height: 36px;
@@ -135,16 +135,16 @@
   display: flex;
   align-items: center;
   font-weight: 500;
-  color: $text_primary_color;
+  color: $white_color;
 }
 .player-mode > .material-icons {
   margin-right: 5px;
-  background: linear-gradient(to top, #2514d1 0%, #f14a64 55%, #de7d6e 90%);
+  background: $icon_gradient;
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 .play_arrow {
-  color: $button_content_color;
+  color: $dark_blue_color;
   margin-right: 0px;
   margin-left: 45px;
 }
diff --git a/...pp/game/game-intermediate-result/game-drawing-display/game-drawing-display.component.scss b/...pp/game/game-intermediate-result/game-drawing-display/game-drawing-display.component.scss
@@ -8,7 +8,7 @@
 }
 
 .user-drawing-board {
-  border-radius: 0.6em;
+  border-radius: 1em;
   padding: 0.4em; // this is what controls the width of the border
   background-color: white;
   width: 390px;
@@ -19,7 +19,7 @@
   height: 100%;
   width: 100%;
   background: white;
-  border-radius: 0.3em;
+  border-radius: 1em;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -31,11 +31,11 @@
 }
 
 .correct {
-  background-color: $positive_feedback_color;
+  background-color: $green_color;
 }
 
 .incorrect {
-  background-color: $negative_feedback_color;
+  background-color: $red_color;
 }
 
 .score-and-time-container {
@@ -50,14 +50,14 @@
 
 .round-score-text {
   margin-left: auto; // this pushes points to right when the second counter isn't displayed
-  font-family: 'AeonikBold';
+  font-family: 'AeonikMedium';
   font-size: var(--fontSizeMedium);
 }
 
 .green-text {
-  color: $positive_feedback_color;
+  color: $green_color;
 }
 
 .red-text {
-  color: $negative_feedback_color;
+  color: $red_color;
 }
diff --git a/.../game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.html b/.../game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.html
@@ -6,7 +6,7 @@
     [arrowAlignment]="ArrowAlignment.Center"
     [isFlipped]="false"
     [textColor]="CustomColorsIO.white"
-    [bubbleColor]="CustomColorsIO.iColor"
+    [bubbleColor]="CustomColorsIO.purple"
     [bubbleSize]="'small'"
   >
     <h2 slot="body-alt" class="feedback-title">{{ feedbackTitleKey | translate }}</h2>

diff --git a/.../game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.scss b/.../game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.scss
@@ -19,7 +19,7 @@
 }
 
 .feedback-title {
-  font-family: AeonikBlack;
+  font-family: AeonikBold;
   font-size: var(--fontSizeMedium);
 }
 

diff --git a/...game-intermediate-result/game-example-drawings/correct-guess/correct-guess.component.html b/...game-intermediate-result/game-example-drawings/correct-guess/correct-guess.component.html
@@ -5,7 +5,7 @@
     [arrowAlignment]="ArrowAlignment.Center"
     [isFlipped]="true"
     [textColor]="CustomColorsIO.white"
-    [bubbleColor]="CustomColorsIO.oColor"
+    [bubbleColor]="CustomColorsIO.blue"
     [bubbleSize]="'medium'"
   >
     <p slot="body-alt" class="speech-bubble-text">

diff --git a/...game-intermediate-result/game-example-drawings/correct-guess/correct-guess.component.scss b/...game-intermediate-result/game-example-drawings/correct-guess/correct-guess.component.scss
@@ -18,7 +18,7 @@
   display: flex;
   list-style: none;
   gap: 3em;
-  margin-top: 2em;
+  margin-top: 1.5em;
 }
 
 .example-drawing-li {

diff --git a/...ame/game-intermediate-result/game-example-drawings/wrong-guess/wrong-guess.component.html b/...ame/game-intermediate-result/game-example-drawings/wrong-guess/wrong-guess.component.html
@@ -7,7 +7,7 @@
     [arrowAlignment]="ArrowAlignment.Center"
     [isFlipped]="true"
     [textColor]="CustomColorsIO.white"
-    [bubbleColor]="CustomColorsIO.oColor"
+    [bubbleColor]="CustomColorsIO.blue"
     [bubbleSize]="'small'"
     [hidePointer]="true"
   >
@@ -30,7 +30,7 @@
     [arrowAlignment]="ArrowAlignment.Top"
     [isFlipped]="true"
     [textColor]="CustomColorsIO.white"
-    [bubbleColor]="CustomColorsIO.oColor"
+    [bubbleColor]="CustomColorsIO.blue"
     [bubbleSize]="'small'"
   >
     <p slot="body-alt" class="speech-bubble-text">

diff --git a/...ame/game-intermediate-result/game-example-drawings/wrong-guess/wrong-guess.component.scss b/...ame/game-intermediate-result/game-example-drawings/wrong-guess/wrong-guess.component.scss
@@ -1,3 +1,4 @@
+@import './../../../../../variables.scss';
 .drawing-container {
   display: flex;
   gap: 1em;
@@ -8,13 +9,14 @@
   display: block;
   font-family: 'AeonikMedium';
   text-transform: uppercase;
+  line-height: normal;
 }
 
 .example-drawings-list {
   display: flex;
   list-style: none;
-  gap: 2em;
-  margin-top: 2em;
+  gap: 1.5em;
+  margin-top: 1em;
 }
 
 .example-drawing-li {

diff --git a/...ate-result/game-intermediate-result-footer/game-intermediate-result-footer.component.scss b/...ate-result/game-intermediate-result-footer/game-intermediate-result-footer.component.scss
@@ -12,7 +12,7 @@ footer {
   padding: 0.5em;
   border-radius: var(--buttonBorderRadius);
   border: 3px solid white;
-  background: linear-gradient(90deg, #151cdb 0%, #6b2eac 25%, #fd595d 50%, #bea97e 75%, #1bc0d2 100%);
+  background: $full_gradient;
 }
 
 .disabled {
@@ -24,13 +24,13 @@ footer {
   cursor: inherit;
   padding: 0.1em 0.5em;
   background-color: rgba(0, 0, 0, 0.3);
-  color: $text_primary_color;
+  color: $white_color;
   font-size: var(--fontSizeSmall);
   border-radius: var(--buttonBorderRadius);
 }
 .button-container:hover {
   text-decoration: none;
-  color: #fff;
+  color: $white_color;
 }
 .button-container:before {
   position: absolute;

diff --git a/...lt/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.scss b/...lt/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.scss
@@ -28,11 +28,11 @@
   height: 3.5rem;
   margin-bottom: 1rem;
   width: 13rem;
-  background: $button_background_color;
+  background: $white_color;
 }
 
 .confirmExitIdleButton :focus {
-  background-color: $button_background_color;
+  background-color: $white_color;
 }
 
 #exitGameActions {
@@ -44,18 +44,18 @@
 }
 
 #confirmExitHomeButtonText {
-  color: $button_background_color;
+  color: $white_color;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
 }
 #confirmExitIdleButtonIcon {
-  color: $button_background_color;
+  color: $white_color;
   margin-right: 0.5rem;
   height: var(--fontSizeSmall);
 }
 
 #confirmExitHomeButton {
-  background-color: #ff2f2f;
+  background-color: $red_color;
 }
diff --git a/...ate-result/game-intermediate-result-header/game-intermediate-result-header.component.scss b/...ate-result/game-intermediate-result-header/game-intermediate-result-header.component.scss
@@ -18,9 +18,9 @@
   justify-content: center;
   align-items: center;
   padding: 0.2em 0.8em;
-  border: 1px solid white;
-  background: black;
-  color: white;
+  border: 1px solid $white_color;
+  background: $black_color;
+  color: $white_color;
   font-family: 'AeonikLight';
   font-size: var(--fontSizeSmall);
   border-radius: 5rem;
@@ -29,12 +29,12 @@
 
 .home-btn:hover {
   background: #eee;
-  color: black;
+  color: $black_color;
 }
 
 .home-btn:active {
   background: #ddd;
-  color: black;
+  color: $black_color;
 }
 
 .home-icon {

diff --git a/src/app/game/game-intermediate-result/game-intermediate-result.component.scss b/src/app/game/game-intermediate-result/game-intermediate-result.component.scss
@@ -5,7 +5,7 @@
   grid-template-rows: 10vh 44vh 34vh 12vh;
   grid-template-columns: repeat(12, 1fr);
   position: relative;
-  color: $text_primary_color;
+  color: $white_color;
   padding: 0.6em 1.2em;
   min-height: 100vh;
 }
@@ -37,7 +37,7 @@
 
 .guessed-word {
   font-family: AeonikBlack;
-  color: $text_secondary_color;
+  color: $white_color;
 }
 
 .example-drawings {

diff --git a/src/app/game/game-multiplayer/lobby/lobby.component.scss b/src/app/game/game-multiplayer/lobby/lobby.component.scss
@@ -12,7 +12,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: $text_primary_color;
+  color: $white_color;
 }
 
 #topContent {
@@ -30,8 +30,8 @@
 }
 
 #homeButton {
-  background: $button_background_color;
-  color: $button_content_color;
+  background: $white_color;
+  color: $dark_blue_color;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
   font-size: var(--fontSizeSmall);
   border-radius: 5rem;
@@ -48,7 +48,7 @@
 }
 
 .buttonIcon {
-  color: $button_content_color;
+  color: $dark_blue_color;
   margin-right: 1rem;
   font-size: var(--fontSizeSmall);
 }
@@ -103,7 +103,7 @@
 }
 
 .check-icon {
-  color: #3cbd05;
+  color: $green_color;
   margin-top: 30px;
   font-size: var(--fontSizeLarge);
 }
diff --git a/src/app/game/game-multiplayer/lobby/lobby.component.ts b/src/app/game/game-multiplayer/lobby/lobby.component.ts
@@ -41,8 +41,8 @@ export class LobbyComponent implements OnInit, OnDestroy {
 
   //Setting the colors of I
   colorOfI = CustomColorsIO.white;
-  bubbleColorI = CustomColorsIO.pastelBlue;
-  textColorI = CustomColorsIO.black;
+  bubbleColorI = CustomColorsIO.purple;
+  textColorI = CustomColorsIO.white;
 
   constructor(
     private gameStateService: GameStateService,

diff --git a/src/app/game/game-pick-difficulty/game-pick-difficulty.component.html b/src/app/game/game-pick-difficulty/game-pick-difficulty.component.html
@@ -18,7 +18,7 @@
             [arrowAlignment]="ArrowAlignment.Right"
             [isFlipped]="false"
             [textColor]="CustomColorsIO.white"
-            [bubbleColor]="CustomColorsIO.indigo"
+            [bubbleColor]="CustomColorsIO.blue"
             [bubbleSize]="'medium'"
             [bodyText]="'DIFFICULTY_MOTIVATION' | translate"
           >