Remove Card component from migration credentials screen

Automattic · Sep 19, 2024 · 342a454 · 342a454
1 parent 2190fff
commit 342a454
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/...low/internals/steps-repository/site-migration-credentials/components/credentials-form.tsx b/...low/internals/steps-repository/site-migration-credentials/components/credentials-form.tsx
@@ -1,4 +1,3 @@
-import { Card } from '@automattic/components';
 import { useIsEnglishLocale } from '@automattic/i18n-utils';
 import { NextButton } from '@automattic/onboarding';
 import { useTranslate } from 'i18n-calypso';
@@ -46,7 +45,7 @@ export const CredentialsForm: FC< CredentialsFormProps > = ( { onSubmit, onSkip
 					) }
 				></Banner>
 			) }
-			<Card>
+			<div className="site-migration-credentials__content">
 				<AccessMethodPicker control={ control } />
 
 				<hr />
@@ -76,7 +75,7 @@ export const CredentialsForm: FC< CredentialsFormProps > = ( { onSubmit, onSkip
 						{ translate( 'Continue' ) }
 					</NextButton>
 				</div>
-			</Card>
+			</div>
 
 			<div className="site-migration-credentials__skip">
 				<button

diff --git a/...stepper/declarative-flow/internals/steps-repository/site-migration-credentials/style.scss b/...stepper/declarative-flow/internals/steps-repository/site-migration-credentials/style.scss
@@ -7,13 +7,15 @@
 		}
 	}
 
-	.card {
+	.site-migration-credentials__content,
+	.site-migration-credentials__error-banner {
+		margin: 0 auto 16px;
 		max-width: 500px;
-		padding: 2em;
 
-		@media (max-width: $break-mobile) {
-			padding: 1.25em;
+		@media (min-width: $break-mobile) {
+			margin-bottom: 16px;
 		}
+
 		hr {
 			margin-top: 1em;
 			background: var(--color-border-subtle);
@@ -120,7 +122,8 @@
 	}
 	.site-migration-credentials__error-banner {
 		border-left-color: var(--color-error);
-		&.card {
+
+		&.site-migration-credentials__content {
 			padding: 1rem;
 		}
 	}