Update alert boxes (#33)

* Delete unnecessary imgs

* Update border radius

* Update warning icon

* Delete imgs

* Update styles and delete secondary alerts

* Update contracts boxes colors

It matches the color used for alert boxes

* Update content-index bg color

* Update font color var

* Update display property

* Add word-break

* Update ui/src/stylesheets/admonitionblock.scss

Co-Authored-By: Francisco Giordano <[email protected]>

ui/src/stylesheets/admonitionblock.scss

@@ -8,31 +8,26 @@
 
 .admonitionblock,
 .alert {
-  border: 1px solid rgb(196, 196, 196);
-  border-radius: var(--border-radius);
-  font-family: var(--heading);
-  color: rgb(36, 36, 36);
-  line-height: 100%;
   max-width: 90vw;
+  background-color: white;
+  border: solid #ddd;
+  border-radius: var(--border-radius);
+  border-width: 1px 1px 1px 6px;
+  font-family: var(--sans-serif);
+  font-weight: var(--weight-normal);
+  color: var(--color-text-light);
   font-size: 0.9rem;
   text-align: center;
-  line-height: 1.4;
-  font-weight: var(--weight-medium);
-  padding: 1rem 0.9rem;
-  display: block;
-  background-color: white;
+  line-height: 1.5;
+  padding: 1rem .9rem;
   margin: 1.5rem 0;
-  background-repeat: no-repeat;
-  background-size: 32px;
-  background-origin: border-box;
-  background-position: 1.4rem center;
-
+  overflow-wrap: break-word;
+
   table {
     padding: 0;
     margin: 0;
     th,
     td {
-      border: none;
       padding: 0;
       margin: 0;
       word-wrap: break-word;
@@ -41,103 +36,52 @@
 
   .content {
     max-width: 82vw;
-    padding-left: 58px;
+    padding-left: .25rem;
     font-size: 1rem;
     text-align: left;
     word-wrap: break-word;
   }
 
-  &.note {
-    border: 1px solid #a134d1;
-    color: #a134d1;
-    background-image: url(../images/icons/unicorn.png);
-  }
-
-  &.tip {
-    border: 1px solid var(--core-violet-4);
-    color: var(--core-violet-4);
-    background-image: url(../images/icons/book.png);
-  }
-
-  &.warning, &.caution, &.important {
-    border: 1px solid #F79F1F;
-    color: #F79F1F;
-    background-image: url(../images/icons/warning.png);
-  }
-}
-
-.alert {
-  position: relative;
-
-  p {
-    margin: 0;
-    padding: 0;
+  &::before { 
+    display: block;
+    font-size: 0.9em;
+    font-weight: var(--weight-bold);
     text-align: left;
-    margin-left: 60px;
+    text-transform: uppercase;
+    padding-left: .25rem;
+    margin-bottom: .5rem;
   }
 
-  &.note--secondary {
-    color: white;
-    background-image: linear-gradient(45deg, #a134d1 0%, #6746d6 100%);
-    background-size: 100%;
-    background-position: 0;
+  &.note {
+    border-left-color: var(--core-violet-4);
 
-    &::after {
-      content: "";
-      background-image: url(../images/icons/unicorn.png);
-      width: 65px;
-      height: 65px;
-      background-size: 100%;
-      position: absolute;
-      top: 18%;
-      right: 20px;
-      transform: translateY(-50%);
+    &::before { 
+      content: "note";
+      color: var(--core-violet-4);
     }
   }
 
-  &.tip--secondary {
-    color: white;
-    background-image: linear-gradient(-135deg, #3f62ff 0%, #2ba3ff 100%);
-    background-size: 100%;
-    background-position: 0;
-    &::after {
-      content: "";
-      background-image: url(../images/icons/book.png);
-      width: 65px;
-      height: 65px;
-      background-size: 100%;
-      position: absolute;
-      top: 18%;
-      right: 20px;
-      transform: translateY(-50%);
-    }
-  }
+  &.tip {
+    border-left-color: var(--teal-3);
 
-  &.warning--secondary {
-    color: white;
-    background-image: linear-gradient(-135deg, #ff8f3f 0%, #ff5533 100%);
-    background-size: 100%;
-    background-position: 0;
-    &::after {
-      content: "";
-      background-image: url(../images/icons/rocket_1f680.png);
-      width: 65px;
-      height: 65px;
-      background-size: 100%;
-      position: absolute;
-      top: 18%;
-      right: 20px;
-      transform: translateY(-50%);
+    &::before { 
+      content: "tip";
+      color: var(--teal-3);
     }
   }
 
-  &.note--secondary,
-  &.tip--secondary,
-  &.warning--secondary {
-    padding: 1.5rem;
-    p {
-      margin: 0;
-      padding: 0;
+  &.warning, &.caution, &.important {
+    border-left-color: #F79F1F;
+
+    &::before { 
+      content: "warning";
+      color: #f79f1f;
+      padding-left: 1.5em;
+      margin-left: .4em;
+      background-image: url(../images/icons/warning.svg);
+      background-repeat: no-repeat;
+      background-position: left;
+      background-origin: border-box;
     }
   }
 }

ui/src/stylesheets/article.scss

@@ -101,7 +101,7 @@
   border-radius: var(--border-radius);
   max-width: 90vw;
   padding: 1.5rem;
-  background-color: #fbfbfc;
+  background-color: #f8f8fa;
   margin-top: 1em;
   margin-bottom: 1em;
   word-wrap: break-word;
@@ -156,7 +156,7 @@
 
 .contract-item {
   border-radius: var(--border-radius);
-  border: solid 1px #e9e9ed;
+  border: solid 1px #ddd;
   max-width: 90vw;
   padding: 0;
   margin-top: 1em;
@@ -210,8 +210,8 @@
       z-index: -10;
       border-top-left-radius: var(--border-radius);
       border-top-right-radius: var(--border-radius);
-      background-color: #fbfbfc;
-      border-bottom: solid 1px #e9e9ed;
+      background-color: #f9f9fa;
+      border-bottom: solid 1px #ddd;
     }
   }
 

ui/src/stylesheets/globals/_vars.scss

@@ -37,9 +37,10 @@
   --tertiary: #fff;
 
   --color-text: #282846;
+  --color-text-light: #555566;
   --color-navbar-text: #282846;
 
-  --border-radius: 6px;
+  --border-radius: .3rem;
 
   --heading: "Silka", sans-serif;
   --sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;