From e014d0df2dce7736ec2721425ffc1ab853e39f21 Mon Sep 17 00:00:00 2001 From: indaviande Date: Wed, 11 Dec 2024 17:35:53 +0100 Subject: [PATCH 1/6] change border to doetted --- src/components/primitives/Divider.tsx | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/src/components/primitives/Divider.tsx b/src/components/primitives/Divider.tsx index fd1d4e60c..17e93f525 100644 --- a/src/components/primitives/Divider.tsx +++ b/src/components/primitives/Divider.tsx @@ -10,7 +10,7 @@ export const dividerStyles = tv( soft: "border-main-8", base: "border-main-11", bold: "border-accent-11", - tint: "border-t-2 border-main-1", + tint: "border-dashed border-main-8", hype: "border-t-2 border-accent-11", }, vertical: { @@ -33,7 +33,7 @@ export const dividerStyles = tv( { look: "hype", vertical: true, class: "border-r-2" }, ], }, - { twMerge: false }, + { twMerge: false } ); export type DividerProps = Component< @@ -43,8 +43,25 @@ export type DividerProps = Component< } >; -export default function Divider({ vertical = false, horizontal = true, look, className, ...props }: DividerProps) { - if (horizontal && !vertical) return
; +export default function Divider({ + vertical = false, + horizontal = true, + look, + className, + ...props +}: DividerProps) { + if (horizontal && !vertical) + return ( +
+ ); - return
; + return ( +
+ ); } From 915c58b4e2c84e0dcd73860ff511c64360cc8e0e Mon Sep 17 00:00:00 2001 From: sheykei Date: Fri, 13 Dec 2024 13:09:27 +0100 Subject: [PATCH 2/6] 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 d3cdcd2f0..b5ab5af4c 100644 --- a/src/components/dapp/WalletButton.tsx +++ b/src/components/dapp/WalletButton.tsx @@ -74,7 +74,7 @@ export default function WalletButton(props: ButtonProps) { Explorer diff --git a/src/components/primitives/Checkbox.tsx b/src/components/primitives/Checkbox.tsx index bcd2a1292..1ca3835ec 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 & { state?: GetSet }, 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> diff --git a/src/components/primitives/Title.tsx b/src/components/primitives/Title.tsx index a57ac2e9b..a32adbaea 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(function Title( + { look, h, size: _size, className, ...props }: TitleProps, + ref, +) { const size = _size ?? h; + switch (h) { case 1: - return

; + return

; case 2: - return

; + return

; case 3: - return

; + return

; case 4: - return

; + return

; case 5: - return

; + return
; default: break; } -} +}); + +export default Title; diff --git a/src/hooks/events/useOverflowing.tsx b/src/hooks/events/useOverflowing.tsx new file mode 100644 index 000000000..9cca1f3fb --- /dev/null +++ b/src/hooks/events/useOverflowing.tsx @@ -0,0 +1,22 @@ +import { useCallback, useEffect, useRef, useState } from "react"; + +export function useOverflowingRef() { + const [overflowing, setOverflowing] = useState(false); + const ref = useRef(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 48e6e2489..dd9bcfcf2 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: { From b9d5ee1a089bfee5efc7833467d7f899a9c2b74d Mon Sep 17 00:00:00 2001 From: sheykei Date: Fri, 13 Dec 2024 13:10:49 +0100 Subject: [PATCH 3/6] a --- src/components/primitives/Checkbox.tsx | 4 ++-- src/components/primitives/Divider.tsx | 25 ++++--------------------- src/components/primitives/Title.tsx | 2 +- src/utils/tailwind.ts | 2 +- 4 files changed, 8 insertions(+), 25 deletions(-) diff --git a/src/components/primitives/Checkbox.tsx b/src/components/primitives/Checkbox.tsx index 1ca3835ec..252f7bed5 100644 --- a/src/components/primitives/Checkbox.tsx +++ b/src/components/primitives/Checkbox.tsx @@ -17,7 +17,7 @@ export const checkboxStyles = tv({ }, checked: { true: "", - false: "bg-main-0" + false: "bg-main-0", }, size: { xs: "min-h-sm px-xs*2 py-x !m-xs text-xs rounded-xs gap-xs", @@ -30,7 +30,7 @@ export const checkboxStyles = tv({ defaultVariants: { look: "base", size: "md", - }, + }, }); export type CheckboxProps = Component & { state?: GetSet }, RadixCheckboxProps>; diff --git a/src/components/primitives/Divider.tsx b/src/components/primitives/Divider.tsx index 17e93f525..1bc20654b 100644 --- a/src/components/primitives/Divider.tsx +++ b/src/components/primitives/Divider.tsx @@ -33,7 +33,7 @@ export const dividerStyles = tv( { look: "hype", vertical: true, class: "border-r-2" }, ], }, - { twMerge: false } + { twMerge: false }, ); export type DividerProps = Component< @@ -43,25 +43,8 @@ export type DividerProps = Component< } >; -export default function Divider({ - vertical = false, - horizontal = true, - look, - className, - ...props -}: DividerProps) { - if (horizontal && !vertical) - return ( -
- ); +export default function Divider({ vertical = false, horizontal = true, look, className, ...props }: DividerProps) { + if (horizontal && !vertical) return
; - return ( -
- ); + return
; } diff --git a/src/components/primitives/Title.tsx b/src/components/primitives/Title.tsx index a32adbaea..7906d4dac 100644 --- a/src/components/primitives/Title.tsx +++ b/src/components/primitives/Title.tsx @@ -1,8 +1,8 @@ import clsx from "clsx"; +import { forwardRef } from "react"; 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( { diff --git a/src/utils/tailwind.ts b/src/utils/tailwind.ts index dd9bcfcf2..dadddd394 100644 --- a/src/utils/tailwind.ts +++ b/src/utils/tailwind.ts @@ -71,7 +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" + textScroll: "textScroll 5s linear", }, }, colors: { From a56871111a96d411e300cc81321614936b2ad6e1 Mon Sep 17 00:00:00 2001 From: sheykei Date: Fri, 13 Dec 2024 13:13:33 +0100 Subject: [PATCH 4/6] fix: title props types --- src/components/primitives/Title.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/primitives/Title.tsx b/src/components/primitives/Title.tsx index 7906d4dac..ce05aaac5 100644 --- a/src/components/primitives/Title.tsx +++ b/src/components/primitives/Title.tsx @@ -32,7 +32,7 @@ export type TitleProps = Component< HTMLHeadingElement >; -const Title = forwardRef(function Title( +const Title = forwardRef(function Title( { look, h, size: _size, className, ...props }: TitleProps, ref, ) { From 62a62f907e8ab86bd0adc314cd0ad422870362b5 Mon Sep 17 00:00:00 2001 From: sheykei Date: Fri, 13 Dec 2024 13:29:37 +0100 Subject: [PATCH 5/6] fix --- src/components/dapp/WalletButton.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/dapp/WalletButton.tsx b/src/components/dapp/WalletButton.tsx index b5ab5af4c..3cbe9b3a0 100644 --- a/src/components/dapp/WalletButton.tsx +++ b/src/components/dapp/WalletButton.tsx @@ -70,12 +70,7 @@ export default function WalletButton(props: ButtonProps) { - - + {props.children} }> From a3bdea56bd92d7f72a265ac749e16c8e8f940b1f Mon Sep 17 00:00:00 2001 From: sheykei Date: Fri, 13 Dec 2024 13:29:46 +0100 Subject: [PATCH 6/6] fix --- src/components/dapp/WalletButton.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/dapp/WalletButton.tsx b/src/components/dapp/WalletButton.tsx index 3cbe9b3a0..107b969b8 100644 --- a/src/components/dapp/WalletButton.tsx +++ b/src/components/dapp/WalletButton.tsx @@ -69,9 +69,7 @@ export default function WalletButton(props: ButtonProps) { Connected with {connector?.name} - - {props.children} - + {props.children} }>