🐛 Fix notification modal styles

frontend/src/app/main/data/workspace/libraries.cljs

@@ -1060,8 +1060,10 @@
                   :links   [{:label (tr "workspace.updates.more-info")
                              :callback do-more-info}]
                   :actions [{:label (tr "workspace.updates.update")
+                             :type :primary
                              :callback do-update}
                             {:label (tr "workspace.updates.dismiss")
+                             :type :secondary
                              :callback do-dismiss}]
                   :tag :sync-dialog)))))))
 

frontend/src/app/main/ui/messages.cljs

@@ -46,17 +46,22 @@
       content
       (for [[index link] (d/enumerate links)]
         [:* {:key (dm/str "link-" index)}
-         " " [:& lb/link-button {:class "link"
+         " " [:& lb/link-button {:class (stl/css :link)
                                  :on-click (:callback link)
                                  :value (:label link)}]])]
 
      (when (or (= controls :bottom-actions) (= controls :inline-actions))
+
        [:div  {:class (stl/css :actions)}
         (for [action actions]
           [:button {:key (uuid/next)
-                    :class (stl/css :action-bnt)
+                    :class (stl/css-case :action-btn true
+                                         :primary (= :primary (:type action))
+                                         :secondary (= :secondary (:type action))
+                                         :danger (= :danger (:type action)))
                     :on-click (:callback action)}
            (:label action)])])]
+
     (when (= controls :close)
       [:button {:class (stl/css :btn-close)
                 :on-click on-close} i/close-refactor])]])

frontend/src/app/main/ui/messages.scss

@@ -16,6 +16,7 @@
   background-color: var(--bg-color);
   color: var(--fg-color);
 }
+
 .warning {
   --bg-color: var(--alert-background-color-warning);
   --fg-color: var(--alert-foreground-color-warning);
@@ -30,16 +31,18 @@
   --bg-color: var(--alert-background-color-neutral);
   --fg-color: var(--alert-foreground-color-neutral-active);
 }
+
 .banner.info .icon {
   --fg-color: var(--alert-foreground-color-neutral);
 }
+
 .banner.info:hover .icon {
   --fg-color: var(--alert-foreground-color-neutral);
 }
 
 .wrapper {
-  display: grid;
-  grid-template-columns: $s-16 1fr $s-40;
+  display: flex;
+  align-items: center;
   padding: $s-8 $s-8 $s-8 $s-16;
   gap: $s-8;
   height: 100%;
@@ -94,20 +97,46 @@
 
 .content {
   @include flexRow;
+  gap: $s-8;
+  flex-grow: 1;
 }
 
 .text {
   @include titleTipography;
+  flex-grow: 1;
+}
+
+.link {
+  @include titleTipography;
+  color: var(--modal-link-foreground-color);
+  margin: 0;
+}
+
+.actions {
+  @include flexRow;
+  gap: $s-8;
 }
 
 .action-btn {
   @extend .button-tertiary;
-  height: $s-32;
-  width: $s-32;
-  color: black;
+  @include tabTitleTipography;
+  min-height: $s-32;
+  min-width: $s-32;
   svg {
     @extend .button-icon-small;
   }
+  &.primary {
+    @extend .button-primary;
+    padding: $s-8 $s-24;
+  }
+  &.secondary {
+    @extend .button-secondary;
+    padding: $s-8 $s-24;
+  }
+  &.danger {
+    @extend .modal-danger-btn;
+    padding: $s-8 $s-24;
+  }
 }
 
 .btn-close {
@@ -116,6 +145,6 @@
   width: $s-32;
   svg {
     @extend .button-icon-small;
-    stroke: black;
+    stroke: var(--icon-foreground);
   }
 }