Skip to content

[dashboard] button styling #3620

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 29, 2021
Merged

[dashboard] button styling #3620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/dashboard/src/components/CheckBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand Down
6 changes: 3 additions & 3 deletions components/dashboard/src/components/SelectableCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down
25 changes: 18 additions & 7 deletions components/dashboard/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor

@gtsiolis gtsiolis Mar 27, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: We're going to need the border-2 for secondary buttons, see delete button in Account. ❗

@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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: Phew! That was close! Thanks for going back to green here! 😅

}
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;
}
}
8 changes: 4 additions & 4 deletions components/dashboard/src/settings/Account.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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>;
}
8 changes: 4 additions & 4 deletions components/dashboard/src/settings/EnvironmentVariables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
Expand Down Expand Up @@ -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">
Expand Down
16 changes: 8 additions & 8 deletions components/dashboard/src/settings/Integrations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand Down Expand Up @@ -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>
)}
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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 && (
Expand All @@ -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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: Could we also remove the hover state when this is disabled? Same for updating git permissions.

</div>
</Modal>);
}
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/src/start/CreateWorkspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>;
}
6 changes: 3 additions & 3 deletions components/dashboard/src/start/StartWorkspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,8 +262,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;
Expand All @@ -272,7 +272,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>
Expand Down
Loading