ui : update Fonts + colors

src/styles/abstracts/_fonts.scss

@@ -0,0 +1,29 @@
+@font-face {
+    font-family: 'RefrigeratorDelxW01Bold';
+    src: url('../fonts/RefrigeratorDelxW01Bold.eot');
+    src: url('../fonts/RefrigeratorDelxW01Bold.eot') format('embedded-opentype'),
+         url('../fonts/RefrigeratorDelxW01Bold.woff') format('woff'),
+         url('../fonts/RefrigeratorDelxW01Bold.ttf') format('truetype'),
+         url('../fonts/RefrigeratorDelxW01Bold.svg#RefrigeratorDelxW01Bold') format('svg');
+     font-weight: bold;
+}
+@font-face {
+    font-family: 'Facit';
+    src: url('../fonts/FacitRegular.eot');
+    src: url('../fonts/FacitRegular.eot') format('embedded-opentype'),
+         url('../fonts/FacitRegular.woff2') format('woff2'),
+         url('../fonts/FacitRegular.woff') format('woff'),
+         url('../fonts/FacitRegular.ttf') format('truetype'),
+         url('../fonts/FacitRegular.svg#FacitRegular') format('svg');
+     font-weight: 400;
+}
+@font-face {
+    font-family: 'Facit';
+    src: url('../fonts/FacitBold.eot');
+    src: url('../fonts/FacitBold.eot') format('embedded-opentype'),
+         url('../fonts/FacitBold.woff2') format('woff2'),
+         url('../fonts/FacitBold.woff') format('woff'),
+         url('../fonts/FacitBold.ttf') format('truetype'),
+         url('../fonts/FacitBold.svg#FacitRegular') format('svg');
+    font-weight: 700;
+}

src/styles/abstracts/_variables.scss

@@ -19,11 +19,14 @@ $color-244-10-70: hsl(244, 10%, 70%);
 $color-215-6-63: hsl(215, 6%, 63%);
 $color-210-5-56: hsl(210, 5%, 56%);
 $color-210-4-50: hsl(210, 4%, 50%);
+$color-212-4-50: hsl(212.7,4.3%,50%);
 $color-213-4-50: hsl(213, 4%, 50%);
 $color-213-13-86: hsla(213, 13%, 86%, 0.2);
 $color-0-0-29: hsl(0, 0%, 29%);
+$color-0-0-22: hsl(0,0%,22.7%);
 $color-203-87-19: hsl(203, 87.8%, 19.2%);
 $color-233-18-29: hsl(233, 18%, 29%);
 $color-233-20-17: hsl(233, 20%, 17%);
 $color-216-4-22: hsl(216, 4%, 22%);
 $color-244-73-62: hsl(244, 73%, 62%);
+$color-357-67-45: hsl(357,67.5%,45.9%);

src/styles/components/_index.scss

@@ -1,7 +1,6 @@
 @import 'chat';
 @import 'comment.scss';
 @import 'filters';
-@import 'font';
 @import 'howto';
 @import 'sidebar';
 @import 'skills';

src/styles/components/font.scss

@@ -1,17 +0,0 @@
-$rd-filename:         "RefrigeratorDelxW01Bold";
-$rd-font-name:        "RefrigeratorDelxW01Bold";
-$rd-font-family:      "RefrigeratorDelxW01Bold";
-$rd-font-weight:      "bold";
-$rd-font-path:        "../fonts" !default;
-$rd-css-prefix:       rd !default;
-
-@font-face {
-  font-family: '#{$rd-font-name}';
-  src:  url('#{$rd-font-path}/#{$rd-filename}.eot');
-  src:  url('#{$rd-font-path}/#{$rd-filename}.eot') format('embedded-opentype'),
-    url('#{$rd-font-path}/#{$rd-filename}.ttf') format('truetype'),
-    url('#{$rd-font-path}/#{$rd-filename}.woff') format('woff'),
-    url('#{$rd-font-path}/#{$rd-filename}.svg##{$rd-filename}') format('svg');
-  font-weight: bold;
-  font-style: normal;
-}

src/styles/index.scss

@@ -3,6 +3,7 @@
 @import '../../node_modules/include-media/dist/include-media';
 @import '../../node_modules/normalize.css/normalize';
 
+@import 'abstracts/fonts';
 @import 'abstracts/variables';
 @import 'abstracts/mixins';
 @import 'components/icons/index';

src/styles/layout/events/_index.scss

@@ -1 +1 @@
-@import 'events.scss';
+@import 'events';

src/styles/layout/events/events.scss

@@ -1,8 +1,55 @@
+$color-203-87-19: hsl(203, 87.8%, 19.2%);
+$color-357-67-45: hsl(357,67.5%,45.9%);
+$color-212-4-50: hsl(212.7,4.3%,50%);
+$color-0-0-22: hsl(0,0%,22.7%);
 #events {
     width: 100%;
-    sib-event .events sib-form sib-form-dropdown::before {
-        font-family: $rd-font-family;
+    font-family: "Facit";
+    font-weight: 400;
+    color: $color-0-0-22;
+    sib-event {
+        .red-button,
+        .event-type {
+            background-color: $color-357-67-45;
+        }
+        .event-type,
+        .event-place-name {
+            font-weight: 700;
+        }
+        #listevents [name="name"],
+        sib-display-link-event .mdi::before {
+            color:  $color-357-67-45;
+        }
+        .event-place-name,
+        .nextevent-startdate,
+        sib-display-link-event {
+            color: $color-0-0-22;
+        }
+        .sib-event {
+            font-family: "FacitRegular";
+            sib-form sib-form-dropdown{
+                label div {
+                    height: 2.5rem;
+                }
+                &::before {
+                    font-family: "RefrigeratorDelxW01Bold";
                     font-size: 24px;
                     line-height: 29px;
+                    color: $color-203-87-19;
+                    top: -40px;
+                    content: "Research an event";
+                }
+            }
+        }
+        #eventdetail {
+            sib-display div .event-type {
+                width: max-content;
+                padding: 5px 20px; 
+            }
+            [name="longDescription"] p {
+                font-size: 1.6rem;
+                line-height: 2.6rem;
+            }
+        }
     }
 }