[dashboard] Change font stack, update logo, change menu colors (#3478)

gitpod-io · Mar 17, 2021 · f1b574d · f1b574d
1 parent d6cddf6
commit f1b574d
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 19 deletions.
diff --git a/components/dashboard/public/gitpod.svg b/components/dashboard/public/gitpod.svg
diff --git a/components/dashboard/src/components/Menu.tsx b/components/dashboard/src/components/Menu.tsx
@@ -7,11 +7,11 @@ interface Entry {
 }
 
 function MenuItem(entry: Entry) {
-    let classes = "flex block text-sm font-medium lg:px-3 px-0 py-2 rounded-md";
+    let classes = "flex block text-sm font-medium lg:px-3 px-0 py-1.5 rounded-md";
     if (window.location.pathname.toLowerCase() === entry.link.toLowerCase()) {
         classes += " bg-gray-200";
     } else {
-        classes += " text-gray-500 hover:bg-gray-300 ";
+        classes += " text-gray-600 hover:bg-gray-100 ";
     }
     return <li key={entry.title}>
         {entry.link.startsWith('https://')
@@ -57,7 +57,7 @@ function Menu(props: { left: Entry[], right: Entry[] }) {
                         {props.right.map(MenuItem)}
                     </ul>
                 </nav>
-                <Link className="lg:ml-4 flex items-center justify-start lg:mb-0 mb-4 pointer-cursor m-l-auto rounded-full border-2 hover:border-gray-400 p-0.5" to="/account">
+                <Link 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" to="/account">
                     <img className="rounded-full w-6 h-6"
                         src={user?.avatarUrl || ''} alt={user?.name || 'Anonymous'} />
                 </Link>

diff --git a/components/dashboard/src/tailwind.output.css b/components/dashboard/src/tailwind.output.css
@@ -365,7 +365,7 @@ ul {
  */
 
 html {
-  font-family: Inter, Helvetica, Arial, sans-serif; /* 1 */
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; /* 1 */
   line-height: 1.5; /* 2 */
 }
 
@@ -12671,7 +12671,7 @@ input[type=text]::placeholder {
 }
 
 .font-sans {
-  font-family: Inter, Helvetica, Arial, sans-serif !important;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
 }
 
 .font-thin {
@@ -46975,7 +46975,7 @@ input[type=text]::placeholder {
   }
 
   .sm\:font-sans {
-    font-family: Inter, Helvetica, Arial, sans-serif !important;
+    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
   }
 
   .sm\:font-thin {
@@ -80680,7 +80680,7 @@ input[type=text]::placeholder {
   }
 
   .md\:font-sans {
-    font-family: Inter, Helvetica, Arial, sans-serif !important;
+    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
   }
 
   .md\:font-thin {
@@ -114385,7 +114385,7 @@ input[type=text]::placeholder {
   }
 
   .lg\:font-sans {
-    font-family: Inter, Helvetica, Arial, sans-serif !important;
+    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
   }
 
   .lg\:font-thin {
@@ -148090,7 +148090,7 @@ input[type=text]::placeholder {
   }
 
   .xl\:font-sans {
-    font-family: Inter, Helvetica, Arial, sans-serif !important;
+    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
   }
 
   .xl\:font-thin {
@@ -181795,7 +181795,7 @@ input[type=text]::placeholder {
   }
 
   .\32xl\:font-sans {
-    font-family: Inter, Helvetica, Arial, sans-serif !important;
+    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
   }
 
   .\32xl\:font-thin {

diff --git a/components/dashboard/tailwind.config.js b/components/dashboard/tailwind.config.js
@@ -33,7 +33,22 @@ module.exports = {
             },
         },
         fontFamily: {
-            'sans': ['Inter', 'Helvetica', 'Arial', 'sans-serif'],
+          sans: [
+            'Inter',
+            'system-ui',
+            '-apple-system',
+            'BlinkMacSystemFont',
+            'Segoe UI',
+            'Roboto',
+            'Helvetica Neue',
+            'Arial',
+            'Noto Sans',
+            'sans-serif',
+            'Apple Color Emoji',
+            'Segoe UI Emoji',
+            'Segoe UI Symbol',
+            'Noto Color Emoji',
+          ],
         },
         underlineThickness: {
             'thin': '2px',