fix(splashScreen): loading bar hatched design

src/components/Splash/SplashScreen.tsx

@@ -8,10 +8,9 @@ import './splashScreen.scss'
 const SplashScreen = ({ initStep }: { initStep: InitSteps }) => {
   const { t } = useI18n()
   const getProgress = () => {
-    const total: number = Object.values(InitSteps).length / 2
-    const progress: number =
-      initStep === 0 ? 10 : Math.round((initStep / total) * 100)
-    return progress
+    const total = Object.values(InitSteps).length / 2
+    const progress = initStep === 0 ? 10 : Math.round((initStep / total) * 100)
+    return progress - 90 /* hack to make the progress bar start way left */
   }
   return (
     <>
@@ -23,7 +22,7 @@ const SplashScreen = ({ initStep }: { initStep: InitSteps }) => {
             <div className="splash-progress-bar-container">
               <div
                 className="splash-progress-bar-content"
-                style={{ width: `${getProgress()}%` }}
+                style={{ left: `${getProgress()}%` }}
               />
             </div>
           </div>

src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap

@@ -48,7 +48,7 @@ exports[`SplashRoot component should be rendered correctly 1`] = `
                   className="splash-progress-bar-content"
                   style={
                     Object {
-                      "width": "17%",
+                      "left": "-73%",
                     }
                   }
                 />

src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap

@@ -27,7 +27,7 @@ exports[`SplashScreen component should be rendered correctly 1`] = `
             className="splash-progress-bar-content"
             style={
               Object {
-                "width": "17%",
+                "left": "-73%",
               }
             }
           />

src/components/Splash/splashScreen.scss

@@ -72,7 +72,6 @@
   border-radius: 12px;
   box-sizing: border-box;
   max-width: 350px;
-
   .splash-progress-bar-container {
     flex: 1;
     height: 12px;
@@ -90,29 +89,16 @@
     background-size: 9px 9px;
     border: solid 1px $gold-shadow;
     border-radius: 12px;
+    overflow: hidden;
+    position: relative;
     .splash-progress-bar-content {
-      height: 12px;
-      box-sizing: border-box;
       background-color: $gold-shadow;
-      border: solid 1px $gold-shadow;
-      border-radius: 12px 4px 0 12px;
-      border-right: none;
-      transition: all 300ms ease;
-      position: relative;
-      overflow: hidden;
-      top: -1px;
-      left: -1px;
-      &:after {
-        content: '';
-        position: absolute;
-        display: block;
-        transform: rotate(45deg);
-        background-color: $dark-2;
-        width: 15px;
-        height: 15px;
-        right: -9px;
-        top: -8px;
-      }
+      position: absolute;
+      bottom: -150px;
+      left: -100%;
+      height: 300px;
+      width: 100%;
+      transform: rotate(45deg);
     }
   }
 }