feat: adds notification styling and icons (#3461)

Co-authored-by: Jan Klopper <[email protected]>
minvws · Sep 5, 2024 · 1e27332 · 1e27332
1 parent 3369b3b
commit 1e27332
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 2 deletions.
diff --git a/rocky/assets/css/components/button-plain.scss b/rocky/assets/css/components/button-plain.scss
@@ -0,0 +1,22 @@
+button,
+a.button,
+input[type="button"],
+input[type="submit"],
+input[type="reset"] {
+  &.plain {
+    background-color: transparent;
+    border: 0;
+    color: var(--colors-blue-600);
+    padding: 0;
+
+    &:hover {
+      color: var(--colors-blue-700);
+    }
+
+    .icon {
+      &:hover {
+        color: var(--colors-blue-700);
+      }
+    }
+  }
+}
diff --git a/rocky/assets/css/components/notifications.scss b/rocky/assets/css/components/notifications.scss
@@ -1,3 +1,25 @@
+/* Block notification */
+div,
+section {
+  &.error,
+  &.warning,
+  &.explanation,
+  &.confirmation,
+  &.system {
+    flex-direction: row;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: var(--heading-small-font-size);
+    }
+  }
+}
+
+/* Help text */
 div {
   &.explanation {
     &.help-text {
@@ -10,3 +32,59 @@ div {
     margin-top: 0;
   }
 }
+
+/* Inline notification */
+p,
+span {
+  &.error,
+  &.warning,
+  &.explanation,
+  &.confirmation,
+  &.system {
+    display: flex;
+    align-items: center;
+  }
+}
+
+/* Icons */
+p,
+span,
+section,
+div {
+  &.error {
+    &::before {
+      content: "\eac5";
+      color: var(--colors-red-600);
+    }
+  }
+
+  &.warning {
+    &::before {
+      content: "\ea06";
+      color: var(--colors-ochre-500);
+    }
+  }
+
+  &.explanation {
+    &::before {
+      content: "\eac5";
+      color: var(--colors-blue-600);
+    }
+  }
+
+  &.confirmation {
+    &::before {
+      content: "\ea5e";
+      color: var(--colors-green-600);
+    }
+  }
+
+  &.system {
+    background-color: var(--colors-black-05);
+
+    &::before {
+      content: "\ea06";
+      color: var(--colors-blue-600);
+    }
+  }
+}
diff --git a/rocky/assets/css/main.scss b/rocky/assets/css/main.scss
@@ -29,6 +29,7 @@
 /* Components */
 @import "components/action-buttons";
 @import "components/block-indented";
+@import "components/button-plain";
 @import "components/cat-loader";
 @import "components/cat-paw-loader";
 @import "components/cytoscape";

diff --git a/rocky/assets/css/themes/soft/manon/notification-block.scss b/rocky/assets/css/themes/soft/manon/notification-block.scss
@@ -1,7 +1,9 @@
 /* Notification block - Variables */
 
 :root {
-  --notification-block-element-padding-right: 0.5rem;
-  --notification-block-element-padding-left: 0.5rem;
+  --notification-block-element-padding-top: var(--spacing-grid-300);
+  --notification-block-element-padding-right: var(--spacing-grid-200);
+  --notification-block-element-padding-left: var(--spacing-grid-200);
+  --notification-block-element-padding-bottom: var(--spacing-grid-300);
   --notification-block-element-gap: 0.5rem;
 }