Yj-fix/misc

package.json

@@ -34,7 +34,7 @@
     "scripts": {
         "build:library": "vite build && npm run build:library-css",
         "build:library-css": "tailwindcss -m -i ./src/tailwind-input.css -o ./dist/styles.css --minify",
-        "build:storybook": "storybook build && npm run build:storybook-css",
+        "build:storybook": "npm run build:library && npm run build:storybook-css && storybook build",
         "build:storybook-css": "tailwindcss -m -i ./src/tailwind-input.css -o ./src/tailwind-output.css --minify",
         "bundle-size": "npx vite-bundle-visualizer",
         "dev": "concurrently -n \"storybook-css,storybook\" -c \"blue,red\" \"npm run dev:css\" \"storybook dev -p 6006\"",

src/components/Atoms/TokenAvatar/TokenAvatar.tsx

@@ -93,14 +93,14 @@ export const TokenAvatar: React.FC<TokenAvatarProps> = ({
         <div ref={ref} className={SIZE_CLASS} />
     ) : (
         <div
-            className={`${SIZE_CLASS} relative rounded-[100%]`}
+            className={`${SIZE_CLASS} relative rounded-full`}
             style={{ background: chain_color ?? "", padding: "2px" }}
         >
             <img
                 src={token_url ?? "https://goldrush.vercel.app/icons/token.svg"}
                 alt="Token Image"
                 style={{ background: "#fff" }}
-                className={`h-full w-full rounded-[100%] p-0.5`}
+                className={`h-full w-full rounded-full p-0.5`}
                 onError={(e) => {
                     e.currentTarget.src =
                         "https://goldrush.vercel.app/icons/token.svg";
@@ -114,7 +114,7 @@ export const TokenAvatar: React.FC<TokenAvatarProps> = ({
                         background: chain_color ? chain_color : "grey",
                         padding: "1px",
                     }}
-                    className={`${SUB_SIZE} absolute -bottom-2 -left-3 rounded-[100%] p-0.5`}
+                    className={`${SUB_SIZE} absolute -bottom-2 -left-3 rounded-full p-0.5`}
                     onError={(e) => {
                         e.currentTarget.src =
                             "https://goldrush.vercel.app/icons/token.svg";

src/components/Molecules/NFTs/NFTFloorPrice/NFTFloorPrice.tsx

@@ -110,7 +110,7 @@ export const NFTFloorPrice: React.FC<NFTFloorPriceProps> = ({
     });
 
     return (
-        <div className="min-h-[25rem] w-full rounded border border-secondary-light p-4 dark:border-secondary-dark">
+        <div className="min-h-96 w-full rounded border border-secondary-light p-4 dark:border-secondary-dark">
             <div className="pb-4">
                 <Heading size={4}>Floor Price</Heading>
             </div>

src/components/Organisms/XYK/XYKTokenDetailView/XYKTokenDetailView.tsx

@@ -63,8 +63,8 @@ export const XYKTokenDetailView: React.FC<XYKTokenDetailViewProps> = ({
                 {maybeResult.match({
                     None: () => (
                         <div className="relative mr-2 flex">
-                            <div className="h-20 w-20 animate-pulse rounded-[100%] bg-slate-600" />
-                            <div className="absolute left-12 h-20 w-20 animate-pulse rounded-[100%] bg-slate-200" />
+                            <div className="h-20 w-20 animate-pulse rounded-full bg-slate-600" />
+                            <div className="absolute left-12 h-20 w-20 animate-pulse rounded-full bg-slate-200" />
                         </div>
                     ),
                     Some: (result) => (

src/components/ui/button.tsx

@@ -4,21 +4,21 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/utils/functions";
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+    "inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
     {
         variants: {
             variant: {
                 primary:
                     "bg-primary-light dark:bg-primary-dark text-foreground-light dark:text-foreground-dark shadow hover:bg-opacity-90",
                 outline:
-                    "border border-input bg-background-light dark:bg-background-dark shadow-sm hover:bg-primary-light border-secondary-light dark:border-secondary-dark",
+                    "text-foreground-light dark:text-foreground-dark border bg-background-light dark:bg-background-dark hover:bg-primary-light dark:hover:bg-primary-dark border-secondary-light dark:border-secondary-dark shadow-sm",
                 ghost: "hover:bg-primary-light hover:text-foreground-light dark:hover:bg-primary-dark dark:hover:text-foreground-dark",
                 link: "text-primary-light dark:text-primary-dark underline-offset-4 hover:underline",
             },
             size: {
                 default: "h-9 px-4 py-2",
-                sm: "h-8 rounded-md px-3 text-xs",
-                lg: "h-10 rounded-md px-8",
+                sm: "h-8 rounded px-3 text-xs",
+                lg: "h-10 rounded px-8",
                 icon: "h-9 w-9",
             },
         },

src/components/ui/dialog.tsx

@@ -35,7 +35,7 @@ const DialogContent = forwardRef<
         <DialogPrimitive.Content
             ref={ref}
             className={cn(
-                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background-light p-6 shadow-xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:bg-background-dark sm:rounded-lg",
+                "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg translate-x-1/2 translate-y-1/2 gap-4 border bg-background-light p-6 shadow-xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:bg-background-dark sm:rounded-lg",
                 className
             )}
             {...props}

src/components/ui/skeleton.tsx

@@ -14,24 +14,24 @@ function Skeleton({
     const sizeClass = useCallback((): string => {
         switch (size) {
             case "lg":
-                return "w-[100px] h-[30px]";
+                return "w-28 h-8";
             case "md":
-                return "w-[50px] h-[20px]";
+                return "w-12 h-5";
             case "sm":
-                return "w-[40px] h-[20px]";
+                return "w-10 h-5";
             case "xs":
-                return "w-[30px] h-[20px]";
+                return "w-8 h-5";
             case "xxs":
-                return "w-[20px] h-[20px]";
+                return "w-5 h-5";
             default:
-                return "w-[100px] h-[20px]";
+                return "w-28 h-5";
         }
     }, []);
 
     return (
         <div
             className={cn(
-                "animate-pulse rounded-md bg-secondary-light dark:bg-secondary-dark",
+                "animate-pulse rounded bg-secondary-light dark:bg-secondary-dark",
                 isNFT ? "h-[280px] w-[230px]" : sizeClass(),
                 className
             )}