[dashboard] Update workspaces, settings, and header layout (#3521)

gtsiolis · web-flow · commit 8959b0a290b1 · 2021-03-22T11:27:58.000+02:00
diff --git a/components/dashboard/src/Login.tsx b/components/dashboard/src/Login.tsx
@@ -67,7 +67,7 @@ export function Login() {
                         </div>
                         <div className="mx-auto text-center pb-8 space-y-2">
                             <h1 className="text-3xl">Log in to Gitpod</h1>
-                            <h2 className="uppercase text-sm">ALWAYS READY-TO-CODE</h2>
+                            <h2 className="uppercase text-sm text-gray-400">ALWAYS READY-TO-CODE</h2>
                         </div>
                         <div className="flex flex-col space-y-3">
                             {authProviders.map(ap => {
diff --git a/components/dashboard/src/components/DropDown.tsx b/components/dashboard/src/components/DropDown.tsx
@@ -11,7 +11,7 @@ export interface DropDownProps {
 }
 
 function Arrow(props: {up: boolean}) {
-    return <span className="mx-2 border-gray-400" style={{ margin: 2, padding: 3, border: 'solid black', borderWidth: '0 2px 2px 0', display: 'inline-block', transform: `rotate(${props.up ? '-135deg' : '45deg'})`}}></span>
+    return <span className="mx-2 border-gray-400 group-hover:border-gray-600" style={{ margin: 2, padding: 3, border: 'solid black', borderWidth: '0 2px 2px 0', display: 'inline-block', transform: `rotate(${props.up ? '-135deg' : '45deg'})`}}></span>
 }
 
 function DropDown(props: DropDownProps) {
@@ -26,7 +26,7 @@ function DropDown(props: DropDownProps) {
             }
         }
     })
-    const font = "text-gray-400 text-sm leading-1"
+    const font = "text-gray-400 text-sm leading-1 group hover:text-gray-600"
     return (
         <ContextMenu menuEntries={enhancedEntries} width={props.contextMenuWidth}>
             <span className={`py-2 cursor-pointer ${font}`}>{props.prefix}{current}<Arrow up={false}/></span>
diff --git a/components/dashboard/src/components/Header.tsx b/components/dashboard/src/components/Header.tsx
@@ -7,10 +7,10 @@ export interface HeaderProps {
 
 export default function Header(p: HeaderProps) {
     return <div className="lg:px-28 px-10 border-gray-200">
-        <div className="flex py-8">
+        <div className="flex pb-8 pt-6">
             <div className="">
-                <h1 className="">{p.title}</h1>
-                <h2 className="pt-1">{p.subtitle}</h2>
+                <h1 className="tracking-tight">{p.title}</h1>
+                <h2 className="tracking-wide">{p.subtitle}</h2>
             </div>
         </div>
         <Separator />
diff --git a/components/dashboard/src/components/Menu.tsx b/components/dashboard/src/components/Menu.tsx
@@ -60,7 +60,7 @@ function Menu(props: { left: Entry[], right: Entry[] }) {
                         {props.right.map(MenuItem)}
                     </ul>
                 </nav>
-                <div className="lg:ml-3 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto rounded-full border-2 border-white hover:border-gray-200 p-0.5">
+                <div className="lg:ml-3 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto rounded-full border-2 border-white hover:border-gray-200 p-0.5 font-medium">
                     <ContextMenu menuEntries={[
                     {
                         title: (user && User.getPrimaryEmail(user)) || '',
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
@@ -29,7 +29,7 @@
 
 @layer components {
     button {
-        @apply cursor-pointer px-3 py-1 my-auto bg-green-600 hover:bg-green-700 border-2 border-green-800 text-gray-100 text-sm rounded-md;
+        @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 rounded-md focus:outline-none focus:ring focus:border-blue-300;
     }
 
     input[type=text] {
@@ -44,4 +44,4 @@
         @apply bg-gray-100 border-2 border-gray-300 text-gray-400;
     }
 
-}
+}
diff --git a/components/dashboard/src/settings/Account.tsx b/components/dashboard/src/settings/Account.tsx
@@ -12,15 +12,18 @@ export default function Account() {
     const close = () => setModal(false);
     return <div>
         <Modal visible={modal} onClose={close}>
-            <h3>Do you really want to delete your account?</h3>
-            <p>This action will remove all the data associated with your account in Gitpod and cannot be reversed.</p>
-            <div className="flex justify-end pt-6">
+            <h3 className="pb-2">Delete Account</h3>
+            <div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-2">
+              <p className="mt-1 mb-2 text-base">Are you sure you want to delete your account? This action will remove all the data associated with your account in Gitpod and cannot be reversed.</p>
+            </div>
+            <div className="flex justify-end mt-6">
                 <button className="border-red-900 bg-red-500 hover:bg-red-700" onClick={close}>Delete Account</button>
             </div>
         </Modal>
 
-        <SettingsPage title='Account' subtitle='Profile details'>
+        <SettingsPage title='Account' subtitle='Manage account and git configuration.'>
             <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>
             <div className="flex flex-col lg:flex-row">
                 <div>
                     <div className="mt-4">
@@ -35,14 +38,14 @@ export default function Account() {
                 <div className="lg:pl-14">
                     <div className="mt-4">
                         <h4>Avatar</h4>
-                        <img className="rounded-full w-24 h-24 border-2 border-transparent hover:border-indigo-400"
+                        <img className="rounded-full w-24 h-24"
                             src={user!.avatarUrl} alt={user!.name} />
                     </div>
                 </div>
             </div>
             <h3 className="mt-12">Delete Account</h3>
-            <p className="text-sm text-gray-400 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>
+            <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 font-medium" onClick={() => setModal(true)}>Delete Account</button>
         </SettingsPage>
     </div>;
 }
diff --git a/components/dashboard/src/settings/EnvironmentVariables.tsx b/components/dashboard/src/settings/EnvironmentVariables.tsx
@@ -2,7 +2,7 @@ import { SettingsPage } from "./SettingsPage";
 
 export default function EnvVars() {
     return <div>
-        <SettingsPage title='Environment Variables' subtitle='Configure environment variables for your workspaces'>
+        <SettingsPage title='Variables' subtitle='Configure environment variables for all workspaces.'>
             <h3>Environment Variables</h3>
         </SettingsPage>
     </div>;
diff --git a/components/dashboard/src/settings/GitIntegrations.tsx b/components/dashboard/src/settings/GitIntegrations.tsx
@@ -2,8 +2,8 @@ import { SettingsPage } from "./SettingsPage";
 
 export default function GitIntegrations() {
     return <div>
-        <SettingsPage title='Git Integrations' subtitle='Manage integration with your Git hosters'>
-            <h3>Git Hoster Access Control</h3>
+        <SettingsPage title='Integrations' subtitle='Manage permissions for git providers and integrations.'>
+            <h3>Git Providers</h3>
         </SettingsPage>
     </div>;
 }
diff --git a/components/dashboard/src/settings/Notifications.tsx b/components/dashboard/src/settings/Notifications.tsx
@@ -53,9 +53,9 @@ export default function Notifications() {
 
 function CheckBox(props: {title: string, desc: string, checked: boolean, onChange: () => void}) {
     return <div className="flex mt-4">
-        <input className={"h-5 w-5 focus:ring-0 mt-1 rounded cursor-pointer border-2 "+(props.checked?'bg-gray-800':'')} type="checkbox" checked={props.checked} onChange={props.onChange}/>
+        <input className={"h-4 w-4 focus:ring-0 mt-1 rounded cursor-pointer border-2 "+(props.checked?'bg-gray-800':'')} type="checkbox" checked={props.checked} onChange={props.onChange}/>
         <div className="flex flex-col ml-2">
-            <div className="text-gray-700 text-md font-semibold">{props.title}</div>
+            <div className="text-gray-800 text-md font-semibold tracking-wide">{props.title}</div>
             <div className="text-gray-400 text-md">{props.desc}</div>
         </div>
     </div>
diff --git a/components/dashboard/src/settings/Plans.tsx b/components/dashboard/src/settings/Plans.tsx
@@ -2,7 +2,7 @@ import { SettingsPage } from "./SettingsPage";
 
 export default function Plans() {
     return <div>
-        <SettingsPage title='Plans' subtitle='Plans and Usage'>
+        <SettingsPage title='Plans' subtitle='Manage account usage and billing.'>
             <h3>Plans</h3>
         </SettingsPage>
     </div>;
diff --git a/components/dashboard/src/settings/Preferences.tsx b/components/dashboard/src/settings/Preferences.tsx
@@ -21,7 +21,7 @@ export default function Preferences() {
     }
 
     return <div>
-        <SettingsPage title='Preferences' subtitle='Configure your Default IDE for all workspaces.'>
+        <SettingsPage title='Preferences' subtitle='Configure user preferences.'>
             <h3>Default IDE</h3>
             <p className="text-base">Choose which IDE you want to use.</p>
             <div className="mt-4 space-x-4 flex">
diff --git a/components/dashboard/src/settings/SettingsPage.tsx b/components/dashboard/src/settings/SettingsPage.tsx
@@ -9,13 +9,13 @@ export interface Props {
 }
 
 export function SettingsPage(p: Props) {
-    return <div>
+    return <div className="max-w-6xl">
         <Header title={p.title} subtitle={p.subtitle}/>
         <div className='lg:px-28 px-10 flex pt-9'>
             <div>
-                <ul className="flex flex-col text-sm text-gray-500 pt-4 lg:pt-0 w-48 space-y-2">
+                <ul className="flex flex-col text tracking-wide text-gray-500 pt-4 lg:pt-0 w-48 space-y-2">
                     {settingsMenu.map(e => {
-                        let classes = "flex block py-2 font-sm px-4 rounded-md";
+                        let classes = "flex block py-2 px-4 rounded-md";
                         if (e.link.toLowerCase() === window.location.pathname) {
                             classes += " bg-gray-800 text-gray-50";
                         } else {
diff --git a/components/dashboard/src/start/CreateWorkspace.tsx b/components/dashboard/src/start/CreateWorkspace.tsx
@@ -111,14 +111,11 @@ export class CreateWorkspace extends React.Component<CreateWorkspaceProps, Creat
                   <p className="text-base text-black font-bold">{w.workspace.id}</p>
                   <p>{w.workspace.contextURL}</p>
                 </div>
-                <div className="flex">
-                  <button>Open</button>
-                </div>
               </a>
             )}
           </>
         </div>
-        <div className="flex justify-end mt-4">
+        <div className="flex justify-end mt-6">
           <button onClick={() => this.createWorkspace(CreateWorkspaceMode.Default)}>New Workspace</button>
         </div>
       </Modal>;
diff --git a/components/dashboard/src/start/StartWorkspace.tsx b/components/dashboard/src/start/StartWorkspace.tsx
@@ -200,11 +200,11 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
       case "stopping":
         phase = StartPhase.Stopping;
         statusMessage = <div>
-          <div className="flex space-x-3 items-center rounded-xl py-2 px-4 h-16 w-72 mt-4 bg-gray-100">
+          <div className="flex space-x-3 items-center rounded-xl m-auto px-4 h-16 w-72 mt-4 bg-gray-100">
             <div className="rounded-full w-3 h-3 text-sm bg-gitpod-kumquat">&nbsp;</div>
             <div>
               <p className="text-gray-700 font-semibold">{this.state.workspaceInstance.workspaceId}</p>
-              <p>{this.state.contextUrl}</p>
+              <p className="w-56 truncate">{this.state.contextUrl}</p>
             </div>
           </div>
         </div>;
@@ -214,16 +214,16 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
       case "stopped":
         phase = StartPhase.Stopped;
         statusMessage = <div>
-            <div className="flex space-x-3 items-center rounded-xl py-2 px-4 h-16 w-72 mt-4 bg-gray-100">
+            <div className="flex space-x-3 items-center rounded-xl m-auto px-4 h-16 w-72 mt-4 bg-gray-100">
             <div className="rounded-full w-3 h-3 text-sm bg-gray-300">&nbsp;</div>
             <div>
               <p className="text-gray-700 font-semibold">{this.state.workspaceInstance.workspaceId}</p>
-              <p>{this.state.contextUrl}</p>
+              <p className="w-56 truncate">{this.state.contextUrl}</p>
             </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" 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" onClick={() => this.redirectTo(gitpodHostUrl.asStart(this.state.workspaceInstance?.workspaceId).toString())}>Open Workspace</button>
+            <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>
           </div>
         </div>;
         break;
diff --git a/components/dashboard/src/tailwind.output.css b/components/dashboard/src/tailwind.output.css
@@ -862,17 +862,42 @@ button:hover {
 button {
   --tw-border-opacity: 1;
   border-color: rgba(63, 98, 18, var(--tw-border-opacity));
+}
+
+button:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(147, 197, 253, var(--tw-border-opacity));
+}
+
+button {
   border-radius: 0.375rem;
   border-width: 2px;
   cursor: pointer;
   font-size: 0.875rem;
   line-height: 1.25rem;
   margin-top: auto;
   margin-bottom: auto;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+}
+
+button:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+button {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+button:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+button {
   --tw-text-opacity: 1;
   color: rgba(245, 245, 244, var(--tw-text-opacity));
 }
@@ -200362,4 +200387,4 @@ input[disabled] {
     -webkit-filter: grayscale(1) !important;
             filter: grayscale(1) !important;
   }
-}
+}
diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
@@ -28,7 +28,7 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
             break;
         }
         default: {
-            stateClassName += ' bg-gitpod-kumquat'
+            stateClassName += ' bg-gitpod-kumquat animate-pulse'
             break;
         }
     }
@@ -94,37 +94,37 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
         setChangesModalVisible(true);
     }
     return <div>
-        <a className="rounded-xl whitespace-nowrap flex space-x-2 py-6 px-6 w-full justify-between hover:bg-gray-100 cursor-pointer" href={startUrl.toString()}>
+        <a className="rounded-xl whitespace-nowrap flex space-x-2 py-6 px-6 w-full justify-between hover:bg-gray-100 focus:bg-gitpod-kumquat-light cursor-pointer group" href={startUrl.toString()}>
             <div className="pr-3 self-center">
                 <div className={stateClassName}>
                     &nbsp;
             </div>
             </div>
             <div className="flex flex-col w-3/12">
-                <div className="font-medium text-gray-800 truncate hover:underline">{ws.id}</div>
-                <a href={project ? 'https://' + project : undefined}><div className="text-sm overflow-ellipsis truncate text-gray-400 truncate">{project || 'Unknown'}</div></a>
+                <div className="font-medium text-gray-800 truncate">{ws.id}</div>
+                <a href={project ? 'https://' + project : undefined}><div className="text-sm overflow-ellipsis truncate text-gray-400">{project || 'Unknown'}</div></a>
             </div>
             <div className="flex w-4/12 truncate overflow-ellipsis">
                 <div className="flex flex-col">
-                    <div className="font-medium text-gray-500 truncate">{ws.description}</div>
-                    <div className="text-sm text-gray-400 truncate">{ws.contextURL}</div>
+                    <div className="font-medium text-gray-500 overflow-ellipsis truncate">{ws.description}</div>
+                    <div className="text-sm text-gray-400 overflow-ellipsis truncate">{ws.contextURL}</div>
                 </div>
             </div>
             <div className="flex w-2/12 truncate" onClick={numberOfChanges > 0 ? showChanges : undefined}>
                 <div className="flex flex-col">
                     <div className="font-medium text-gray-500 truncate">{currentBranch}</div>
                     {
                         numberOfChanges > 0 ?
-                            <div className={"text-sm text-red truncate cursor-pointer hover:underline"} onClick={showChanges}>{changesLabel}</div>
+                            <div className={"text-sm text-red-600 truncate cursor-pointer bg-red-50 group-hover:bg-red-100 hover:text-red-800 px-1.5 py-0.5 relative rounded-md -top-0.5"} onClick={showChanges}>{changesLabel}</div>
                             :
-                            <div className="text-sm text-gray-400 truncate">No Changes</div>
+                            <div className="text-sm text-gray-500 truncate ">No Changes</div>
                     }
                 </div>
             </div>
             <div className="flex w-2/12 self-center space-x-2 truncate">
                 <div className="text-sm text-gray-400 truncate">{moment(WorkspaceInfo.lastActiveISODate(desc)).fromNow()}</div>
             </div>
-            <div className="flex w-8 self-center hover:bg-gray-300 rounded-md cursor-pointer">
+            <div className="flex w-8 self-center hover:bg-gray-200 rounded-md cursor-pointer">
                 <ContextMenu menuEntries={menuEntries}>
                     <img className="w-8 h-8 p-1" src={ThreeDots} alt="Actions" />
                 </ContextMenu>
@@ -135,7 +135,7 @@ export function WorkspaceEntry({ desc, model }: { desc: WorkspaceInfo, model: Wo
         </Modal>
         <Modal visible={isModalVisible} onClose={() => setModalVisible(false)} onEnter={() => {model.deleteWorkspace(ws.id); return true;}}>
             <div>
-                <h3>Delete Workspace</h3>
+                <h3 className="pb-2">Delete Workspace</h3>
                 <div className="border-t border-b border-gray-200 mt-2 -mx-6 px-6 py-2">
                     <p className="mt-1 mb-2 text-base">Are you sure you want to delete this workspace?</p>
                     <div className="w-full p-4 mb-2 bg-gray-100 rounded-xl group bg-gray-100">
diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ export interface DropDownProps {`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`function Arrow(props: {up: boolean}) {`
`14`		- return <span className="mx-2 border-gray-400" style={{ margin: 2, padding: 3, border: 'solid black', borderWidth: '0 2px 2px 0', display: 'inline-block', transform: `rotate(${props.up ? '-135deg' : '45deg'})`}}></span>
	`14`	+ return <span className="mx-2 border-gray-400 group-hover:border-gray-600" style={{ margin: 2, padding: 3, border: 'solid black', borderWidth: '0 2px 2px 0', display: 'inline-block', transform: `rotate(${props.up ? '-135deg' : '45deg'})`}}></span>
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`function DropDown(props: DropDownProps) {`
`@@ -26,7 +26,7 @@ function DropDown(props: DropDownProps) {`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`	`})`
`29`		`- const font = "text-gray-400 text-sm leading-1"`
	`29`	`+ const font = "text-gray-400 text-sm leading-1 group hover:text-gray-600"`
`30`	`30`	`return (`
`31`	`31`	`<ContextMenu menuEntries={enhancedEntries} width={props.contextMenuWidth}>`
`32`	`32`	<span className={`py-2 cursor-pointer ${font}`}>{props.prefix}{current}<Arrow up={false}/></span>
Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ function Menu(props: { left: Entry[], right: Entry[] }) {`
`60`	`60`	`{props.right.map(MenuItem)}`
`61`	`61`	`</ul>`
`62`	`62`	`</nav>`
`63`		`- <div className="lg:ml-3 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto rounded-full border-2 border-white hover:border-gray-200 p-0.5">`
	`63`	`+ <div className="lg:ml-3 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto rounded-full border-2 border-white hover:border-gray-200 p-0.5 font-medium">`
`64`	`64`	`<ContextMenu menuEntries={[`
`65`	`65`	`{`
`66`	`66`	`title: (user && User.getPrimaryEmail(user)) \|\| '',`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@`
`29`	`29`
`30`	`30`	`@layer components {`
`31`	`31`	`button {`
`32`		`- @apply cursor-pointer px-3 py-1 my-auto bg-green-600 hover:bg-green-700 border-2 border-green-800 text-gray-100 text-sm rounded-md;`
	`32`	`+ @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 rounded-md focus:outline-none focus:ring focus:border-blue-300;`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`input[type=text] {`
`@@ -44,4 +44,4 @@`
`44`	`44`	`@apply bg-gray-100 border-2 border-gray-300 text-gray-400;`
`45`	`45`	`}`
`46`	`46`
`47`		`-}`
	`47`	`+}`