Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-24 11:22:29 +01:00
Code Issues Releases Activity

fix hcaptcha page styling

Browse Source
This commit is contained in:
Puyodead1 2024-07-09 14:34:19 -04:00 committed by GitHub
parent 533faf634b
commit 180c34e5f0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 3 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/HCaptcha.tsx
View File

@ -1,36 +1,7 @@
import HCaptchaLib from "@hcaptcha/react-hcaptcha"; import HCaptchaLib from "@hcaptcha/react-hcaptcha";
import React from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
import Container from "./Container"; import { AuthContainer, Wrapper } from "./AuthComponents";
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;
}
`;
export const HeaderContainer = styled.div` export const HeaderContainer = styled.div`
width: 100%; width: 100%;
@ -63,7 +34,7 @@ interface Props {
function HCaptcha(props: Props) { function HCaptcha(props: Props) {
return ( return (
<Wrapper> <Wrapper>
<AuthBox> <AuthContainer>
<HeaderContainer> <HeaderContainer>
<Header>Welcome Back!</Header> <Header>Welcome Back!</Header>
<SubHeader>Beep boop. Boop beep?</SubHeader> <SubHeader>Beep boop. Boop beep?</SubHeader>
@ -79,7 +50,7 @@ function HCaptcha(props: Props) {
onExpire={props.onExpire} onExpire={props.onExpire}
/> />
</HeaderContainer> </HeaderContainer>
</AuthBox> </AuthContainer>
</Wrapper> </Wrapper>
); );
} }