Skip to content

Commit b7027b4

Browse files
jonyburjonybur
authored
feat: vault UI fixes (#554)
* feat(packages): fixes slider * feat(packages): fixes key value table, spacings, sizes, etc * feat(packages): improve keyvaluelist * feat(packages): further fixes * feat(packages): further fixes * feat(packages): improve max button * feat(packages): fixes to home * feat(packages): fix lint * feat(packages): fix lint * feat(packages): fix lint
1 parent ce21ae4 commit b7027b4

File tree

40 files changed

+1182
-202
lines changed

40 files changed

+1182
-202
lines changed

‎packages/babylon-core-ui/public/background-dark.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎packages/babylon-core-ui/public/background-dark.webp‎

-1.03 MB
Binary file not shown.

‎packages/babylon-core-ui/src/components/Avatar/Avatar.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
}
77

88
&-tiny {
9-
@apply size-[1.125rem];
9+
@apply size-4;
1010
}
1111

1212
&-small {
@@ -21,6 +21,10 @@
2121
@apply size-10;
2222
}
2323

24+
&-xlarge {
25+
@apply size-16;
26+
}
27+
2428
&-circular {
2529
@apply rounded-full;
2630
}

‎packages/babylon-core-ui/src/components/Avatar/Avatar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export interface AvatarProps extends PropsWithChildren {
77
url?: string;
88
className?: string;
99
style?: CSSProperties;
10-
size?: "tiny" | "small" | "medium" | "large";
10+
size?: "tiny" | "small" | "medium" | "large" | "xlarge";
1111
variant?: "circular" | "rounded" | "square";
1212
}
1313

‎packages/babylon-core-ui/src/components/Avatar/AvatarGroup.stories.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,78 @@ export const Default: Story = {
2525
],
2626
},
2727
};
28+
29+
export const Tiny: Story = {
30+
args: {
31+
max: 3,
32+
size: "tiny",
33+
avatarClassName: "bg-primary-dark text-accent-contrast",
34+
variant: "circular",
35+
children: [
36+
<Avatar alt="Binance" url="/images/wallets/binance.webp" />,
37+
<Avatar className="border bg-accent-contrast" alt="Keystone" url="/images/wallets/keystone.svg" />,
38+
<Avatar>DT</Avatar>,
39+
<Avatar>JK</Avatar>,
40+
],
41+
},
42+
};
43+
44+
export const Small: Story = {
45+
args: {
46+
max: 3,
47+
size: "small",
48+
avatarClassName: "bg-primary-dark text-accent-contrast",
49+
variant: "circular",
50+
children: [
51+
<Avatar alt="Binance" url="/images/wallets/binance.webp" />,
52+
<Avatar className="border bg-accent-contrast" alt="Keystone" url="/images/wallets/keystone.svg" />,
53+
<Avatar>DT</Avatar>,
54+
<Avatar>JK</Avatar>,
55+
],
56+
},
57+
};
58+
59+
export const Medium: Story = {
60+
args: {
61+
max: 3,
62+
size: "medium",
63+
avatarClassName: "bg-primary-dark text-accent-contrast",
64+
variant: "circular",
65+
children: [
66+
<Avatar alt="Binance" url="/images/wallets/binance.webp" />,
67+
<Avatar className="border bg-accent-contrast" alt="Keystone" url="/images/wallets/keystone.svg" />,
68+
<Avatar>DT</Avatar>,
69+
<Avatar>JK</Avatar>,
70+
],
71+
},
72+
};
73+
74+
export const Large: Story = {
75+
args: {
76+
max: 3,
77+
size: "large",
78+
avatarClassName: "bg-primary-dark text-accent-contrast",
79+
variant: "circular",
80+
children: [
81+
<Avatar alt="Binance" url="/images/wallets/binance.webp" />,
82+
<Avatar className="border bg-accent-contrast" alt="Keystone" url="/images/wallets/keystone.svg" />,
83+
<Avatar>DT</Avatar>,
84+
<Avatar>JK</Avatar>,
85+
],
86+
},
87+
};
88+
89+
export const XLarge: Story = {
90+
args: {
91+
max: 3,
92+
size: "xlarge",
93+
avatarClassName: "bg-primary-dark text-accent-contrast",
94+
variant: "circular",
95+
children: [
96+
<Avatar alt="Binance" url="/images/wallets/binance.webp" />,
97+
<Avatar className="border bg-accent-contrast" alt="Keystone" url="/images/wallets/keystone.svg" />,
98+
<Avatar>DT</Avatar>,
99+
<Avatar>JK</Avatar>,
100+
],
101+
},
102+
};

