From 467c29c82c27910d5b8f870efe477cd85698f8bd Mon Sep 17 00:00:00 2001 From: Juan Di Toro Date: Wed, 13 Mar 2024 18:01:23 +0100 Subject: [PATCH] fix: normalize icons. fix some spacing and UI issues --- app/components/general-layout.tsx | 245 +-------- app/components/icons.tsx | 476 ++++++++++++++++++ app/components/table-pagination.tsx | 38 +- app/components/ui/button.tsx | 2 +- app/components/upgrade-account-banner.tsx | 225 ++------- app/components/usage-card.tsx | 38 +- app/components/usage-chart.tsx | 150 +++--- app/root.tsx | 3 +- app/routes/dashboard.tsx | 197 +++----- app/routes/file-manager/columns.tsx | 49 +- .../file-manager/{route.tsx => index.tsx} | 28 +- 11 files changed, 710 insertions(+), 741 deletions(-) create mode 100644 app/components/icons.tsx rename app/routes/file-manager/{route.tsx => index.tsx} (72%) diff --git a/app/components/general-layout.tsx b/app/components/general-layout.tsx index 9db125c..be41b25 100644 --- a/app/components/general-layout.tsx +++ b/app/components/general-layout.tsx @@ -9,11 +9,21 @@ import { DialogHeader, DialogTitle, DialogTrigger -} from "./ui/dialog" +} from "~/components/ui/dialog" import { useUppy } from "./lib/uppy" -import { UppyFile } from "@uppy/core" -import { Progress } from "./ui/progress" +import type { UppyFile } from "@uppy/core" +import { Progress } from "~/components/ui/progress" import { DialogClose } from "@radix-ui/react-dialog" +import { TrashIcon } from "@radix-ui/react-icons" +import { + ClockIcon, + DriveIcon, + CircleLockIcon, + CloudUploadIcon, + CloudCheckIcon, + BoxCheckedIcon, + PageIcon +} from "./icons" export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => { return ( @@ -57,7 +67,7 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => { @@ -78,7 +88,11 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => { variant={"link"} className="flex flex-row gap-x-2 text-input-placeholder" > - Discord Logo + Discord Logo Connect with us @@ -238,227 +252,8 @@ const UploadFileItem = ({ const NavigationButton = ({ children }: React.PropsWithChildren) => { return ( - ) } - -const ClockIcon = ({ className }: { className?: string }) => { - return ( - - ) -} - -const CircleLockIcon = ({ className }: { className?: string }) => { - return ( - - ) -} - -const DriveIcon = ({ className }: { className?: string }) => { - return ( - - ) -} - -const CloudUploadIcon = ({ className }: { className?: string }) => { - return ( - - ) -} - -const PageIcon = ({ className }: { className?: string }) => { - return ( - - ) -} - -const TrashIcon = ({ className }: { className?: string }) => { - return ( - - ) -} - -const CloudCheckIcon = ({ className }: { className?: string }) => { - return ( - - ) -} - -const BoxCheckedIcon = ({ className }: { className?: string }) => { - return ( - - ) -} diff --git a/app/components/icons.tsx b/app/components/icons.tsx new file mode 100644 index 0000000..72fab8a --- /dev/null +++ b/app/components/icons.tsx @@ -0,0 +1,476 @@ +export const InfoIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const AddIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const CloudIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const CloudDownloadIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const CloudUploadIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const CloudUploadSolidIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const CrownIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const PersonIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const CheckRoundedIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const ClockIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const CircleLockIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const DriveIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const PageIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const TrashIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const CloudCheckIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const BoxCheckedIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const PictureIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const XlsxIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const FileIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +export const MoreIcon = ({ className }: { className?: string }) => { + return ( + + ) +} diff --git a/app/components/table-pagination.tsx b/app/components/table-pagination.tsx index 5b781d6..7f2bdf9 100644 --- a/app/components/table-pagination.tsx +++ b/app/components/table-pagination.tsx @@ -2,18 +2,26 @@ import { ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, - DoubleArrowRightIcon, -} from "@radix-ui/react-icons"; -import { Table } from "@tanstack/react-table"; + DoubleArrowRightIcon +} from "@radix-ui/react-icons" +import type { Table } from "@tanstack/react-table" -import { Button } from "./ui/button"; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"; +import { Button } from "./ui/button" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from "./ui/select" interface DataTablePaginationProps { - table: Table; + table: Table } -export function DataTablePagination({ table }: DataTablePaginationProps) { +export function DataTablePagination({ + table +}: DataTablePaginationProps) { return (
@@ -21,7 +29,7 @@ export function DataTablePagination({ table }: DataTablePaginationProps { - table.setPageSize(Number(value)); + table.setPageSize(Number(value)) }} > @@ -39,10 +47,14 @@ export function DataTablePagination({ table }: DataTablePaginationProps
Showing - - {` ${table.getState().pagination.pageSize - - (table.getState().pagination.pageSize - 1) - } to ${(table.getState().pagination.pageIndex + 1) * table.getRowCount()} `} + + {` ${ + table.getState().pagination.pageIndex * + table.getState().pagination.pageSize + + 1 + } to ${ + (table.getState().pagination.pageIndex + 1) * table.getRowCount() + } `} of {table.getRowCount()}
@@ -86,5 +98,5 @@ export function DataTablePagination({ table }: DataTablePaginationProps
- ); + ) } diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx index f5aa2d1..6302846 100644 --- a/app/components/ui/button.tsx +++ b/app/components/ui/button.tsx @@ -25,7 +25,7 @@ const buttonVariants = cva( size: { default: "h-9 px-4 py-2", sm: "h-8 rounded-md px-3 text-xs", - lg: "h-16 rounded-md px-8", + lg: "h-16 rounded-md", icon: "h-9 w-9", }, }, diff --git a/app/components/upgrade-account-banner.tsx b/app/components/upgrade-account-banner.tsx index d519842..6474cf4 100644 --- a/app/components/upgrade-account-banner.tsx +++ b/app/components/upgrade-account-banner.tsx @@ -1,185 +1,48 @@ -import { Avatar } from "./ui/avatar"; -import { Button } from "./ui/button"; +import { + CrownIcon, + PersonIcon, + CloudIcon, + CheckRoundedIcon, + AddIcon, + CloudDownloadIcon +} from "./icons" +import { Avatar } from "./ui/avatar" +import { Button } from "./ui/button" export const UpgradeAccountBanner = () => { - return ( -
-
- -
-
- wirtly - -
-
-
- - Lite Account (upgrade) -
-
- - 120 GB / 130 GB -
-
- - 10 GB / 25 GB -
-
- - 0% Free Usage -
-
-
+ return ( +
+
+ +
+
+ wirtly + +
+
+
+ + Lite Account (upgrade)
- +
+ + 120 GB / 130 GB +
+
+ + 10 GB / 25 GB +
+
+ + 0% Free Usage +
+
- ); -}; - -const CrownIcon = ({ className }: { className?: string }) => { - return ( - - - - - - - - - - - ); -}; - -const PersonIcon = ({ className }: { className?: string }) => { - return ( - - - - - - - - - - - ); -}; - -const CloudIcon = ({ className }: { className?: string }) => { - return ( - - - - - - - - - - - ); -}; - -const CloudDonwloadIcon = ({ className }: { className?: string }) => { - return ( - - - - - - - - - - - ); -}; - -const CheckRoundedIcon = ({ className }: { className?: string }) => { - return ( - - - - ); -}; - - -// TODO: Discuss duplicated icon definitions -const AddIcon = ({ className }: { className?: string }) => { - return ( - - - - - - - - - - - ); - }; +
+ +
+ ) +} diff --git a/app/components/usage-card.tsx b/app/components/usage-card.tsx index 2b6b658..be14ec9 100644 --- a/app/components/usage-card.tsx +++ b/app/components/usage-card.tsx @@ -1,23 +1,24 @@ +import { AddIcon } from "./icons"; import { Button } from "./ui/button"; import { Progress } from "./ui/progress"; interface UsageCardProps { - usageName: string, + label: string, monthlyUsage: number, // Asumming that the minimium is 1GB currentUsage: number, icon: React.ReactNode } -export const UsageCard = ({ usageName, monthlyUsage, currentUsage, icon }: UsageCardProps) => { +export const UsageCard = ({ label, monthlyUsage, currentUsage, icon }: UsageCardProps) => { return (
{icon} - {usageName} + {label}
- Montly {usageName.toLocaleLowerCase()} limit is {monthlyUsage} GB + Montly {label.toLocaleLowerCase()} limit is {monthlyUsage} GB
-
+
{currentUsage} GB used {monthlyUsage - currentUsage} GB left
) -} - -const AddIcon = ({ className }: { className?: string }) => { - return ( - - - - - - - - - - - ); - }; \ No newline at end of file +} \ No newline at end of file diff --git a/app/components/usage-chart.tsx b/app/components/usage-chart.tsx index 58c1d4a..4aab512 100644 --- a/app/components/usage-chart.tsx +++ b/app/components/usage-chart.tsx @@ -1,95 +1,73 @@ import { - AnimatedAxis, // any of these can be non-animated equivalents - AnimatedLineSeries, - XYChart, - buildChartTheme, -} from "@visx/xychart"; -import { curveCardinal } from "@visx/curve"; + AnimatedAxis, // any of these can be non-animated equivalents + AnimatedLineSeries, + XYChart, + buildChartTheme +} from "@visx/xychart" +import { curveCardinal } from "@visx/curve" +import { InfoIcon } from "./icons" -interface UsageChartProps { - usageName: string; - dataset: { - x: string; - y: number; - }[]; +type Coords = { + x: string + y: string +} + +type UsageChartProps = { + label: string + dataset: Coords[] } const accessors = { - xAccessor: (d) => d.x, - yAccessor: (d) => d.y, -}; + xAccessor: (d: Coords) => d.x, + yAccessor: (d: Coords) => d.y +} const customTheme = buildChartTheme({ - colors: ["hsl(var(--ring))"], - backgroundColor: "hsl(var(--primary-2))", - gridColor: "hsl(var(--primary-2))", - gridColorDark: "hsl(var(--primary-2))", - tickLength: 8, - xAxisLineStyles: { - strokeWidth: 1, - } -}); + colors: ["hsl(var(--ring))"], + backgroundColor: "hsl(var(--primary-2))", + gridColor: "hsl(var(--primary-2))", + gridColorDark: "hsl(var(--primary-2))", + tickLength: 8, + xAxisLineStyles: { + strokeWidth: 1 + } +}) -export const UsageChart = ({ usageName, dataset }: UsageChartProps) => { - return ( -
-
- {usageName} - -
-
- - - - - -
-
- ); -}; - -const InfoIcon = ({ className }: { className?: string }) => { - return ( - { + return ( +
+
+ {label} + +
+
+ - - - - - - - - - - ); -}; + + + + +
+
+ ) +} \ No newline at end of file diff --git a/app/root.tsx b/app/root.tsx index 02a61a8..3bf3bbc 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -7,14 +7,13 @@ import { } from "@remix-run/react"; import stylesheet from "./tailwind.css?url"; -import { LinksFunction } from "@remix-run/node"; +import type { LinksFunction } from "@remix-run/node"; // Supports weights 200-800 import '@fontsource-variable/manrope'; export const links: LinksFunction = () => [ { rel: "stylesheet", href: stylesheet }, - // { rel: "stylesheet", href: manropeStylesheet }, ]; export function Layout({ children }: { children: React.ReactNode }) { diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx index a5582ba..fed7bc6 100644 --- a/app/routes/dashboard.tsx +++ b/app/routes/dashboard.tsx @@ -1,134 +1,71 @@ -import { GeneralLayout } from "~/components/general-layout"; -import { UpgradeAccountBanner } from "~/components/upgrade-account-banner"; -import { UsageCard } from "~/components/usage-card"; -import { UsageChart } from "~/components/usage-chart"; +import { GeneralLayout } from "~/components/general-layout" +import { + CloudIcon, + CloudDownloadIcon, + CloudUploadSolidIcon +} from "~/components/icons" +import { UpgradeAccountBanner } from "~/components/upgrade-account-banner" +import { UsageCard } from "~/components/usage-card" +import { UsageChart } from "~/components/usage-chart" export default function Dashboard() { - const isLogged = true; - if (!isLogged) { - window.location.href = "/login"; - } + const isLogged = true + if (!isLogged) { + window.location.href = "/login" + } - return ( - -

