diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs index a36f660e7..091cbe92c 100644 --- a/frontend/src/app/main/data/workspace/libraries.cljs +++ b/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))))))) diff --git a/frontend/src/app/main/ui/messages.cljs b/frontend/src/app/main/ui/messages.cljs index 489eae2a6..1d64e4225 100644 --- a/frontend/src/app/main/ui/messages.cljs +++ b/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])]]) diff --git a/frontend/src/app/main/ui/messages.scss b/frontend/src/app/main/ui/messages.scss index e2a571c8f..03ad9dfed 100644 --- a/frontend/src/app/main/ui/messages.scss +++ b/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); } }