enhance(ui): polish classic notification cp

src/main/frontend/common.css

@@ -425,7 +425,7 @@ p.warning {
 }
 
 .text-warning {
-  @apply text-yellow-500 dark:text-yellow-500/70;
+  @apply text-yellow-600 dark:text-yellow-500/70;
 }
 
 .bg-warning {
@@ -446,12 +446,30 @@ span.error {
   @apply bg-red-rx-04-alpha;
 }
 
+a.error,
+span.error {
+  @apply bg-red-rx-04-alpha text-red-rx-09 dark:bg-red-rx-06-alpha
+  dark:text-red-rx-10 rounded px-1.5 py-[2px] leading-none;
+}
+
+.text-error {
+  @apply text-red-rx-09;
+}
+
+.bg-error {
+  @apply bg-red-rx-04-alpha;
+}
+
+.text-success {
+  @apply text-green-rx-09;
+}
+
+.bg-success {
+  @apply bg-green-rx-04-alpha;
+}
+
 img.small {
-  display: inline;
-  width: 20px;
-  height: 20px;
-  margin-top: 0;
-  margin-bottom: 0;
+  @apply inline w-5 h-5 m-0;
 }
 
 a.tag {

src/main/frontend/ui.cljs

@@ -322,7 +322,7 @@
             (button
              {:button-props {:aria-label "Close"}
               :variant :ghost
-              :class "hover:bg-transparent hover:text-foreground"
+              :class "hover:bg-transparent hover:text-foreground scale-90"
               :on-click (fn []
                           (notification/clear! uid))
               :icon "x"})]]]]]])))

src/main/frontend/ui.css

@@ -53,22 +53,20 @@
 }
 
 .ui__notifications {
-  position: fixed;
+  @apply fixed top-12 pointer-events-none w-full;
+
   z-index: var(--ls-z-index-level-4);
-  width: 100%;
-  top: 3.2em;
-  pointer-events: none;
 
   &-content {
-    @apply inset-0 flex items-end justify-center px-4 py-3
-    pointer-events-none sm:px-6 sm:py-3 sm:items-start
+    @apply inset-0 flex items-end justify-center px-4 py-2
+    pointer-events-none sm:px-6 sm:py-2 sm:items-start
     sm:justify-end;
   }
 
   .notification-area {
     @apply border;
 
-    background-color: or(--ls-notification-background, --lx-gray-03, --ls-tertiary-background-color, --rx-gray-03);
+    background-color: or(--ls-notification-background, --lx-gray-02, --ls-tertiary-background-color, --rx-gray-03);
     color: or(--ls-notification-text-color, --lx-gray-11, --ls-primary-text-color, --rx-gray-11);
 
     &:has(.ls-wrap-widen) {