Skip to content

Commit 9db692a

Browse files
bryanlundbergbryanlundberg
authored
Merge pull request #359 from bryanlundberg/logo
style: settings modal
2 parents c199be2 + 8f41756 commit 9db692a

File tree

12 files changed

+104
-93
lines changed

12 files changed

+104
-93
lines changed

‎public/NX.png

-28.8 KB
Binary file not shown.

‎public/logo.png

1.41 KB
Loading

‎src/components/logo/logo.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { cn } from "@/lib/utils";
2+
import { useSettingsModalStore } from "@/store/SettingsModalStore";
3+
import Image from "next/image";
4+
5+
interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
6+
className?: string;
7+
}
8+
9+
export default function Logo({ className, ...rest }: LogoProps) {
10+
const { settings } = useSettingsModalStore();
11+
return (
12+
<>
13+
<div
14+
{...rest}
15+
className={cn(
16+
"flex gap-2 justify-center items-center mx-auto",
17+
className
18+
)}
19+
>
20+
<p className="text-3xl font-bold">Nexus</p>
21+
<Image
22+
src={"/logo.png"}
23+
alt="logo"
24+
width={320}
25+
height={100}
26+
className={`size-9 ${
27+
settings.theme.background.color === "dark" ? "invert" : "invert-0"
28+
}`}
29+
draggable={false}
30+
/>
31+
32+
<p className="text-3xl font-bold">Timer</p>
33+
</div>
34+
</>
35+
);
36+
}

