Update action snackbar design

public/static/css/buttons.scss

@@ -38,6 +38,11 @@
         --color-btn--active: var(--green-darken);
     }
 
+    &.btn-2--blue {
+        --color-btn: var(--blue);
+        --color-btn--active: var(--blue-darken);
+    }
+
     /* HTML STATES */
     &:hover:not(.btn-2--disabled):not(.btn-2--no-click):not(:disabled) {
         transform: scale(1.03);

src/Components/Helper/Snackbar.svelte

@@ -1,12 +1,12 @@
 <script>
-    import { slide } from 'svelte/transition';
+    import { fly } from 'svelte/transition';
 
     export let show = false;
 </script>
 
 {#if show}
-    <div class="snackbar" transition:slide={{duration: 200}}>
-        <div class="inner">
+    <div class="snackbar">
+        <div class="inner" transition:fly={{y: 50, duration: 200}}>
             <slot>
 
             </slot>
@@ -15,19 +15,17 @@
 {/if}
 <style>
     .snackbar {
-        position         : absolute;
-        bottom           : 0;
-        left             : 0;
-        width            : 100vw;
+        position        : absolute;
+        left            : 0;
+        bottom          : 0;
+        width           : 100vw;
 
-        z-index          : var(--z-index-snackbar);
+        z-index         : var(--z-index-snackbar);
 
-        padding          : 0 1rem 1rem;
+        display         : flex;
+        justify-content : center;
 
-        background-image : linear-gradient(to top, rgba(10, 10, 15, .5) 0%, transparent 100%);
-
-        display          : flex;
-        justify-content  : center;
+        overflow        : hidden;
     }
 
     .inner {
@@ -38,10 +36,11 @@
         width         : calc(100vw - 2rem);
 
         overflow      : hidden;
-        padding       : 1rem;
 
-        background    : var(--color-background-lighten);
-        border        : 1px solid var(--color-background-border);
-        border-radius : 5px;
+        background    : var(--color-background);
+        box-shadow    : 0 .1rem 1.5rem rgba(0, 0, 0, .5);
+        border-radius : .5rem;
+
+        margin        : 1rem;
     }
 </style>

src/Components/Snackbars/ActionSnackbar.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <Snackbar {...$$restProps}>
-    <div class="snackbar-content">
+    <div class={`snackbar-content snackbar-content--${action.getColor()}`}>
         <div class="icon">
             <div class={`btn btn--no-click btn--${action.getColor()}`}>
                 <i class={`uil uil-${action.getIcon()}`}></i>
@@ -21,38 +21,52 @@
 </Snackbar>
 
 <style>
+
+
     .snackbar-content {
-        display               : grid;
-        grid-template-rows    : minmax(3rem, max-content);
-        grid-template-columns : 3rem auto;
-        grid-template-areas   : "icon text";
-        grid-gap              : 1rem;
+        width    : 100%;
+        height   : 100%;
+
+        padding  : 1.2rem;
+
+        position : relative;
+        z-index  : 1;
     }
 
-    .snackbar-content .icon {
-        grid-area       : icon;
+    .snackbar-content--red {
+        background : var(--red-darken);
+    }
 
-        display         : flex;
-        justify-content : center;
-        align-items     : center;
+    .snackbar-content--green {
+        background : var(--green-darken);
     }
 
-    .snackbar-content .icon .btn {
-        width     : 3rem;
-        height    : 3rem;
+    .snackbar-content--blue {
+        background : var(--blue-darken);
+    }
 
-        font-size : 1.3em;
-        transform : none;
+    .snackbar-content--yellow {
+        background : var(--yellow-darken);
     }
 
-    .snackbar-content .text {
-        grid-area      : text;
+    .snackbar-content .icon {
+        font-size : 5rem;
+        color     : var(--color-text-translucent-2);
 
+        position  : absolute;
+        right     : -1rem;
+        bottom    : -1rem;
+        z-index   : -1;
+    }
+
+    .snackbar-content .text {
         display        : flex;
         flex-direction : column;
+        color          : var(--color-text-darken);
     }
 
     .snackbar-content .text h3 {
         margin : 0 0 .3rem;
+        color  : var(--color-text);
     }
 </style>

src/Pages/Hangman.svelte

@@ -2,17 +2,18 @@
     import { Game, GameTypeIdentifier } from '../utils/Game';
     import { GameState, isFinished }    from '../stores/state';
     import LetterKeyboard               from '../Components/Hangman/LetterKeyboard.svelte';
-    import Word                         from '../Components/Hangman/Word.svelte';
-    import Rounds                       from '../Components/Hangman/Rounds.svelte';
-    import WinPopup                     from '../Components/Popups/WinPopup.svelte';
-    import LosePopup                    from '../Components/Popups/LosePopup.svelte';
-    import LoaderPopup                  from '../Components/Popups/LoaderPopup.svelte';
-    import Actions                      from '../Components/Hangman/Actions.svelte';
-    import ActionSnackbar               from '../Components/Snackbars/ActionSnackbar.svelte';
-    import { getContext, onDestroy }    from 'svelte';
-    import OneVsOneResultPopup          from '../Components/Popups/OneVsOneResultPopup.svelte';
-    import { open as openPopup }        from '../Components/Popups/PopupOutlet.svelte';
-    import { get }                      from 'svelte/store';
+    import Word                      from '../Components/Hangman/Word.svelte';
+    import Rounds                    from '../Components/Hangman/Rounds.svelte';
+    import WinPopup                  from '../Components/Popups/WinPopup.svelte';
+    import LosePopup                 from '../Components/Popups/LosePopup.svelte';
+    import LoaderPopup               from '../Components/Popups/LoaderPopup.svelte';
+    import Actions                   from '../Components/Hangman/Actions.svelte';
+    import ActionSnackbar            from '../Components/Snackbars/ActionSnackbar.svelte';
+    import { getContext, onDestroy } from 'svelte';
+    import OneVsOneResultPopup       from '../Components/Popups/OneVsOneResultPopup.svelte';
+    import { open as openPopup }     from '../Components/Popups/PopupOutlet.svelte';
+    import { get }                   from 'svelte/store';
+    import { HideUsedAction }        from '../utils/Actions/Action/HideUsedAction';
 
     const user = getContext('user');
 

src/utils/Actions/Action/Action.ts

@@ -1,5 +1,5 @@
 export abstract class Action {
-    private ran: boolean = false;
+    private ran: boolean       = false;
     private roundsLeft: number = 0;
 
     /**
@@ -27,19 +27,19 @@ export abstract class Action {
      * True if the action was executed.
      */
     didRun() {
-        return this.ran
+        return this.ran;
     }
 
     /**
      * Execute action.
      */
     execute() {
         if (this.didRun() || !this.canRun()) {
-            throw new Error('Action is not allowed to be executed.')
+            throw new Error('Action is not allowed to be executed.');
         }
 
         this.roundsLeft = this._run();
-        this.ran = true;
+        this.ran        = true;
     }
 
     /**
@@ -70,7 +70,7 @@ export abstract class Action {
      * Get action color.
      */
     getColor(): string {
-        return 'red'
+        return 'yellow';
     }
 
     /**

src/utils/Actions/Action/HideLettersAction.ts

@@ -1,6 +1,6 @@
 import { lettersStore } from '../../../stores/letters';
 import { Action }       from './Action';
-import { Shuffler }     from "../../Shuffler";
+import { Shuffler }     from '../../Shuffler';
 
 export class HideLettersAction extends Action {
     getIcon(): string {
@@ -12,24 +12,28 @@ export class HideLettersAction extends Action {
             letters.forEach(letter => letter.resetLabel());
 
             return letters.sort((letter, other) => letter.compare(other));
-        })
+        });
     }
 
     protected _run(): number {
         lettersStore.modify(letters => {
             letters.forEach(letter => letter.setLabel('?'));
 
             return Shuffler.random(letters);
-        })
+        });
 
         return 1;
     }
 
     getName(): string {
-        return "Versteckte Buchstaben";
+        return 'Versteckte Buchstaben';
+    }
+
+    getColor(): string {
+        return 'red';
     }
 
     getDescription(): string {
-        return "Alle Buchstaben werden versteckt und vertauscht";
+        return 'Alle Buchstaben werden versteckt und vertauscht';
     }
 }

src/utils/Actions/Action/HideUsedAction.ts

@@ -19,14 +19,18 @@ export class HideUsedAction extends Action {
         lettersStore.modify(letters => {
             letters.forEach(letter => letter.setUseHidden(false));
             return letters;
-        })
+        });
+    }
+
+    getColor(): string {
+        return 'blue';
     }
 
     getName(): string {
-        return "Verstecke Benutzte";
+        return 'Verstecke Benutzte';
     }
 
     getDescription(): string {
-        return "Alle benutzten Buchstaben werden versteckt";
+        return 'Alle benutzten Buchstaben werden versteckt';
     }
 }

src/utils/Actions/Action/RandomLetterAction.ts

@@ -1,7 +1,7 @@
 import { Action }       from './Action';
 import { lettersStore } from '../../../stores/letters';
 import { get }          from 'svelte/store';
-import type { Letter }  from "../../Alphabet/Letter";
+import type { Letter }  from '../../Alphabet/Letter';
 
 export class RandomLetterAction extends Action {
 
@@ -11,10 +11,6 @@ export class RandomLetterAction extends Action {
         return 'plus-circle';
     }
 
-    getColor(): string {
-        return 'green'
-    }
-
     protected _run(): number {
         const unusedChars = get(lettersStore)
             .filter(letter => !letter.isUsed());
@@ -29,11 +25,15 @@ export class RandomLetterAction extends Action {
         // Do nothing
     }
 
+    getColor(): string {
+        return 'green';
+    }
+
     getName(): string {
-        return "Zufälliger Buchstabe";
+        return 'Zufälliger Buchstabe';
     }
 
     getDescription(): string {
-        return `Der Buchstabe <b>${this.randomChar.getLabel()}</b> wurde für dich aktiviert`;
+        return `Der Buchstabe <b>${ this.randomChar.getLabel() }</b> wurde für dich aktiviert`;
     }
 }