web: full SmallDialog component, one flexible meowbalt component

- fully stylized small dialog: header, title, subtext, state without meowbalt
- moved meowbalt into his own adaptive component, no need to import/create new ones for each emotion
- better types for dialog related stuff
- type for meowbalt's emotions
- better padding in small dialog

web/src/routes/+layout.svelte

@@ -71,6 +71,9 @@
         --button-text: #282828;
         --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
 
+        --button-elevated: #e3e3e3;
+        --button-elevated-hover: #dadada;
+
         --popup-bg: #f1f1f1;
         --popup-backdrop: var(--primary);
         --popup-stroke: rgba(0, 0, 0, 0.08);
@@ -126,6 +129,9 @@
         --button-text: #e1e1e1;
         --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
 
+        --button-elevated: #282828;
+        --button-elevated-hover: #2f2f2f;
+
         --popup-bg: #191919;
         --popup-backdrop: var(--primary);
         --popup-stroke: rgba(255, 255, 255, 0.08);

web/src/routes/+page.svelte

@@ -2,7 +2,7 @@
     import { t } from "$lib/i18n/translations";
 
     import Omnibox from "$components/save/Omnibox.svelte";
-    import MeowbaltLoaf from "$components/meowbalt/MeowbaltLoaf.svelte";
+    import Meowbalt from "$components/misc/Meowbalt.svelte";
 </script>
 
 <svelte:head>
@@ -11,7 +11,7 @@
 
 <div id="cobalt-save-container" class="center-column-container">
     <main id="cobalt-save">
-        <MeowbaltLoaf />
+        <Meowbalt emotion="smile" />
         <Omnibox />
     </main>
     <div id="terms-note">