Skip to content

Commit

Permalink
update to bootstrap 5.3 (#913)
Browse files Browse the repository at this point in the history
Co-authored-by: zkldi <20380519+zkldi@users.noreply.github.com>
  • Loading branch information
saintnoodle and zkrising committed Jul 29, 2023
1 parent 3683406 commit 0605927
Show file tree
Hide file tree
Showing 172 changed files with 4,766 additions and 2,001 deletions.
13 changes: 4 additions & 9 deletions client/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="<%= TACHI_NAME %> is a powerful, modular and modern rhythm game score tracker.">
<link rel="icon" type="image/x-icon" href="<%= VITE_CDN_URL %>/logos/favicon.ico" />

<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CRoboto:300,400,500,600,700"
rel="stylesheet" />

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<script type="module" src="/src/index.tsx"></script>
</head>

<body id="kt_body">
<body>
<noscript>
You have JavaScript disabled, probably.<br />
I also use a JavaScript blocker!<br />
Expand Down
12 changes: 7 additions & 5 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@
">0.2%",
"not dead",
"not op_mini all",
"ie 11"
"not ie <= 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"last 1 edge version",
"IE 11"
"not ie <= 11"
]
},
"dependencies": {
Expand Down Expand Up @@ -61,12 +61,13 @@
"prudence": "0.10.0",
"react": "17.0.2",
"react-async": "10.0.1",
"react-bootstrap": "1.6.1",
"react-bootstrap": "2.9.0-beta.0",
"react-dom": "17.0.2",
"react-google-recaptcha": "2.1.0",
"react-hot-toast": "2.0.0",
"react-markdown": "7.0.1",
"react-query": "3.18.1",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "5.1.2",
"react-select": "^5.6.1",
"rg-stats": "0.5.2",
Expand All @@ -80,10 +81,11 @@
"@types/luxon": "1.27.1",
"@types/react": "17.0.13",
"@types/react-dom": "17.0.8",
"@types/react-router-bootstrap": "0.26.1",
"@types/react-router-dom": "5.1.7",
"@vitejs/plugin-react": "^2.0.1",
"bootstrap-scss": "^4.6.2",
"sass": "1.32.8",
"bootstrap-scss": "^5.3.0",
"sass": "1.64.1",
"typescript": "4.9.4",
"vite": "^3.0.7"
}
Expand Down
62 changes: 0 additions & 62 deletions client/src/_style/base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -117,68 +117,6 @@
}
}

.activity-timeline {
@include media-breakpoint-down(sm) {
.timeline-item {
margin-bottom: 1rem;
padding-bottom: 1rem !important;
position: relative;
}

.timeline-item:after {
display: block;
width: 100%;
content: '';
position: absolute;
bottom: 0;
border-bottom: 1px $secondary solid;
}
}

.timeline-content {
display: flex;
flex-direction: column;
flex-wrap: wrap;

@include media-breakpoint-up(lg) {
margin-right: 2rem;
}


.timeline-content-inner {
display: flex;
justify-content: space-between;
align-items: center;

@include media-breakpoint-down(sm) {
flex-wrap: wrap;
flex-direction: column;
}
}

.timeline-content-title {
text-align: left;

@include media-breakpoint-up(lg) {
width: 70%;
}

@include media-breakpoint-down(sm) {
display: block;
align-self: start;
}
}

.timeline-content-timestamp {
text-align: right;
@include media-breakpoint-down(sm) {
margin-top: 1rem;
align-self: end;
}
}
}
}

.quest-anchor {
scroll-margin-top: 100px;
}
Expand Down
15 changes: 9 additions & 6 deletions client/src/app/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import React from "react";
import { Toaster } from "react-hot-toast";
import { QueryClient, QueryClientProvider } from "react-query";
import { BrowserRouter } from "react-router-dom";
import { WindowContextProvider } from "context/WindowContext";
import { Routes } from "./routes/AppRoutes";

