Adjusted modal and button styles

ecency · Dec 7, 2024 · 7ff3076 · 7ff3076
1 parent e13331a
commit 7ff3076
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/src/features/ui/button/props.ts b/src/features/ui/button/props.ts
@@ -3,6 +3,7 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
 export type ButtonAppearance =
   | "primary"
   | "secondary"
+  | "gray"
   | "gray-link"
   | "link"
   | "danger"

diff --git a/src/features/ui/button/styles.ts b/src/features/ui/button/styles.ts
@@ -13,7 +13,8 @@ export const BUTTON_STYLES: Record<ButtonAppearance, string> = {
   "gray-link": "text-gray-600 hover:text-blue-dark-sky focus:text-blue-dark-sky-active",
   "white-link": "text-white hover:opacity-50 focus:opacity-75",
   white:
-    "text-blue-dark-sky bg-white hover:bg-gray-100 focus:bg-gray-200 dark:bg-dark-default dark:hover:bg-dark-200 dark:focus:bg-gray-900 dark:text-white disabled:opacity-75"
+    "text-blue-dark-sky bg-white hover:bg-gray-100 focus:bg-gray-200 dark:bg-dark-default dark:hover:bg-dark-200 dark:focus:bg-gray-900 dark:text-white disabled:opacity-75",
+  gray: "bg-gray-200 text-gray-600 dark:text-gray-400 dark:bg-gray-800 hover:bg-blue-duck-egg hover:text-blue-dark-sky hover:dark:bg-dark-default focus:text-blue-dark-sky-active focus:dark:bg-dark-200"
 };
 
 export const BUTTON_OUTLINE_STYLES: Record<ButtonAppearance, string> = {
@@ -30,7 +31,8 @@ export const BUTTON_OUTLINE_STYLES: Record<ButtonAppearance, string> = {
   "gray-link": "",
   "white-link": "",
   white:
-    "text-white border-white hover:border-gray-100 focus:border-gray-200 dark:border-dark-default dark:hover:border-dark-200 dark:focus:border-gray-900 dark:text-dark-default"
+    "text-white border-white hover:border-gray-100 focus:border-gray-200 dark:border-dark-default dark:hover:border-dark-200 dark:focus:border-gray-900 dark:text-dark-default",
+  gray: ""
 };
 
 export const BUTTON_SIZES: Record<ButtonSize, string> = {

diff --git a/src/features/ui/modal/modal-header.tsx b/src/features/ui/modal/modal-header.tsx
@@ -1,7 +1,8 @@
 import React, { HTMLProps, useContext } from "react";
 import { ModalContext } from "./index";
 import { classNameObject, useFilteredProps } from "@/features/ui/util";
-import { closeSvg } from "@/features/ui/svg";
+import { Button } from "@ui/button";
+import { UilMultiply } from "@tooni/iconscout-unicons-react";
 
 interface Props {
   closeButton: boolean;
@@ -26,13 +27,15 @@ export function ModalHeader(props: HTMLProps<HTMLDivElement> & Props) {
     >
       {props.children}
       {props.closeButton && (
-        <button
+        <Button
+          appearance="gray"
           aria-label="Close"
-          className="w-5 h-5 opacity-50 absolute top-3 right-3 hover:opacity-100"
+          noPadding={true}
+          size="sm"
+          className="absolute top-3 right-3 w-8"
           onClick={() => context.setShow(false)}
-        >
-          {closeSvg}
-        </button>
+          icon={<UilMultiply className="!w-4 !h-4" />}
+        />
       )}
     </div>
   );