Update styles for Report and SplashScreen

Signed-off-by: Leonardo Rossi <[email protected]>

Author: leorossi

src/components/Report.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Icons from './icons'
 import { ERROR_RED, MAIN_GREEN, WARNING_YELLOW } from './constants'
+import styles from './Report.module.css'
 
 function getIcon (type) {
   switch (type) {
@@ -17,7 +18,7 @@ function Step ({
   label
 }) {
   return (
-    <div className='flex items-center gap-x-2'>
+    <div className={styles.step}>
       {getIcon(type)}
       <span>{label}</span>
     </div>
@@ -32,7 +33,7 @@ export default function Report ({
     })
   }
   return (
-    <div className='text-white/70 flex flex-col gap-y-2'>
+    <div className={styles.container}>
       {renderSteps()}
     </div>
 

src/components/Report.module.css

@@ -0,0 +1,7 @@
+.container {
+  @apply text-white/70 flex flex-col gap-y-2;
+}
+
+.step {
+  @apply flex items-center gap-x-2;
+} 

src/components/SplashScreen.jsx

@@ -36,13 +36,13 @@ export default function SplashScreen ({
     }
   }
   return (
-    <div className={`${styles.container} ${blur ? 'backdrop-blur-sm bg-rich-black/50' : 'bg-rich-black'}`} onClick={() => setDestroyed(true)}>
+    <div className={`${styles.container} ${blur ? styles.blur : styles.solid}`} onClick={() => setDestroyed(true)}>
       <div className={styles.content}>
         <div className={styles.icon}>{renderIcon()}</div>
         <div className={styles.title}>{title}</div>
         <div className={styles.message}>{message}</div>
 
-        <div className='mb-4'>
+        <div className={styles.childrenContainer}>
           {children}
         </div>
 

src/components/SplashScreen.module.css

@@ -1,5 +1,13 @@
 .container {
-  @apply fixed inset-0 flex items-center justify-center  text-white;
+  @apply fixed inset-0 flex items-center justify-center text-white;
+}
+
+.container.blur {
+  @apply backdrop-blur-sm bg-rich-black/50;
+}
+
+.container.solid {
+  @apply bg-rich-black;
 }
 
 .title {
@@ -16,4 +24,12 @@
 
 .content {
   @apply flex flex-col gap-y-2 items-center justify-center text-center bg-transparent;
+}
+
+.childrenContainer {
+  @apply mb-4;
+}
+
+.button {
+  @apply flex items-center justify-center;
 }