Dynamfit revamp

.gitattributes

@@ -0,0 +1,7 @@
+# Default: let git normalize text, store LF in the repo
+* text=auto
+
+# Files executed in Linux containers / WSL — must be LF or the shebang breaks
+*.sh        text eol=lf
+.husky/**   text eol=lf
+install     text eol=lf

app/src/assets/css/modules/_button.scss

@@ -185,3 +185,8 @@ a.btn-text,
     color: #fff !important;
   }
 }
+
+a.disabled {
+  pointer-events: none;
+  cursor: default;
+}

app/src/assets/css/modules/_tools.scss

@@ -385,4 +385,91 @@
       min-height: 20vh;
     }
   }
+
+  &-separator {
+    border: none;
+    border-top: 1px solid $secondary-grey;
+    margin: 2.4rem 0 1.2rem;
+  }
+
+  &-toggle {
+    display: inline-flex;
+    border: 1px solid $primary;
+    border-radius: 3px;
+    overflow: hidden;
+
+    @include respond(phone) {
+      display: flex;
+      width: 100%;
+    }
+
+    &__option {
+      padding: 0.8rem 2.4rem;
+      font-size: $medium-size;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+      color: $primary;
+      background-color: $primary-white;
+      border: none;
+      outline: none;
+
+      @include respond(phone) {
+        flex: 1;
+        text-align: center;
+      }
+
+      &--active {
+        background-color: $primary;
+        color: $primary-white;
+      }
+
+      &:not(:last-child) {
+        border-right: 1px solid $primary;
+      }
+    }
+  }
+
+  &-readonly {
+    display: flex;
+    align-items: center;
+    padding: 0.4rem 0.8rem;
+    background-color: rgba($secondary-light, 0.3);
+    border-left: 3px solid $secondary;
+    border-radius: 0 3px 3px 0;
+    font-size: $small-size;
+
+    &__label {
+      font-weight: 700;
+      color: $primary;
+      margin-right: 0.4rem;
+    }
+
+    &__value {
+      color: $primary-grey;
+    }
+  }
+
+  &-field--half {
+    max-width: 40% !important;
+
+    @include respond(phone) {
+      max-width: 100% !important;
+    }
+  }
+
+  &-shift-upload {
+    border: 2px dashed $secondary-grey;
+    border-radius: 3px;
+    padding: 1.2rem;
+    margin-bottom: 1.5rem;
+    text-align: center;
+
+    &__label {
+      font-size: $small-size;
+      font-weight: 500;
+      color: $primary;
+      margin-bottom: 0.6rem;
+    }
+  }
 }

app/src/components/Snackbar.vue

@@ -2,7 +2,7 @@
   <div>
     <md-snackbar
       :md-position="position"
-      :md-duration="!snackbar?.duration ? Infinity : snackbar.duration"
+      :md-duration="snackbarDuration"
       class="md-snackbar-adjust"
       v-model:mdActive="show"
     >
@@ -57,6 +57,19 @@ const snackbar = computed(
     }
 );
 
+// Error snackbars linger long enough to read the (often multi-word) backend
+// error text; success/info toasts keep their own short duration. A falsy
+// duration still means "persistent" (Infinity; dismissed via the Retry action
+// or a route change), so retryable errors with an action stay until acted on.
+const ERROR_MIN_MS = 8000;
+const snackbarDuration = computed(() => {
+  const s = snackbar.value;
+  if (!s?.duration) return Infinity;
+  return s.type === 'error'
+    ? Math.max(s.duration as number, ERROR_MIN_MS)
+    : (s.duration as number);
+});
+
 // Methods
 const resetSnackbar = () => {
   show.value = false;