From 180c34e5f00ba263608ca531a0e1989103656235 Mon Sep 17 00:00:00 2001
From: Puyodead1 <puyodead@protonmail.com>
Date: Tue, 9 Jul 2024 14:34:19 -0400
Subject: [PATCH] fix hcaptcha page styling

---
 src/components/HCaptcha.tsx | 35 +++--------------------------------
 1 file changed, 3 insertions(+), 32 deletions(-)

diff --git a/src/components/HCaptcha.tsx b/src/components/HCaptcha.tsx
index 1c9c0a6..b15b16a 100644
--- a/src/components/HCaptcha.tsx
+++ b/src/components/HCaptcha.tsx
@@ -1,36 +1,7 @@
 import HCaptchaLib from "@hcaptcha/react-hcaptcha";
 import React from "react";
 import styled from "styled-components";
-import Container from "./Container";
-
-export const Wrapper = styled(Container)`
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 100vh;
-	background-color: var(--background-secondary);
-`;
-
-export const AuthBox = styled(Container)`
-	background-color: var(--background-primary-alt);
-	padding: 32px;
-	font-size: 18px;
-	color: var(--text-muted);
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	text-align: center;
-
-	@media (max-width: 480px) {
-		width: 100%;
-		height: 100%;
-	}
-
-	@media (min-width: 480px) {
-		width: 480px;
-		border-radius: 18px;
-	}
-`;
+import { AuthContainer, Wrapper } from "./AuthComponents";
 
 export const HeaderContainer = styled.div`
 	width: 100%;
@@ -63,7 +34,7 @@ interface Props {
 function HCaptcha(props: Props) {
 	return (
 		<Wrapper>
-			<AuthBox>
+			<AuthContainer>
 				<HeaderContainer>
 					<Header>Welcome Back!</Header>
 					<SubHeader>Beep boop. Boop beep?</SubHeader>
@@ -79,7 +50,7 @@ function HCaptcha(props: Props) {
 						onExpire={props.onExpire}
 					/>
 				</HeaderContainer>
-			</AuthBox>
+			</AuthContainer>
 		</Wrapper>
 	);
 }