‎src/components/menu-settings/CustomTheme.tsx

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -54,23 +54,25 @@ export default function CustomTheme() {
5454

5555
return (
5656
<>
57-
<input
58-
type="file"
59-
accept="image/*"
60-
ref={dataInputRef}
61-
className="hidden"
62-
onChange={handleImageChange}
63-
/>
64-
<Button
65-
variant={"outline"}
66-
className="ms-9 mt-3 flex items-center gap-1"
67-
onClick={() => dataInputRef.current && dataInputRef.current.click()}
68-
>
69-
<ImageIcon className="w-4 h-4" />
70-
{t("custom-background-image")}
71-
</Button>
72-
<div className="block ms-9 text-xs align-bottom">
73-
{t("format")} .png .jpg .gif
57+
<div className="ps-3">
58+
<input
59+
type="file"
60+
accept="image/*"
61+
ref={dataInputRef}
62+
className="hidden"
63+
onChange={handleImageChange}
64+
/>
65+
<Button
66+
variant={"outline"}
67+
className="mt-3 flex items-center gap-1"
68+
onClick={() => dataInputRef.current && dataInputRef.current.click()}
69+
>
70+
<ImageIcon className="w-4 h-4" />
71+
{t("custom-background-image")}
72+
</Button>
73+
<div className="block text-xs align-bottom mt-1">
74+
{t("format")} .png .jpg .gif
75+
</div>
7476
</div>
7577
</>
7678
);

‎src/components/menu-settings/DataImportExport.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function DataImportExport() {
88
const t = useTranslations("Index.Settings-menu");
99
const { setImportModalOpen } = useSettingsModalStore();
1010
return (
11-
<div className="flex justify-center w-11/12 gap-2 mx-auto light">
11+
<div className="flex gap-2 ps-3">
1212
<Button
1313
variant={"outline"}
1414
className="flex items-center gap-1"

‎src/components/menu-settings/Menu.tsx

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { DataImportExport } from "@/components/menu-settings/DataImportExport";
66
import { useTimerStore } from "@/store/timerStore";
77
import { Link } from "@/i18n/routing";
88
import useEscape from "@/hooks/useEscape";
9-
import Image from "next/image";
109
import { AnimatePresence, motion } from "framer-motion";
1110
import CustomTheme from "./CustomTheme";
1211
import { useTranslations } from "next-intl";
@@ -25,6 +24,7 @@ import {
2524
MagicWandIcon,
2625
QuoteIcon,
2726
} from "@radix-ui/react-icons";
27+
import Logo from "../logo/logo";
2828

2929
export default function MenuSettings() {
3030
const { settingsOpen, setSettingsOpen, settings } = useSettingsModalStore();
@@ -47,11 +47,11 @@ export default function MenuSettings() {
4747
className="flex flex-col w-full gap-3 sm:max-w-[450px] bg-background border-r"
4848
>
4949
<ScrollArea>
50-
<div className="my-3 relative">
50+
<div className="py-5 relative">
5151
<Link
5252
href={"/"}
5353
onClick={() => setSettingsOpen(false)}
54-
className="flex items-center cursor-pointer ms-3 absolute top-0 left-0"
54+
className="flex items-center cursor-pointer ps-3 absolute top-7 left-4"
5555
>
5656
<ArrowLeftIcon />
5757
</Link>
@@ -135,17 +135,7 @@ export default function MenuSettings() {
135135

136136
<MenuSection icon={<QuoteIcon />} title={t("about")}>
137137
<div className="flex flex-col justify-center items-center gap-3">
138-
<Image
139-
src={"/brand_logo.png"}
140-
alt="logo"
141-
width={320}
142-
height={100}
143-
className={`${
144-
settings.theme.background.color === "light"
145-
? "invert"
146-
: "invert-0"
147-
}`}
148-
/>
138+
<Logo className="my-10" />
149139

150140
<div className="text-center w-11/12 italic mx-auto text-sm">
151141
&rdquo;{t("legend")}&rdquo;

‎src/components/menu-settings/MenuOption.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,9 @@ export function MenuOption({ label, setting }: MenuOption) {
3737
};
3838

3939
return (
40-
<div className="flex justify-between mb-1">
41-
<div className="ms-8">{label}</div>
42-
<div className="me-6">
43-
<Switch checked={status} onCheckedChange={saveSettings} />
44-
</div>
40+
<div className="ps-3 pe-3 flex items-center justify-between mb-1">
41+
<div className="grow">{label}</div>
42+
<Switch checked={status} onCheckedChange={saveSettings} />
4543
</div>
4644
);
4745
}

‎src/components/menu-settings/MenuSection.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function MenuSection({ children, icon, title }: MenuSection) {
88
return (
99
<>
1010
<div className="mb-3">
11-
<div className="flex items-center gap-2 mx-3 mb-3 font-semibold sticky top-0 bg-background border-b pb-2 mt-10">
11+
<div className="flex items-center gap-2 mx-3 mb-3 font-semibold sticky top-0 bg-background border-b pb-2 mt-10 z-10">
1212
{icon}
1313
<div className="w-full">
1414
<span className="text-lg">{title}</span>

‎src/components/menu-settings/MenuSelectDefaultStartCube.tsx

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -39,29 +39,27 @@ export default function MenuSelectDefaultStartCube() {
3939
const defaultCube = settings.preferences.defaultCube.cube?.id;
4040

4141
return (
42-
<div className="flex justify-between items-center mb-1 w-full">
43-
<div className="ms-12">{t("Settings-menu.auto-select")}</div>
44-
<div className="relative me-6 w-fit mx-auto">
45-
<Select
46-
defaultValue="none"
47-
value={defaultCube}
48-
onValueChange={handleCubeSelect}
49-
>
50-
<SelectTrigger className="w-[180px]">
51-
<SelectValue />
52-
</SelectTrigger>
53-
<SelectContent>
54-
<SelectItem value="none">{t("Inputs.none")}</SelectItem>
55-
{cubes?.map((cube) => {
56-
return (
57-
<SelectItem value={cube.id} key={cube.id}>
58-
{cube.name}
59-
</SelectItem>
60-
);
61-
})}
62-
</SelectContent>
63-
</Select>
64-
</div>
42+
<div className="flex justify-between items-center mb-1 mx-3">
43+
<div className="grow">{t("Settings-menu.auto-select")}</div>
44+
<Select
45+
defaultValue="none"
46+
value={defaultCube}
47+
onValueChange={handleCubeSelect}
48+
>
49+
<SelectTrigger className="w-[180px]">
50+
<SelectValue />
51+
</SelectTrigger>
52+
<SelectContent>
53+
<SelectItem value="none">{t("Inputs.none")}</SelectItem>
54+
{cubes?.map((cube) => {
55+
return (
56+
<SelectItem value={cube.id} key={cube.id}>
57+
{cube.name}
58+
</SelectItem>
59+
);
60+
})}
61+
</SelectContent>
62+
</Select>
6563
</div>
6664
);
6765
}

‎src/components/menu-settings/MenuSelectLanguage.tsx

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,22 @@ export default function MenuSelectLanguage() {
2929
return (
3030
<>
3131
<MenuSection icon={<GlobeIcon />} title={t("locale")}>
32-
<div className="flex justify-between ">
33-
<div className="ms-12">{t("language")}</div>
34-
<div className="me-6 relative">
35-
<Select defaultValue={locale} onValueChange={handleLanguageChange}>
36-
<SelectTrigger className="w-[180px]">
37-
<SelectValue />
38-
</SelectTrigger>
39-
<SelectContent>
40-
{languages.map((item) => {
41-
return (
42-
<SelectItem value={item.code} key={item.code}>
43-
{item.name}
44-
</SelectItem>
45-
);
46-
})}
47-
</SelectContent>
48-
</Select>
49-
</div>
32+
<div className="mx-3 flex items-center justify-between">
33+
<div className="grow">{t("language")}</div>
34+
<Select defaultValue={locale} onValueChange={handleLanguageChange}>
35+
<SelectTrigger className="w-[180px]">
36+
<SelectValue />
37+
</SelectTrigger>
38+
<SelectContent>
39+
{languages.map((item) => {
40+
return (
41+
<SelectItem value={item.code} key={item.code}>
42+
{item.name}
43+
</SelectItem>
44+
);
45+
})}
46+
</SelectContent>
47+
</Select>
5048
</div>
5149
</MenuSection>
5250
</>

‎src/components/menu-settings/ThemeSelect.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default function ThemeSelect() {
5151
};
5252

5353
return (
54-
<div className="grid justify-around grid-cols-3 gap-10 ms-10 me-10">
54+
<div className="flex mx-3 gap-3">
5555
{variation.map((item) => (
5656
<div
5757
key={item.key}

‎src/components/sheets/sheet-solve-details/SheetSolveDetails.tsx

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Logo from "@/components/logo/logo";
12
import MenuSolveOptions from "@/components/menu-solve-options/menu-solve-options";
23
import { ScrambleDisplay } from "@/components/scramble-display";
34
import {
@@ -8,7 +9,6 @@ import {
89
} from "@/components/ui/sheet";
910
import formatTime from "@/lib/formatTime";
1011
import { useDialogSolve } from "@/store/DialogSolve";
11-
import { useSettingsModalStore } from "@/store/SettingsModalStore";
1212
import { useTimerStore } from "@/store/timerStore";
1313
import {
1414
CalendarIcon,
@@ -17,13 +17,11 @@ import {
1717
} from "@radix-ui/react-icons";
1818
import { DateTime } from "luxon";
1919
import { useLocale } from "next-intl";
20-
import Image from "next/image";
2120

2221
export default function SheetSolveDetails() {
2322
const { handleCloseDialogSolve } = useDialogSolve();
2423
const { solve } = useDialogSolve();
2524
const { selectedCube } = useTimerStore();
26-
const { settings } = useSettingsModalStore();
2725
const locale = useLocale();
2826

2927
return (
@@ -89,16 +87,7 @@ export default function SheetSolveDetails() {
8987
/>
9088
)}
9189

92-
<Image
93-
src={"/brand_logo.png"}
94-
alt="logo nexustimer"
95-
width={170}
96-
height={80}
97-
className={`object-scale-down mx-auto pt-10 ${
98-
settings.theme.background.color === "light" ? "invert" : "invert-0"
99-
}`}
100-
draggable={false}
101-
/>
90+
<Logo className="pt-10" />
10291
</SheetHeader>
10392
</SheetContent>
10493
);

0 commit comments

Comments
 (0)