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

Author: gtsiolis

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 => {

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>

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 />

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)) || '',

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;
     }
 
-}
+}

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>;
 }

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>;

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>;
 }

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>

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>;