Update primary button style (#18319)

gitpod-io · Aug 21, 2023 · 158a948 · 158a948
1 parent 246d8ed
commit 158a948
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 25 deletions.
diff --git a/components/dashboard/src/Login.tsx b/components/dashboard/src/Login.tsx
@@ -155,7 +155,7 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
                                     {providerFromContext ? (
                                         <button
                                             key={"button" + providerFromContext.host}
-                                            className="btn-login flex-none w-56 h-10 p-0 inline-flex"
+                                            className="btn-login flex-none w-56 h-10 p-0 inline-flex rounded-xl"
                                             onClick={() => openLogin(providerFromContext!.host)}
                                         >
                                             {iconForAuthProvider(providerFromContext.authProviderType)}
@@ -167,7 +167,7 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
                                         authProviders.data?.map((ap) => (
                                             <button
                                                 key={"button" + ap.host}
-                                                className="btn-login flex-none w-56 h-10 p-0 inline-flex"
+                                                className="btn-login flex-none w-56 h-10 p-0 inline-flex rounded-xl"
                                                 onClick={() => openLogin(ap.host)}
                                             >
                                                 {iconForAuthProvider(ap.authProviderType)}

diff --git a/components/dashboard/src/components/Button.tsx b/components/dashboard/src/components/Button.tsx
@@ -49,13 +49,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                 className={classNames(
                     "cursor-pointer my-auto",
                     "text-sm font-medium whitespace-nowrap",
-                    "rounded-md focus:outline-none focus:ring transition ease-in-out",
+                    "rounded-xl focus:outline-none focus:ring transition ease-in-out",
                     spacing === "compact" ? ["px-1 py-1"] : null,
                     spacing === "default" ? ["px-4 py-2"] : null,
                     type === "primary"
                         ? [
-                              "bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-600",
-                              "text-gray-100 dark:text-green-100",
+                              "bg-gray-900 hover:bg-gray-800 dark:bg-kumquat-base dark:hover:bg-kumquat-ripe",
+                              "text-gray-50 dark:text-gray-900",
                           ]
                         : null,
                     type === "secondary"

diff --git a/components/dashboard/src/components/EmptyMessage.tsx b/components/dashboard/src/components/EmptyMessage.tsx
@@ -23,7 +23,7 @@ export const EmptyMessage: FC<Props> = ({ title, subtitle, buttonText, onClick,
     return (
         <div
             className={classNames(
-                "w-full flex justify-center mt-2 rounded-xl bg-gray-100 dark:bg-gray-900 px-4 py-14",
+                "w-full flex justify-center mt-2 rounded-xl bg-gray-100 dark:bg-gray-800 px-4 py-14",
                 className,
             )}
         >

diff --git a/components/dashboard/src/components/SelectableCardSolid.tsx b/components/dashboard/src/components/SelectableCardSolid.tsx
@@ -27,19 +27,19 @@ function SelectableCardSolid(props: SelectableCardSolidProps) {
 
     return (
         <div
-            className={`rounded-xl px-3 py-3 flex flex-col cursor-pointer group transition ease-in-out ${
+            className={`rounded-xl px-2 py-2 flex flex-col cursor-pointer group transition ease-in-out ${
                 isFocused ? "ring-2 ring-blue-500" : ""
             } ${
                 props.selected
-                    ? "bg-gray-800 dark:bg-gray-100"
-                    : "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
+                    ? "border-4 border-gray-500 dark:border-gray-50"
+                    : "hover:bg-gray-100 dark:hover:bg-gray-800 border-4 border-gray-100 dark:border-gray-800"
             } ${props.className || ""}`}
             onClick={props.onClick}
         >
             <div className="flex items-center">
                 <p
                     className={`w-full pl-1 text-base font-semibold truncate ${
-                        props.selected ? "text-gray-100 dark:text-gray-600" : "text-gray-600 dark:text-gray-500"
+                        props.selected ? "text-gray-600 dark:text-gray-400" : "text-gray-600 dark:text-gray-400"
                     }`}
                     title={props.title}
                 >

diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
@@ -54,7 +54,7 @@
 @layer components {
     /* TODO: deprecate button styles in favor of using <Button> component and handling there */
     button {
-        @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;
+        @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;
     }
     button.secondary {
         @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 @@
     }
 
     code {
-        @apply bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded-md text-sm font-mono font-medium;
+        @apply bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded-md text-sm font-mono font-medium;
     }
 
     textarea,

diff --git a/components/dashboard/src/user-settings/Integrations.tsx b/components/dashboard/src/user-settings/Integrations.tsx
@@ -465,7 +465,7 @@ function GitIntegrations() {
             </div>
 
             {providers && providers.length === 0 && (
-                <div className="w-full flex h-80 mt-2 rounded-xl bg-gray-100 dark:bg-gray-900">
+                <div className="w-full flex h-80 mt-2 rounded-xl bg-gray-100 dark:bg-gray-800">
                     <div className="m-auto text-center">
                         <Heading2 color="light" className="self-center mb-4">
                             No Git Integrations

diff --git a/components/dashboard/tailwind.config.js b/components/dashboard/tailwind.config.js
@@ -15,26 +15,29 @@ module.exports = {
     theme: {
         extend: {
             colors: {
-                gray: colors.warmGray,
                 green: colors.lime,
                 orange: colors.amber,
-                blue: {
-                    light: "#75A9EC",
-                    DEFAULT: "#5C8DD6",
-                    dark: "#265583",
-                },
                 // TODO: figure out if we want to just pull in the specific gitpod-* colors
                 teal: colors.teal,
                 sky: colors.sky,
                 rose: colors.rose,
                 "gitpod-black": "#161616",
-                "gitpod-gray": "#8E8787",
                 "gitpod-red": "#CE4A3E",
-                "gitpod-kumquat-light": "#FFE4BC",
-                "gitpod-kumquat": "#FFB45B",
-                "gitpod-kumquat-dark": "#FF8A00",
-                "gitpod-kumquat-darker": "#f28300",
-                "gitpod-kumquat-gradient": "linear-gradient(137.41deg, #FFAD33 14.37%, #FF8A00 91.32%)",
+                "kumquat-dark": "#FF8A00",
+                "kumquat-base": "#FFAE33",
+                "kumquat-ripe": "#FFB45B",
+                "kumquat-light": "#FFE4BC",
+                "kumquat-gradient": "linear-gradient(137.41deg, #FFAD33 14.37%, #FF8A00 91.32%)",
+                "gray-900": "#12100C",
+                "gray-800": "#23211E",
+                "gray-700": "#514F4D",
+                "gray-600": "#565451",
+                "gray-500": "#666564",
+                "gray-400": "#999795",
+                "gray-300": "#DADADA",
+                "gray-200": "#ECE7E5",
+                "gray-100": "#F5F4F4",
+                "gray-50": "#F9F9F9",
             },
             container: {
                 center: true,