Merge branch 'styling-dashboard' into 'master'

Styling dashboard

See merge request !18

src/atoms/Badge.local.scss

 .root {
   display: inline-flex;
   align-items: center;
-  border: 1px solid #eee;
-  border-radius: 2px;
+  background: lightgrey;
+  background: linear-gradient(#fff 0, #fff 1.1em, grey 1.1em, grey 1.15em, #fff 1.15em, #fff 2em);
   font-size: 0.8rem;
+  margin-right: 1em;
+  padding-bottom: 1em;
+  color: inherit;
 }
 
 .count {
-  background: white;
-  padding: 5px;
+  border-radius: 50%;
+  text-align: center;
+  font-weight: 600;
+  color: grey;
+  font-size: 1em;
+  padding-right: 0.5em;
 }
 
 .label {
   display: inline-block;
-  background: #eee;
-  padding: 5px;
+  padding: 0;
+  text-shadow: 0.05em 0.05em 0 #fff, -0.05em -0.05em 0 #fff, -0.05em 0.05em 0 #fff, 0.05em -0.05em 0 #fff;
 }

src/atoms/Badge.md

@@ -9,7 +9,8 @@ A plural form of the label can be provided.
 ```js
 <div>
     <Badge count={1} label="thing" plural="things"/> 
-    <Badge count={10} label="thing" plural="things"/> 
+    <Badge count={99} label="thing" plural="things"/> 
     <Badge count={0} label="thing" plural="things"/> 
+    <Badge count={299} label="thing" plural="things"/> 
 </div>
 ```

src/atoms/Button.local.scss

@@ -31,16 +31,17 @@
       outline: 1px solid transparent;
     }
 
-    &::after {
-      content: "Saved!";
-      top: 20%;
-      left: 115%;
-      position: absolute;
-      background: var(--color-primary);
-      color: white;
-      padding: 0.1em 0.3em;
-      opacity: 0;
-    }
+    // this will be added to the button that need a feedback to the user. 
+    // &::after {
+    //   content: "Saved!";
+    //   top: 20%;
+    //   left: 115%;
+    //   position: absolute;
+    //   background: var(--color-primary);
+    //   color: white;
+    //   padding: 0.1em 0.3em;
+    //   opacity: 0;
+    // }
 
     &:active {
       transform: scale(0.8);

src/atoms/ValidatedField.local.scss

+
 .messages {
-  // color: white;
   margin-top: 10px;
   font-style: italic;
   display: inline-block;
@@ -12,7 +12,7 @@
 
 .error,
 .warning {
-  font-size: 0.9em; // padding: 0.3em 0.5em;
+  font-size: 0.9em;
   letter-spacing: 0.01em;
 }