♻️ Update onboarding modals

frontend/src/app/main/ui/components/color_bullet_new.scss

@@ -71,7 +71,7 @@
 
 .color-text {
   @include twoLineTextEllipsis;
-  @include titleTipography;
+  @include bodyMedTipography;
   width: $s-80;
   text-align: center;
   margin-top: $s-2;

frontend/src/app/main/ui/components/context_menu_a11y.scss

@@ -46,7 +46,7 @@
     .context-menu-item {
       display: flex;
       .context-menu-action {
-        @include titleTipography;
+        @include bodyMedTipography;
         display: flex;
         align-items: center;
         justify-content: flex-start;

frontend/src/app/main/ui/components/editable_label.scss

@@ -8,7 +8,7 @@
 
 .editable-label-input {
   @include textEllipsis;
-  @include titleTipography;
+  @include bodyMedTipography;
   @include removeInputStyle;
   flex-grow: 1;
   height: $s-28;

frontend/src/app/main/ui/components/forms.cljs

@@ -214,7 +214,7 @@
        [:span {:class (stl/css :hint)} hint])]))
 
 (mf/defc select
-  [{:keys [options disabled form default] :as props
+  [{:keys [options disabled form default dropdown-class] :as props
     :or {default ""}}]
   (let [input-name (get props :name)
         form       (or form (mf/use-ctx form-ctx))
@@ -230,6 +230,7 @@
       {:default-value value
        :disabled disabled
        :options options
+       :dropdown-class dropdown-class
        :on-change handle-change}]]))
 
 (mf/defc radio-buttons
@@ -244,6 +245,7 @@
         on-change     (unchecked-get props "on-change")
         options       (unchecked-get props "options")
         trim?         (unchecked-get props "trim")
+        class         (unchecked-get props "class")
         encode-fn     (d/nilv (unchecked-get props "encode-fn") identity)
         decode-fn     (d/nilv (unchecked-get props "decode-fn") identity)
 
@@ -258,31 +260,39 @@
 
              (when (fn? on-change)
                (on-change name value)))))]
-    [:div {:class (stl/css :custom-radio)}
-     (for [{:keys [image value label]} options]
+    [:div {:class (dm/str class " " (stl/css :custom-radio))}
+     (for [{:keys [image icon value label area]} options]
        (let [image?   (some? image)
+             icon?    (some? icon)
              value'   (encode-fn value)
              checked? (= value current-value)
              key      (str/ffmt "%-%" (d/name name) (d/name value'))]
          [:label {:for key
                   :key key
-                  :style {:background-image (when image? (str/ffmt "url(%)" image))}
+                  :style {:grid-area area}
                   :class (stl/css-case :radio-label true
                                        :global/checked checked?
-                                       :with-image image?)}
+                                       :with-image (or image? icon?))}
+          (cond
+            image?
+            [:span {:style {:background-image (str/ffmt "url(%)" image)}
+                    :class (stl/css :image-inside)}]
+            icon?
+            [:span {:class (stl/css :icon-inside)} icon]
+
+            :else
+            [:span {:class (stl/css-case :radio-icon true
+                                         :global/checked checked?)}
+             (when checked? [:span {:class (stl/css :radio-dot)}])])
+
+          label
           [:input {:on-change on-change'
                    :type "radio"
                    :class (stl/css :radio-input)
                    :id key
                    :name name
                    :value value'
-                   :checked checked?}]
-          (when (not image?)
-            [:span {:class (stl/css-case :radio-icon true
-                                         :global/checked checked?)}
-             (when checked? [:span {:class (stl/css :radio-dot)}])])
-
-          label]))]))
+                   :checked checked?}]]))]))
 
 (mf/defc submit-button*
   {::mf/wrap-props false}

frontend/src/app/main/ui/components/forms.scss

@@ -12,46 +12,6 @@
   flex-direction: column;
   align-items: center;
   position: relative;
-  .input-with-label {
-    @include flexColumn;
-    gap: $s-8;
-    @include titleTipography;
-    justify-content: flex-start;
-    align-items: flex-start;
-    height: 100%;
-    width: 100%;
-    padding: 0;
-    cursor: pointer;
-    color: var(--modal-title-foreground-color);
-    text-transform: uppercase;
-    margin-bottom: $s-8;
-    input {
-      @extend .input-element;
-      color: var(--input-foreground-color-active);
-      margin-top: 0;
-      width: 100%;
-      height: 100%;
-      padding: 0 $s-16;
-
-      &:focus {
-        outline: none;
-        border: $s-1 solid var(--input-border-color-focus);
-        border-radius: $br-8;
-      }
-    }
-    // Input autofill
-    input:-webkit-autofill,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus,
-    input:-webkit-autofill:active {
-      -webkit-text-fill-color: var(--input-foreground-color-active);
-      -webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color);
-      border: $s-1 solid var(--input-border-color);
-      -webkit-background-clip: text;
-      transition: background-color 5000s ease-in-out 0s;
-      caret-color: var(--input-foreground-color-active);
-    }
-  }
   &.valid {
     input {
       border: $s-1 solid var(--input-border-color-success);
@@ -78,11 +38,52 @@
   }
 }
 
