fix: update vertical padding for card wrapper

buenos-nachos · buenos-nachos · commit ceb65e11193f · 2024-05-22T21:42:21.000Z
diff --git a/plugins/backstage-plugin-coder/src/components/CoderAuthFormCardWrapper/CoderAuthFormCardWrapper.tsx b/plugins/backstage-plugin-coder/src/components/CoderAuthFormCardWrapper/CoderAuthFormCardWrapper.tsx
@@ -5,16 +5,25 @@ import {
   type CoderAuthFormProps,
   CoderAuthForm,
 } from '../CoderAuthForm/CoderAuthForm';
+import { makeStyles } from '@material-ui/core';
 
 type Props = A11yInfoCardProps & CoderAuthFormProps;
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingTop: theme.spacing(6),
+    paddingBottom: theme.spacing(6),
+  },
+}));
+
 export function CoderAuthFormCardWrapper({
   children,
   headerContent,
   descriptionId,
   ...delegatedCardProps
 }: Props) {
   const { isAuthenticated } = useInternalCoderAuth();
+  const styles = useStyles();
 
   return (
     <A11yInfoCard
@@ -28,7 +37,9 @@ export function CoderAuthFormCardWrapper({
       {isAuthenticated ? (
         <>{children}</>
       ) : (
-        <CoderAuthForm descriptionId={descriptionId} />
+        <div className={styles.root}>
+          <CoderAuthForm descriptionId={descriptionId} />
+        </div>
       )}
     </A11yInfoCard>
   );
