Skip to content

Commit 304a9e5

Browse files
bryanlundbergbryanlundberg
authored
refactor: navigation API and UI icons (#310)
* refactor: heroicons * wrap navigation api next-intl
1 parent 0811abd commit 304a9e5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+196
-1186
lines changed

‎package-lock.json

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
},
1313
"dependencies": {
1414
"@headlessui/react": "^1.7.17",
15+
"@heroicons/react": "^2.1.3",
1516
"@mierak/react-virtualized-grid": "^0.0.5-ALPHA",
1617
"@types/node": "20.6.0",
1718
"@types/papaparse": "^5.3.14",

‎src/README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ This directory contains the following subfolders, each serving a specific purpos
77
| `./app` | Next.js application router. |
88
| `./components` | Reusable components and feature components. |
99
| `./hooks` | Logic related to `useState`, `useEffect`, etc. |
10-
| `./icons` | Icons for various purposes (solid and outline). |
1110
| `./images` | General images used throughout the project. |
1211
| `./lib` | Multipurpose functions used in the project. |
1312
| `./store` | Global state management for the application. |

‎src/app/[locale]/cubes/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import { Button } from "@/components/button/index";
33
import { InputText } from "@/components/input-text/index";
44
import ModalCreate from "@/components/cubes/ModalCreate";
5-
import Plus from "@/icons/Plus";
65
import { OverallContainer } from "@/components/OverallContainer";
76
import { CubesContent } from "@/components/cubes/CubesContent";
87
import { OverallHeader } from "@/components/OverallHeader";
@@ -12,6 +11,7 @@ import { AnimatePresence } from "framer-motion";
1211
import useModalCube from "@/hooks/useModalCube";
1312
import { useCubesModalStore } from "@/store/CubesModalStore";
1413
import { useTranslations } from "next-intl";
14+
import { PlusIcon } from "@heroicons/react/24/solid";
1515

1616
export default function CubesPage() {
1717
const { filterCubes, handleSearchFilter } = useCubes();
@@ -33,7 +33,7 @@ export default function CubesPage() {
3333
setSelectedCategory("2x2");
3434
setModalOpen(true);
3535
}}
36-
icon={<Plus />}
36+
icon={<PlusIcon className="w-6 h-6" />}
3737
label={t("cube")}
3838
/>
3939
</OptionsContainer>

‎src/app/[locale]/not-found.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Link from "next/link";
1+
import { Link } from "@/navigation";
22

33
export default function NotFound() {
44
return (

‎src/app/[locale]/solves/page.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
"use client";
22
import { Button } from "@/components/button/index";
3-
import MoveAll from "@/icons/MoveAll";
4-
import Trash from "@/icons/Trash";
53
import Select from "@/components/Select";
64
import ModalSolve from "@/components/solves/ModalSolve";
75
import { OverallContainer } from "@/components/OverallContainer";
@@ -16,6 +14,7 @@ import { useTimerStore } from "@/store/timerStore";
1614
import MoveModal from "@/components/solves/MoveModal";
1715
import ConfirmDelete from "@/components/solves/ConfirmDelete";
1816
import { useTranslations } from "next-intl";
17+
import { FolderArrowDownIcon, TrashIcon } from "@heroicons/react/24/solid";
1918

2019
export default function SolvesPage() {
2120
const {
@@ -56,7 +55,7 @@ export default function SolvesPage() {
5655
<ButtonsSection currentTab={currentTab}>
5756
<Button
5857
onClick={() => setIsOpenMoveModal(true)}
59-
icon={<MoveAll />}
58+
icon={<FolderArrowDownIcon className="w-4 h-4" />}
6059
label={t("Inputs.move-all")}
6160
isDisabled={
6261
selectedCube && selectedCube.solves.session.length > 0
@@ -66,11 +65,7 @@ export default function SolvesPage() {
6665
/>
6766
<Button
6867
onClick={() => setIsOpenDeleteModal(true)}
69-
icon={
70-
<div className="w-4 h-4">
71-
<Trash />
72-
</div>
73-
}
68+
icon={<TrashIcon className="w-4 h-4" />}
7469
label={t("Inputs.trash-all")}
7570
isDisabled={
7671
selectedCube && selectedCube.solves.session.length > 0

‎src/components/Select.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import PlusIcon from "@/icons/PlusIcon";
2-
import SelectOptions from "@/icons/SelectOptions";
31
import { useRef, useState } from "react";
42
import Image from "next/image";
5-
import Link from "next/link";
3+
import { Link } from "@/navigation";
64
import { Categories } from "@/interfaces/Categories";
75
import { cubeCollection } from "@/lib/const/cubeCollection";
86
import genId from "@/lib/genId";
@@ -13,6 +11,7 @@ import { AnimatePresence, motion } from "framer-motion";
1311
import { useBackgroundImageStore } from "@/store/BackgroundThemeStore";
1412
import { Cube } from "@/interfaces/Cube";
1513
import { useTranslations } from "next-intl";
14+
import { ChevronUpDownIcon, PlusIcon } from "@heroicons/react/24/solid";
1615

1716
export default function Select() {
1817
const [open, setOpen] = useState<boolean>(false);
@@ -47,7 +46,7 @@ export default function Select() {
4746
<MiniatureIcon category={selectedCube.category} />
4847
) : null}
4948
<div>{selectedCube ? selectedCube.name : t("select")}</div>
50-
<SelectOptions />
49+
<ChevronUpDownIcon className="w-5 h-5" />
5150
</div>
5251
</button>
5352
<AnimatePresence>
@@ -186,7 +185,7 @@ function AddCubeOption() {
186185
>
187186
<Link href="/cubes" onClick={() => setModalOpen(true)}>
188187
<div className="flex items-center justify-start gap-2 align-middle">
189-
<PlusIcon />
188+
<PlusIcon className="w-6 h-6" />
190189
<div>{t("add-cube")}</div>
191190
</div>
192191
</Link>

‎src/components/cubes/BookmarkFav.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import FavoriteSolid from "@/icons/FavoriteSolid";
21
import { Cube } from "@/interfaces/Cube";
2+
import { StarIcon } from "@heroicons/react/24/solid";
33
import { useState } from "react";
44

55
export default function BookmarkFav({
@@ -25,7 +25,7 @@ export default function BookmarkFav({
2525
checked ? "bg-transparent text-yellow-500" : "text-transparent"
2626
} text-sm flex justify-center items-center`}
2727
>
28-
<FavoriteSolid />
28+
<StarIcon className="w-6 h-6" />
2929
</button>
3030
);
3131
}

‎src/components/cubes/ModalCreate.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import genId from "@/lib/genId";
55
import useModalCube from "@/hooks/useModalCube";
66
import { useCubesModalStore } from "@/store/CubesModalStore";
77
import DeleteModal from "@/components/cubes/DeleteModal";
8-
import CloseModal from "@/icons/CloseModal";
98
import { motion } from "framer-motion";
109
import { useTranslations } from "next-intl";
10+
import { XMarkIcon } from "@heroicons/react/24/solid";
1111

1212
export default function ModalCreate() {
1313
const { editingCube } = useCubesModalStore();
@@ -83,7 +83,7 @@ export default function ModalCreate() {
8383
data-modal-hide="defaultModal"
8484
onClick={handleCloseModal}
8585
>
86-
<CloseModal />
86+
<XMarkIcon className="w-6 h-6" />
8787
<span className="sr-only">{t("Inputs.cancel")}</span>
8888
</button>
8989
</div>
@@ -143,7 +143,7 @@ export default function ModalCreate() {
143143
type="button"
144144
className="px-5 py-2 text-sm font-medium text-center text-white transition duration-200 bg-green-600 border border-green-500 rounded-md hover:border-green-700 hover:bg-green-700"
145145
>
146-
{editingCube ? t("Inputs.cancel") : t("Inputs.create")}
146+
{editingCube ? t("Inputs.confirm") : t("Inputs.create")}
147147
</button>
148148
</div>
149149
</motion.div>

‎src/components/cubes/TableRow.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { Cube } from "@/interfaces/Cube";
22
import BookmarkFav from "@/components/cubes/BookmarkFav";
3-
import Ellipsis from "@/icons/Ellipsis";
43
import { useTimerStore } from "@/store/timerStore";
54
import { useCubesModalStore } from "@/store/CubesModalStore";
6-
import Play from "@/icons/Play";
7-
import Stop from "@/icons/Stop";
8-
import { useRouter } from "next/navigation";
5+
import { useRouter } from "@/navigation";
96
import { getAllCubes, saveCube } from "@/db/dbOperations";
107
import { useTranslations } from "next-intl";
8+
import {
9+
EllipsisHorizontalIcon,
10+
PlayIcon,
11+
StopIcon,
12+
} from "@heroicons/react/24/solid";
1113

1214
export default function TableRow({ cube }: { cube: Cube }) {
1315
const t = useTranslations("Index.CubesPage");
@@ -81,16 +83,14 @@ export default function TableRow({ cube }: { cube: Cube }) {
8183
<div className="hidden text-center align-middle md:table-cell">
8284
{cube?.solves?.session.length > 0 ? (
8385
<div className="flex items-center justify-center gap-1">
84-
<div className="w-4 h-4">
85-
<Play />
86-
</div>
86+
<PlayIcon className="w-4 h-4" />
87+
8788
<span>{t("using")}</span>
8889
</div>
8990
) : (
9091
<div className="flex items-center justify-center gap-1">
91-
<div className="w-4 h-4">
92-
<Stop />
93-
</div>
92+
<StopIcon className="w-4 h-4" />
93+
9494
<span>{t("idle")}</span>
9595
</div>
9696
)}
@@ -105,7 +105,7 @@ export default function TableRow({ cube }: { cube: Cube }) {
105105
setModalOpen(true);
106106
}}
107107
>
108-
<Ellipsis />
108+
<EllipsisHorizontalIcon className="w-6 h-6" />
109109
</button>
110110
</div>
111111
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { ChangeEvent, useRef } from "react";
22
import { Button } from "../button";
33
import { useBackgroundImageStore } from "@/store/BackgroundThemeStore";
4-
import ImageIcon from "@/icons/ImageIcon";
54
import { useTranslations } from "next-intl";
5+
import { GifIcon, PhotoIcon } from "@heroicons/react/24/solid";
66

77
export default function CustomTheme() {
88
const dataInputRef = useRef<HTMLInputElement>(null);
@@ -66,7 +66,7 @@ export default function CustomTheme() {
6666
label={t("custom-background-image")}
6767
minimalistic={false}
6868
onClick={() => dataInputRef.current && dataInputRef.current.click()}
69-
icon={<ImageIcon />}
69+
icon={<PhotoIcon className="w-6 h-6 text-neutral-600" />}
7070
/>
7171
<div className="block ms-9 text-xs align-bottom">
7272
{t("format")} .png .jpg .gif

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import exportDataToFile from "@/lib/exportDataToFile";
22
import { Button } from "@/components/button";
3-
import Import from "@/icons/Import";
4-
import Export from "@/icons/Export";
53
import { useSettingsModalStore } from "@/store/SettingsModalStore";
64
import { useTranslations } from "next-intl";
5+
import { BarsArrowDownIcon, BarsArrowUpIcon } from "@heroicons/react/24/solid";
76

87
export function DataImportExport() {
98
const t = useTranslations("Index.Settings-menu");
@@ -15,14 +14,14 @@ export function DataImportExport() {
1514
label={t("import-from-file")}
1615
onClick={() => setImportModalOpen(true)}
1716
minimalistic={false}
18-
icon={<Import />}
17+
icon={<BarsArrowDownIcon className="w-6 h-6" />}
1918
/>
2019
<Button
2120
className="font-normal transition duration-400"
2221
label={t("export-to-file")}
2322
onClick={exportDataToFile}
2423
minimalistic={false}
25-
icon={<Export />}
24+
icon={<BarsArrowUpIcon className="w-6 h-6" />}
2625
/>
2726
</div>
2827
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useSettingsModalStore } from "@/store/SettingsModalStore";
44
import { useTimerStore } from "@/store/timerStore";
55
import { AnimatePresence, motion } from "framer-motion";
66
import Image from "next/image";
7-
import { useRouter } from "next/navigation";
7+
import { useRouter } from "@/navigation";
88
import { useRef, useState } from "react";
99
import Loading from "../Loading";
1010
import { getAllCubes } from "@/db/dbOperations";

0 commit comments

Comments
 (0)