const queryClient = new QueryClient({
Expand All @@ -27,12 +28,14 @@ export default function App({ basename }: { basename: string }) {
<AllLUGPTStatsContextProvider>
<LoadingScreen>
<BrowserRouter basename={basename}>
<MaterialThemeProvider>
<Toaster />
<SubheaderContextProvider>
<Routes />
</SubheaderContextProvider>
</MaterialThemeProvider>
<WindowContextProvider>
<MaterialThemeProvider>
<Toaster />
<SubheaderContextProvider>
<Routes />
</SubheaderContextProvider>
</MaterialThemeProvider>
</WindowContextProvider>
</BrowserRouter>
</LoadingScreen>
</AllLUGPTStatsContextProvider>
Expand Down
58 changes: 32 additions & 26 deletions client/src/app/pages/ErrorPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,35 +49,41 @@ export function ErrorPage({
message = customMessage;
}

const style =
statusCode === 999
? {
background: "red",
backgroundImage: `url(${ToCDNURL("/eggs/michael.png")})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
color: "red",
zIndex: 9999,
}
: { zIndex: 9999 };

const bgColour = statusCode === 999 ? " " : " bg-body ";

return (
<div
className="fullscreen text-center"
style={
statusCode === 999
? {
background: "red",
backgroundImage: `url(${ToCDNURL("/eggs/michael.png")})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
}
: undefined
}
className={`position-fixed inset-0 d-flex flex-column justify-content-center align-items-center${bgColour}text-center`}
style={style}
>
<div className="d-flex flex-column flex-root">
<div className="d-flex flex-row-fluid flex-column bgi-size-cover bgi-position-center bgi-no-repeat p-10 p-sm-30">
<h1
className="font-size-sm-100 font-weight-boldest mt-15"
style={{ fontSize: "150px" }}
>
{statusCode || "Completely Screwed."}
</h1>
<p className="font-size-h3 font-weight-light">{message}</p>
<a className="text-primary" onClick={() => HistorySafeGoBack(history)}>
Go Back.
</a>
</div>
</div>
<h1 className="display-1 enable-rfs fw-bold mt-15">
{statusCode || "Completely Screwed."}
</h1>
<p className="fs-3">{message}</p>
<a
href="#"
className="text-decoration-underline"
style={{ color: "inherit" }}
onClick={(e) => {
e.preventDefault();
HistorySafeGoBack(history);
}}
>
Go Back
</a>
</div>
);
}
135 changes: 64 additions & 71 deletions client/src/app/pages/ForgotPasswordPage.tsx
Original file line number Diff line number Diff line change
@@ -1,87 +1,80 @@
import { APIFetchV1 } from "util/api";
import { HistorySafeGoBack } from "util/misc";
import CenterPage from "components/util/CenterPage";
import SiteWordmark from "components/util/SiteWordmark";
import { Form, Col, Button } from "react-bootstrap";
import { Form, Button } from "react-bootstrap";
import React, { useState } from "react";
import { Link, useHistory } from "react-router-dom";
import MainPageTitleContainer from "components/util/MainPageTitleContainer";
import LoginPageLayout from "components/layout/LoginPageLayout";

export default function ForgotPasswordPage() {
const [email, setEmail] = useState("");
const history = useHistory();
const [hasResetPassword, setHasResetPassword] = useState(false);

return (
<CenterPage>
<Col lg="6">
<MainPageTitleContainer
title="Forgot Password"
desc="Hey, it happens to all of us :P"
/>
{hasResetPassword ? (
<div>
All good! An email has been sent to {email} IF an account exists with that
email.
<br />
<Link to="/">Go home.</Link>
</div>
) : (
<>
<Form
onSubmit={async (e) => {
e.preventDefault();
<LoginPageLayout heading="Forgot Password" description="Hey, it happens to all of us :P">
{hasResetPassword ? (
<div>
All good! An email has been sent to {email} IF an account exists with that
email.
<br />
<Link to="/">Go home.</Link>
</div>
) : (
<>
<Form
className="d-flex flex-column gap-4 w-100"
onSubmit={async (e) => {
e.preventDefault();

const res = await APIFetchV1(
"/auth/forgot-password",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ email }),
const res = await APIFetchV1(
"/auth/forgot-password",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
true,
true
);
body: JSON.stringify({ email }),
},
true,
true
);

if (res.success) {
setTimeout(() => setHasResetPassword(true), 300);
}
}}
>
<Form.Group>
<Form.Label>Email Address</Form.Label>
<Form.Control
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</Form.Group>
<Form.Group className="justify-content-center d-flex pt-4">
<span
onClick={() => HistorySafeGoBack(history)}
tabIndex={4}
className="mr-auto btn btn-outline-danger"
>
Back
</span>
<Button
tabIndex={3}
type="submit"
className="ml-auto"
disabled={email === ""}
>
Send Reset Link
</Button>
</Form.Group>
</Form>
<Link to="/screwed">
I signed up with a fake email, how can I recover my account?
</Link>
</>
)}
</Col>
</CenterPage>
if (res.success) {
setTimeout(() => setHasResetPassword(true), 300);
}
}}
>
<Form.Group>
<Form.Label>Email Address</Form.Label>
<Form.Control
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</Form.Group>
<Form.Group className="justify-content-center d-flex pt-4">
<span
onClick={() => HistorySafeGoBack(history)}
tabIndex={4}
className="me-auto btn btn-outline-danger"
>
Back
</span>
<Button
tabIndex={3}
type="submit"
className="ms-auto"
disabled={email === ""}
>
Send Reset Link
</Button>
</Form.Group>
</Form>
<Link to="/screwed">
I signed up with a fake email, how can I recover my account?
</Link>
</>
)}
</LoginPageLayout>
);
}
Loading

0 comments on commit 0605927

Please sign in to comment.