fix: home screen ui (#71)

res/css/superhero/onboarding.css

@@ -22,11 +22,18 @@
     max-width: 100%;
 }
 
+.mx_UserOnboardingPage .container {
+    max-width: 1000px !important;
+    margin: 0 auto;
+}
+
 .sh_userOnboarding {
-    flex: 1;
-    background: var(--cpd-color-gray-300);
+    background: #25282d;
     border-radius: 16px;
-    max-width: 90%;
+    margin-bottom: 32px;
+}
+.cpd-theme-light .sh_userOnboarding {
+    background: #e1e6ec;
 }
 
 .sh_userOnboarding_container {
@@ -37,6 +44,7 @@
     border-radius: 16px;
     background: linear-gradient(180deg, rgba(97, 71, 255, 0.15) 0%, transparent 100%);
 }
+
 .cpd-theme-light .sh_userOnboarding_container {
     background: linear-gradient(180deg, rgba(37, 40, 45, 0.15) 0%, transparent 100%);
 }
@@ -52,12 +60,15 @@
 .sh_userOnboarding_bot_art img {
     width: 100%;
     height: 100%;
+    margin-left: 20px;
+    max-width: 300px;
 }
+
 .sh_userOnboarding_text {
     display: flex;
     flex-direction: column;
     gap: 8px;
-    max-width: 70%;
+    max-width: 75%;
     margin-top: 32px;
 }
 
@@ -75,9 +86,10 @@
 }
 
 .sh_userOnboarding h3 {
-    font-size: clamp(1rem, 2.5vw, 2rem);
-    margin: 0px;
-    padding: 0px;
+    font-size: clamp(1rem, 2.5vw, 1.8rem);
+    line-height: 20px;
+    margin: 0;
+    padding: 32px 0 0;
 }
 
 .sh_userOnboarding p {
@@ -95,7 +107,6 @@
     flex-direction: column;
     gap: 8px;
     margin-right: 20px;
-    /* margin-top: 20px; */
     padding-bottom: 32px;
 }
 .sh_userOnboarding_left_content {
@@ -120,9 +131,9 @@
 .sh_userOnboarding_download_option {
     display: flex;
     flex-direction: row;
-    background-color: rgba(58, 61, 66, 1);
+    background-color: rgba(79, 80, 82, 1);
     border-radius: 8px;
-    padding: 7px 18px;
+    padding: 7px 0;
     align-items: center;
     justify-content: center;
     align-items: center;
@@ -144,6 +155,11 @@
     margin-top: 5px;
 }
 
+.sh_userOnboarding_btn:hover,
+.sh_userOnboarding_download_option:hover {
+    opacity: 0.8;
+}
+
 @media (max-width: 1025px) {
     .sh_userOnboarding_text {
         max-width: 100%;
@@ -154,12 +170,28 @@
         border-top-right-radius: 0px;
     }
 
+    .sh_userOnboarding_bot_art img {
+        margin-left: 15px;
+    }
+
+    .sh_userOnboarding_left,
+    .sh_userOnboarding_bot_art {
+        flex: 0.5;
+    }
+
     .sh_userOnboarding_container {
         background: transparent;
+        padding-left: 24px;
     }
+
     .sh_userOnboarding_bot_art {
         margin-top: -30px;
     }
+
+    .sh_userOnboarding_chat {
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 @media (max-width: 960px) {
@@ -169,6 +201,9 @@
 }
 
 @media (max-width: 770px) {
+    .sh_userOnboarding_container {
+        padding-left: 16px;
+    }
     .sh_userOnboarding_text {
         max-width: 100%;
     }

src/components/structures/HomePage.tsx

@@ -44,8 +44,10 @@ const HomePage: React.FC<IProps> = () => {
 
     return (
         <AutoHideScrollbar className="mx_UserOnboardingPage" style={{ maxWidth: "100%" }}>
-            <UserOnboardingHeader />
-            <UserOnboardingList tasks={tasks} />
+            <div className="container">
+                <UserOnboardingHeader />
+                <UserOnboardingList tasks={tasks} />
+            </div>
         </AutoHideScrollbar>
     );
 };