Skip to content

Commit

Permalink
style: standardised responsive layout
Browse files Browse the repository at this point in the history
  • Loading branch information
Harry Curtis committed Aug 23, 2024
1 parent 704fa72 commit 6803c21
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 164 deletions.
2 changes: 1 addition & 1 deletion src/pages/LessonPlanCreate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export const LessonPlanCreate = () => {
}}
className="mx-3 my-2"
>
<Card className="mx-3 mx-lg-5">
<Card className="mx-lg-5">
<Card.Header>New Lesson Plan</Card.Header>
<Card.Body>
<Form>
Expand Down
202 changes: 100 additions & 102 deletions src/pages/Register.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,111 +98,109 @@ export const Register = () => {
};

return (
<Container className="col-12 col-md-6 pt-3 px-2 pt-md-5 px-md-4 ms-md-4 pb-4 align-middle">
<TransitionDecorator>
<Stack gap={1}>
<h1 className="display-3 mt-5 pt-5" aria-label="title">
Create an account
</h1>
<p aria-label="subtitle">Enter a username and password</p>
</Stack>
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Group controlId="form">
<FloatingLabel controlId="username-label" label="Your username">
<TransitionDecorator>
<Stack gap={1}>
<h1 className="display-3 mt-5 pt-5" aria-label="title">
Create an account
</h1>
<p aria-label="subtitle">Enter a username and password</p>
</Stack>
<Form noValidate validated={validated} onSubmit={handleSubmit} className="col-auto col-sm-8 col-lg-6 col-xl-5">
<Form.Group controlId="form">
<FloatingLabel controlId="username-label" label="Your username">
<Form.Control
type="text"
placeholder="Your username"
name="username"
className="mb-2"
title="Type your username here."
aria-label="username-input"
onChange={handleChange}
/>
</FloatingLabel>
<InputGroup hasValidation className="mb-2">
<FloatingLabel controlId="password-label" label="Your password">
<Form.Control
type="text"
placeholder="Your username"
name="username"
className="mb-2"
title="Type your username here."
aria-label="username-input"
type={hidePassword ? "password" : "text"}
placeholder="Your password"
name="password"
title="Type your password here."
aria-label="password-input"
onChange={handleChange}
/>
</FloatingLabel>
<InputGroup hasValidation className="mb-2">
<FloatingLabel controlId="password-label" label="Your password">
<Form.Control
type={hidePassword ? "password" : "text"}
placeholder="Your password"
name="password"
title="Type your password here."
aria-label="password-input"
onChange={handleChange}
/>
</FloatingLabel>
<Button
variant="outline-secondary"
onClick={() => setHidePassword(!hidePassword)}
title="Click here to reveal your password."
aria-label="hide-password-button"
>
<Image
src={
hidePassword
? "/simplifica/eye.svg"
: "/simplifica/eye-slash.svg"
}
alt="Icon of an eye."
/>
</Button>
</InputGroup>
<InputGroup hasValidation className="mb-2">
<FloatingLabel
controlId="confirm-password-label"
label="Confirm your password"
>
<Form.Control
type={hideConfirmPassword ? "password" : "text"}
placeholder="Confirm your password"
name="confirmedPassword"
aria-label="confirm-password-input"
title="Type your password again here."
onChange={handleChange}
/>
</FloatingLabel>
<Button
variant="outline-secondary"
onClick={() => setHideConfirmPassword(!hideConfirmPassword)}
title="Click here to reveal your password."
aria-label="hide-confirm-password-button"
>
<Image
src={
hideConfirmPassword
? "/simplifica/eye.svg"
: "/simplifica/eye-slash.svg"
}
alt="Icon of an eye."
/>
</Button>
</InputGroup>
</Form.Group>
<ButtonAnimationDecorator>
<PrimaryButton
ariaLabel="get-started-button"
title="Click here to register your account."
disabled={isRegistering}
content={
isRegistering ? (
<span>
Creating your account...{" "}
<Spinner
as="span"
animation="border"
className="mx-3"
size="sm"
role="status"
aria-hidden="true"
/>
</span>
) : (
"Get Started"
)
}
/>
</ButtonAnimationDecorator>
</Form>
</TransitionDecorator>
</Container>
<Button
variant="outline-secondary"
onClick={() => setHidePassword(!hidePassword)}
title="Click here to reveal your password."
aria-label="hide-password-button"
>
<Image
src={
hidePassword
? "/simplifica/eye.svg"
: "/simplifica/eye-slash.svg"
}
alt="Icon of an eye."
/>
</Button>
</InputGroup>
<InputGroup hasValidation className="mb-2">
<FloatingLabel
controlId="confirm-password-label"
label="Confirm your password"
>
<Form.Control
type={hideConfirmPassword ? "password" : "text"}
placeholder="Confirm your password"
name="confirmedPassword"
aria-label="confirm-password-input"
title="Type your password again here."
onChange={handleChange}
/>
</FloatingLabel>
<Button
variant="outline-secondary"
onClick={() => setHideConfirmPassword(!hideConfirmPassword)}
title="Click here to reveal your password."
aria-label="hide-confirm-password-button"
>
<Image
src={
hideConfirmPassword
? "/simplifica/eye.svg"
: "/simplifica/eye-slash.svg"
}
alt="Icon of an eye."
/>
</Button>
</InputGroup>
</Form.Group>
<ButtonAnimationDecorator>
<PrimaryButton
ariaLabel="get-started-button"
title="Click here to register your account."
disabled={isRegistering}
content={
isRegistering ? (
<span>
Creating your account...{" "}
<Spinner
as="span"
animation="border"
className="mx-3"
size="sm"
role="status"
aria-hidden="true"
/>
</span>
) : (
"Get Started"
)
}
/>
</ButtonAnimationDecorator>
</Form>
</TransitionDecorator>
);
};
124 changes: 63 additions & 61 deletions src/pages/SignIn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,69 +67,71 @@ export const SignIn = () => {
};