Dashboard

- -

Current Usage

-
- } - /> - } - /> - } - /> -
-

Historical Usage

-
- - - -
- - ); + return ( + +

Dashboard

+ +

Current Usage

+
+ } + /> + } + /> + } + /> +
+

Historical Usage

+
+ + + +
+ + ) } - -const CloudIcon = ({ className }: { className?: string }) => { - return ( - - - - - - - - - - - ); -}; - -const CloudDonwloadIcon = ({ className }: { className?: string }) => { - return ( - - - - - - - - - - - ); -}; - -const CloudUploadIcon = ({ className }: { className?: string }) => { - return ( - - - - ); -}; diff --git a/app/routes/file-manager/columns.tsx b/app/routes/file-manager/columns.tsx index 154a75b..0441170 100644 --- a/app/routes/file-manager/columns.tsx +++ b/app/routes/file-manager/columns.tsx @@ -1,4 +1,5 @@ -import { ColumnDef } from "@tanstack/react-table"; +import type { ColumnDef } from "@tanstack/react-table"; +import { FileIcon, MoreIcon } from "~/components/icons"; import { Checkbox } from "~/components/ui/checkbox"; // This type is used to define the shape of our data. @@ -62,48 +63,4 @@ export const columns: ColumnDef[] = [
) } -]; - -const FileIcon = ({ className }: { className?: string }) => { - return ( - - - - ); -}; - -const MoreIcon = ({ className }: { className?: string }) => { - return ( - - - - - - ); -}; +]; \ No newline at end of file diff --git a/app/routes/file-manager/route.tsx b/app/routes/file-manager/index.tsx similarity index 72% rename from app/routes/file-manager/route.tsx rename to app/routes/file-manager/index.tsx index ff83195..ad0e35e 100644 --- a/app/routes/file-manager/route.tsx +++ b/app/routes/file-manager/index.tsx @@ -4,6 +4,7 @@ import { DataTable } from "~/components/data-table"; import { columns } from "./columns"; import { Input } from "~/components/ui/input"; import { Button } from "~/components/ui/button"; +import { AddIcon } from "~/components/icons"; export default function FileManager() { const isLogged = true; @@ -46,7 +47,7 @@ export default function FileManager() { fullWidth leftIcon={} placeholder="Search files by name or CID" - className="border-ring font-bold w-full grow h-12 flex-1" + className="border-ring font-medium w-full grow h-12 flex-1 bg-primary-2/10" />