From 0a2e721cfcfdf97f07eaa8deda7dcee7c47f4313 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Fri, 27 Feb 2026 17:28:38 +0100
Subject: [PATCH] Minor UI component styling improvements

- Remove margin-right from SeasonedButton for better layout control
- Remove max-width constraint from SeasonedInput for full-width forms
- Simplify Toast component layout and remove unused icon section
- Improve toast text spacing and structure
---
 src/components/ui/SeasonedButton.vue |   1 -
 src/components/ui/SeasonedInput.vue  |   1 -
 src/plugins/Toast/ToastComponent.vue | 261 ++++++++++++++++-----------
 3 files changed, 156 insertions(+), 107 deletions(-)

diff --git a/src/components/ui/SeasonedButton.vue b/src/components/ui/SeasonedButton.vue
index 2f82c50..3f616a6 100644
--- a/src/components/ui/SeasonedButton.vue
+++ b/src/components/ui/SeasonedButton.vue
@@ -37,7 +37,6 @@
     min-height: 45px;
     padding: 5px 10px 4px 10px;
     margin: 0;
-    margin-right: 0.3rem;
     color: $text-color;
     background: $background-color-secondary;
     cursor: pointer;
diff --git a/src/components/ui/SeasonedInput.vue b/src/components/ui/SeasonedInput.vue
index bba9a1c..9d32a1f 100644
--- a/src/components/ui/SeasonedInput.vue
+++ b/src/components/ui/SeasonedInput.vue
@@ -81,7 +81,6 @@
     display: flex;
     width: 100%;
     position: relative;
-    max-width: 35rem;
     border: 1px solid var(--text-color-50);
     background-color: var(--background-color-secondary);
 
diff --git a/src/plugins/Toast/ToastComponent.vue b/src/plugins/Toast/ToastComponent.vue
index 57fc12d..662046d 100644
--- a/src/plugins/Toast/ToastComponent.vue
+++ b/src/plugins/Toast/ToastComponent.vue
@@ -3,22 +3,19 @@
   <transition name="slide">
     <div v-if="show" class="toast" :class="type || 'info'" @click="clicked">
       <div class="toast--content">
-        <div class="toast--icon">
-          <i v-if="image"
-            ><img class="toast--icon-image" :src="image" alt="Toast icon"
-          /></i>
-        </div>
         <div v-if="description" class="toast--text">
           <span class="toast--text__title">{{ title }}</span>
-          <br /><span
-            class="toast--text__description"
-            v-html="description"
-          ></span>
+          <span class="toast--text__description" v-html="description"></span>
         </div>
+
         <div v-else class="toast--text">
           <span class="toast--text__title-large">{{ title }}</span>
         </div>
 
+        <div class="toast--dismiss" @click.stop="dismiss">
+          <i class="fas fa-times"></i>
+        </div>
+
         <div class="toast--dismiss" @click="dismiss">
           <i class="fas fa-times"></i>
         </div>
@@ -65,107 +62,161 @@
 </script>
 
 <style lang="scss" scoped>
-  // @import '@/scss/variables.scss';
+/* ------------------------------
+   Transition
+------------------------------ */
 
