feat: improve checkbox ui for legal disclaimer (#310)

FuelLabs · Jun 21, 2022 · fb83b23 · fb83b23
1 parent 49a2d4e
commit fb83b23
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/packages/app/src/styles/components/welcome-page.css b/packages/app/src/styles/components/welcome-page.css
@@ -119,4 +119,8 @@
       @apply hidden;
     }
   }
+
+  #accept-agreement {
+    transform: translateY(5px);
+  }
 }
diff --git a/packages/app/src/systems/Welcome/components/WelcomeDone.tsx b/packages/app/src/systems/Welcome/components/WelcomeDone.tsx
@@ -23,21 +23,20 @@ export function WelcomeDone() {
         Now you&apos;re ready to swap and pool <b>test assets</b> using Fuel:
         the fastest modular execution layer.
       </p>
-      <div className="flex justify-center items-center mb-6">
-        <input
-          aria-label="Accept the use agreement"
-          id="accept-agreement"
-          checked={state.context.acceptAgreement}
-          onChange={(e) => {
-            send("ACCEPT_AGREEMENT", {
-              value: e.target.checked,
-            });
-          }}
-          className="h-5 w-5 mr-3 cursor-pointer"
-          type="checkbox"
-        />
+      <div className="flex justify-center mb-6">
         <label htmlFor="accept-agreement">
-          {" "}
+          <input
+            aria-label="Accept the use agreement"
+            id="accept-agreement"
+            checked={state.context.acceptAgreement}
+            onChange={(e) => {
+              send("ACCEPT_AGREEMENT", {
+                value: e.target.checked,
+              });
+            }}
+            className="h-5 w-5 mr-1 cursor-pointer"
+            type="checkbox"
+          />{" "}
           I have read and understand the{" "}
           <Link isExternal href={DISCLAIMER_URL}>
             legal disclaimer