From 812a48e4c5fda3bb6ee764a20c7a80c8e0169f59 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 8 Sep 2021 15:17:40 +1000
Subject: [PATCH] update auth style

---
 src/components/Auth/AuthLayout.tsx | 10 +---------
 src/components/Auth/FirebaseUi.tsx | 10 +++++-----
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/components/Auth/AuthLayout.tsx b/src/components/Auth/AuthLayout.tsx
index fa889a0d..57b208f4 100644
--- a/src/components/Auth/AuthLayout.tsx
+++ b/src/components/Auth/AuthLayout.tsx
@@ -97,15 +97,7 @@ export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
         }
       >
         <Logo />
-        <Typography
-          variant="body2"
-          sx={{
-            display: "block",
-            mt: 1,
-
-            color: "text.disabled",
-          }}
-        >
+        <Typography variant="body2" color="text.disabled" display="block">
           Project: {process.env.REACT_APP_FIREBASE_PROJECT_ID}
         </Typography>
         {children}
diff --git a/src/components/Auth/FirebaseUi.tsx b/src/components/Auth/FirebaseUi.tsx
index 3548ac1a..312c3bbd 100644
--- a/src/components/Auth/FirebaseUi.tsx
+++ b/src/components/Auth/FirebaseUi.tsx
@@ -57,7 +57,7 @@ const useStyles = makeStyles((theme) =>
         },
 
         "& .mdl-button": {
-          borderRadius: 24,
+          borderRadius: (theme.shape.borderRadius as number) * (48 / 32),
           ...theme.typography.button,
         },
         "& .mdl-button--raised": { boxShadow: "none" },
@@ -108,7 +108,7 @@ const useStyles = makeStyles((theme) =>
             zIndex: 0,
 
             backgroundColor: "#fff",
-            borderRadius: "50%",
+            borderRadius: theme.shape.borderRadius,
           },
           "& .firebaseui-idp-icon-wrapper img": {
             position: "relative",
@@ -162,8 +162,8 @@ const useStyles = makeStyles((theme) =>
       [theme.breakpoints.down("sm")]: { display: "block" },
 
       textAlign: "center",
-      color: theme.palette.text.disabled,
-      marginBottom: theme.spacing(-1),
+      color: theme.palette.text.primary,
+      margin: theme.spacing(3, 0, -3),
     },
 
     skeleton: {
@@ -172,7 +172,7 @@ const useStyles = makeStyles((theme) =>
       "& > *": {
         width: "100%",
         height: 48,
-        borderRadius: 24,
+        borderRadius: (theme.shape.borderRadius as number) * (48 / 32),
       },
 
       "& > * + *": {