Skip to content

Commit 7bebfe3

Browse files
tbantle22tbantle22
committed
components: Update Button styles
1 parent 239f35a commit 7bebfe3

File tree

9 files changed

+177
-29
lines changed

9 files changed

+177
-29
lines changed

Diff for: ‎packages/components/src/Button/Default/index.module.css

+25-11
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
.button {
2-
@apply outline-none text-white font-semibold leading-relaxed button-shadow;
2+
@apply outline-none text-white font-semibold leading-relaxed;
33

4-
&:hover {
5-
@apply button-shadow-hover;
4+
&:focus {
5+
@apply outline outline-button-2;
66
}
77

8-
&:focus {
9-
@apply outline-none widget-shadow-lightblue;
8+
&:active {
9+
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.25);
1010
}
1111

1212
&:disabled {
13-
@apply cursor-default bg-acc-light-text text-white;
13+
@apply cursor-default bg-[#C1C3D0] text-acc-darkgrey;
1414

1515
&:hover {
16-
@apply button-shadow bg-acc-light-text;
16+
@apply bg-[#C1C3D0];
1717
}
1818
}
1919
}
@@ -25,7 +25,7 @@
2525
}
2626

2727
.color-dark {
28-
@apply bg-primary hover:bg-acc-hoverblue;
28+
@apply bg-primary hover:bg-ld-darkestblue;
2929
}
3030

3131
.color-red {
@@ -47,6 +47,10 @@
4747
.color-gradient {
4848
background: linear-gradient(92.21deg, #6db0fc 11.79%, #5deda2 113.81%);
4949

50+
&:hover {
51+
background: linear-gradient(92.21deg, #6db0fc 30.79%, #5deda2 113.81%);
52+
}
53+
5054
&:disabled {
5155
background: linear-gradient(92.21deg, #6db0fc 11.79%, #5deda2 113.81%);
5256
}
@@ -65,15 +69,15 @@
6569
/* SIZE VARIANTS */
6670

6771
.size-small {
68-
@apply px-3 py-0.5 text-sm;
72+
@apply px-4 py-2 text-sm;
6973
}
7074

7175
.size-medium {
72-
@apply px-6 py-1.5 text-base;
76+
@apply px-6 py-2 text-base;
7377
}
7478

7579
.size-large {
76-
@apply px-8 py-2 text-base;
80+
@apply px-8 py-2 text-lg;
7781
}
7882

7983
/* ICON */
@@ -85,3 +89,13 @@
8589
@apply mr-2;
8690
}
8791
}
92+
93+
/* LOADING */
94+
95+
.loader {
96+
@apply flex items-center;
97+
}
98+
99+
.invis {
100+
@apply invisible;
101+
}

Diff for: ‎packages/components/src/Button/Default/index.tsx

+13-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import cx from "classnames";
22
import React from "react";
3+
import ButtonLoader from "../Loader";
34
import { Props } from "../types";
45
import css from "./index.module.css";
56

@@ -10,6 +11,7 @@ function Button({
1011
color = "default",
1112
size = "medium",
1213
shape = "default",
14+
loading = false,
1315
...props
1416
}: Props) {
1517
return (
@@ -27,8 +29,17 @@ function Button({
2729
// These props need to come last
2830
{...props}
2931
>
30-
{icon}
31-
{children}
32+
{loading ? (
33+
<div className={css.loader}>
34+
<ButtonLoader loaded={false} />
35+
<div className={css.invis}>{children}</div>
36+
</div>
37+
) : (
38+
<>
39+
{icon}
40+
{children}
41+
</>
42+
)}
3243
</button>
3344
);
3445
}

Diff for: ‎packages/components/src/Button/Loader.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from "react";
2+
import ReactLoader from "react-loader";
3+
import { useThemeContext } from "../tailwind/context";
4+
import { staticColors } from "../tailwind/theme/base/colors";
5+
import { IThemeColors } from "../tailwind/types";
6+
import { Color } from "./types";
7+
8+
const loaderDefaultOptions = {
9+
lines: 100,
10+
length: 1,
11+
width: 1,
12+
radius: 4.5,
13+
scale: 1.5,
14+
corners: 1,
15+
opacity: 0.25,
16+
rotate: 0,
17+
direction: 1,
18+
speed: 0.75,
19+
trail: 30,
20+
fps: 20,
21+
zIndex: 2e9,
22+
shadow: false,
23+
hwaccel: false,
24+
position: "absolute",
25+
fadeColor: "transparent",
26+
};
27+
28+
type Props = {
29+
loaded: boolean;
30+
color?: Color;
31+
};
32+
33+
export default function ButtonLoader(props: Props) {
34+
const { convertThemeRGBToHex } = useThemeContext();
35+
return (
36+
<ReactLoader
37+
{...props}
38+
// uses default options, but overrides fields provided as props
39+
options={{
40+
...loaderDefaultOptions,
41+
color:
42+
getLoaderTailwindColor(convertThemeRGBToHex(), props.color) ?? "#fff",
43+
}}
44+
/>
45+
);
46+
}
47+
48+
function getLoaderTailwindColor(
49+
convertedHex: IThemeColors,
50+
color?: Color,
51+
): string | undefined {
52+
if (!color) return undefined;
53+
switch (color) {
54+
case "default":
55+
return convertedHex["button-1"];
56+
case "dark":
57+
return convertedHex.primary;
58+
case "red":
59+
return staticColors["acc-red"];
60+
case "green":
61+
return staticColors["acc-green"];
62+
default:
63+
return "#fff";
64+
}
65+
}

Diff for: ‎packages/components/src/Button/Outlined/index.module.css

+33-11
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
.buttonOutlined {
2-
@apply outline-none font-semibold leading-relaxed border button-shadow bg-transparent;
2+
@apply outline-none font-semibold leading-relaxed border-[1.5px] bg-white;
33

44
&:focus {
5-
@apply outline-none widget-shadow-lightblue;
5+
@apply outline outline-button-2;
6+
}
7+
8+
&:active {
9+
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.25);
610
}
711

812
&:disabled {
9-
@apply cursor-default border-acc-light-text text-acc-light-text;
13+
@apply cursor-default bg-[#C1C3D0] text-acc-darkgrey border-transparent;
1014

1115
&:hover {
12-
@apply border-acc-light-text text-acc-light-text;
16+
@apply bg-[#C1C3D0];
1317
}
1418
}
1519
}
@@ -20,31 +24,39 @@
2024
@apply border-button-1 text-button-1;
2125

2226
&:hover {
23-
@apply border-button-2 text-button-2;
27+
@apply bg-button-1/10;
2428
}
2529
}
2630

2731
.color-dark {
2832
@apply border-primary text-primary;
2933

3034
&:hover {
31-
@apply border-acc-hoverblue text-acc-hoverblue;
35+
@apply bg-primary/10;
3236
}
3337
}
3438

3539
.color-red {
3640
@apply border-acc-red text-acc-red;
3741

3842
&:hover {
39-
@apply border-acc-hoverred text-acc-hoverred;
43+
@apply bg-acc-red/10;
4044
}
4145
}
4246

4347
.color-green {
4448
@apply border-acc-green text-acc-green;
4549

4650
&:hover {
47-
@apply border-acc-hovergreen text-acc-hovergreen;
51+
@apply bg-acc-green/10;
52+
}
53+
}
54+
55+
.color-white {
56+
@apply bg-transparent text-white border-white/30;
57+
58+
&:hover {
59+
@apply border-white bg-white/10;
4860
}
4961
}
5062

@@ -61,15 +73,15 @@
6173
/* SIZE VARIANTS */
6274

6375
.size-small {
64-
@apply px-3 py-0.5 text-sm;
76+
@apply border px-4 py-2 text-sm;
6577
}
6678

6779
.size-medium {
68-
@apply px-6 py-1.5 text-base;
80+
@apply px-6 py-2 text-base;
6981
}
7082

7183
.size-large {
72-
@apply px-8 py-2 text-base;
84+
@apply px-8 py-2 text-lg;
7385
}
7486

7587
/* ICON */
@@ -81,3 +93,13 @@
8193
@apply mr-2;
8294
}
8395
}
96+
97+
/* LOADING */
98+
99+
.loader {
100+
@apply flex items-center;
101+
}
102+
103+
.invis {
104+
@apply invisible;
105+
}

Diff for: ‎packages/components/src/Button/Outlined/index.tsx

+13-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import cx from "classnames";
22
import React from "react";
3+
import ButtonLoader from "../Loader";
34
import { Props } from "../types";
45
import css from "./index.module.css";
56

@@ -10,6 +11,7 @@ function Outlined({
1011
color = "default",
1112
size = "medium",
1213
shape = "default",
14+
loading = false,
1315
...props
1416
}: Props) {
1517
return (
@@ -26,8 +28,17 @@ function Outlined({
2628
// These props need to come last
2729
{...props}
2830
>
29-
{icon}
30-
{children}
31+
{loading ? (
32+
<div className={css.loader}>
33+
<ButtonLoader loaded={false} color={color} />
34+
<div className={css.invis}>{children}</div>
35+
</div>
36+
) : (
37+
<>
38+
{icon}
39+
{children}
40+
</>
41+
)}
3142
</button>
3243
);
3344
}

Diff for: ‎packages/components/src/Button/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ type VariantProps = {
99
size?: Size;
1010
shape?: Shape;
1111
icon?: ReactNode;
12+
loading?: boolean;
1213
};
1314

1415
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;

Diff for: ‎packages/components/src/__stories__/ButtonDefault.stories.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,13 @@ export const Disabled: Story = {
3939
},
4040
};
4141

42+
export const Loading: Story = {
43+
args: {
44+
children: "Button name",
45+
loading: true,
46+
},
47+
};
48+
4249
// Shape
4350

4451
export const Pill: Story = {

Diff for: ‎packages/components/src/__stories__/ButtonOutlined.stories.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,13 @@ export const Disabled: Story = {
3939
},
4040
};
4141

42+
export const Loading: Story = {
43+
args: {
44+
children: "Button name",
45+
loading: true,
46+
},
47+
};
48+
4249
// Shape
4350

4451
export const Pill: Story = {
@@ -96,3 +103,13 @@ export const Dark: Story = {
96103
color: "dark",
97104
},
98105
};
106+
107+
export const White: Story = {
108+
args: {
109+
children: "Button name",
110+
color: "white",
111+
},
112+
parameters: {
113+
backgrounds: { default: "dark" },
114+
},
115+
};

Diff for: ‎packages/components/src/tailwind/theme/base/colors.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ const accents = {
2828
"acc-lightgreen": "#d4f5e4",
2929
"ld-green": "#5deda2",
3030
"acc-bright-green": "#29e3c1",
31-
"acc-hovergreen": "#6fdda4",
32-
"acc-green": "#5ac58d",
31+
"acc-hovergreen": "#0A9664",
32+
"acc-green": "#19BA80",
3333

3434
"acc-hoverred": "#EF4341",
3535
"acc-red": "#FF6967",
@@ -39,7 +39,7 @@ const accents = {
3939
};
4040

4141
// TODO: Improve these names
42-
export const staticColors = {
42+
export const staticColors: Record<string, string> = {
4343
...greys,
4444
...blues,
4545
...accents,

0 commit comments

Comments
 (0)