Skip to content

Commit 17dedac

Browse files
gtsiolisgtsiolis
committed
Update primary button style
1 parent 246d8ed commit 17dedac

File tree

7 files changed

+28
-25
lines changed

7 files changed

+28
-25
lines changed

‎components/dashboard/src/Login.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
155155
{providerFromContext ? (
156156
<button
157157
key={"button" + providerFromContext.host}
158-
className="btn-login flex-none w-56 h-10 p-0 inline-flex"
158+
className="btn-login flex-none w-56 h-10 p-0 inline-flex rounded-xl"
159159
onClick={() => openLogin(providerFromContext!.host)}
160160
>
161161
{iconForAuthProvider(providerFromContext.authProviderType)}
@@ -167,7 +167,7 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
167167
authProviders.data?.map((ap) => (
168168
<button
169169
key={"button" + ap.host}
170-
className="btn-login flex-none w-56 h-10 p-0 inline-flex"
170+
className="btn-login flex-none w-56 h-10 p-0 inline-flex rounded-xl"
171171
onClick={() => openLogin(ap.host)}
172172
>
173173
{iconForAuthProvider(ap.authProviderType)}

‎components/dashboard/src/components/Button.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
4949
className={classNames(
5050
"cursor-pointer my-auto",
5151
"text-sm font-medium whitespace-nowrap",
52-
"rounded-md focus:outline-none focus:ring transition ease-in-out",
52+
"rounded-xl focus:outline-none focus:ring transition ease-in-out",
5353
spacing === "compact" ? ["px-1 py-1"] : null,
5454
spacing === "default" ? ["px-4 py-2"] : null,
5555
type === "primary"
5656
? [
57-
"bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-600",
58-
"text-gray-100 dark:text-green-100",
57+
"bg-gray-900 hover:bg-gray-800 dark:bg-kumquat-base dark:hover:bg-kumquat-ripe",
58+
"text-gray-50 dark:text-gray-900",
5959
]
6060
: null,
6161
type === "secondary"

‎components/dashboard/src/components/EmptyMessage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const EmptyMessage: FC<Props> = ({ title, subtitle, buttonText, onClick,
2323
return (
2424
<div
2525
className={classNames(
26-
"w-full flex justify-center mt-2 rounded-xl bg-gray-100 dark:bg-gray-900 px-4 py-14",
26+
"w-full flex justify-center mt-2 rounded-xl bg-gray-100 dark:bg-gray-800 px-4 py-14",
2727
className,
2828
)}
2929
>

‎components/dashboard/src/components/SelectableCardSolid.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,19 @@ function SelectableCardSolid(props: SelectableCardSolidProps) {
2727

2828
return (
2929
<div
30-
className={`rounded-xl px-3 py-3 flex flex-col cursor-pointer group transition ease-in-out ${
30+
className={`rounded-xl px-2 py-2 flex flex-col cursor-pointer group transition ease-in-out ${
3131
isFocused ? "ring-2 ring-blue-500" : ""
3232
} ${
3333
props.selected
34-
? "bg-gray-800 dark:bg-gray-100"
35-
: "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
34+
? "border-4 border-gray-500 dark:border-gray-50"
35+
: "hover:bg-gray-100 dark:hover:bg-gray-800 border-4 border-gray-100 dark:border-gray-800"
3636
} ${props.className || ""}`}
3737
onClick={props.onClick}
3838
>
3939
<div className="flex items-center">
4040
<p
4141
className={`w-full pl-1 text-base font-semibold truncate ${
42-
props.selected ? "text-gray-100 dark:text-gray-600" : "text-gray-600 dark:text-gray-500"
42+
props.selected ? "text-gray-600 dark:text-gray-400" : "text-gray-600 dark:text-gray-400"
4343
}`}
4444
title={props.title}
4545
>

‎components/dashboard/src/index.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
@layer components {
5555
/* TODO: deprecate button styles in favor of using <Button> component and handling there */
5656
button {
57-
@apply cursor-pointer px-4 py-2 my-auto bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-600 text-gray-100 dark:text-green-100 text-sm font-medium rounded-md focus:outline-none focus:ring transition ease-in-out;
57+
@apply cursor-pointer px-4 py-2 my-auto bg-gray-900 hover:bg-gray-800 dark:bg-kumquat-base dark:hover:bg-kumquat-ripe text-gray-50 dark:text-gray-900 text-sm font-medium rounded-xl focus:outline-none focus:ring transition ease-in-out;
5858
}
5959
button.secondary {
6060
@apply bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-500 dark:text-gray-100 hover:text-gray-600;
@@ -78,7 +78,7 @@
7878
}
7979

8080
code {
81-
@apply bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded-md text-sm font-mono font-medium;
81+
@apply bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded-md text-sm font-mono font-medium;
8282
}
8383

8484
textarea,

‎components/dashboard/src/user-settings/Integrations.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -465,7 +465,7 @@ function GitIntegrations() {
465465
</div>
466466

467467
{providers && providers.length === 0 && (
468-
<div className="w-full flex h-80 mt-2 rounded-xl bg-gray-100 dark:bg-gray-900">
468+
<div className="w-full flex h-80 mt-2 rounded-xl bg-gray-100 dark:bg-gray-800">
469469
<div className="m-auto text-center">
470470
<Heading2 color="light" className="self-center mb-4">
471471
No Git Integrations

‎components/dashboard/tailwind.config.js

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,26 +15,29 @@ module.exports = {
1515
theme: {
1616
extend: {
1717
colors: {
18-
gray: colors.warmGray,
1918
green: colors.lime,
2019
orange: colors.amber,
21-
blue: {
22-
light: "#75A9EC",
23-
DEFAULT: "#5C8DD6",
24-
dark: "#265583",
25-
},
2620
// TODO: figure out if we want to just pull in the specific gitpod-* colors
2721
teal: colors.teal,
2822
sky: colors.sky,
2923
rose: colors.rose,
3024
"gitpod-black": "#161616",
31-
"gitpod-gray": "#8E8787",
3225
"gitpod-red": "#CE4A3E",
33-
"gitpod-kumquat-light": "#FFE4BC",
34-
"gitpod-kumquat": "#FFB45B",
35-
"gitpod-kumquat-dark": "#FF8A00",
36-
"gitpod-kumquat-darker": "#f28300",
37-
"gitpod-kumquat-gradient": "linear-gradient(137.41deg, #FFAD33 14.37%, #FF8A00 91.32%)",
26+
"kumquat-dark": "#FF8A00",
27+
"kumquat-base": "#FFAE33",
28+
"kumquat-ripe": "#FFB45B",
29+
"kumquat-light": "#FFE4BC",
30+
"kumquat-gradient": "linear-gradient(137.41deg, #FFAD33 14.37%, #FF8A00 91.32%)",
31+
"gray-900": "#12100C",
32+
"gray-800": "#23211E",
33+
"gray-700": "#514F4D",
34+
"gray-600": "#565451",
35+
"gray-500": "#666564",
36+
"gray-400": "#999795",
37+
"gray-300": "#DADADA",
38+
"gray-200": "#ECE7E5",
39+
"gray-100": "#F5F4F4",
40+
"gray-50": "#F9F9F9",
3841
},
3942
container: {
4043
center: true,

0 commit comments

Comments
 (0)