Style disclaimer

Vizzuality · Jun 21, 2023 · 32eae83 · 32eae83
1 parent 9bf1a01
commit 32eae83
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/containers/onboarding/onboarding-disclaimer/onboarding-disclaimer-component.jsx b/src/containers/onboarding/onboarding-disclaimer/onboarding-disclaimer-component.jsx
@@ -2,13 +2,18 @@ import React from 'react';
 
 import { T } from '@transifex/react';
 
+import { ReactComponent as WarningIcon } from 'icons/warning.svg';
+
 import styles from './onboarding-disclaimer-styles.module.scss';
 
 function OnboardingDisclaimer() {
   return (
     <div className={styles.disclaimerContainer}>
       <p className={styles.disclaimer}>
-        <T _str="During the onboarding process, certain features of the platform may not be accessible" />
+        <WarningIcon className={styles.icon} />
+        <span className={styles.text}>
+          <T _str="During the onboarding process, some features may not be working" />
+        </span>
       </p>
     </div>
   );

diff --git a/src/containers/onboarding/onboarding-disclaimer/onboarding-disclaimer-styles.module.scss b/src/containers/onboarding/onboarding-disclaimer/onboarding-disclaimer-styles.module.scss
@@ -10,10 +10,23 @@
 
 .disclaimer {
   position: relative;
-  background-color: $white;
+  background-color: rgba($navy-he, 0.8);
+  border: 1px solid $navy-he;
   padding: 0px 6px;
   z-index: $bring-to-front;
   @extend %annotation;
   font-size: $font-size-xxs;
   border-radius: 2px;
+  color: $white;
+
+  .text {
+    vertical-align: top;
+  }
+}
+
+.icon {
+  stroke: $white;
+  width: 14px;
+  transform: translateY(2px);
+  margin: 0 8px;
 }