style: made style changes on onboarding service form

Cubeseed · Jun 3, 2024 · 54cfe91 · 54cfe91
1 parent 47171fc
commit 54cfe91
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/cubeseed_login/src/component/forms/ServiceForm.tsx b/cubeseed_login/src/component/forms/ServiceForm.tsx
@@ -9,11 +9,10 @@ export default function ServiceForm({ setService }: any) {
   }
 
   return (
-    <div className=" m-auto flex w-3/6 flex-col justify-center align-middle ">
-      <div className=" mb-4 mt-8">
-        <h1 className="signup-text mb-4 mt-8 text-3xl">
-          Firstly, who are you?
-        </h1>
+    <div className={serviceStyles.container}>
+      <div className={`${serviceStyles.heading} mb-4 mt-8`}>
+        <h1 className="signup-text">Firstly, who are you?</h1>
+        <p>Select the option that best describes you.</p>
       </div>
 
       <div className={serviceStyles.form} onSubmit={handleSubmit}>

diff --git a/cubeseed_login/src/styles/service.module.scss b/cubeseed_login/src/styles/service.module.scss
@@ -22,7 +22,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 12px 24px 12px 16px;
+    padding: 12px 16px 12px 16px;
     gap: 16px;
   }
 

diff --git a/cubeseed_login/src/styles/serviceform.module.scss b/cubeseed_login/src/styles/serviceform.module.scss
@@ -1,8 +1,23 @@
+.container {
+  width: 100%;
+  max-width: 600px; /* Adjust as needed */
+  margin: auto;
+}
+
 .form {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  place-items: center;
-  gap: 10px;
+  // place-items: center;
+  gap: 25px;
   justify-content: center;
   align-items: center;
 }
+
+.heading {
+  margin-bottom: 20px;
+  padding: 20px;
+}
+
+.heading > h1 {
+  font-size: 24px;
+}