Skip to content

Commit 0ed1271

Browse files
svenefftingesvenefftinge
committed
[dashboard] button styling
1 parent a8dbed9 commit 0ed1271

11 files changed

+1220
-45
lines changed

‎components/dashboard/src/components/SelectableCard.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ export interface SelectableCardProps {
1313
}
1414

1515
function SelectableCard(props: SelectableCardProps) {
16-
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}>
16+
return <div className={`rounded-xl px-4 py-3 flex flex-col cursor-pointer group border-2 ${props.selected ? 'border-gitpod-kumquat-dark' : 'border-gray-300 hover:border-gray-400'} ${props.className || ''}`} onClick={props.onClick}>
1717
<div className="flex items-center">
18-
<p className={`w-full text-base font-semibold ${props.selected ? 'text-green-600' : 'text-gray-300 group-hover:text-gray-400'}`}>{props.title}</p>
19-
<input className={props.selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} type="radio" checked={props.selected} />
18+
<p className={`w-full text-base font-semibold ${props.selected ? 'text-gitpod-kumquat-dark' : 'text-gray-300 group-hover:text-gray-400'}`}>{props.title}</p>
19+
<input className={'text-gitpod-kumquat-dark ' + (props.selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100')} type="radio" checked={props.selected} />
2020
</div>
2121
{props.children}
2222
</div>;

‎components/dashboard/src/index.css

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,23 +35,31 @@
3535

3636
@layer components {
3737
button {
38-
@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;
38+
@apply cursor-pointer px-3 py-1 my-auto bg-gitpod-kumquat-dark hover:bg-gitpod-kumquat-darker text-gray-100 text-sm font-medium rounded-md focus:outline-none focus:ring;
39+
}
40+
button.secondary {
41+
@apply bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-gray-600;
42+
}
43+
button.danger {
44+
@apply bg-red-500 hover:bg-red-600 text-gray-100;
45+
}
46+
button.danger.secondary {
47+
@apply bg-gray-100 hover:bg-gray-200 text-red-500 hover:text-red-600;
3948
}
40-
4149
button:disabled {
42-
@apply cursor-default;
50+
@apply cursor-default opacity-50;
4351
}
4452

4553
input[type=text] {
46-
@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;
54+
@apply text-xs block w-56 text-sm text-gray-600 rounded-md border border-gray-400 focus:border-gray-500 focus:bg-white focus:ring-0;
4755
}
4856

4957
input[type=text]::placeholder {
5058
@apply text-gray-400;
5159
}
5260

5361
input[disabled] {
54-
@apply bg-gray-100 border-2 border-gray-300 text-gray-400;
62+
@apply bg-gray-100 border border-gray-300 text-gray-400;
5563
}
5664

5765
}

‎components/dashboard/src/settings/Account.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ export default function Account() {
3838
<input className="border-2 border-gray-400 w-full" type="text" onChange={e => setTypedEmail(e.target.value)}></input>
3939
</div>
4040
<div className="flex justify-end mt-6">
41-
<button className="text-gray-900 border-white bg-white hover:border-gray-200" onClick={close}>Cancel</button>
42-
<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>
41+
<button className="secondary" onClick={close}>Cancel</button>
42+
<button className={"ml-2 danger disabled:opacity-50" + (typedEmail !== primaryEmail ? ' hover:bg-red-500' : '')} onClick={deleteAccount} disabled={typedEmail !== primaryEmail}>Delete Account</button>
4343
</div>
4444
</Modal>
4545

@@ -67,7 +67,7 @@ export default function Account() {
6767
</div>
6868
<h3 className="mt-12">Delete Account</h3>
6969
<p className="text-base text-gray-500 pb-4">This action will remove all the data associated with your account in Gitpod.</p>
70-
<button className="border-red-600 text-red-600 bg-white hover:border-red-800 hover:text-red-800" onClick={() => setModal(true)}>Delete Account</button>
70+
<button className="danger" onClick={() => setModal(true)}>Delete Account</button>
7171
</SettingsPage>
7272
</div>;
7373
}

‎components/dashboard/src/settings/EnvironmentVariables.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ function AddEnvVarModal(p: EnvVarModalProps) {
7373
</div>
7474
</div>
7575
<div className="flex justify-end mt-6">
76-
<button className="text-gray-900 border-white bg-white hover:bg-gray-100 hover:border-gray-100" onClick={p.onClose}>Cancel</button>
76+
<button className="secondary" onClick={p.onClose}>Cancel</button>
7777
<button className={"ml-2 disabled:opacity-50"} onClick={save} >{isNew ? 'Add' : 'Update'} Variable</button>
7878
</div>
7979
</Modal>
@@ -152,12 +152,12 @@ export default function EnvVars() {
152152
<div className="pt-28 flex flex-col items-center w-96 m-auto">
153153
<h3 className="text-center pb-3 text-gray-500">No Environment Variables</h3>
154154
<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>
155-
<button onClick={add} className="font-medium">New Environment Variable</button>
155+
<button onClick={add}>New Environment Variable</button>
156156
</div>
157157
</div>
158158
: <div className="space-y-2">
159159
<div className="flex justify-end mb-2">
160-
<button onClick={add} className="ml-2 font-medium">New Environment Variable</button>
160+
<button onClick={add} className="ml-2">New Environment Variable</button>
161161
</div>
162162
<div className="flex flex-col space-y-2">
163163
<div className="px-3 py-3 flex justify-between space-x-2 text-sm text-gray-400 border-t border-b border-gray-200">

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ function GitProviders() {
218218
</div>
219219
</div>
220220
<div className="flex justify-end mt-6">
221-
<button className={"ml-2 border-red-900 bg-red-500 hover:bg-red-700"} onClick={() => disconnect(diconnectModal.provider)}>Disconnect Provider</button>
221+
<button className={"ml-2 danger secondary"} onClick={() => disconnect(diconnectModal.provider)}>Disconnect Provider</button>
222222
</div>
223223
</Modal>
224224
)}
@@ -350,7 +350,7 @@ function GitIntegrations() {
350350
</div>
351351
</div>
352352
<div className="flex justify-end mt-6">
353-
<button className={"ml-2 border-red-900 bg-red-500 hover:bg-red-700"} onClick={() => deleteProvider(modal.provider)}>Remove Integration</button>
353+
<button className={"ml-2 danger secondary"} onClick={() => deleteProvider(modal.provider)}>Remove Integration</button>
354354
</div>
355355
</Modal>
356356
)}
@@ -613,7 +613,7 @@ function GitIntegrationModal(props: ({
613613
)}
614614
</div>
615615
<div className="flex justify-end mt-6">
616-
<button className="disabled:opacity-50" onClick={() => validate() && activate()} disabled={!!validationError || busy}>Activate Integration</button>
616+
<button onClick={() => validate() && activate()} disabled={!!validationError || busy}>Activate Integration</button>
617617
</div>
618618
</Modal>);
619619
}

‎components/dashboard/src/start/CreateWorkspace.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export class CreateWorkspace extends React.Component<CreateWorkspaceProps, Creat
139139
return <StartPage phase={phase} error={!!error}>
140140
{statusMessage}
141141
{error && <div>
142-
<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>
142+
<a href={gitpodHostUrl.asDashboard().toString()}><button className="mt-8 secondary">Go back to dashboard</button></a>
143143
<p className="mt-14 text-base text-gray-400 flex space-x-2">
144144
<a href="https://www.gitpod.io/docs/">Docs</a>
145145
<span>—</span>
@@ -204,6 +204,6 @@ function RunningPrebuildView(props: RunningPrebuildViewProps) {
204204
<Suspense fallback={<div />}>
205205
<WorkspaceLogs logsEmitter={logsEmitter} />
206206
</Suspense>
207-
<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>
207+
<button className="mt-6 secondary" onClick={() => { clearTimeout(pollTimeout!); props.onIgnorePrebuild(); }}>Don't Wait for Prebuild</button>
208208
</StartPage>;
209209
}

‎components/dashboard/src/start/StartWorkspace.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -262,8 +262,8 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
262262
</div>
263263
</div>
264264
<div className="mt-10 flex space-x-2">
265-
<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>
266-
<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>
265+
<button className="secondary" onClick={() => this.redirectTo(gitpodHostUrl.asDashboard().toString())}>Go to Dashboard</button>
266+
<button onClick={() => this.redirectTo(gitpodHostUrl.asStart(this.state.workspaceInstance?.workspaceId).toString())}>Open Workspace</button>
267267
</div>
268268
</div>;
269269
break;
@@ -272,7 +272,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
272272
return <StartPage phase={phase} error={!!error} title={title}>
273273
{statusMessage}
274274
{error && <div>
275-
<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>
275+
<button className="mt-8 secondary" onClick={() => this.redirectTo(gitpodHostUrl.asDashboard().toString())}>Go back to dashboard</button>
276276
<p className="mt-14 text-base text-gray-400 flex space-x-2">
277277
<a href="https://www.gitpod.io/docs/">Docs</a>
278278
<span>—</span>

0 commit comments

Comments
 (0)