fix: Fix broken component styles, consolidate icon libraries (#99)

namesakefyi · Sep 21, 2024 · 53d4407 · 53d4407
1 parent 4e22658
commit 53d4407
Show file tree

Hide file tree

Showing 36 changed files with 169 additions and 221 deletions.
diff --git a/.changeset/happy-stingrays-look.md b/.changeset/happy-stingrays-look.md
@@ -0,0 +1,5 @@
+---
+"namesake": patch
+---
+
+Consolidate icon libraries
diff --git a/.changeset/nice-rocks-refuse.md b/.changeset/nice-rocks-refuse.md
@@ -0,0 +1,5 @@
+---
+"namesake": patch
+---
+
+Fix broken component styles
diff --git a/package.json b/package.json
@@ -43,7 +43,6 @@
     "@tanstack/react-router": "^1.57.15",
     "convex": "^1.16.0",
     "convex-helpers": "^0.1.58",
-    "lucide-react": "^0.441.0",
     "next-themes": "^0.3.0",
     "postcss": "^8.4.47",
     "pretty-bytes": "^6.1.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/AlertDialog/AlertDialog.tsx b/src/components/AlertDialog/AlertDialog.tsx
@@ -1,9 +1,9 @@
-import { AlertCircleIcon, InfoIcon } from "lucide-react";
+import { RiAlertLine, RiInformationLine } from "@remixicon/react";
 import type { ReactNode } from "react";
 import { chain } from "react-aria";
-import { type DialogProps, Heading } from "react-aria-components";
+import { Heading } from "react-aria-components";
 import { Button } from "../Button";
-import { Dialog } from "../Dialog";
+import { Dialog, type DialogProps } from "../Dialog";
 
 interface AlertDialogProps extends Omit<DialogProps, "children"> {
   title: string;
@@ -29,17 +29,17 @@ export function AlertDialog({
         <>
           <Heading
             slot="title"
-            className="text-xl font-semibold leading-6 my-0"
+            className="text-xl font-medium text-gray-normal leading-6 my-0"
           >
             {title}
           </Heading>
           <div
             className={`w-6 h-6 absolute right-6 top-6 stroke-2 ${variant === "destructive" ? "text-red-9 dark:text-reddark-9" : "text-blue-9 dark:text-bluedark-9"}`}
           >
             {variant === "destructive" ? (
-              <AlertCircleIcon aria-hidden />
+              <RiAlertLine aria-hidden />
             ) : (
-              <InfoIcon aria-hidden />
+              <RiInformationLine aria-hidden />
             )}
           </div>
           <p className="mt-3 text-gray-dim">{children}</p>

diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,4 +1,4 @@
-import { ChevronRight } from "lucide-react";
+import { RiArrowRightWideLine } from "@remixicon/react";
 import {
   Breadcrumb as AriaBreadcrumb,
   Breadcrumbs as AriaBreadcrumbs,
@@ -31,7 +31,9 @@ export function Breadcrumb(
       )}
     >
       <Link variant="secondary" {...props} />
-      {props.href && <ChevronRight className="w-3 h-3 text-gray-dim" />}
+      {props.href && (
+        <RiArrowRightWideLine className="w-4 h-4 text-gray-8 dark:text-graydark-8" />
+      )}
     </AriaBreadcrumb>
   );
 }
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -18,7 +18,7 @@ const button = tv({
       primary: "bg-purple-solid",
       secondary: "bg-gray-ghost text-gray-normal",
       destructive: "bg-red-solid",
-      icon: "bg-gray-ghost border-0 p-2 flex items-center justify-center rounded-full",
+      icon: "bg-gray-ghost text-gray-dim hover:text-gray-normal border-0 p-2 flex items-center justify-center rounded-full",
     },
     isDisabled: {
       true: "cursor-default text-gray-dim opacity-50 forced-colors:text-[GrayText]",

diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
@@ -1,5 +1,4 @@
-import { ChevronLeft, ChevronRight } from "lucide-react";
-
+import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react";
 import {
   Calendar as AriaCalendar,
   CalendarGridHeader as AriaCalendarGridHeader,
@@ -66,17 +65,17 @@ export function CalendarHeader() {
     <header className="flex items-center gap-1 pb-4 px-1 w-full">
       <Button variant="icon" slot="previous">
         {direction === "rtl" ? (
-          <ChevronRight aria-hidden />
+          <RiArrowRightSLine aria-hidden />
         ) : (
-          <ChevronLeft aria-hidden />
+          <RiArrowLeftSLine aria-hidden />
         )}
       </Button>
-      <Heading className="flex-1 font-semibold text-xl text-center mx-2 text-gray-12 dark:text-gray-2" />
+      <Heading className="flex-1 font-medium text-xl text-center mx-2 text-gray-normal" />
       <Button variant="icon" slot="next">
         {direction === "rtl" ? (
-          <ChevronLeft aria-hidden />
+          <RiArrowLeftSLine aria-hidden />
         ) : (
-          <ChevronRight aria-hidden />
+          <RiArrowRightSLine aria-hidden />
         )}
       </Button>
     </header>
@@ -87,7 +86,7 @@ export function CalendarGridHeader() {
   return (
     <AriaCalendarGridHeader>
       {(day) => (
-        <CalendarHeaderCell className="text-xs text-gray-5 dark:text-graydark-5 font-semibold">
+        <CalendarHeaderCell className="text-xs text-gray-9 dark:text-graydark-9 font-semibold">
           {day}
         </CalendarHeaderCell>
       )}

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -1,4 +1,4 @@
-import { Check, Minus } from "lucide-react";
+import { RiCheckLine, RiSubtractLine } from "@remixicon/react";
 import type { ReactNode } from "react";
 import {
   Checkbox as AriaCheckbox,
@@ -43,15 +43,15 @@ const checkboxStyles = tv({
   base: "flex gap-2 items-center group text-sm transition",
   variants: {
     isDisabled: {
-      false: "text-gray-10 dark:text-gray-2",
-      true: "text-gray-3 dark:text-gray-6 forced-colors:text-[GrayText]",
+      false: "text-gray-normal cursor-pointer",
+      true: "opacity-50 forced-colors:text-[GrayText] cursor-default",
     },
   },
 });
 
 const boxStyles = tv({
   extend: focusRing,
-  base: "w-5 h-5 flex-shrink-0 rounded flex items-center justify-center border-2 transition",
+  base: "w-6 h-6 flex-shrink-0 rounded flex items-center justify-center border-2 transition",
   variants: {
     isSelected: {
       false: "bg-white dark:bg-gray-12 border-gray-dim",
@@ -67,7 +67,7 @@ const boxStyles = tv({
 });
 
 const iconStyles =
-  "w-4 h-4 text-white group-disabled:text-gray-4 dark:group-disabled:text-gray-9 forced-colors:text-[HighlightText]";
+  "w-5 h-5 text-white group-disabled:text-gray-4 dark:group-disabled:text-gray-9 forced-colors:text-[HighlightText]";
 
 export function Checkbox(props: CheckboxProps) {
   return (
@@ -86,9 +86,9 @@ export function Checkbox(props: CheckboxProps) {
             })}
           >
             {isIndeterminate ? (
-              <Minus aria-hidden className={iconStyles} />
+              <RiSubtractLine aria-hidden className={iconStyles} />
             ) : isSelected ? (
-              <Check aria-hidden className={iconStyles} />
+              <RiCheckLine aria-hidden className={iconStyles} />
             ) : null}
           </div>
           {props.children}

diff --git a/src/components/ComboBox/ComboBox.tsx b/src/components/ComboBox/ComboBox.tsx
@@ -1,4 +1,4 @@
-import { ChevronDown } from "lucide-react";
+import { RiArrowDownSLine } from "@remixicon/react";
 import type React from "react";
 import {
   ComboBox as AriaComboBox,
@@ -50,8 +50,8 @@ export function ComboBox<T extends object>({
       <Label>{label}</Label>
       <FieldGroup>
         <Input />
-        <Button variant="icon" className="w-6 mr-1 rounded outline-offset-0 ">
-          <ChevronDown aria-hidden className="w-4 h-4" />
+        <Button variant="icon" className="w-7 h-7 p-0 mr-1 outline-offset-0 ">
+          <RiArrowDownSLine aria-hidden className="w-4 h-4" />
         </Button>
       </FieldGroup>
       {description && <FieldDescription>{description}</FieldDescription>}

diff --git a/src/components/DateField/DateField.tsx b/src/components/DateField/DateField.tsx
@@ -46,16 +46,16 @@ export function DateField<T extends DateValue>({
 }
 
 const segmentStyles = tv({
-  base: "inline p-0.5 type-literal:px-0 rounded outline outline-0 forced-color-adjust-none caret-transparent text-gray-10 dark:text-gray-2 forced-colors:text-[ButtonText]",
+  base: "inline p-0.5 type-literal:px-0 rounded outline outline-0 forced-color-adjust-none caret-transparent text-gray-normal forced-colors:text-[ButtonText]",
   variants: {
     isPlaceholder: {
-      true: "text-gray-6 dark:text-gray-4 italic",
+      true: "text-gray-9 dark:text-graydark-9",
     },
     isDisabled: {
       true: "text-gray-2 dark:text-gray-6 forced-colors:text-[GrayText]",
     },
     isFocused: {
-      true: "bg-blue-9 text-white dark:text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+      true: "bg-purple-9 text-white dark:text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
     },
   },
 });
@@ -66,7 +66,7 @@ export function DateInput(props: Omit<DateInputProps, "children">) {
       className={(renderProps) =>
         fieldGroupStyles({
           ...renderProps,
-          class: "block min-w-[150px] px-2 py-1.5 text-sm",
+          class: "block min-w-[150px] px-3 py-2",
         })
       }
       {...props}

diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
@@ -1,5 +1,4 @@
-import { CalendarIcon } from "lucide-react";
-
+import { RiCalendarLine } from "@remixicon/react";
 import {
   DatePicker as AriaDatePicker,
   type DatePickerProps as AriaDatePickerProps,
@@ -37,9 +36,9 @@ export function DatePicker<T extends DateValue>({
     >
       {label && <Label>{label}</Label>}
       <FieldGroup className="min-w-[208px] w-auto">
-        <DateInput className="flex-1 min-w-[150px] px-2 py-1.5 text-sm" />
-        <Button variant="icon" className="w-6 mr-1 rounded outline-offset-0">
-          <CalendarIcon aria-hidden className="w-4 h-4" />
+        <DateInput className="flex-1 min-w-[150px] px-3 py-2" />
+        <Button variant="icon" className="w-7 h-7 p-0 mr-1 outline-offset-0">
+          <RiCalendarLine aria-hidden className="w-4 h-4" />
         </Button>
       </FieldGroup>
       {description && <FieldDescription>{description}</FieldDescription>}

diff --git a/src/components/DateRangePicker/DateRangePicker.tsx b/src/components/DateRangePicker/DateRangePicker.tsx
@@ -1,5 +1,4 @@
-import { CalendarIcon } from "lucide-react";
-
+import { RiCalendarLine } from "@remixicon/react";
 import {
   DateRangePicker as AriaDateRangePicker,
   type DateRangePickerProps as AriaDateRangePickerProps,
@@ -37,16 +36,16 @@ export function DateRangePicker<T extends DateValue>({
     >
       {label && <Label>{label}</Label>}
       <FieldGroup className="min-w-[208px] w-auto">
-        <DateInput slot="start" className="px-2 py-1.5 text-sm" />
+        <DateInput slot="start" className="px-3 py-2" />
         <span
           aria-hidden="true"
           className="text-gray-10 dark:text-gray-2 forced-colors:text-[ButtonText] group-disabled:text-gray-2 group-disabled:dark:text-gray-6 group-disabled:forced-colors:text-[GrayText]"
         >
           –
         </span>
-        <DateInput slot="end" className="flex-1 px-2 py-1.5 text-sm" />
-        <Button variant="icon" className="w-6 mr-1 rounded outline-offset-0">
-          <CalendarIcon aria-hidden className="w-4 h-4" />
+        <DateInput slot="end" className="flex-1 px-3 py-2" />
+        <Button variant="icon" className="w-7 h-7 p-0 mr-1 outline-offset-0">
+          <RiCalendarLine aria-hidden className="w-4 h-4" />
         </Button>
       </FieldGroup>
       {description && <FieldDescription>{description}</FieldDescription>}

diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -1,11 +1,13 @@
 import {
   Dialog as AriaDialog,
+  type DialogProps as AriaDialogProps,
   DialogTrigger as AriaDialogTrigger,
-  type DialogProps,
   type DialogTriggerProps,
 } from "react-aria-components";
 import { twMerge } from "tailwind-merge";
 
+export interface DialogProps extends AriaDialogProps {}
+
 export function Dialog(props: DialogProps) {
   return (
     <AriaDialog

diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx
@@ -22,7 +22,7 @@ export function Label(props: LabelProps) {
     <AriaLabel
       {...props}
       className={twMerge(
-        "text-sm text-gray-normal font-medium cursor-default w-fit",
+        "text-sm text-gray-dim cursor-default w-fit",
         props.className,
       )}
     />
@@ -55,7 +55,7 @@ export const fieldBorderStyles = tv({
   variants: {
     isFocusWithin: {
       false: "border-gray-dim forced-colors:border-[ButtonBorder]",
-      true: "border-gray-dim forced-colors:border-[Highlight]",
+      true: "border-gray-normal forced-colors:border-[Highlight]",
     },
     isInvalid: {
       true: "border-red-normal bg-red-subtle forced-colors:border-[Mark]",
@@ -83,8 +83,8 @@ export function FieldGroup(props: GroupProps) {
   );
 }
 
-const inputStyles =
-  "px-3 py-2 flex-1 min-w-0 outline outline-0 bg-gray-subtle text-gray-normal disabled:text-gray-dim";
+export const inputStyles =
+  "px-3 py-2 flex-1 min-w-0 outline outline-0 bg-transparent text-gray-normal disabled:text-gray-dim";
 
 export function Input(props: InputProps) {
   return (

diff --git a/src/components/GridList/GridList.tsx b/src/components/GridList/GridList.tsx
@@ -28,14 +28,14 @@ export function GridList<T extends object>({
 
 const itemStyles = tv({
   extend: focusRing,
-  base: "relative flex items-center gap-3 cursor-default select-none py-2 px-3 text-sm border-y border-y-gray-6 dark:border-y-graydark-6 first:border-t-0 last:border-b-0 first:rounded-t-md last:rounded-b-md -mb-px last:mb-0 -outline-offset-2",
+  base: "relative text-gray-normal flex items-center gap-3 cursor-pointer select-none py-2 px-3 text-sm border-y border-gray-dim first:border-t-0 last:border-b-0 first:rounded-t-md last:rounded-b-md -mb-px last:mb-0 -outline-offset-2",
   variants: {
     isSelected: {
-      false: "hover:bg-gray-3 dark:hover:bg-graydark-3",
-      true: "bg-blue-1 dark:bg-blue-10/30 hover:bg-blue-2 dark:hover:bg-blue-10/40 border-y-blue-2 dark:border-y-blue-12 z-20",
+      false: "",
+      true: "bg-purple-subtle border-y border-purple-dim z-20",
     },
     isDisabled: {
-      true: "opacity-50 forced-colors:text-[GrayText] z-10",
+      true: "opacity-50 cursor-default forced-colors:text-[GrayText] z-10",
     },
   },
 });