From 915c58b4e2c84e0dcd73860ff511c64360cc8e0e Mon Sep 17 00:00:00 2001
From: sheykei <clement4saunier@gmail.com>
Date: Fri, 13 Dec 2024 13:09:27 +0100
Subject: [PATCH] fixes

---
 src/components/dapp/WalletButton.tsx   |  2 +-
 src/components/primitives/Checkbox.tsx | 20 ++++++++++++++------
 src/components/primitives/Title.tsx    | 21 ++++++++++++++-------
 src/hooks/events/useOverflowing.tsx    | 22 ++++++++++++++++++++++
 src/utils/tailwind.ts                  |  7 +++++++
 5 files changed, 58 insertions(+), 14 deletions(-)
 create mode 100644 src/hooks/events/useOverflowing.tsx

diff --git a/src/components/dapp/WalletButton.tsx b/src/components/dapp/WalletButton.tsx
index d3cdcd2f..b5ab5af4 100644
--- a/src/components/dapp/WalletButton.tsx
+++ b/src/components/dapp/WalletButton.tsx
@@ -74,7 +74,7 @@ export default function WalletButton(props: ButtonProps) {
                 <Icon remix="RiArrowRightLine" /> Explorer
               </Button>
               <Button to={`/users/${address}`} size="sm" look="soft">
-                <Icon remix="RiArrowRightLine" /> Dashboard
+                <Icon remix="RiArrowRightLine" /> Claims
               </Button>
             </Group>
           </>
diff --git a/src/components/primitives/Checkbox.tsx b/src/components/primitives/Checkbox.tsx
index bcd2a129..1ca3835e 100644
--- a/src/components/primitives/Checkbox.tsx
+++ b/src/components/primitives/Checkbox.tsx
@@ -6,23 +6,31 @@ import type { Component, GetSet, Styled } from "../../utils/types";
 import Icon from "./Icon";
 
 export const checkboxStyles = tv({
-  base: "text-main-11 flex items-center bg-gradient-to-tr border-1 outline-offset-0 outline-0 text-nowrap font-text font-bold",
+  base: "text-main-11 aspect-square flex items-center bg-gradient-to-tr border-1 outline-offset-0 outline-0 text-nowrap font-text font-bold",
   variants: {
     look: {
       soft: "bg-main-0 border-main-0 hover:bg-main-4 active:bg-main-3 hover:text-main-12  focus-visible:border-main-9",
       base: "bg-main-0 border-main-6 hover:bg-main-4 active:bg-main-3 hover:text-main-12  focus-visible:border-main-9",
       bold: "bg-main-4 border-main-4 hover:bg-main-5 active:bg-main-3 text-main-12 focus-visible:border-main-9",
       tint: "bg-accent-3 border-accent-3 hover:bg-accent-5 active:bg-accent-3 text-accent-11 focus-visible:border-accent-9",
-      hype: "bg-accent-9 border-accent-9 hover:bg-accent-10 active:bg-accent-8 text-main-12 focus-visible:border-accent-10",
+      hype: "bg-accent-11 border-accent-11 text-accent-1 focus-visible:border-accent-10",
+    },
+    checked: {
+      true: "",
+      false: "bg-main-0"
     },
     size: {
-      xs: "min-h-sm px-xs*2 py-xs text-xs rounded-xs gap-xs",
-      sm: "min-h-sm px-sm py-sm/2 text-sm rounded-sm gap-sm",
-      md: " px-md py-md/2 text-md rounded-md gap-md",
+      xs: "min-h-sm px-xs*2 py-x !m-xs text-xs rounded-xs gap-xs",
+      sm: "min-h-sm px-sm py-sm/2 !m-sm text-sm rounded-sm gap-sm",
+      md: " px-md py-md/2 text-md !m-md rounded-md gap-md",
       lg: "min-h-sm px-lg py-lg/2 text-lg rounded-lg gap-lg",
       xl: "min-h-sm px-xl py-xl/2 text-xl rounded-xl gap-xl",
     },
   },
+  defaultVariants: {
+    look: "base",
+    size: "md",
+  }, 
 });
 
 export type CheckboxProps = Component<Styled<typeof checkboxStyles> & { state?: GetSet<boolean> }, RadixCheckboxProps>;
@@ -35,7 +43,7 @@ export default function Checkbox({ look, size, state, className }: CheckboxProps
       checked={!!getter}
       onClick={blockEvent(() => setter?.(!getter))}
       onCheckedChange={v => setter?.(!v)}
-      className={mergeClass(checkboxStyles({ look: look ?? "base", size: size ?? "md" }), className)}
+      className={mergeClass(checkboxStyles({ look: look ?? "base", size: size ?? "md", checked: getter }), className)}
       defaultChecked>
       <Icon className={!getter ? "text-main-0" : ""} size={size} remix="RiCheckFill" />
     </Root>
diff --git a/src/components/primitives/Title.tsx b/src/components/primitives/Title.tsx
index a57ac2e9..a32adbae 100644
--- a/src/components/primitives/Title.tsx
+++ b/src/components/primitives/Title.tsx
@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { tv } from "tailwind-variants";
 import type { Component, Styled } from "../../utils/types";
 import { textStyles } from "./Text";
+import React, { forwardRef, useEffect, useRef } from "react";
 
 export const titleStyles = tv(
   {
@@ -31,20 +32,26 @@ export type TitleProps = Component<
   HTMLHeadingElement
 >;
 
-export default function Title({ look, h, size: _size, className, ...props }: TitleProps) {
+const Title = forwardRef<HTMLHeadingElement>(function Title(
+  { look, h, size: _size, className, ...props }: TitleProps,
+  ref,
+) {
   const size = _size ?? h;
+
   switch (h) {
     case 1:
-      return <h1 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h1 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 2:
-      return <h2 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h2 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 3:
-      return <h3 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h3 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 4:
-      return <h4 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h4 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 5:
-      return <h5 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h5 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     default:
       break;
   }
-}
+});
+
+export default Title;
diff --git a/src/hooks/events/useOverflowing.tsx b/src/hooks/events/useOverflowing.tsx
new file mode 100644
index 00000000..9cca1f3f
--- /dev/null
+++ b/src/hooks/events/useOverflowing.tsx
@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useOverflowingRef<T extends HTMLElement>() {
+  const [overflowing, setOverflowing] = useState(false);
+  const ref = useRef<T>(null);
+
+  const onResize = useCallback(() => {
+    const span = ref.current;
+
+    if (span) {
+      setOverflowing(span.scrollWidth > span.clientWidth);
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("resize", onResize);
+
+    return () => window.removeEventListener("resize", onResize);
+  }, [onResize]);
+
+  return { overflowing, ref };
+}
diff --git a/src/utils/tailwind.ts b/src/utils/tailwind.ts
index 48e6e248..dd9bcfcf 100644
--- a/src/utils/tailwind.ts
+++ b/src/utils/tailwind.ts
@@ -54,6 +54,12 @@ export const generateTailwindConfig = () =>
           from: { opacity: "0", transform: "translateX(-2px)" },
           to: { opacity: "1", transform: "translateX(0)" },
         },
+        textScroll: {
+          "0%": { transform: "translateX(0%)" },
+          "90%": { transform: "translateX(-100%)" },
+          "95%": { transform: "translateX(0%)" },
+          "100%": { transform: "translateX(0%)" },
+        },
       },
       animation: {
         drop: "drop 0.1s ease-out",
@@ -65,6 +71,7 @@ export const generateTailwindConfig = () =>
         slideLeftAndFade: "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
         slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
         slideRightAndFade: "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        textScroll: "textScroll 5s linear"
       },
     },
     colors: {