readjust stop search button position (#142)

thomassth · Aug 19, 2024 · db6c656 · db6c656
1 parent 7b16b35
commit db6c656
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/src/routes/Search.module.css b/src/routes/Search.module.css
@@ -29,6 +29,7 @@
     display: flex;
     justify-content: center;
     position: relative;
+    padding: 2rem 0;
 
     button {
       position: absolute;
@@ -37,7 +38,6 @@
   }
 
   span {
-    padding: 2rem 0;
     margin: 0;
     display: flex;
     justify-content: center;
@@ -48,12 +48,22 @@
     /* -webkit-appearance: textfield; */
     appearance: textfield;
     font-size: x-large;
+    padding: 2rem 0;
   }
 
   .center-input input {
     text-align: center;
     width: 100%;
   }
+
+  .submit-button {
+    background-color: black;
+
+    .subtle-search {
+      max-width: 100%;
+      width: 100%;
+    }
+  }
 }
 
 .search-block {

diff --git a/src/routes/Search.tsx b/src/routes/Search.tsx
@@ -37,15 +37,6 @@ export default function NewVehicle() {
       <form className={style["next-vehicle-container"]}>
         <div className={style.title}>
           <Title1>{t("home.nextVehicle")}</Title1>
-          <Button
-            type="submit"
-            appearance="outline"
-            icon={<ArrowRight12Filled />}
-            onClick={handleSearchClick}
-            className={style["subtle-search"]}
-            disabled={stopInput.length < 1}
-            title={t("buttons.search")}
-          />
         </div>
         <Input
           className={style["center-input"]}
@@ -56,6 +47,17 @@ export default function NewVehicle() {
           value={stopInput}
           placeholder={t("stops.ariaLabel") ?? ""}
         />
+        <div className={style["submit-button"]}>
+          <Button
+            type="submit"
+            appearance="primary"
+            icon={<ArrowRight12Filled />}
+            onClick={handleSearchClick}
+            className={style["subtle-search"]}
+            disabled={stopInput.length < 1}
+            title={t("buttons.search")}
+          />
+        </div>
       </form>
       <div className={style.separation}>
         <hr /> <span>{t("home.or")}</span> <hr />