return (
<Container className="col-12 col-md-6 pt-3 px-2 pt-md-5 px-md-4 ms-md-4 align-middle">
<TransitionDecorator>
<Stack gap={1} className="mb-3">
<h1 className="display-3 mt-5 pt-5" aria-label="title">
Welcome back
</h1>
</Stack>
<Form noValidate onSubmit={handleSubmit}>
<Form.Group controlId="form">
<FloatingLabel controlId="username-label" label="Your username">
<TransitionDecorator>
<Stack gap={1}>
<h1 className="display-3 mt-5 pt-5" aria-label="title">
Welcome back
</h1>
</Stack>
<Form
noValidate
onSubmit={handleSubmit}
className="col-auto col-sm-8 col-lg-6 col-xl-5"
>
<Form.Group controlId="form">
<FloatingLabel controlId="username-label" label="Your username">
<Form.Control
type="text"
placeholder="Your username"
className="mb-2"
title="Type your username here."
aria-label="username-input"
onChange={handleUsernameChange}
/>
</FloatingLabel>
<InputGroup className="mb-2">
<FloatingLabel controlId="password-label" label="Your password">
<Form.Control
type="text"
placeholder="Your username"
className="mb-2"
title="Type your username here."
aria-label="username-input"
onChange={handleUsernameChange}
type={hidePassword ? "password" : "text"}
placeholder="Your password"
title="Type your password here."
aria-label="password-input"
onChange={handlePasswordChange}
/>
</FloatingLabel>
<InputGroup className="mb-2">
<FloatingLabel controlId="password-label" label="Your password">
<Form.Control
type={hidePassword ? "password" : "text"}
placeholder="Your password"
title="Type your password here."
aria-label="password-input"
onChange={handlePasswordChange}
/>
</FloatingLabel>
<Button
variant="outline-secondary"
onClick={() => setHidePassword(!hidePassword)}
title="Click here to reveal your password."
aria-label="hide-password-button"
>
<Image
src={
hidePassword
? "/simplifica/eye.svg"
: "/simplifica/eye-slash.svg"
}
alt="Icon of an eye."
/>
</Button>
</InputGroup>
</Form.Group>
<ButtonAnimationDecorator>
<PrimaryButton
ariaLabel="sign-in-button"
title="Click here to sign into your account."
disabled={isSigningIn}
content={
isSigningIn ? (
<LoadingWithSpinner loadingText="Signing in" />
) : (
"Sign In"
)
}
onClick={handleSubmit}
/>
</ButtonAnimationDecorator>
</Form>
</TransitionDecorator>
</Container>
<Button
variant="outline-secondary"
onClick={() => setHidePassword(!hidePassword)}
title="Click here to reveal your password."
aria-label="hide-password-button"
>
<Image
src={
hidePassword
? "/simplifica/eye.svg"
: "/simplifica/eye-slash.svg"
}
alt="Icon of an eye."
/>
</Button>
</InputGroup>
</Form.Group>
<ButtonAnimationDecorator>
<PrimaryButton
ariaLabel="sign-in-button"
title="Click here to sign into your account."
disabled={isSigningIn}
content={
isSigningIn ? (
<LoadingWithSpinner loadingText="Signing in" />
) : (
"Sign In"
)
}
onClick={handleSubmit}
/>
</ButtonAnimationDecorator>
</Form>
</TransitionDecorator>
);
};

0 comments on commit 6803c21

Please sign in to comment.