Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-10-26 20:43:36 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix /q/settings styles

Browse Source
This commit is contained in:
Kalle
2026-03-17 21:13:28 +02:00
parent 7643e815a4
commit bd3b285364
7 changed files with 78 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/features/sendouq-match/routes/q.match.$id.module.css
View File

@@ -109,6 +109,11 @@
outline: none !important;
}
.preferenceEmoji {
filter: grayscale(100%);
transition: all 0.2s;
}
@container (width >= 640px) {
.teamsContainer {
grid-template-columns: 1fr 1fr;

4
app/features/sendouq-match/routes/q.match.$id.tsx
View File

@@ -1089,7 +1089,7 @@ function MapListMap({
>
<img
src={preferenceEmojiUrl(preference)}
className="q-settings__radio__emoji"
className={styles.preferenceEmoji}
width={18}
alt={`${preference} emoji`}
/>
@@ -1342,7 +1342,7 @@ function MapListMapPickInfo({
<div key={userId} className="stack horizontal items-center xs">
<img
src={preferenceEmojiUrl(preference)}
className="q-settings__radio__emoji"
className={styles.preferenceEmoji}
width={18}
alt={`${preference} emoji`}
/>

35
app/features/sendouq-settings/components/PreferenceRadioGroup.module.css Normal file
View File

@@ -0,0 +1,35 @@
.radio {
background-color: var(--color-bg-high);
font-size: var(--font-xs);
text-transform: uppercase;
font-weight: var(--weight-semi);
color: var(--color-text-high);
padding: var(--s-1) var(--s-2);
border-radius: var(--radius-field);
display: flex;
align-items: center;
gap: var(--s-1);
cursor: pointer;
}
.emoji {
filter: grayscale(100%);
transition: all 0.2s;
}
.checked {
color: var(--color-text);
outline: 2px solid var(--color-bg-higher);
}
.checked .emoji {
filter: grayscale(0%);
}
.focusVisible {
outline: var(--focus-ring);
}
.radio:hover .emoji {
scale: 1.1;
}

34
app/features/sendouq-settings/components/PreferenceRadioGroup.tsx
View File

@@ -3,6 +3,7 @@ import { Radio, RadioGroup } from "react-aria-components";
import { useTranslation } from "react-i18next";
import type { Preference } from "~/db/tables";
import { preferenceEmojiUrl } from "~/utils/urls";
import styles from "./PreferenceRadioGroup.module.css";
export function PreferenceRadioGroup({
preference,
@@ -26,17 +27,16 @@ export function PreferenceRadioGroup({
orientation="horizontal"
>
<Radio value="AVOID" aria-label="Avoid the mode">
{({ isSelected, isHovered, isFocusVisible }) => (
{({ isSelected, isFocusVisible }) => (
<span
className={clsx("q-settings__radio", {
"q-settings__radio__checked": isSelected,
"q-settings__radio__hovered": isHovered,
"q-settings__radio__focus-visible": isFocusVisible,
className={clsx(styles.radio, {
[styles.checked]: isSelected,
[styles.focusVisible]: isFocusVisible,
})}
>
<img
src={preferenceEmojiUrl("AVOID")}
className="q-settings__radio__emoji"
className={styles.emoji}
width={18}
alt="Avoid emoji"
/>
@@ -45,17 +45,16 @@ export function PreferenceRadioGroup({
)}
</Radio>
<Radio value="NEUTRAL" aria-label="Neutral towards the mode">
{({ isSelected, isHovered, isFocusVisible }) => (
{({ isSelected, isFocusVisible }) => (
<span
className={clsx("q-settings__radio", {
"q-settings__radio__checked": isSelected,
"q-settings__radio__hovered": isHovered,
"q-settings__radio__focus-visible": isFocusVisible,
className={clsx(styles.radio, {
[styles.checked]: isSelected,
[styles.focusVisible]: isFocusVisible,
})}
>
<img
src={preferenceEmojiUrl()}
className="q-settings__radio__emoji"
className={styles.emoji}
width={18}
alt="Neutral emoji"
/>
@@ -64,17 +63,16 @@ export function PreferenceRadioGroup({
)}
</Radio>
<Radio value="PREFER" aria-label="Prefer the mode">
{({ isSelected, isHovered, isFocusVisible }) => (
{({ isSelected, isFocusVisible }) => (
<span
className={clsx("q-settings__radio", {
"q-settings__radio__checked": isSelected,
"q-settings__radio__hovered": isHovered,
"q-settings__radio__focus-visible": isFocusVisible,
className={clsx(styles.radio, {
[styles.checked]: isSelected,
[styles.focusVisible]: isFocusVisible,
})}
>
<img
src={preferenceEmojiUrl("PREFER")}
className="q-settings__radio__emoji"
className={styles.emoji}
width={18}
alt="Prefer emoji"
/>

15
app/features/sendouq-settings/routes/q.settings.tsx
View File

@@ -1,3 +1,4 @@
import clsx from "clsx";
import { Map as MapIcon, Mic, Puzzle, Volume2 } from "lucide-react";
import * as React from "react";
import { useState } from "react";
@@ -65,12 +66,14 @@ export const meta: MetaFunction = (args) => {
export default function SendouQSettingsPage() {
return (
<Main>
<Main className="stack sm">
<MapPicker />
<WeaponPool />
<VoiceChat />
<Sounds />
<Misc />
<div className="half-width stack sm">
<WeaponPool />
<VoiceChat />
<Sounds />
<Misc />
</div>
</Main>
);
}
@@ -140,7 +143,7 @@ function MapPicker() {
return (
<details>
<summary className={styles.summary}>
<summary className={clsx(styles.summary, "half-width")}>
<div>
<span>{t("q:settings.maps.header")}</span> <MapIcon />
</div>

12
app/features/user-page/routes/u.$identifier.builds.new.tsx
View File

@@ -32,12 +32,10 @@ export default function NewBuildPage() {
}
return (
<div className="half-width u__build-form">
<NewBuildForm
defaultValues={defaultValues}
gearIdToAbilities={gearIdToAbilities}
isEditing={defaultValues?.buildToEditId != null}
/>
</div>
<NewBuildForm
defaultValues={defaultValues}
gearIdToAbilities={gearIdToAbilities}
isEditing={defaultValues?.buildToEditId != null}
/>
);
}

6
app/styles/utils.css
View File

@@ -631,4 +631,10 @@
font-style: italic;
font-size: var(--font-xs);
}
.half-width {
width: 100%;
max-width: 24rem;
margin-inline: auto;
}
}