[dashboard] Misc style updates

Author: svenefftinge

components/dashboard/src/components/ContextMenu.tsx

@@ -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) {

components/dashboard/src/components/DropDown.tsx

@@ -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
@@ -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,
@@ -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>

components/dashboard/src/components/Menu.tsx

@@ -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://')

components/dashboard/src/components/SelectableCard.tsx

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

components/dashboard/src/index.css

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

components/dashboard/src/settings/Account.tsx

@@ -45,7 +45,7 @@ export default function Account() {
 
         <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>
+            <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">

components/dashboard/src/settings/EnvironmentVariables.tsx

@@ -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>
@@ -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">
@@ -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
+            ?
+            <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>
@@ -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',

components/dashboard/src/settings/Integrations.tsx

@@ -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;
@@ -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" />
@@ -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>
+            </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")}>
@@ -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" />
@@ -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>);
 }
 
@@ -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>

components/dashboard/src/settings/SettingsPage.tsx

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

components/dashboard/src/tailwind.output.css

@@ -788,7 +788,7 @@ h3 {
 }
 
 h4 {
-  font-weight: 500;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.25rem;
   padding-bottom: 0.5rem;
@@ -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 {
@@ -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 {