‎packages/babylon-core-ui/src/components/Button/Button.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.bbn-btn {
2-
@apply rounded tracking-0.4 transition-all duration-200;
2+
@apply rounded-md tracking-0.4 transition-all duration-200;
33

44
&-fluid {
55
@apply w-full;

‎packages/babylon-core-ui/src/components/Button/Button.stories.tsx‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,158 @@ type Story = StoryObj<typeof meta>;
1515
export const Default: Story = {
1616
args: { children: "Button" },
1717
};
18+
19+
export const Variants: Story = {
20+
render: () => (
21+
<div className="flex gap-4">
22+
<Button variant="contained">Contained</Button>
23+
<Button variant="outlined">Outlined</Button>
24+
<Button variant="ghost">Ghost</Button>
25+
</div>
26+
),
27+
};
28+
29+
export const Colors: Story = {
30+
render: () => (
31+
<div className="flex flex-col gap-4">
32+
<div className="flex gap-4">
33+
<Button variant="contained" color="primary">
34+
Primary Contained
35+
</Button>
36+
<Button variant="contained" color="secondary">
37+
Secondary Contained
38+
</Button>
39+
</div>
40+
<div className="flex gap-4">
41+
<Button variant="outlined" color="primary">
42+
Primary Outlined
43+
</Button>
44+
<Button variant="outlined" color="secondary">
45+
Secondary Outlined
46+
</Button>
47+
</div>
48+
<div className="flex gap-4">
49+
<Button variant="ghost" color="primary">
50+
Primary Ghost
51+
</Button>
52+
<Button variant="ghost" color="secondary">
53+
Secondary Ghost
54+
</Button>
55+
</div>
56+
</div>
57+
),
58+
};
59+
60+
export const Sizes: Story = {
61+
render: () => (
62+
<div className="flex items-center gap-4">
63+
<Button size="small">Small</Button>
64+
<Button size="medium">Medium</Button>
65+
<Button size="large">Large</Button>
66+
</div>
67+
),
68+
};
69+
70+
export const Fluid: Story = {
71+
render: () => (
72+
<div className="w-full max-w-md">
73+
<Button fluid>Fluid Button</Button>
74+
</div>
75+
),
76+
};
77+
78+
export const Rounded: Story = {
79+
render: () => (
80+
<div className="flex gap-4">
81+
<Button>Default</Button>
82+
<Button rounded>Rounded</Button>
83+
</div>
84+
),
85+
};
86+
87+
export const Disabled: Story = {
88+
render: () => (
89+
<div className="flex flex-col gap-4">
90+
<div className="flex gap-4">
91+
<Button disabled variant="contained">
92+
Disabled Contained
93+
</Button>
94+
<Button disabled variant="outlined">
95+
Disabled Outlined
96+
</Button>
97+
<Button disabled variant="ghost">
98+
Disabled Ghost
99+
</Button>
100+
</div>
101+
<div className="flex gap-4">
102+
<Button disabled variant="contained" color="secondary">
103+
Disabled Secondary
104+
</Button>
105+
<Button disabled variant="outlined" color="secondary">
106+
Disabled Secondary Outlined
107+
</Button>
108+
</div>
109+
</div>
110+
),
111+
};
112+
113+
export const AllVariations: Story = {
114+
render: () => (
115+
<div className="flex flex-col gap-6">
116+
<div className="flex flex-col gap-2">
117+
<h3 className="text-sm font-semibold">Contained Primary</h3>
118+
<div className="flex items-center gap-4">
119+
<Button variant="contained" color="primary" size="small">
120+
Small
121+
</Button>
122+
<Button variant="contained" color="primary" size="medium">
123+
Medium
124+
</Button>
125+
<Button variant="contained" color="primary" size="large">
126+
Large
127+
</Button>
128+
</div>
129+
</div>
130+
<div className="flex flex-col gap-2">
131+
<h3 className="text-sm font-semibold">Outlined Primary</h3>
132+
<div className="flex items-center gap-4">
133+
<Button variant="outlined" color="primary" size="small">
134+
Small
135+
</Button>
136+
<Button variant="outlined" color="primary" size="medium">
137+
Medium
138+
</Button>
139+
<Button variant="outlined" color="primary" size="large">
140+
Large
141+
</Button>
142+
</div>
143+
</div>
144+
<div className="flex flex-col gap-2">
145+
<h3 className="text-sm font-semibold">Ghost Primary</h3>
146+
<div className="flex items-center gap-4">
147+
<Button variant="ghost" color="primary" size="small">
148+
Small
149+
</Button>
150+
<Button variant="ghost" color="primary" size="medium">
151+
Medium
152+
</Button>
153+
<Button variant="ghost" color="primary" size="large">
154+
Large
155+
</Button>
156+
</div>
157+
</div>
158+
<div className="flex flex-col gap-2">
159+
<h3 className="text-sm font-semibold">With Modifiers</h3>
160+
<div className="flex flex-col gap-2">
161+
<Button rounded>Rounded Button</Button>
162+
<div className="w-full max-w-md">
163+
<Button fluid>Fluid Button</Button>
164+
</div>
165+
<Button rounded fluid>
166+
Rounded & Fluid
167+
</Button>
168+
</div>
169+
</div>
170+
</div>
171+
),
172+
};

‎packages/babylon-core-ui/src/components/Button/IconButton.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.bbn-btn-icon {
2-
@apply inline-flex items-center justify-center rounded transition-all duration-200;
2+
@apply inline-flex items-center justify-center rounded-md transition-all duration-200;
33
}
44

55
.bbn-btn-icon-small {

‎packages/babylon-core-ui/src/components/Card/Card.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.bbn-card {
2-
@apply bg-surface border-secondary-strokeLight rounded border p-6;
2+
@apply bg-transparent border-secondary-strokeLight rounded-2xl border p-6;
33
}

‎packages/babylon-core-ui/src/components/ConnectButton/ConnectButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const ConnectButton: React.FC<ConnectButtonProps> = ({
1616
loading = false,
1717
connected = false,
1818
onClick,
19-
text = "Connect Wallet",
19+
text = "Connect",
2020
loadingText = "Loading...",
2121
className,
2222
disabled = false,
@@ -30,6 +30,7 @@ export const ConnectButton: React.FC<ConnectButtonProps> = ({
3030
size="large"
3131
className={className || "h-[2.5rem] min-h-[2.5rem] rounded-full px-6 py-2 text-base text-white md:rounded"}
3232
onClick={onClick}
33+
color="secondary"
3334
disabled={disabled || loading}
3435
data-testid="connect-wallet-button"
3536
>

0 commit comments

Comments
 (0)