Skip to content

Commit 6a32ba2

Browse files
aaronxsuaaronxsu
committed
fixup! Update button styles and components page
1 parent 0549ba9 commit 6a32ba2

2 files changed

Lines changed: 90 additions & 23 deletions

File tree

‎src/frontend/src/components/Button/Button.styles.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,21 @@ const buttonStyles = tv({
1414
variants: {
1515
variant: {
1616
primary: "bg-teal-800 text-white hover:bg-teal-950",
17-
outline: "border border-gray-300 bg-transparent hover:bg-gray-100",
17+
secondary: "bg-teal-200 text-teal-800 hover:bg-teal-300",
18+
outline:
19+
"border border-gray-300 bg-transparent hover:border-gray-500",
1820
orange: "bg-orange-200 text-orange-800 hover:bg-orange-300",
1921
},
2022
size: {
21-
default: "h-9 px-5 py-2 min-w-9",
23+
small: "h-[34px] px-5 py-2 text-sm",
24+
medium: "h-8 px-4 py-2 text-sm",
25+
large: "h-9 px-5 py-2 text-[17px]", // this should be text-rg, but somehow the text color will be all black
26+
icon: "h-[30px] w-[30px] text-[15px]",
2227
},
2328
},
2429
defaultVariants: {
2530
variant: "primary",
26-
size: "default",
31+
size: "medium",
2732
},
2833
});
2934

‎src/frontend/src/pages/Components.tsx‎

Lines changed: 82 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Button from "components/Button/Button";
2-
import StartIcon from "assets/icons/star.svg?react";
2+
import StarIcon from "assets/icons/star.svg?react";
33
import ArrowLeftIcon from "assets/icons/arrow-left.svg?react";
44
import ArrowRightIcon from "assets/icons/arrow-right.svg?react";
55

@@ -24,25 +24,87 @@ const Components = () => {
2424
</h2>
2525

2626
<div className="space-y-8">
27-
<div className="flex flex-wrap items-center gap-4">
28-
<Button variant="primary">
29-
Create your profile
30-
</Button>
31-
<Button variant="outline">
32-
List all neighborhoods
33-
</Button>
34-
<Button variant="outline">
35-
<ArrowLeftIcon className="font-normal h-[18px] w-[18px] text-black" />
36-
</Button>
37-
<Button isDisabled>Continue</Button>
38-
<Button variant="outline">
39-
Next
40-
<ArrowRightIcon className="font-normal h-[18px] w-[18px] text-black" />
41-
</Button>
42-
<Button variant="orange">
43-
<StartIcon />
44-
Add to favorites
45-
</Button>
27+
<div>
28+
<h3 className="text-xl text-gray-800 mb-2">
29+
Small
30+
</h3>
31+
<div className="flex flex-column flex-wrap items-center gap-4">
32+
<Button variant="primary" size="small">
33+
Primary
34+
</Button>
35+
<Button variant="secondary" size="small">
36+
Secondary
37+
</Button>
38+
<Button variant="outline" size="small">
39+
Outline
40+
</Button>
41+
<Button variant="outline" size="small">
42+
<ArrowLeftIcon className="font-normal h-[14px] w-[14px] text-black" />
43+
</Button>
44+
<Button isDisabled size="small">
45+
Disabled
46+
</Button>
47+
<Button variant="outline" size="small">
48+
Next
49+
<ArrowRightIcon className="font-normal h-[14px] w-[14px] text-black" />
50+
</Button>
51+
<Button variant="orange" size="small">
52+
<StarIcon className="font-normal h-[14px] w-[14px]" />
53+
Add to favorites
54+
</Button>
55+
</div>
56+
</div>
57+
<div>
58+
<h3 className="text-xl text-gray-800 mb-2">
59+
Medium
60+
</h3>
61+
<div className="flex flex-column flex-wrap items-center gap-4">
62+
<Button variant="primary">Primary</Button>
63+
<Button variant="secondary">Secondary</Button>
64+
<Button variant="outline">Outline</Button>
65+
<Button variant="outline">
66+
<ArrowLeftIcon className="font-normal h-[14px] w-[14px] text-black" />
67+
</Button>
68+
<Button isDisabled>Disabled</Button>
69+
<Button variant="outline">
70+
Next
71+
<ArrowRightIcon className="font-normal h-[14px] w-[14px] text-black" />
72+
</Button>
73+
<Button variant="orange">
74+
<StarIcon className="font-normal h-[14px] w-[14px]" />
75+
Add to favorites
76+
</Button>
77+
</div>
78+
</div>
79+
<div>
80+
<h3 className="text-xl text-gray-800 mb-2">
81+
Large
82+
</h3>
83+
<div className="flex flex-column flex-wrap items-center gap-4">
84+
<Button variant="primary" size="large">
85+
Primary
86+
</Button>
87+
<Button variant="secondary" size="large">
88+
Secondary
89+
</Button>
90+
<Button variant="outline" size="large">
91+
Outline
92+
</Button>
93+
<Button variant="outline" size="large">
94+
<ArrowLeftIcon className="font-normal h-[17px] w-[17px] text-black" />
95+
</Button>
96+
<Button size="large" isDisabled>
97+
Disabled
98+
</Button>
99+
<Button variant="outline" size="large">
100+
Next
101+
<ArrowRightIcon className="font-normal h-[17px] w-[17px] text-black" />
102+
</Button>
103+
<Button variant="orange" size="large">
104+
<StarIcon className="font-normal h-[17px] w-[17px]" />
105+
Add to favorites
106+
</Button>
107+
</div>
46108
</div>
47109
</div>
48110
</section>

0 commit comments

Comments
 (0)