+.input-with-label {
+  @include flexColumn;
+  gap: $s-8;
+  @include bodyMedTipography;
+  justify-content: flex-start;
+  align-items: flex-start;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  cursor: pointer;
+  color: var(--modal-title-foreground-color);
+  text-transform: uppercase;
+  margin-bottom: $s-8;
+  input {
+    @extend .input-element;
+    color: var(--input-foreground-color-active);
+    margin-top: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0 $s-8;
+
+    &:focus {
+      outline: none;
+      border: $s-1 solid var(--input-border-color-focus);
+      border-radius: $br-8;
+    }
+  }
+  // Input autofill
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    -webkit-text-fill-color: var(--input-foreground-color-active);
+    -webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color);
+    border: $s-1 solid var(--input-border-color);
+    -webkit-background-clip: text;
+    transition: background-color 5000s ease-in-out 0s;
+    caret-color: var(--input-foreground-color-active);
+  }
+}
+
 .input-and-icon {
   position: relative;
   width: var(--input-width, calc(100% - $s-1));
   min-width: var(--input-min-width);
-  height: var(--input-height, $s-40);
+  height: var(--input-height, $s-32);
 }
 
 .help-icon {
@@ -142,7 +143,7 @@
 }
 
 .hint {
-  @include titleTipography;
+  @include bodyMedTipography;
   color: var(--modal-text-foreground-color);
   width: 99%;
 }
