From 0193edce1d788aab7bc28c9968fc7c7124733dcb Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Tue, 30 Dec 2025 16:17:24 +0200 Subject: [PATCH] Refactor several to CSS Modules --- app/components/Main.module.css | 34 ++ app/components/Main.tsx | 21 +- app/components/layout/AnythingAdder.tsx | 5 +- app/components/layout/Footer.module.css | 121 +++++ app/components/layout/Footer.tsx | 36 +- .../layout/LogInButtonContainer.tsx | 3 +- app/components/layout/NavDialog.module.css | 92 ++++ app/components/layout/NavDialog.tsx | 25 +- app/components/layout/NotificationPopover.tsx | 5 +- .../layout/TopRightButtons.module.css | 33 ++ app/components/layout/TopRightButtons.tsx | 9 +- app/components/layout/UserItem.module.css | 40 ++ app/components/layout/UserItem.tsx | 14 +- app/components/layout/index.module.css | 99 ++++ app/components/layout/index.tsx | 22 +- .../badges/badges.module.css} | 38 +- .../badges/routes/badges.$id.edit.tsx | 13 +- app/features/badges/routes/badges.$id.tsx | 11 +- app/features/badges/routes/badges.tsx | 16 +- .../components/PerInkTankGrid.tsx | 31 +- .../analyzer.module.css} | 95 ++-- .../build-analyzer/routes/analyzer.tsx | 119 +++-- .../builds.$slug.stats.module.css} | 10 +- .../build-stats/routes/builds.$slug.stats.tsx | 18 +- .../calendar/calendar-event.module.css} | 20 +- .../calendar/calendar-new.module.css} | 12 +- .../calendar/calendar-schemas.server.ts | 5 +- app/features/calendar/calendar-schemas.ts | 1 - app/features/calendar/routes/calendar.$id.tsx | 19 +- app/features/calendar/routes/calendar.new.tsx | 26 +- .../front-page/routes/index.module.css} | 0 app/features/front-page/routes/index.tsx | 3 +- .../support.module.css} | 6 +- app/features/info/routes/support.tsx | 13 +- .../leaderboards/routes/leaderboards.tsx | 70 ++- .../map-planner/components/Planner.module.css | 127 ++++++ .../map-planner/components/Planner.tsx | 55 ++- .../{plans.css => plans-global.css} | 133 ------ app/features/map-planner/routes/plans.tsx | 2 +- .../object-damage-calculator.module.css} | 36 +- .../routes/object-damage-calculator.tsx | 70 ++- .../plus-suggestions/plus.module.css} | 48 +- .../routes/plus.suggestions.new.tsx | 5 +- .../routes/plus.suggestions.tsx | 29 +- app/features/plus-suggestions/routes/plus.tsx | 2 +- .../plus-voting-results.module.css} | 26 +- .../routes/plus.voting.results.tsx | 21 +- .../plus-voting/routes/plus.voting.tsx | 19 +- .../q.settings.module.css} | 24 +- .../sendouq-settings/routes/q.settings.tsx | 20 +- .../sendouq/components/MemberAdder.tsx | 7 +- .../team/routes/t.$customUrl.edit.tsx | 16 +- .../team/routes/t.$customUrl.index.tsx | 34 +- .../team/routes/t.$customUrl.join.tsx | 5 +- .../team/routes/t.$customUrl.roster.tsx | 20 +- app/features/team/routes/t.$customUrl.tsx | 27 +- app/features/team/routes/t.tsx | 19 +- .../team/{team.css => team.module.css} | 110 ++--- .../top-search/components/Placements.tsx | 17 +- .../top-search/routes/xsearch.player.$id.tsx | 2 - app/features/top-search/routes/xsearch.tsx | 2 - .../{top-search.css => top-search.module.css} | 32 +- .../components/Bracket/Elimination.tsx | 9 +- .../components/Bracket/Match.tsx | 57 ++- .../components/Bracket/PlacementsTable.tsx | 19 +- .../components/Bracket/RoundHeader.tsx | 10 +- .../components/Bracket/RoundRobin.tsx | 7 +- .../components/Bracket/Swiss.tsx | 6 +- .../{bracket.css => bracket.module.css} | 99 ++-- .../components/Bracket/index.tsx | 6 +- .../components/CastInfo.tsx | 14 +- .../components/DeadlineInfoPopover.tsx | 23 +- .../components/MatchActions.tsx | 20 +- .../components/MatchRosters.tsx | 13 +- .../components/StartedMatch.tsx | 109 ++--- .../components/TeamRosterInputs.tsx | 54 +-- .../components/TournamentTeamActions.tsx | 9 +- .../routes/to.$id.brackets.tsx | 27 +- .../routes/to.$id.matches.$mid.tsx | 15 +- ...cket.css => tournament-bracket.module.css} | 190 ++++---- .../components/EventCalendar.tsx | 21 +- .../components/SocialLinksList.tsx | 16 +- .../routes/org.$slug.tsx | 19 +- ...css => tournament-organization.module.css} | 56 +-- .../routes/to.$id.subs.new.tsx | 3 +- .../tournament/components/TeamWithRoster.tsx | 38 +- .../components/TournamentStream.tsx | 7 +- .../tournament/routes/to.$id.join.tsx | 3 +- .../tournament/routes/to.$id.register.tsx | 88 ++-- .../tournament/routes/to.$id.results.tsx | 11 +- .../tournament/routes/to.$id.seeds.tsx | 44 +- .../tournament/routes/to.$id.teams.$tid.tsx | 69 ++- app/features/tournament/routes/to.$id.tsx | 3 - .../{tournament.css => tournament.module.css} | 257 +++++------ .../user-page/components/UserResultsTable.tsx | 3 +- .../routes/u.$identifier.builds.new.tsx | 4 +- .../user-page/routes/u.$identifier.builds.tsx | 9 +- .../routes/u.$identifier.edit.module.css} | 0 .../user-page/routes/u.$identifier.edit.tsx | 26 +- .../user-page/routes/u.$identifier.index.tsx | 49 +- .../u.$identifier.results.highlights.tsx | 10 +- .../routes/u.$identifier.seasons.tsx | 67 +-- .../user-page/routes/u.$identifier.tsx | 2 +- .../user-page/user-page.module.css} | 136 +++--- app/features/user-search/routes/u.tsx | 18 +- app/root.tsx | 3 +- app/styles/layout.css | 427 ------------------ 107 files changed, 2054 insertions(+), 2015 deletions(-) create mode 100644 app/components/Main.module.css create mode 100644 app/components/layout/Footer.module.css create mode 100644 app/components/layout/NavDialog.module.css create mode 100644 app/components/layout/TopRightButtons.module.css create mode 100644 app/components/layout/UserItem.module.css rename app/{styles/badges.css => features/badges/badges.module.css} (76%) rename app/features/build-analyzer/{analyzer.css => routes/analyzer.module.css} (75%) rename app/features/build-stats/{build-stats.css => routes/builds.$slug.stats.module.css} (73%) rename app/{styles/calendar-event.css => features/calendar/calendar-event.module.css} (77%) rename app/{styles/calendar-new.css => features/calendar/calendar-new.module.css} (65%) rename app/{styles/front.module.css => features/front-page/routes/index.module.css} (100%) rename app/features/info/{support.css => routes/support.module.css} (84%) create mode 100644 app/features/map-planner/components/Planner.module.css rename app/features/map-planner/{plans.css => plans-global.css} (51%) rename app/features/object-damage-calculator/{calculator.css => routes/object-damage-calculator.module.css} (79%) rename app/{styles/plus.css => features/plus-suggestions/plus.module.css} (72%) rename app/{styles/plus-history.css => features/plus-voting/plus-voting-results.module.css} (72%) rename app/features/sendouq-settings/{q-settings.css => routes/q.settings.module.css} (74%) rename app/features/team/{team.css => team.module.css} (78%) rename app/features/top-search/{top-search.css => top-search.module.css} (73%) rename app/features/tournament-bracket/components/Bracket/{bracket.css => bracket.module.css} (68%) rename app/features/tournament-bracket/{tournament-bracket.css => tournament-bracket.module.css} (65%) rename app/features/tournament-organization/{tournament-organization.css => tournament-organization.module.css} (74%) rename app/features/tournament/{tournament.css => tournament.module.css} (69%) rename app/{styles/u.$identifier.module.css => features/user-page/routes/u.$identifier.edit.module.css} (100%) rename app/{styles/u.css => features/user-page/user-page.module.css} (78%) delete mode 100644 app/styles/layout.css diff --git a/app/components/Main.module.css b/app/components/Main.module.css new file mode 100644 index 000000000..e80d6f8b2 --- /dev/null +++ b/app/components/Main.module.css @@ -0,0 +1,34 @@ +.container { + display: flex; + flex-direction: row; +} + +.main { + padding-block: var(--s-4) var(--s-32); +} + +.normal { + width: 100%; + max-width: 48rem; + margin: 0 auto; + padding-inline: var(--s-3); + min-height: 75vh; +} + +.narrow { + width: 100%; + max-width: 24rem; + margin: 0 auto; +} + +.wide { + width: 100%; + max-width: 72rem; + margin: 0 auto; +} + +@media screen and (display-mode: standalone) { + .main { + padding-block-start: env(safe-area-inset-top); + } +} diff --git a/app/components/Main.tsx b/app/components/Main.tsx index 70acd8ad6..4ae8be565 100644 --- a/app/components/Main.tsx +++ b/app/components/Main.tsx @@ -2,6 +2,7 @@ import { isRouteErrorResponse, useRouteError } from "@remix-run/react"; import clsx from "clsx"; import type * as React from "react"; import { useHasRole } from "~/modules/permissions/hooks"; +import styles from "./Main.module.css"; export const Main = ({ children, @@ -26,20 +27,20 @@ export const Main = ({ !isRouteErrorResponse(error); return ( -
+
{ if (width === "narrow") { - return "half-width"; + return styles.narrow; } if (width === "wide") { - return "bigger"; + return styles.wide; } - return "main"; + return styles.normal; }; diff --git a/app/components/layout/AnythingAdder.tsx b/app/components/layout/AnythingAdder.tsx index 8021b9f40..58e7b6b18 100644 --- a/app/components/layout/AnythingAdder.tsx +++ b/app/components/layout/AnythingAdder.tsx @@ -21,6 +21,7 @@ import { type SendouMenuItemProps, } from "../elements/Menu"; import { PlusIcon } from "../icons/Plus"; +import styles from "./TopRightButtons.module.css"; export function AnythingAdder() { const { t } = useTranslation(["common"]); @@ -103,10 +104,10 @@ export function AnythingAdder() { - + } > diff --git a/app/components/layout/Footer.module.css b/app/components/layout/Footer.module.css new file mode 100644 index 000000000..8dfc72a18 --- /dev/null +++ b/app/components/layout/Footer.module.css @@ -0,0 +1,121 @@ +.footer { + display: flex; + flex-direction: column; + padding: var(--s-2-5); + background-color: var(--color-bg-high); + gap: var(--s-6); + margin-block-start: auto; + padding-block-end: var(--s-32); +} + +.linkList { + display: flex; + justify-content: space-evenly; + font-size: var(--fonts-xxs); +} + +.socials { + display: flex; + justify-content: center; + gap: var(--s-2); +} + +.socialLink { + display: flex; + max-width: 10rem; + height: 12rem; + flex: 1 1 0; + flex-direction: column; + align-items: center; + justify-content: space-between; + padding: var(--s-4); + border-radius: var(--rounded); + background-color: var(--color-bg-higher); + cursor: pointer; + font-size: var(--fonts-lg); +} + +.socialIcon { + height: 2.25rem; + transition: transform 0.25s ease-in-out; +} + +.socialLink:hover > .socialIcon { + transform: translateY(-0.3rem); +} + +.socialHeader { + text-align: center; +} + +.socialHeader > p { + font-size: var(--fonts-xxs); +} + +.patronTitle { + display: flex; + align-items: flex-end; + justify-content: center; + font-size: var(--fonts-sm); + font-weight: var(--semi-bold); + gap: var(--s-2); +} + +.patronList { + display: flex; + max-width: 75vw; + flex-wrap: wrap; + justify-content: center; + padding: 0; + margin: 0 auto; + font-size: var(--fonts-xs); + gap: var(--s-1); + list-style: none; + margin-block-start: var(--s-2); +} + +.patron { + max-width: 250px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.copyrightNote { + display: flex; + flex-direction: column; + color: var(--color-text-high); + font-size: var(--fonts-xxs); + text-align: center; +} + +@media screen and (max-width: 640px) { + .socials { + flex-direction: column; + } + + .socialLink { + max-width: initial; + flex-direction: row; + } + + .socialHeader { + display: flex; + align-items: center; + gap: var(--s-2); + text-align: initial; + } + + .socialHeader > p { + margin-block-start: var(--s-1); + } + + .socialIcon { + height: 1.75rem; + } + + .socialLink:hover > .socialIcon { + transform: translateX(-0.3rem); + } +} diff --git a/app/components/layout/Footer.tsx b/app/components/layout/Footer.tsx index 8f75484e5..cb8067ee8 100644 --- a/app/components/layout/Footer.tsx +++ b/app/components/layout/Footer.tsx @@ -17,6 +17,7 @@ import { Image } from "../Image"; import { DiscordIcon } from "../icons/Discord"; import { GitHubIcon } from "../icons/GitHub"; import { PatreonIcon } from "../icons/Patreon"; +import styles from "./Footer.module.css"; export function Footer() { const { t } = useTranslation(); @@ -24,45 +25,45 @@ export function Footer() { const currentYear = new Date().getFullYear(); return ( -