-  .slide-enter-active {
-    transition: all 0.3s ease;
-  }
-  .slide-enter,
-  .slide-leave-to {
-    transform: translateY(100vh);
-    opacity: 0;
-  }
-  .slide-leave-active {
-    transition: all 2s ease;
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateY(40px);
+  opacity: 0;
+}
+
+/* ------------------------------
+   Toast
+------------------------------ */
+
+.toast {
+  position: fixed;
+  right: 1.25rem;
+  bottom: 1.25rem;
+  z-index: 1000;
+  cursor: pointer;
+
+  min-width: 340px;
+  max-width: 460px;
+  width: calc(100vw - 2rem);
+
+  padding: 1.1rem 1.25rem;
+
+  border-radius: 16px;
+
+  /* System-based surface */
+  background: var(--background-color-secondary);
+
+  /* Subtle separation */
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+  /* Clear state indicator */
+  border-left: 5px solid transparent;
+
+  /* Base text tone */
+  color: var(--text-color, #1f2937);
+
+  line-height: 1.5;
+
+  /* ------------------------------
+     Content Layout
+  ------------------------------ */
+
+  &--content {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
   }
 
-  .toast--icon-image {
-    height: 100%;
-    width: 100%;
-    max-height: 45px;
-    max-width: 45px;
+  &--text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
   }
 
+  /* ------------------------------
+     Typography Hierarchy
+  ------------------------------ */
+
+  /* Context label */
+  &--text__title {
+    font-size: 0.85rem;
+    font-weight: 500;
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
+
+    /* Softer than body but not faded */
+    color: color-mix(in srgb, currentColor 75%, transparent);
+  }
+
+  /* Primary message */
+  &--text__description {
+    margin-top: 0.3rem;
+    font-size: 0.98rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: currentColor;
+  }
+
+  &--text__title-large {
+    font-size: 1.15rem;
+    font-weight: 500;
+  }
+
+  /* ------------------------------
+     Dismiss Button
+  ------------------------------ */
+
+  &--dismiss {
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 30px;
+    height: 30px;
+
+    border-radius: 8px;
+
+    transition: background 0.2s ease;
+
+    &:hover {
+      background: var(--background-color);
+    }
+
+    i {
+      font-size: 0.75rem;
+    }
+  }
+
+  /* ------------------------------
+     State Colors
+  ------------------------------ */
+
+  &.success {
+    border-left-color: #22c55e;
+  }
+
+  &.info {
+    border-left-color: #facc15;
+  }
+
+  &.warning {
+    border-left-color: #f97316;
+  }
+
+  &.error {
+    border-left-color: #ef4444;
+  }
+
+  &.simple {
+    border-left-color: transparent;
+  }
+}
+
+/* ------------------------------
+   Mobile
+------------------------------ */
+
+@media (max-width: 480px) {
   .toast {
-    position: fixed;
-    bottom: 0.5rem;
-    cursor: pointer;
-    z-index: 100;
-
-    background-color: white;
-    border-radius: 3px;
-    box-shadow:
-      0 4px 8px 0 rgba(0, 0, 0, 0.17),
-      0 2px 4px 0 rgba(0, 0, 0, 0.08);
-    padding: 0.5rem;
-    margin: 1rem 2rem 1rem 0.71rem;
-    // max-width: calc(100% - 3rem);
-    min-width: 320px;
-
-    // If small screen we have a min-width that is related to the screen size.
-    // else large screens we want a max-width that only uses the space in bottom right
-
-    right: 0;
-    line-height: 22.5px;
-
-    &--content {
-      display: flex;
-      align-items: center;
-    }
-
-    &--icon {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      text-align: center;
-    }
-
-    &--text {
-      margin-left: 0.5rem;
-      // color: $bt-brown;
-      color: black;
-      word-wrap: break-word;
-
-      &__title {
-        text-transform: capitalize;
-        font-weight: 400;
-
-        &-large {
-          font-size: 2rem;
-        }
-      }
-
-      &__description {
-        font-weight: 300;
-      }
-    }
-
-    &--dismiss {
-      align-self: flex-end;
-
-      img {
-        width: 2.5rem;
-      }
-    }
-
-    &.success {
-      border-left: 6px solid #38c172;
-    }
-
-    &.info {
-      border-left: 6px solid #ffd300;
-    }
-
-    &.warning {
-      border-left: 6px solid #f6993f;
-    }
-
-    &.error {
-      border-left: 6px solid #e3342f;
-    }
-
-    &.simple {
-      border-left: unset;
-    }
+    right: 1rem;
+    left: 1rem;
+    width: auto;
+    min-width: unset;
   }
+}
 </style>