Skip to content

Commit

Permalink
updated icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@bryanlundberg
bryanlundberg committed Sep 13, 2024
1 parent 8b1caa1 commit f9cddf4
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 51 deletions.
18 changes: 9 additions & 9 deletions src/app/[locale]/cubes/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,6 @@
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import {
EllipsisHorizontalIcon,
PlayIcon,
PlusIcon,
StopIcon,
} from "@heroicons/react/24/solid";
import { Dialog } from "@/components/ui/dialog";
import {
Table,
Expand All @@ -35,6 +29,12 @@ import DrawerCreateCollection from "@/components/drawners/drawner-create-collect
import { useDialogCubesOptions } from "@/store/DialogCubesOptions";
import DialogEditCollection from "@/components/dialogs/dialog-edit-collection/dialog-edit-collection";
import { useState } from "react";
import {
DotsHorizontalIcon,
PlayIcon,
PlusIcon,
StopIcon,
} from "@radix-ui/react-icons";

export default function Page() {
const [isOpenDrawerNewCollection, setIsOpenDrawerNewCollection] =
Expand Down Expand Up @@ -150,12 +150,12 @@ export default function Page() {
>
{cube.solves.session.length > 0 ? (
<div className="flex items-center gap-2">
<PlayIcon className="w-4 h-4" />
<PlayIcon />
{t("CubesPage.using")}
</div>
) : (
<div className="flex items-center gap-2">
<StopIcon className="w-4 h-4" />
<StopIcon />
{t("CubesPage.idle")}
</div>
)}
Expand All @@ -164,7 +164,7 @@ export default function Page() {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant={"ghost"}>
<EllipsisHorizontalIcon className="size-4" />
<DotsHorizontalIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
Expand Down
22 changes: 12 additions & 10 deletions src/components/dropdrowns/dropdown-filter-options/dropdown-filter-options.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@ import {
} from "@/components/ui/dropdown-menu";
import { useSolveFiltersStore } from "@/store/SolvesFilters";
import {
CalendarDaysIcon,
ClockIcon,
EllipsisVerticalIcon,
ShareIcon,
} from "@heroicons/react/24/solid";
CalendarIcon,
DividerHorizontalIcon,
DividerVerticalIcon,
DotsVerticalIcon,
LapTimerIcon,
Share1Icon,
} from "@radix-ui/react-icons";

export default function DropdownFilterSolves() {
const { sortType, order, handleChangeOrder, handleChangeSortType } =
Expand All @@ -29,15 +31,15 @@ export default function DropdownFilterSolves() {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant={"outline"}>
<EllipsisVerticalIcon className="w-4 h-4" />
<DotsVerticalIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
{/* sort - time */}
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<div className="flex items-center gap-1">
<ClockIcon className="w-4 h-4" />
<DividerHorizontalIcon />
<p>Sort</p>
</div>
</DropdownMenuSubTrigger>
Expand All @@ -64,7 +66,7 @@ export default function DropdownFilterSolves() {
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<div className="flex items-center gap-1">
<CalendarDaysIcon className="w-4 h-4" />
<DividerVerticalIcon className="w-4 h-4" />
<p>Order</p>
</div>
</DropdownMenuSubTrigger>
Expand All @@ -91,7 +93,7 @@ export default function DropdownFilterSolves() {
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<div className="flex items-center gap-1">
<ShareIcon className="w-4 h-4" />
<Share1Icon className="w-4 h-4" />
<p>Share</p>
</div>
</DropdownMenuSubTrigger>
Expand All @@ -102,7 +104,7 @@ export default function DropdownFilterSolves() {
<DropdownMenuItem>Last Ao5</DropdownMenuItem>
<DropdownMenuItem>Last Ao12</DropdownMenuItem>
<DropdownMenuItem>Last Ao50</DropdownMenuItem>
<DropdownMenuItem>All session</DropdownMenuItem>
<DropdownMenuItem>All</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
Expand Down
93 changes: 72 additions & 21 deletions src/components/sheets/sheet-solve-details/SheetSolveDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,23 @@ import {
SheetTitle,
} from "@/components/ui/sheet";
import { Textarea } from "@/components/ui/textarea";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import formatTime from "@/lib/formatTime";
import { useDialogSolve } from "@/store/DialogSolve";
import { useTimerStore } from "@/store/timerStore";
import {
CalendarDaysIcon,
DocumentDuplicateIcon,
StarIcon,
BookmarkIcon,
CalendarIcon,
ClockIcon,
CodeSandboxLogoIcon,
CopyIcon,
TrashIcon,
} from "@heroicons/react/24/solid";
} from "@radix-ui/react-icons";
import { DateTime } from "luxon";
import { useLocale } from "next-intl";
import Image from "next/image";
Expand All @@ -31,10 +39,8 @@ export default function SheetSolveDetails() {
<SheetHeader>
<SheetTitle>
<p className="flex items-center gap-1 font-medium mx-auto">
{selectedCube?.name} -{" "}
{DateTime.fromMillis(solve?.endTime || 0)
.setLocale(locale)
.toLocaleString()}
<CodeSandboxLogoIcon />
{selectedCube?.name}
</p>
</SheetTitle>

Expand All @@ -54,26 +60,71 @@ export default function SheetSolveDetails() {
{formatTime(solve?.time || 0)}
</p>

<div className="flex justify-center gap-2 text-xs">
<p className="flex items-center justify-center gap-1">
<CalendarIcon />
{DateTime.fromMillis(solve?.endTime || 0)
.setLocale(locale)
.toLocaleString()}
</p>
<p className="flex items-center justify-center gap-1">
<ClockIcon />
{DateTime.fromMillis(solve?.endTime || 0)
.setLocale(locale)
.toFormat("HH:mm")}
</p>
</div>

{/* comment */}
<div className="pt-5 flex justify-start flex-col">
<Label className="text-start">Comment</Label>
<Textarea className="mt-3 resize-none h-40" />
</div>

{/* options */}
<div className="flex items-center justify-center pt-5">
<Button variant={"ghost"}>
<TrashIcon className="w-5 h-5" />
</Button>
<Button variant={"ghost"} className="font-black text-lg">
+2
</Button>
<Button variant={"ghost"}>
<StarIcon className="w-5 h-5" />
</Button>
<Button variant={"ghost"}>
<DocumentDuplicateIcon className="w-5 h-5" />
</Button>
<div className="flex items-center justify-center pt-5 gap-2">
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<Button variant={"destructive"} className="me-10">
<TrashIcon className="w-4 h-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Delete</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant={"ghost"} className="font-light text-md">
+2
</Button>
</TooltipTrigger>
<TooltipContent>
<p>+2 Penalty</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant={"ghost"}>
<BookmarkIcon className="w-4 h-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Bookmark</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant={"ghost"}>
<CopyIcon className="w-4 h-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Copy</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>

<Image
Expand Down
14 changes: 3 additions & 11 deletions src/components/solves/SolvesArea.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { VirtualizedGrid } from "@mierak/react-virtualized-grid";
import formatTime from "@/lib/formatTime";
import formatDate from "@/lib/formatDate";
import { useTranslations } from "next-intl";
import { CubeIcon, CursorArrowRaysIcon } from "@heroicons/react/24/solid";
import {
ChatBubbleBottomCenterTextIcon,
StarIcon,
Expand All @@ -16,6 +15,7 @@ import { sort } from "fast-sort";
import { useSolveFiltersStore } from "@/store/SolvesFilters";
import { filterData, SearchType } from "filter-data";
import useRemoveGridHeight from "@/hooks/useRemoveGridHeight";
import { ComponentNoneIcon, CubeIcon } from "@radix-ui/react-icons";

interface SolvesArea {
displaySolves: Solve[] | undefined;
Expand All @@ -29,20 +29,12 @@ export function SolvesArea({ displaySolves }: SolvesArea) {
useRemoveGridHeight();

if (!selectedCube) {
return (
<EmptySolves
message={t("no-cube-selection")}
icon={<CubeIcon className="w-6 h-6" />}
/>
);
return <EmptySolves message={t("no-cube-selection")} icon={<CubeIcon />} />;
}

if (!displaySolves || displaySolves.length === 0) {
return (
<EmptySolves
message={t("no-solves")}
icon={<CursorArrowRaysIcon className="w-6 h-6" />}
/>
<EmptySolves message={t("no-solves")} icon={<ComponentNoneIcon />} />
);
}

Expand Down

0 comments on commit f9cddf4

Please sign in to comment.