[dashboard] button styling

svenefftinge · svenefftinge · commit 9c4971ddfd78 · 2021-03-29T12:32:41.000+02:00
diff --git a/components/dashboard/src/components/CheckBox.tsx b/components/dashboard/src/components/CheckBox.tsx
@@ -25,7 +25,7 @@ function CheckBox(props: {
     const checkboxId = `checkbox-${props.title}-${String(Math.random())}`;
 
     return <div className="flex mt-4">
-        <input className={"h-4 w-4 focus:ring-0 mt-1 rounded cursor-pointer border-2 " + (props.checked ? 'bg-gray-800' : '')} type="checkbox"
+        <input className={"h-4 w-4 focus:ring-0 mt-1 rounded cursor-pointer border border-gray-300 focus:border-gray-400 " + (props.checked ? 'bg-gray-800' : '')} type="checkbox"
             id={checkboxId}
             {...inputProps}
         />
diff --git a/components/dashboard/src/components/SelectableCard.tsx b/components/dashboard/src/components/SelectableCard.tsx
@@ -13,10 +13,10 @@ export interface SelectableCardProps {
 }
 
 function SelectableCard(props: SelectableCardProps) {
-    return <div className={`rounded-xl px-4 py-3 flex flex-col cursor-pointer group border-2 ${props.selected ? 'border-green-600' : 'border-gray-300 hover:border-gray-400'} ${props.className || ''}`} onClick={props.onClick}>
+    return <div className={`rounded-xl px-4 py-3 flex flex-col cursor-pointer group border-2 ${props.selected ? 'border-green-500' : 'border-gray-300 hover:border-gray-400'} ${props.className || ''}`} onClick={props.onClick}>
         <div className="flex items-center">
-            <p className={`w-full text-base font-semibold ${props.selected ? 'text-green-600' : 'text-gray-300 group-hover:text-gray-400'}`}>{props.title}</p>
-            <input className={props.selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} type="radio" checked={props.selected} />
+            <p className={`w-full text-base font-semibold ${props.selected ? 'text-green-500' : 'text-gray-300 group-hover:text-gray-400'}`}>{props.title}</p>
+            <input className={'text-green-500 ' + (props.selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100')} type="radio" checked={props.selected} />
         </div>
         {props.children}
     </div>;
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
@@ -35,23 +35,34 @@
 
 @layer components {
     button {
-        @apply cursor-pointer px-4 py-2 my-auto bg-green-600 hover:bg-green-700 border-2 border-green-800 text-gray-100 text-sm font-medium rounded-md focus:outline-none focus:ring focus:border-blue-300;
+        @apply cursor-pointer px-4 py-2 my-auto bg-green-600 hover:bg-green-700 text-gray-100 text-sm font-medium rounded-md focus:outline-none focus:ring;
+    }
+    button.secondary {
+        @apply bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-gray-600;
+    }
+    button.danger {
+        @apply bg-red-600 hover:bg-red-700 text-gray-100;
+    }
+    button.danger.secondary {
+        @apply bg-red-50 hover:bg-red-100 text-red-600 hover:text-red-700;
     }
-
     button:disabled {
-        @apply cursor-default;
+        @apply cursor-default opacity-50 pointer-events-none;
     }
 
-    input[type=text] {
-        @apply text-xs block w-56 text-sm text-gray-600 rounded-md border-2 border-gray-400 focus:border-gray-500 focus:bg-white focus:ring-0;
+    input[type=text], input[type=password], select {
+        @apply text-xs block w-56 text-sm text-gray-600 rounded-md border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
     }
 
-    input[type=text]::placeholder {
+    input[type=text]::placeholder, input[type=password]::placeholder {
         @apply text-gray-400;
     }
 
     input[disabled] {
-        @apply bg-gray-100 border-2 border-gray-300 text-gray-400;
+        @apply bg-gray-100 border border-gray-200 text-gray-400;
     }
 
+    input[type=radio] {
+        @apply rounded-md border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
+    }
 }
diff --git a/components/dashboard/src/settings/Account.tsx b/components/dashboard/src/settings/Account.tsx
@@ -35,11 +35,11 @@ export default function Account() {
                     <li className="ml-5">Your subscription will be cancelled. If you obtained a Gitpod subscription through the GitHub marketplace, you need to cancel your plan there.</li>
                 </ol>
                 <p className="pt-4 pb-2 text-gray-600 text-base font-bold">Type your email to confirm</p>
-              <input className="border-2 border-gray-400 w-full" type="text" onChange={e => setTypedEmail(e.target.value)}></input>
+              <input className="w-full" type="text" onChange={e => setTypedEmail(e.target.value)}></input>
             </div>
             <div className="flex justify-end mt-6">
-                <button className="text-gray-900 border-white bg-white hover:border-gray-200" onClick={close}>Cancel</button>
-                <button className={"ml-2 border-red-900 bg-red-500 disabled:opacity-50" + (typedEmail !== primaryEmail ? '' : ' hover:bg-red-700')} onClick={deleteAccount} disabled={typedEmail !== primaryEmail}>Delete Account</button>
+                <button className="secondary" onClick={close}>Cancel</button>
+                <button className="ml-2 danger" onClick={deleteAccount} disabled={typedEmail !== primaryEmail}>Delete Account</button>
             </div>
         </Modal>
 
@@ -67,7 +67,7 @@ export default function Account() {
             </div>
             <h3 className="mt-12">Delete Account</h3>
             <p className="text-base text-gray-500 pb-4">This action will remove all the data associated with your account in Gitpod.</p>
-            <button className="border-red-600 text-red-600 bg-white hover:border-red-800 hover:text-red-800" onClick={() => setModal(true)}>Delete Account</button>
+            <button className="danger secondary" onClick={() => setModal(true)}>Delete Account</button>
         </SettingsPage>
     </div>;
 }
diff --git a/components/dashboard/src/settings/EnvironmentVariables.tsx b/components/dashboard/src/settings/EnvironmentVariables.tsx
@@ -73,8 +73,8 @@ function AddEnvVarModal(p: EnvVarModalProps) {
             </div>
         </div>
         <div className="flex justify-end mt-6">
-            <button className="text-gray-900 border-white bg-white hover:bg-gray-100 hover:border-gray-100" onClick={p.onClose}>Cancel</button>
-            <button className={"ml-2 disabled:opacity-50"} onClick={save} >{isNew ? 'Add' : 'Update'} Variable</button>
+            <button className="secondary" onClick={p.onClose}>Cancel</button>
+            <button className="ml-2" onClick={save} >{isNew ? 'Add' : 'Update'} Variable</button>
         </div>
     </Modal>
 }
@@ -152,12 +152,12 @@ export default function EnvVars() {
                 <div className="pt-28 flex flex-col items-center w-96 m-auto">
                     <h3 className="text-center pb-3 text-gray-500">No Environment Variables</h3>
                     <div className="text-center pb-6 text-gray-500">In addition to user-specific environment variables you can also pass variables through a workspace creation URL. <a className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600" href="https://www.gitpod.io/docs/environment-variables/#using-the-account-settings">Learn more</a></div>
-                    <button onClick={add} className="font-medium">New Environment Variable</button>
+                    <button onClick={add}>New Environment Variable</button>
                 </div>
             </div>
             : <div className="space-y-2">
                 <div className="flex justify-end mb-2">
-                    <button onClick={add} className="ml-2 font-medium">New Environment Variable</button>
+                    <button onClick={add} className="ml-2">New Environment Variable</button>
                 </div>
                 <div className="flex flex-col space-y-2">
                     <div className="px-3 py-3 flex justify-between space-x-2 text-sm text-gray-400 border-t border-b border-gray-200">
diff --git a/components/dashboard/src/settings/Integrations.tsx b/components/dashboard/src/settings/Integrations.tsx
@@ -218,7 +218,7 @@ function GitProviders() {
                     </div>
                 </div>
                 <div className="flex justify-end mt-6">
-                    <button className={"ml-2 border-red-900 bg-red-500  hover:bg-red-700"} onClick={() => disconnect(diconnectModal.provider)}>Disconnect Provider</button>
+                    <button className={"ml-2 danger secondary"} onClick={() => disconnect(diconnectModal.provider)}>Disconnect Provider</button>
                 </div>
             </Modal>
         )}
@@ -350,7 +350,7 @@ function GitIntegrations() {
                     </div>
                 </div>
                 <div className="flex justify-end mt-6">
-                    <button className={"ml-2 border-red-900 bg-red-500 hover:bg-red-700"} onClick={() => deleteProvider(modal.provider)}>Remove Integration</button>
+                    <button className={"ml-2 danger secondary"} onClick={() => deleteProvider(modal.provider)}>Remove Integration</button>
                 </div>
             </Modal>
         )}
@@ -567,7 +567,7 @@ function GitIntegrationModal(props: ({
             {props.mode === "new" && (
                 <div className="flex flex-col space-y-2">
                     <label htmlFor="type" className="font-medium">Provider Type</label>
-                    <select name="type" value={type} disabled={props.mode !== "new"} className="rounded-md w-full border-2 border-gray-400"
+                    <select name="type" value={type} disabled={props.mode !== "new"} className="w-full"
                         onChange={(e) => setType(e.target.value)}>
                         <option value="GitHub">GitHub</option>
                         <option value="GitLab">GitLab</option>
@@ -576,13 +576,13 @@ function GitIntegrationModal(props: ({
             )}
             <div className="flex flex-col space-y-2">
                 <label htmlFor="hostName" className="font-medium">Provider Host Name</label>
-                <input name="hostName" disabled={props.mode === "edit"} type="text" value={host} className="rounded-md w-full border-2 border-gray-400"
+                <input name="hostName" disabled={props.mode === "edit"} type="text" value={host} className="w-full"
                     onChange={(e) => updateHostValue(e.target.value)} />
             </div>
             <div className="flex flex-col space-y-2">
                 <label htmlFor="redirectURL" className="font-medium">Redirect URL</label>
                 <div className="w-full relative">
-                    <input name="redirectURL" disabled={true} readOnly={true} type="text" value={redirectURL} className="rounded-md w-full truncate pr-8" />
+                    <input name="redirectURL" disabled={true} readOnly={true} type="text" value={redirectURL} className="w-full truncate" />
                     <div className="cursor-pointer" onClick={() => copyRedirectUrl()}>
                         <img src={copy} title="Copy the Redirect URL to clippboard." className="absolute top-1/3 right-3" />
                     </div>
@@ -591,12 +591,12 @@ function GitIntegrationModal(props: ({
             </div>
             <div className="flex flex-col space-y-2">
                 <label htmlFor="clientId" className="font-medium">Client ID</label>
-                <input name="clientId" type="text" value={clientId} className="rounded-md w-full border-2 border-gray-400"
+                <input name="clientId" type="text" value={clientId} className="w-full"
                     onChange={(e) => updateClientId(e.target.value)} />
             </div>
             <div className="flex flex-col space-y-2">
                 <label htmlFor="clientSecret" className="font-medium">Client Secret</label>
-                <input name="clientSecret" type="password" value={clientSecret} className="rounded-md w-full border-2 border-gray-400"
+                <input name="clientSecret" type="password" value={clientSecret} className="w-full"
                     onChange={(e) => updateClientSecret(e.target.value)} />
             </div>
             {errorMessage && (
@@ -613,7 +613,7 @@ function GitIntegrationModal(props: ({
             )}
         </div>
         <div className="flex justify-end mt-6">
-            <button className="disabled:opacity-50" onClick={() => validate() && activate()} disabled={!!validationError || busy}>Activate Integration</button>
+            <button onClick={() => validate() && activate()} disabled={!!validationError || busy}>Activate Integration</button>
         </div>
     </Modal>);
 }
diff --git a/components/dashboard/src/start/CreateWorkspace.tsx b/components/dashboard/src/start/CreateWorkspace.tsx
@@ -139,7 +139,7 @@ export class CreateWorkspace extends React.Component<CreateWorkspaceProps, Creat
     return <StartPage phase={phase} error={!!error}>
       {statusMessage}
       {error && <div>
-        <a href={gitpodHostUrl.asDashboard().toString()}><button className="mt-8 px-4 py-2 text-gray-500 bg-white font-semibold border-gray-500 hover:text-gray-700 hover:bg-gray-100 hover:border-gray-700">Go back to dashboard</button></a>
+        <a href={gitpodHostUrl.asDashboard().toString()}><button className="mt-8 secondary">Go back to dashboard</button></a>
         <p className="mt-14 text-base text-gray-400 flex space-x-2">
           <a href="https://www.gitpod.io/docs/">Docs</a>
           <span>—</span>
@@ -204,6 +204,6 @@ function RunningPrebuildView(props: RunningPrebuildViewProps) {
     <Suspense fallback={<div />}>
       <WorkspaceLogs logsEmitter={logsEmitter} />
     </Suspense>
-    <button className="mt-6 text-gray-500 border-gray-500 bg-white hover:text-gray-700 hover:bg-gray-100 hover:border-gray-700" onClick={() => { clearTimeout(pollTimeout!); props.onIgnorePrebuild(); }}>Don't Wait for Prebuild</button>
+    <button className="mt-6 secondary" onClick={() => { clearTimeout(pollTimeout!); props.onIgnorePrebuild(); }}>Don't Wait for Prebuild</button>
   </StartPage>;
 }
diff --git a/components/dashboard/src/start/StartWorkspace.tsx b/components/dashboard/src/start/StartWorkspace.tsx
@@ -265,8 +265,8 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
             </div>
           </div>
           <div className="mt-10 flex space-x-2">
-            <button className="px-4 py-2 text-gray-500 bg-white font-semibold border-gray-500 hover:text-gray-700 hover:border-gray-700 hover:bg-gray-100" onClick={() => this.redirectTo(gitpodHostUrl.asDashboard().toString())}>Go to Dashboard</button>
-            <button className="px-4 py-2 text-gray-50 bg-green-600 font-semibold border-green-800 hover:bg-green-700" onClick={() => this.redirectTo(gitpodHostUrl.asStart(this.state.workspaceInstance?.workspaceId).toString())}>Open Workspace</button>
+            <button className="secondary" onClick={() => this.redirectTo(gitpodHostUrl.asDashboard().toString())}>Go to Dashboard</button>
+            <button onClick={() => this.redirectTo(gitpodHostUrl.asStart(this.state.workspaceInstance?.workspaceId).toString())}>Open Workspace</button>
           </div>
         </div>;
         break;
@@ -275,7 +275,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
     return <StartPage phase={phase} error={!!error} title={title}>
       {statusMessage}
       {error && <div>
-        <button className="mt-8 px-4 py-2 text-gray-500 bg-white font-semibold border-gray-500 hover:text-gray-700 hover:bg-gray-100 hover:border-gray-700" onClick={() => this.redirectTo(gitpodHostUrl.asDashboard().toString())}>Go back to dashboard</button>
+        <button className="mt-8 secondary" onClick={() => this.redirectTo(gitpodHostUrl.asDashboard().toString())}>Go back to dashboard</button>
         <p className="mt-14 text-base text-gray-400 flex space-x-2">
           <a href="https://www.gitpod.io/docs/">Docs</a>
           <span>—</span>
diff --git a/components/dashboard/src/tailwind.output.css b/components/dashboard/src/tailwind.output.css
diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx
diff --git a/components/dashboard/tailwind.config.js b/components/dashboard/tailwind.config.js
