[dashboard] Adjust styles in Settings menu and Account page

Author: jankeromnes

components/dashboard/src/components/SettingsPage.tsx

@@ -13,7 +13,7 @@ export function SettingsPage(p: Props) {
         <Header title={p.title} subtitle={p.subtitle}/>
         <div className='lg:px-28 px-10 flex pt-9'>
             <SubMenu entries={p.menuEntries} />
-            <div className='ml-5 pl-12 w-full pt-1'>
+            <div className='ml-32 w-full pt-1'>
                 {p.children}
             </div>
         </div>

components/dashboard/src/components/SubMenu.tsx

@@ -7,13 +7,13 @@ export interface SubMenuEntry {
 
 export function SubMenu(props: { entries: SubMenuEntry[] }) {
     return <div>
-        <ul className="flex flex-col text-sm text-gray-700 pt-4 lg:pt-0 w-48 space-y-2">
+        <ul className="flex flex-col text-sm text-gray-500 pt-4 lg:pt-0 w-48 space-y-2">
             {props.entries.map(e => {
                 let classes = "flex block py-2 font-sm px-4 rounded-md";
                 if (e.link.toLowerCase() === window.location.pathname) {
-                    classes += " bg-gray-600 text-gray-100 ";
+                    classes += " bg-gray-800 text-gray-50";
                 } else {
-                    classes += " text-gray-400 hover:bg-gray-300 hover:text-white ";
+                    classes += " hover:bg-gray-100";
                 }
                 return <Link to={e.link} key={e.title}>
                     <li className={classes}>

components/dashboard/src/index.css

@@ -15,7 +15,7 @@
         @apply text-2xl text-gray-900 leading-9 font-semibold;
     }
     h4 {
-        @apply pb-2 text-sm font-medium text-gray-500;
+        @apply pb-2 text-sm font-medium text-gray-600;
     }
     p {
         @apply text-sm text-gray-400;
@@ -37,7 +37,11 @@
     }
 
     input[type=text]::placeholder {
-        @apply text-gray-400
+        @apply text-gray-400;
+    }
+
+    input[disabled] {
+        @apply bg-gray-100 border-2 border-gray-300 text-gray-400;
     }
 
 }

components/dashboard/src/settings/Account.tsx

@@ -21,29 +21,29 @@ export default function Account() {
         </Modal>
 
         <SettingsPage title='Account' subtitle='Profile details' menuEntries={settingsMenu}>
-            <h3>Personal Information</h3>
+            <h3>Profile</h3>
             <div className="flex flex-col lg:flex-row">
-                <div className="pb-6">
-                    <div className="pt-6">
+                <div>
+                    <div className="mt-4">
                         <h4>Name</h4>
-                        <input type="text" value={user!.name} onChange={(v) => { console.log(v) }} />
+                        <input type="text" disabled={true} value={user!.name} onChange={(v) => { console.log(v) }} />
                     </div>
-                    <div className="pt-6">
+                    <div className="mt-4">
                         <h4>Email</h4>
-                        <input type="text" value={User.getPrimaryEmail(user!)} onChange={(v) => { console.log(v) }} />
+                        <input type="text" disabled={true} value={User.getPrimaryEmail(user!)} onChange={(v) => { console.log(v) }} />
                     </div>
                 </div>
                 <div className="lg:pl-14">
-                    <div className="pt-6">
+                    <div className="mt-4">
                         <h4>Avatar</h4>
                         <img className="rounded-full w-24 h-24 border-2 border-transparent hover:border-indigo-400"
                             src={user!.avatarUrl} alt={user!.name} />
                     </div>
                 </div>
             </div>
-            <h3 className="pt-14">Delete Account</h3>
+            <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-900 bg-red-500 hover:bg-red-700" onClick={() => setModal(true)}>Delete Account</button>
+            <button className="border-red-600 text-red-600 bg-white hover:border-red-800 hover:text-red-800" onClick={() => setModal(true)}>Delete Account</button>
         </SettingsPage>
     </div>;
 }

components/dashboard/src/settings/EnvironmentVariables.tsx

@@ -4,9 +4,7 @@ import settingsMenu from './settings-menu';
 export default function EnvVars() {
     return <div>
         <SettingsPage title='Environment Variables' subtitle='Configure environment variables for your workspaces' menuEntries={settingsMenu}>
-            <div className="lg:px-28 px-10 flex pt-10">
-                Environment Variables
-            </div>
+            <h3>Environment Variables</h3>
         </SettingsPage>
     </div>;
 }

components/dashboard/src/settings/GitIntegrations.tsx

@@ -4,9 +4,7 @@ import settingsMenu from './settings-menu';
 export default function GitIntegrations() {
     return <div>
         <SettingsPage title='Git Integrations' subtitle='Manage integration with your Git hosters' menuEntries={settingsMenu}>
-            <div className="lg:px-28 px-10 flex pt-10">
-                Git Hoster Access Control
-            </div>
+            <h3>Git Hoster Access Control</h3>
         </SettingsPage>
     </div>;
 }

components/dashboard/src/settings/Notifications.tsx

@@ -4,9 +4,7 @@ import settingsMenu from "./settings-menu";
 export default function Notifications() {
     return <div>
         <SettingsPage title='Notifications' subtitle='Email notification preferences' menuEntries={settingsMenu}>
-            <div className="lg:px-28 px-10 flex pt-10">
-                Notifications
-            </div>
+            <h3>Notifications</h3>
         </SettingsPage>
     </div>;
 }

components/dashboard/src/settings/Plans.tsx

@@ -4,9 +4,7 @@ import settingsMenu from "./settings-menu";
 export default function Plans() {
     return <div>
         <SettingsPage title='Plans' subtitle='Plans and Usage' menuEntries={settingsMenu} >
-            <div className="lg:px-28 px-10 flex pt-10">
-                Plans
-            </div>
+            <h3>Plans</h3>
         </SettingsPage>
     </div>;
 }