Use in-repo container in SignUp component

AstroPlant · Jan 10, 2024 · c23d751 · c23d751
1 parent cf24068
commit c23d751
Showing 1 changed file with 33 additions and 38 deletions.
diff --git a/astroplant-frontend/src/scenes/SignUp.tsx b/astroplant-frontend/src/scenes/SignUp.tsx
@@ -1,19 +1,15 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import {
-  Container,
-  Segment,
-  Header,
-  Icon,
-  Transition,
-} from "semantic-ui-react";
+import { Header, Icon, Transition } from "semantic-ui-react";
 import { JSONSchema7 } from "json-schema";
 
 import ApiForm from "~/Components/ApiForm";
 import HeadTitle from "~/Components/HeadTitle";
 import { api } from "~/api";
 
+import commonStyle from "~/Common.module.css";
+
 const SignUpForm = ApiForm();
 
 export default function SignUpPage() {
@@ -80,36 +76,35 @@ export default function SignUpPage() {
         main="Create an account"
         secondary="Create an account to connect to the AstroPlant world."
       />
-      <Container text style={{ marginTop: "1em" }}>
-        <Segment padded>
-          {done ? (
-            <>
-              <Header size="huge" icon textAlign="center">
-                <Transition animation="drop" duration={450} transitionOnMount>
-                  <Icon name="check" circular />
-                </Transition>
-                <Header.Content>Success!</Header.Content>
-              </Header>
-              <Container textAlign="center">
-                <p>
-                  Your account has been created.{" "}
-                  <Link to="/log-in">You can now log in.</Link>
-                </p>
-              </Container>
-            </>
-          ) : (
-            <SignUpForm
-              idPrefix="signUpForm"
-              schema={schema}
-              uiSchema={uiSchema}
-              validate={validate}
-              send={send}
-              onResponse={onResponse}
-              submitLabel={t("signUp.createAccount")}
-            />
-          )}
-        </Segment>
-      </Container>
+      <article
+        className={commonStyle.containerRegular}
+        style={{ marginTop: "1rem" }}
+      >
+        {done ? (
+          <>
+            <Header size="huge" icon textAlign="center">
+              <Transition animation="drop" duration={450} transitionOnMount>
+                <Icon name="check" circular />
+              </Transition>
+              <Header.Content>Success!</Header.Content>
+            </Header>
+            <p style={{ textAlign: "center" }}>
+              Your account has been created.{" "}
+              <Link to="/log-in">You can now log in.</Link>
+            </p>
+          </>
+        ) : (
+          <SignUpForm
+            idPrefix="signUpForm"
+            schema={schema}
+            uiSchema={uiSchema}
+            validate={validate}
+            send={send}
+            onResponse={onResponse}
+            submitLabel={t("signUp.createAccount")}
+          />
+        )}
+      </article>
     </>
   );
 }