@@ -150,7 +151,7 @@
 .checkbox {
   @extend .input-checkbox;
   .checkbox-label {
-    @include titleTipography;
+    @include bodyMedTipography;
     display: flex;
     align-items: center;
     flex-direction: row-reverse;
@@ -185,7 +186,7 @@
     background-color: var(--input-background-color);
     .main-content {
       @include flexColumn;
-      @include titleTipography;
+      @include bodyMedTipography;
       position: relative;
       justify-content: center;
       flex-grow: 1;
@@ -230,7 +231,7 @@
 
   select {
     @extend .menu-dropdown;
-    @include titleTipography;
+    @include bodyMedTipography;
     box-sizing: border-box;
     position: absolute;
     top: 0;
@@ -246,7 +247,7 @@
     background-color: transparent;
     cursor: pointer;
     option {
-      @include titleTipography;
+      @include bodyMedTipography;
       color: var(--title-foreground-color-hover);
       background-color: var(--menu-background-color);
       appearance: none;
@@ -271,7 +272,7 @@
   overflow-y: hidden;
   .inside-input {
     @include removeInputStyle;
-    @include titleTipography;
+    @include bodyMedTipography;
     @include textEllipsis;
     width: 100%;
     max-width: calc(100% - $s-1);
@@ -281,6 +282,7 @@
     padding: $s-8;
     margin: 0;
     border-radius: $br-8;
+    color: var(--input-foreground-color-active);
     background-color: var(--input-background-color);
     border: $s-1 solid var(--input-border-color-active);
     &:focus {
@@ -309,7 +311,7 @@
         border: $s-1 solid var(--pill-background-color);
         box-sizing: border-box;
         .text {
-          @include titleTipography;
+          @include bodyMedTipography;
           padding-right: $s-8;
           color: var(--pill-foreground-color);
         }
@@ -342,15 +344,20 @@
 .custom-radio {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  gap: $s-16;
 }
 
 .radio-label {
-  @include titleTipography;
+  @include bodyMedTipography;
   @include flexRow;
+  align-items: flex-start;
+  gap: $s-8;
   min-height: $s-32;
+  height: fit-content;
   border-radius: $br-8;
-  padding: $s-0 $s-2;
+  padding: $s-8;
   color: var(--input-foreground-color);
+  border: $s-1 solid transparent;
   &:focus,
   &:focus-within {
     outline: none;
@@ -376,18 +383,16 @@
 }
 
 .radio-label.with-image {
-  display: flex;
-  justify-content: center;
-  height: $s-120;
-  width: $s-140;
-  padding: $s-64 $s-4 0 $s-4;
-  margin-top: $s-16;
-  margin-right: 0;
+  @include smallTitleTipography;
+  display: grid;
+  grid-template-rows: auto auto 0px;
+  justify-items: center;
+  gap: 0;
+  height: $s-116;
+  width: $s-92;
   border-radius: $br-8;
+  margin: 0;
   border: 1px solid var(--color-background-tertiary);
-  background-size: 50px;
-  background-repeat: no-repeat;
-  background-position: center 0.75rem;
   cursor: pointer;
   &:global(.checked) {
     border: 1px solid var(--color-accent-primary);
@@ -399,10 +404,28 @@
   }
 }
 
+.image-inside {
+  width: $s-60;
+  height: $s-48;
+  background-size: $s-48;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.icon-inside {
+  width: $s-60;
+  height: $s-48;
+  svg {
+    width: $s-60;
+    height: $s-48;
+    stroke: var(--icon-foreground);
+    fill: none;
+  }
+}
 //TEXTAREA
 
 .textarea-label {
-  @include tabTitleTipography;
+  @include uppercaseTitleTipography;
   color: var(--modal-title-foreground-color);
   text-transform: uppercase;
   margin-bottom: $s-8;

frontend/src/app/main/ui/components/radio_buttons.scss

@@ -30,7 +30,7 @@
     stroke: var(--radio-btn-foreground-color);
   }
   .title-name {
-    @include tabTitleTipography;
+    @include uppercaseTitleTipography;
     color: var(--radio-btn-foreground-color);
   }
   &:hover {

frontend/src/app/main/ui/components/select.cljs

@@ -107,7 +107,7 @@
        [:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
        [:& dropdown {:show is-open? :on-close close-dropdown}
         [:ul {:ref dropdown-element* :data-direction @dropdown-direction*
-              :class (dm/str (stl/css :custom-select-dropdown) " " dropdown-class)}
+              :class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
          (for [[index item] (d/enumerate options)]
            (if (= :separator item)
              [:li {:class (dom/classnames (stl/css :separator) true)
@@ -116,9 +116,10 @@
                    icon-ref (i/key->icon icon)]
                [:li
                 {:key (dm/str current-id "-" index)
-                 :class (dom/classnames
-                         (stl/css :checked-element) true
-                         (stl/css :is-selected) (= value current-value))
+                 :class (stl/css-case
+                         :checked-element true
+                         :disabled (:disabled item)
+                         :is-selected (= value current-value))
                  :data-value (pr-str value)
                  :on-pointer-enter highlight-item
                  :on-pointer-leave unhighlight-item

frontend/src/app/main/ui/components/select.scss

@@ -7,7 +7,12 @@
 @import "refactor/common-refactor.scss";
 
 .custom-select {
-  @include titleTipography;
+  --border-color: var(--menu-background-color);
+  --bg-color: var(--menu-background-color);
+  --icon-color: var(--icon-foreground);
+  --text-color: var(--menu-foreground-color);
+  @extend .new-scrollbar;
+  @include bodyMedTipography;
   position: relative;
   display: grid;
   grid-template-columns: 1fr auto;
@@ -17,104 +22,105 @@
   margin: 0;
   padding: $s-8;
   border-radius: $br-8;
-  background-color: var(--menu-background-color);
-  border: $s-1 solid var(--menu-background-color);
-  color: var(--menu-foreground-color);
+  background-color: var(--bg-color);
+  border: $s-1 solid var(--border-color);
+  color: var(--text-color);
   cursor: pointer;
 
   &.icon {
     grid-template-columns: auto 1fr auto;
   }
 
-  .current-icon {
+  &:hover {
+    --bg-color: var(--menu-background-color-hover);
+    --border-color: var(--menu-background-color);
+    --icon-color: var(--menu-foreground-color-hover);
+  }
+
+  &:focus {
+    --bg-color: var(--menu-background-color-focus);
+    --border-color: var(--menu-background-focus);
+  }
+}
+
+.disabled {
+  --bg-color: var(--menu-background-color-disabled);
+  --border-color: var(--menu-border-color-disabled);
+  --icon-color: var(--menu-foreground-color-disabled);
+  --text-color: var(--menu-foreground-color-disabled);
+  pointer-events: none;
+  cursor: default;
+}
+
+.dropdown-button {
+  @include flexCenter;
+  svg {
+    @extend .button-icon-small;
+    transform: rotate(90deg);
+    stroke: var(--icon-color);
+  }
+}
+
+.current-icon {
+  @include flexCenter;
+  width: $s-24;
+  padding-right: $s-4;
+  svg {
+    @extend .button-icon-small;
+    stroke: var(--icon-foreground);
+  }
+}
+
+.custom-select-dropdown {
+  @extend .dropdown-wrapper;
+  .separator {
+    margin: 0;
+    height: $s-12;
+    border-block-start: $s-1 solid var(--dropdown-separator-color);
+  }
+}
+
+.custom-select-dropdown[data-direction="up"] {
+  bottom: $s-32;
+  top: auto;
+}
+
+.checked-element {
+  @extend .dropdown-element-base;
+  .icon {
     @include flexCenter;
+    height: $s-24;
     width: $s-24;
     padding-right: $s-4;
     svg {
-      @extend .button-icon-small;
+      @extend .button-icon;
       stroke: var(--icon-foreground);
     }
   }
-  .dropdown-button {
+
+  .label {
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  .check-icon {
     @include flexCenter;
     svg {
       @extend .button-icon-small;
-      transform: rotate(90deg);
+      visibility: hidden;
       stroke: var(--icon-foreground);
     }
   }
-  .custom-select-dropdown {
-    @extend .dropdown-wrapper;
-    .separator {
-      margin: 0;
-      height: $s-12;
-      border-top: $s-1 solid var(--dropdown-separator-color);
-    }
-  }
 
-  .custom-select-dropdown[data-direction="up"] {
-    bottom: $s-32;
-    top: auto;
-  }
-
-  .checked-element {
-    @extend .dropdown-element-base;
-    .icon {
-      @include flexCenter;
-      height: $s-24;
-      width: $s-24;
-      padding-right: $s-4;
-      svg {
-        @extend .button-icon;
-        stroke: var(--icon-foreground);
-      }
+  &.is-selected {
+    color: var(--menu-foreground-color);
+    .check-icon svg {
+      stroke: var(--menu-foreground-color);
+      visibility: visible;
     }
-
-    .label {
-      flex-grow: 1;
-      width: 100%;
-    }
-
-    .check-icon {
-      @include flexCenter;
-      svg {
-        @extend .button-icon-small;
-        visibility: hidden;
-        stroke: var(--icon-foreground);
-      }
-    }
-
-    &.is-selected {
-      color: var(--menu-foreground-color);
-      .check-icon svg {
-        stroke: var(--menu-foreground-color);
-        visibility: visible;
-      }
-    }
-  }
-
-  &:hover {
-    background-color: var(--menu-background-color-hover);
-    border: $s-1 solid var(--menu-background-color-hover);
-    .dropdown-button {
-      svg {
-        stroke: var(--menu-foreground-color-hover);
-      }
-    }
-  }
-  &:focus {
-    background-color: var(--menu-background-color-focus);
-    border: $s-1 solid var(--menu-border-color-focus);
   }
   &.disabled {
-    background-color: var(--menu-background-color-disabled);
-    color: var(--menu-foreground-color-disabled);
-    border: $s-1 solid var(--menu-border-color-disabled);
-    pointer-events: none;
-    cursor: default;
-    .dropdown-button svg {
-      stroke: var(--menu-foreground-color-disabled);
-    }
+    display: none;
   }
 }
 

frontend/src/app/main/ui/components/tab_container.scss

@@ -28,7 +28,7 @@
     width: 100%;
     .tab-container-tab-title {
       @include flexCenter;
-      @include tabTitleTipography;
+      @include uppercaseTitleTipography;
       height: 100%;
       width: 100%;
       padding: 0 $s-8;

frontend/src/app/main/ui/components/title_bar.scss

@@ -19,7 +19,7 @@
 .title,
 .title-only,
 .inspect-title {
-  @include tabTitleTipography;
+  @include uppercaseTitleTipography;
   display: flex;
   align-items: center;
   flex-grow: 1;
@@ -119,7 +119,7 @@
 
 .title,
 .title-only {
-  @include tabTitleTipography;
+  @include uppercaseTitleTipography;
   display: flex;
   align-items: center;
   flex-grow: 1;