Skip to content

[dashboard] Misc style updates #3619

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] Misc style updates #3619

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/ContextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ function ContextMenu(props: ContextMenuProps) {
{props.menuEntries.map((e, index) => {
const clickable = e.href || e.onClick || e.link;
const entry = <div className={`px-4 flex py-3 ${clickable ? 'hover:bg-gray-200' : ''} text-sm leading-1 ${e.customFontStyle || font} ${e.separator ? ' border-b border-gray-200' : ''}`} >
<div>{e.title}</div><div className="flex-1"></div>{e.active ? <div className="pl-1 font-semibold">&#x2713;</div> : null}
<div className="truncate w-52">{e.title}</div><div className="flex-1"></div>{e.active ? <div className="pl-1 font-semibold">&#x2713;</div> : null}
</div>
const key = `entry-${menuId}-${index}-${e.title}`;
if (e.link) {
Expand Down
10 changes: 7 additions & 3 deletions components/dashboard/src/components/DropDown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@
* See License-AGPL.txt in the project root for license information.
*/

import { useState } from 'react';
import { useEffect, useState } from 'react';
import ContextMenu from './ContextMenu';

export interface DropDownProps {
prefix?: string;
contextMenuWidth?: string;
activeEntry?: string,
entries: {
title: string,
onClick: ()=>void
Expand All @@ -21,7 +22,10 @@ function Arrow(props: {up: boolean}) {
}

function DropDown(props: DropDownProps) {
const [current, setCurrent] = useState(props.entries[0].title);
const [current, setCurrent] = useState(props.activeEntry || props.entries[0].title);
useEffect(() => {
setCurrent(props.activeEntry || props.entries[0].title);
}, [props.activeEntry, props.entries]);
const enhancedEntries = props.entries.map(e => {
return {
...e,
Expand All @@ -32,7 +36,7 @@ function DropDown(props: DropDownProps) {
}
}
})
const font = "text-gray-400 text-sm leading-1 group hover:text-gray-600"
const font = "text-gray-400 text-sm leading-1 group hover:text-gray-600 transition ease-in-out"
return (
<ContextMenu menuEntries={enhancedEntries} width={props.contextMenuWidth}>
<span className={`py-2 cursor-pointer ${font}`}>{props.prefix}{current}<Arrow up={false}/></span>
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/src/components/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ interface Entry {

function MenuItem(entry: Entry) {
const location = useLocation();
let classes = "flex block text-sm font-medium px-3 px-0 py-1.5 rounded-md";
let classes = "flex block text-sm font-medium px-3 px-0 py-1.5 rounded-md transition ease-in-out";
if (location.pathname.toLowerCase() === entry.link.toLowerCase() ||
entry.matches && entry.matches.test(location.pathname.toLowerCase())) {
classes += " bg-gray-200";
} else {
classes += " text-gray-600 hover:bg-gray-100 ";
classes += " text-gray-600 hover:bg-gray-100 transition ease-in-out";
}
return <li key={entry.title}>
{entry.link.startsWith('https://')
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/components/SelectableCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ 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-500' : '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 transition ease-in-out ${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-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} />
Expand Down
6 changes: 3 additions & 3 deletions components/dashboard/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
@apply text-2xl text-gray-800 leading-9 font-semibold;
}
h4 {
@apply pb-2 text-sm font-medium text-gray-600;
@apply pb-2 text-sm font-semibold text-gray-600;
}
p {
@apply text-sm text-gray-400;
Expand All @@ -35,7 +35,7 @@

@layer components {
button {
@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;
@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 transition ease-in-out;
}
button.secondary {
@apply bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-gray-600;
Expand All @@ -51,7 +51,7 @@
}

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;
@apply block w-56 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=password]::placeholder {
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/settings/Account.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function Account() {

<SettingsPage title='Account' subtitle='Manage account and git configuration.'>
Copy link
Contributor Author

@gtsiolis gtsiolis Mar 29, 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 still missing the whitespace on the right of this page after a recent change. See #3582 (comment)

<h3>Profile</h3>
<p className="text-base text-gray-500 pb-4">The following information will be used to set up git configuration. You can override git author name and email per project by using the default environment variables <span className="text-gitpod-kumquat-dark bg-gitpod-kumquat-light px-1.5 py-1 rounded-md text-sm font-mono">GIT_AUTHOR_NAME</span> and <span className="text-gitpod-kumquat-dark bg-gitpod-kumquat-light px-1.5 py-1 rounded-md text-sm font-mono">GIT_COMMITTER_EMAIL</span>.</p>
<p className="text-base text-gray-500 pb-4">The following information will be used to set up git configuration. You can override git author name and email per project by using the default environment variables <span className="text-gray--300 bg-gray-100 px-1.5 py-1 rounded-md text-sm font-mono font-medium">GIT_AUTHOR_NAME</span> and <span className="text-gray--300 bg-gray-100 px-1.5 py-1 rounded-md text-sm font-mono font-medium">GIT_COMMITTER_EMAIL</span>.</p>
<div className="flex flex-col lg:flex-row">
<div>
<div className="mt-4">
Expand Down
33 changes: 21 additions & 12 deletions components/dashboard/src/settings/EnvironmentVariables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,12 @@ function AddEnvVarModal(p: EnvVarModalProps) {
};

return <Modal visible={true} onClose={p.onClose} onEnter={save}>
<h3 className="pb-2">{isNew ? 'New' : 'Edit'} Variable</h3>
<div className="border-t -mx-6 px-6 py-2 flex flex-col">
{error ? <div className="bg-gitpod-kumquat-light rounded-md p-3 text-red-500 text-sm">
<h3 className="mb-4">{isNew ? 'New' : 'Edit'} Variable</h3>
<div className="border-t border-b -mx-6 px-6 py-4 flex flex-col">
{error ? <div className="bg-gitpod-kumquat-light rounded-md p-3 text-red-500 text-sm mb-2">
{error}
</div> : null}
<div className="mt-4">
<div>
<h4>Name</h4>
<input className="w-full" type="text" value={ev.name} onChange={(v) => { update({name: v.target.value}) }} />
</div>
Expand All @@ -68,8 +68,8 @@ function AddEnvVarModal(p: EnvVarModalProps) {
<input className="w-full" type="text" value={ev.repositoryPattern} placeholder="e.g. org/project"
onChange={(v) => { update({repositoryPattern: v.target.value}) }} />
</div>
<div className="mt-3">
<p>You can pass a variable for a specific project or use wildcard characters (<span className="text-gitpod-kumquat-dark bg-gitpod-kumquat-light px-1 py-0.5 rounded-md text-sm font-mono">*/*</span>) to make it available in more projects.</p>
<div className="mt-1">
<p className="text-gray-500">You can pass a variable for a specific project or use wildcard character (<span className="text-gray--300 bg-gray-100 px-1.5 py-1 rounded-md text-sm font-mono font-medium">*/*</span>) to make it available in more projects.</p>
</div>
</div>
<div className="flex justify-end mt-6">
Expand Down Expand Up @@ -147,18 +147,27 @@ export default function EnvVars() {
envVar={currentEnvVar}
validate={validate}
onClose={() => setAddEnvVarModalVisible(false)} /> : null}
<div className="flex items-start sm:justify-between mb-2">
<div>
<h3>Environment Variables</h3>
<h2 className="text-gray-500">Variables are used to store information like passwords.</h2>
</div>
{envVars.length !== 0
Copy link
Contributor Author

Choose a reason for hiding this comment

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

thought: Not sure if there's a better more efficient way to check this here.

Copy link
Member

Choose a reason for hiding this comment

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

looks good

?
<div className="mt-3 flex mt-0">
<button onClick={add} className="ml-2">New Variable</button>
</div>
: null}
</div>
{envVars.length === 0
? <div className="bg-gray-100 rounded-xl w-full h-96">
<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}>New Environment Variable</button>
<button onClick={add}>New Variable</button>
</div>
</div>
: <div className="space-y-2">
<div className="flex justify-end mb-2">
<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">
<div className="w-5/12">Name</div>
Expand All @@ -168,11 +177,11 @@ export default function EnvVars() {
</div>
<div className="flex flex-col">
{envVars.map(ev => {
return <div className="rounded-xl whitespace-nowrap flex space-x-2 py-3 px-3 w-full justify-between hover:bg-gray-100 focus:bg-gitpod-kumquat-light group">
return <div className="rounded-xl whitespace-nowrap flex space-x-2 py-3 px-3 w-full justify-between hover:bg-gray-100 focus:bg-gitpod-kumquat-light transition ease-in-out group">
<div className="w-5/12 m-auto">{ev.name}</div>
<div className="w-5/12 m-auto text-sm text-gray-400">{ev.repositoryPattern}</div>
<div className="w-2/12 flex justify-end">
<div className="flex w-8 self-center hover:bg-gray-200 rounded-md cursor-pointer">
<div className="flex w-8 self-center hover:bg-gray-200 rounded-md cursor-pointer opacity-0 group-hover:opacity-100">
<ContextMenu menuEntries={[
{
title: 'Edit',
Expand Down
35 changes: 20 additions & 15 deletions components/dashboard/src/settings/Integrations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,11 +254,11 @@ function GitProviders() {
</Modal>
)}

<h3>Git Providers</h3>
<h2>Manage permissions for git providers.</h2>
<h3>Git Providers</h3>
<h2>Manage permissions for git providers.</h2>
<div className="flex flex-col pt-6 space-y-2">
{authProviders && authProviders.map(ap => (
<div key={"ap-" + ap.authProviderId} className="flex-grow flex flex-row hover:bg-gray-100 rounded-xl h-16 w-full">
<div key={"ap-" + ap.authProviderId} className="flex-grow flex flex-row hover:bg-gray-100 rounded-xl h-16 w-full transition ease-in-out group">
<div className="px-4 self-center w-1/12">
<div className={"rounded-full w-3 h-3 text-sm align-middle " + (isConnected(ap.authProviderId) ? "bg-green-500" : "bg-gray-400")}>
&nbsp;
Expand All @@ -276,7 +276,7 @@ function GitProviders() {
<span className="my-auto truncate text-gray-500 overflow-ellipsis">{getPermissions(ap.authProviderId)?.join(", ") || "–"}</span>
<span className="text-sm my-auto text-gray-400">Permissions</span>
</div>
<div className="my-auto flex w-1/12 pl-8">
<div className="my-auto flex w-1/12 pl-8 mr-4 opacity-0 group-hover:opacity-100">
<div className="self-center hover:bg-gray-200 rounded-md cursor-pointer w-8">
<ContextMenu menuEntries={gitProviderMenu(ap)}>
<img className="w-8 h-8 p-1" src={ThreeDots} alt="Actions" />
Expand Down Expand Up @@ -355,21 +355,31 @@ function GitIntegrations() {
</Modal>
)}

<h3 className="flex-grow self-center">Git Integrations</h3>
<h2>Manage git integrations for GitLab or GitHub self-hosted instances.</h2>
<div className="flex items-start sm:justify-between mb-2">
<div>
<h3>Git Integrations</h3>
<h2 className="text-gray-500">Manage git integrations for GitLab or GitHub self-hosted instances.</h2>
</div>
{providers.length !== 0
?
<div className="mt-3 flex mt-0">
<button onClick={() => setModal({ mode: "new" })} className="ml-2 font-medium">New Integration</button>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

thought: This could look like weird. An alternative plan could be to a) introduce the table header (see Workspaces, Environment Variables) to add some visual balance or b) keep the New Integration button below the list.

</div>
: null}
</div>

{providers && providers.length === 0 && (
<div className="w-full flex h-80 mt-2 rounded-xl bg-gray-100">
<div className="m-auto text-center">
<h3 className="self-center text-gray-500 mb-4">No Git Integrations</h3>
<div className="text-gray-500 mb-6">In addition to the default Git Providers you can authorize<br /> with a self hosted instace of a provider.</div>
<button className="self-center" onClick={() => setModal({ mode: "new" })}>New Git Integration</button>
<button className="self-center" onClick={() => setModal({ mode: "new" })}>New Integration</button>
</div>
</div>
)}
<div className="flex flex-col pt-6 space-y-2">
{providers && providers.map(ap => (
<div key={"ap-" + ap.id} className="flex-grow flex flex-row hover:bg-gray-100 rounded-xl h-16 w-full">
<div key={"ap-" + ap.id} className="flex-grow flex flex-row hover:bg-gray-100 rounded-xl h-16 w-full transition ease-in-out group">

<div className="px-4 self-center w-1/12">
<div className={"rounded-full w-3 h-3 text-sm align-middle " + (ap.status === "verified" ? "bg-green-500" : "bg-gray-400")}>
Expand All @@ -382,7 +392,7 @@ function GitIntegrations() {
<div className="p-0 my-auto flex flex-col w-7/12">
<span className="my-auto truncate text-gray-500 overflow-ellipsis">{ap.host}</span>
</div>
<div className="my-auto flex w-1/12 pl-8">
<div className="my-auto flex w-1/12 pl-8 opacity-0 group-hover:opacity-100">
<div className="self-center hover:bg-gray-200 rounded-md cursor-pointer w-8">
<ContextMenu menuEntries={gitProviderMenu(ap)}>
<img className="w-8 h-8 p-1" src={ThreeDots} alt="Actions" />
Expand All @@ -392,11 +402,6 @@ function GitIntegrations() {
</div>
))}
</div>
{providers && providers.length > 0 && (
<div className="flex justify-start mt-6">
<button className="h-full" onClick={() => setModal({ mode: "new" })}>New Git Integration</button>
</div>
)}
</div>);
}

Expand Down Expand Up @@ -584,7 +589,7 @@ function GitIntegrationModal(props: ({
<div className="w-full relative">
<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" />
<img src={copy} title="Copy the Redirect URL to clippboard" className="absolute top-1/3 right-3" />
</div>
</div>
<span className="text-gray-500 text-sm">{getRedirectUrlDescription(type, host)}</span>
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/settings/SettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function SettingsPage(p: Props) {
})}
</ul>
</div>
<div className='ml-32 w-full pt-1'>
<div className='ml-32 w-full pt-1 mb-40'>
{p.children}
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions components/dashboard/src/tailwind.output.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -788,7 +788,7 @@ h3 {
}

h4 {
font-weight: 500;
font-weight: 600;
font-size: 0.875rem;
line-height: 1.25rem;
padding-bottom: 0.5rem;
Expand Down Expand Up @@ -897,6 +897,10 @@ button:focus {
button {
--tw-text-opacity: 1;
color: rgba(245, 245, 244, var(--tw-text-opacity));
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

button.secondary {
Expand Down Expand Up @@ -979,10 +983,6 @@ input[type=text], input[type=password], select {
border-radius: 0.375rem;
border-width: 1px;
display: block;
font-size: 0.75rem;
line-height: 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
}

input[type=text]:focus, input[type=password]:focus, select:focus {
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/src/workspaces/StartWorkspaceModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,14 @@ export function StartWorkspaceModal(p: StartWorkspaceModalProps) {
<div className="space-y-2 mt-4 overflow-y-scroll h-80 pr-2">
{list.length > 0 ? list :
(selection === 'Recent' ?
<div className="flex flex-col pt-12 items-center px-2">
<div className="flex flex-col pt-10 items-center px-2">
<h3 className="mb-2 text-gray-500">No Recent Projects</h3>
<p className="text-center">Projects you use frequently will show up here.</p>
<p className="text-center">Prefix a git repository URL with gitpod.io/# or start with an example.</p>
<button onClick={() => setSelection('Examples')} className="font-medium mt-8">Select Example</button>
</div> :
<div className="flex flex-col pt-10 items-center px-2">
<h3 className="mb-2">No Example Projects</h3>
<h3 className="mb-2 text-gray-500">No Example Projects</h3>
<p className="text-center">Sorry there seem to be no example projects, that work with your current git provider.</p>
</div>)
}
Expand Down
Loading