From 853e6112bad311acc280bd24e53775cd4a4aab97 Mon Sep 17 00:00:00 2001
From: Sven Efftinge <sven.efftinge@typefox.io>
Date: Thu, 18 Mar 2021 16:53:09 +0000
Subject: [PATCH] [dashboard] addition workspaces list features

---
 components/dashboard/public/manifest.json     |   6 +-
 .../dashboard/src/components/ContextMenu.tsx  |   3 +-
 .../dashboard/src/components/DropDown.tsx     |   6 +-
 components/dashboard/src/components/Modal.tsx |  25 +-
 components/dashboard/src/index.css            |   4 +-
 .../dashboard/src/start/CreateWorkspace.tsx   |   4 +-
 components/dashboard/src/tailwind.output.css  | 524 +++++++++---------
 .../src/workspaces/WorkspaceEntry.tsx         |  12 +-
 .../dashboard/src/workspaces/Workspaces.tsx   | 134 ++++-
 .../src/workspaces/workspace-model.ts         |  49 +-
 components/dashboard/tailwind.config.js       |   2 +-
 components/gitpod-protocol/src/protocol.ts    |   6 +
 12 files changed, 463 insertions(+), 312 deletions(-)

diff --git a/components/dashboard/public/manifest.json b/components/dashboard/public/manifest.json
index b6e19c39f68843..b30a5fe54032c8 100644
--- a/components/dashboard/public/manifest.json
+++ b/components/dashboard/public/manifest.json
@@ -4,16 +4,16 @@
   "icons": [
     {
       "src": "favicon256.png",
-      "sizes": "64x64 32x32 24x24 16x16",
+      "sizes": "256x256 64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "favicon192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "favicon512.png",
       "type": "image/png",
       "sizes": "512x512"
     }
diff --git a/components/dashboard/src/components/ContextMenu.tsx b/components/dashboard/src/components/ContextMenu.tsx
index dd6ad1586c1a27..e0eecbed25f2b9 100644
--- a/components/dashboard/src/components/ContextMenu.tsx
+++ b/components/dashboard/src/components/ContextMenu.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 export interface ContextMenuProps {
     children: React.ReactChild[] | React.ReactChild;
     menuEntries: ContextMenuEntry[];
+    width?: string;
 }
 
 export interface ContextMenuEntry {
@@ -49,7 +50,7 @@ function ContextMenu(props: ContextMenuProps) {
                 {props.children}
             </div>
             {expanded?
-                <div className={`z-50 w-40 bg-white absolute py-2 right-0 flex flex-col border border-gray-200 rounded-lg space-y-2`}>
+                <div className={`z-50 ${props.width || 'w-40'} bg-white absolute py-2 right-0 flex flex-col border border-gray-200 rounded-lg space-y-2`}>
                     {enhancedEntries.map(e => {
                         const entry = <div key={e.title} className={`px-4 flex py-2 text-gray-600 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}
diff --git a/components/dashboard/src/components/DropDown.tsx b/components/dashboard/src/components/DropDown.tsx
index b01aad75a7be58..2fc8f68d0f844b 100644
--- a/components/dashboard/src/components/DropDown.tsx
+++ b/components/dashboard/src/components/DropDown.tsx
@@ -2,6 +2,8 @@ import { useState } from 'react';
 import ContextMenu from './ContextMenu';
 
 export interface DropDownProps {
+    prefix?: string;
+    contextMenuWidth?: string;
     entries: { 
         title: string,
         onClick: ()=>void
@@ -26,8 +28,8 @@ function DropDown(props: DropDownProps) {
     })
     const font = "text-gray-400 text-sm leading-1"
     return (
-        <ContextMenu menuEntries={enhancedEntries}>
-            <span className={`py-2 cursor-pointer ${font}`}>{current}<Arrow up={false}/></span>
+        <ContextMenu menuEntries={enhancedEntries} width={props.contextMenuWidth}>
+            <span className={`py-2 cursor-pointer ${font}`}>{props.prefix}{current}<Arrow up={false}/></span>
         </ContextMenu>
     );
 }
diff --git a/components/dashboard/src/components/Modal.tsx b/components/dashboard/src/components/Modal.tsx
index bdbf80c0007cb0..ef01d24f4bcb85 100644
--- a/components/dashboard/src/components/Modal.tsx
+++ b/components/dashboard/src/components/Modal.tsx
@@ -2,20 +2,29 @@ export default function Modal(props: {
     children: React.ReactChild[] | React.ReactChild,
     visible: boolean,
     closeable?: boolean,
+    className?: string,
     onClose: () => void
 }) {
     if (!props.visible) {
         return null;
     }
-    setTimeout(() => window.addEventListener('click', props.onClose, {once: true}), 0);
+    setTimeout(() => window.addEventListener('click', props.onClose, { once: true }), 0);
     return (
-        <div className="fixed top-0 -left-2 bg-black bg-opacity-70 z-50 w-screen h-screen" >
-            <div className="bg-transparent h-1/3" />
-            <div className="bg-white border rounded-xl p-6 max-w-lg mx-auto">
-                {props.closeable !== false && (
-                    <div className="float-right cursor-pointer" onClick={props.onClose}>&#10006;</div>
-                )}
-                {props.children}
+        <div className="fixed top-0 left-0 bg-black bg-opacity-70 z-50 w-screen h-screen" >
+            <div className="w-screen h-screen align-middle" style={{display: 'table-cell'}}>
+                <div className={"relative bg-white border rounded-xl p-6 max-w-lg mx-auto text-gray-600" + props.className}>
+                    {props.closeable !== false && (
+                        <div className="absolute right-9 top-8 cursor-pointer" onClick={props.onClose}>
+                            <svg version="1.1" width="14px" height="14px"
+                                viewBox="0 0 100 100">
+                                <line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" strokeWidth="10px" />
+                                <line x1="0" y1="100" x2="100" y2="0" stroke="currentColor" strokeWidth="10px" />
+                            </svg>
+                        </div>
+
+                    )}
+                    {props.children}
+                </div>
             </div>
         </div>
     );
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
index 13a24ca3bafc34..262972bbfeb4a3 100644
--- a/components/dashboard/src/index.css
+++ b/components/dashboard/src/index.css
@@ -9,7 +9,7 @@
         font-size: 48px;
     }
     h2 {
-        @apply text-base text-gray-400;
+        @apply text-base text-gray-500;
     }
     h3 {
         @apply text-2xl text-gray-900 leading-9 font-semibold;
@@ -29,7 +29,7 @@
 
 @layer components {
     button {
-        @apply cursor-pointer px-3 py-2 text-white text-sm rounded-md border-2 border-gray-900 bg-gray-500 hover:bg-gray-100;
+        @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;
     }
 
     input[type=text] {
diff --git a/components/dashboard/src/start/CreateWorkspace.tsx b/components/dashboard/src/start/CreateWorkspace.tsx
index 1be6584058cb8e..1645cf81243562 100644
--- a/components/dashboard/src/start/CreateWorkspace.tsx
+++ b/components/dashboard/src/start/CreateWorkspace.tsx
@@ -93,14 +93,14 @@ export class CreateWorkspace extends React.Component<CreateWorkspaceProps, Creat
                   <p>{w.workspace.contextURL}</p>
                 </div>
                 <div className="flex">
-                  <button className="px-3 py-1 my-auto opacity-0 group-hover:opacity-100 bg-green-600 hover:bg-green-700 border-green-800">Open</button>
+                  <button>Open</button>
                 </div>
               </a>
             )}
           </>
         </div>
         <div className="flex justify-end mt-4">
-          <button className="bg-green-600 hover:bg-green-700 border-green-800" onClick={() => this.createWorkspace(CreateWorkspaceMode.Default)}>New Workspace</button>
+          <button onClick={() => this.createWorkspace(CreateWorkspaceMode.Default)}>New Workspace</button>
         </div>
       </Modal>;
     }
diff --git a/components/dashboard/src/tailwind.output.css b/components/dashboard/src/tailwind.output.css
index 2bb662442eb57b..6d4e01ccfeff35 100644
--- a/components/dashboard/src/tailwind.output.css
+++ b/components/dashboard/src/tailwind.output.css
@@ -768,7 +768,7 @@ h2 {
   font-size: 1rem;
   line-height: 1.5rem;
   --tw-text-opacity: 1;
-  color: rgba(168, 162, 158, var(--tw-text-opacity));
+  color: rgba(120, 113, 108, var(--tw-text-opacity));
 }
 
 h3 {
@@ -851,28 +851,30 @@ p {
 
 button {
   --tw-bg-opacity: 1;
-  background-color: rgba(120, 113, 108, var(--tw-bg-opacity));
+  background-color: rgba(101, 163, 13, var(--tw-bg-opacity));
 }
 
 button:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(245, 245, 244, var(--tw-bg-opacity));
+  background-color: rgba(77, 124, 15, var(--tw-bg-opacity));
 }
 
 button {
   --tw-border-opacity: 1;
-  border-color: rgba(28, 25, 23, var(--tw-border-opacity));
+  border-color: rgba(63, 98, 18, var(--tw-border-opacity));
   border-radius: 0.375rem;
   border-width: 2px;
   cursor: pointer;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  margin-top: auto;
+  margin-bottom: auto;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  color: rgba(245, 245, 244, var(--tw-text-opacity));
 }
 
 input[type=text]:focus {
@@ -2299,7 +2301,7 @@ input[type=text]::placeholder {
 
 .divide-gitpod-kumquat-light > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1 !important;
-  border-color: rgba(255, 206, 79, var(--tw-divide-opacity)) !important;
+  border-color: rgba(255, 228, 188, var(--tw-divide-opacity)) !important;
 }
 
 .divide-gitpod-kumquat > :not([hidden]) ~ :not([hidden]) {
@@ -2960,7 +2962,7 @@ input[type=text]::placeholder {
 
 .bg-gitpod-kumquat-light {
   --tw-bg-opacity: 1 !important;
-  background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+  background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
 }
 
 .bg-gitpod-kumquat {
@@ -3437,7 +3439,7 @@ input[type=text]::placeholder {
 
 .group:hover .group-hover\:bg-gitpod-kumquat-light {
   --tw-bg-opacity: 1 !important;
-  background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+  background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
 }
 
 .group:hover .group-hover\:bg-gitpod-kumquat {
@@ -3914,7 +3916,7 @@ input[type=text]::placeholder {
 
 .focus-within\:bg-gitpod-kumquat-light:focus-within {
   --tw-bg-opacity: 1 !important;
-  background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+  background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
 }
 
 .focus-within\:bg-gitpod-kumquat:focus-within {
@@ -4391,7 +4393,7 @@ input[type=text]::placeholder {
 
 .hover\:bg-gitpod-kumquat-light:hover {
   --tw-bg-opacity: 1 !important;
-  background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+  background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
 }
 
 .hover\:bg-gitpod-kumquat:hover {
@@ -4868,7 +4870,7 @@ input[type=text]::placeholder {
 
 .focus\:bg-gitpod-kumquat-light:focus {
   --tw-bg-opacity: 1 !important;
-  background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+  background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
 }
 
 .focus\:bg-gitpod-kumquat:focus {
@@ -5382,8 +5384,8 @@ input[type=text]::placeholder {
 }
 
 .from-gitpod-kumquat-light {
-  --tw-gradient-from: #FFCE4F !important;
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+  --tw-gradient-from: #FFE4BC !important;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
 }
 
 .from-gitpod-kumquat {
@@ -5770,7 +5772,7 @@ input[type=text]::placeholder {
 }
 
 .via-gitpod-kumquat-light {
-  --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+  --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
 }
 
 .via-gitpod-kumquat {
@@ -6154,7 +6156,7 @@ input[type=text]::placeholder {
 }
 
 .to-gitpod-kumquat-light {
-  --tw-gradient-to: #FFCE4F !important;
+  --tw-gradient-to: #FFE4BC !important;
 }
 
 .to-gitpod-kumquat {
@@ -6630,8 +6632,8 @@ input[type=text]::placeholder {
 }
 
 .hover\:from-gitpod-kumquat-light:hover {
-  --tw-gradient-from: #FFCE4F !important;
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+  --tw-gradient-from: #FFE4BC !important;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
 }
 
 .hover\:from-gitpod-kumquat:hover {
@@ -7018,7 +7020,7 @@ input[type=text]::placeholder {
 }
 
 .hover\:via-gitpod-kumquat-light:hover {
-  --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+  --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
 }
 
 .hover\:via-gitpod-kumquat:hover {
@@ -7402,7 +7404,7 @@ input[type=text]::placeholder {
 }
 
 .hover\:to-gitpod-kumquat-light:hover {
-  --tw-gradient-to: #FFCE4F !important;
+  --tw-gradient-to: #FFE4BC !important;
 }
 
 .hover\:to-gitpod-kumquat:hover {
@@ -7878,8 +7880,8 @@ input[type=text]::placeholder {
 }
 
 .focus\:from-gitpod-kumquat-light:focus {
-  --tw-gradient-from: #FFCE4F !important;
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+  --tw-gradient-from: #FFE4BC !important;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
 }
 
 .focus\:from-gitpod-kumquat:focus {
@@ -8266,7 +8268,7 @@ input[type=text]::placeholder {
 }
 
 .focus\:via-gitpod-kumquat-light:focus {
-  --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+  --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
 }
 
 .focus\:via-gitpod-kumquat:focus {
@@ -8650,7 +8652,7 @@ input[type=text]::placeholder {
 }
 
 .focus\:to-gitpod-kumquat-light:focus {
-  --tw-gradient-to: #FFCE4F !important;
+  --tw-gradient-to: #FFE4BC !important;
 }
 
 .focus\:to-gitpod-kumquat:focus {
@@ -9505,7 +9507,7 @@ input[type=text]::placeholder {
 
 .border-gitpod-kumquat-light {
   --tw-border-opacity: 1 !important;
-  border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+  border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
 }
 
 .border-gitpod-kumquat {
@@ -9982,7 +9984,7 @@ input[type=text]::placeholder {
 
 .group:hover .group-hover\:border-gitpod-kumquat-light {
   --tw-border-opacity: 1 !important;
-  border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+  border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
 }
 
 .group:hover .group-hover\:border-gitpod-kumquat {
@@ -10459,7 +10461,7 @@ input[type=text]::placeholder {
 
 .focus-within\:border-gitpod-kumquat-light:focus-within {
   --tw-border-opacity: 1 !important;
-  border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+  border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
 }
 
 .focus-within\:border-gitpod-kumquat:focus-within {
@@ -10936,7 +10938,7 @@ input[type=text]::placeholder {
 
 .hover\:border-gitpod-kumquat-light:hover {
   --tw-border-opacity: 1 !important;
-  border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+  border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
 }
 
 .hover\:border-gitpod-kumquat:hover {
@@ -11413,7 +11415,7 @@ input[type=text]::placeholder {
 
 .focus\:border-gitpod-kumquat-light:focus {
   --tw-border-opacity: 1 !important;
-  border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+  border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
 }
 
 .focus\:border-gitpod-kumquat:focus {
@@ -18848,22 +18850,22 @@ input[type=text]::placeholder {
 
 .placeholder-gitpod-kumquat-light::-webkit-input-placeholder {
   --tw-placeholder-opacity: 1 !important;
-  color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+  color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
 }
 
 .placeholder-gitpod-kumquat-light:-ms-input-placeholder {
   --tw-placeholder-opacity: 1 !important;
-  color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+  color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
 }
 
 .placeholder-gitpod-kumquat-light::-ms-input-placeholder {
   --tw-placeholder-opacity: 1 !important;
-  color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+  color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
 }
 
 .placeholder-gitpod-kumquat-light::placeholder {
   --tw-placeholder-opacity: 1 !important;
-  color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+  color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
 }
 
 .placeholder-gitpod-kumquat::-webkit-input-placeholder {
@@ -20756,22 +20758,22 @@ input[type=text]::placeholder {
 
 .focus\:placeholder-gitpod-kumquat-light:focus::-webkit-input-placeholder {
   --tw-placeholder-opacity: 1 !important;
-  color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+  color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
 }
 
 .focus\:placeholder-gitpod-kumquat-light:focus:-ms-input-placeholder {
   --tw-placeholder-opacity: 1 !important;
-  color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+  color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
 }
 
 .focus\:placeholder-gitpod-kumquat-light:focus::-ms-input-placeholder {
   --tw-placeholder-opacity: 1 !important;
-  color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+  color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
 }
 
 .focus\:placeholder-gitpod-kumquat-light:focus::placeholder {
   --tw-placeholder-opacity: 1 !important;
-  color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+  color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
 }
 
 .focus\:placeholder-gitpod-kumquat:focus::-webkit-input-placeholder {
@@ -24862,7 +24864,7 @@ input[type=text]::placeholder {
 }
 
 .ring-offset-gitpod-kumquat-light {
-  --tw-ring-offset-color: #FFCE4F !important;
+  --tw-ring-offset-color: #FFE4BC !important;
 }
 
 .ring-offset-gitpod-kumquat {
@@ -25246,7 +25248,7 @@ input[type=text]::placeholder {
 }
 
 .focus-within\:ring-offset-gitpod-kumquat-light:focus-within {
-  --tw-ring-offset-color: #FFCE4F !important;
+  --tw-ring-offset-color: #FFE4BC !important;
 }
 
 .focus-within\:ring-offset-gitpod-kumquat:focus-within {
@@ -25630,7 +25632,7 @@ input[type=text]::placeholder {
 }
 
 .focus\:ring-offset-gitpod-kumquat-light:focus {
-  --tw-ring-offset-color: #FFCE4F !important;
+  --tw-ring-offset-color: #FFE4BC !important;
 }
 
 .focus\:ring-offset-gitpod-kumquat:focus {
@@ -26165,7 +26167,7 @@ input[type=text]::placeholder {
 
 .ring-gitpod-kumquat-light {
   --tw-ring-opacity: 1 !important;
-  --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+  --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
 }
 
 .ring-gitpod-kumquat {
@@ -26642,7 +26644,7 @@ input[type=text]::placeholder {
 
 .focus-within\:ring-gitpod-kumquat-light:focus-within {
   --tw-ring-opacity: 1 !important;
-  --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+  --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
 }
 
 .focus-within\:ring-gitpod-kumquat:focus-within {
@@ -27119,7 +27121,7 @@ input[type=text]::placeholder {
 
 .focus\:ring-gitpod-kumquat-light:focus {
   --tw-ring-opacity: 1 !important;
-  --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+  --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
 }
 
 .focus\:ring-gitpod-kumquat:focus {
@@ -27820,7 +27822,7 @@ input[type=text]::placeholder {
 
 .text-gitpod-kumquat-light {
   --tw-text-opacity: 1 !important;
-  color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+  color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
 }
 
 .text-gitpod-kumquat {
@@ -28297,7 +28299,7 @@ input[type=text]::placeholder {
 
 .group:hover .group-hover\:text-gitpod-kumquat-light {
   --tw-text-opacity: 1 !important;
-  color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+  color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
 }
 
 .group:hover .group-hover\:text-gitpod-kumquat {
@@ -28774,7 +28776,7 @@ input[type=text]::placeholder {
 
 .focus-within\:text-gitpod-kumquat-light:focus-within {
   --tw-text-opacity: 1 !important;
-  color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+  color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
 }
 
 .focus-within\:text-gitpod-kumquat:focus-within {
@@ -29251,7 +29253,7 @@ input[type=text]::placeholder {
 
 .hover\:text-gitpod-kumquat-light:hover {
   --tw-text-opacity: 1 !important;
-  color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+  color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
 }
 
 .hover\:text-gitpod-kumquat:hover {
@@ -29728,7 +29730,7 @@ input[type=text]::placeholder {
 
 .focus\:text-gitpod-kumquat-light:focus {
   --tw-text-opacity: 1 !important;
-  color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+  color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
 }
 
 .focus\:text-gitpod-kumquat:focus {
@@ -35145,8 +35147,8 @@ input[type=text]::placeholder {
 }
 
 .underline-gitpod-kumquat-light {
-  -webkit-text-decoration-color: #FFCE4F !important;
-          text-decoration-color: #FFCE4F !important;
+  -webkit-text-decoration-color: #FFE4BC !important;
+          text-decoration-color: #FFE4BC !important;
 }
 
 .underline-gitpod-kumquat {
@@ -36603,7 +36605,7 @@ input[type=text]::placeholder {
 
   .sm\:divide-gitpod-kumquat-light > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-divide-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-divide-opacity)) !important;
   }
 
   .sm\:divide-gitpod-kumquat > :not([hidden]) ~ :not([hidden]) {
@@ -37264,7 +37266,7 @@ input[type=text]::placeholder {
 
   .sm\:bg-gitpod-kumquat-light {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .sm\:bg-gitpod-kumquat {
@@ -37741,7 +37743,7 @@ input[type=text]::placeholder {
 
   .group:hover .sm\:group-hover\:bg-gitpod-kumquat-light {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .group:hover .sm\:group-hover\:bg-gitpod-kumquat {
@@ -38218,7 +38220,7 @@ input[type=text]::placeholder {
 
   .sm\:focus-within\:bg-gitpod-kumquat-light:focus-within {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .sm\:focus-within\:bg-gitpod-kumquat:focus-within {
@@ -38695,7 +38697,7 @@ input[type=text]::placeholder {
 
   .sm\:hover\:bg-gitpod-kumquat-light:hover {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .sm\:hover\:bg-gitpod-kumquat:hover {
@@ -39172,7 +39174,7 @@ input[type=text]::placeholder {
 
   .sm\:focus\:bg-gitpod-kumquat-light:focus {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .sm\:focus\:bg-gitpod-kumquat:focus {
@@ -39686,8 +39688,8 @@ input[type=text]::placeholder {
   }
 
   .sm\:from-gitpod-kumquat-light {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .sm\:from-gitpod-kumquat {
@@ -40074,7 +40076,7 @@ input[type=text]::placeholder {
   }
 
   .sm\:via-gitpod-kumquat-light {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .sm\:via-gitpod-kumquat {
@@ -40458,7 +40460,7 @@ input[type=text]::placeholder {
   }
 
   .sm\:to-gitpod-kumquat-light {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .sm\:to-gitpod-kumquat {
@@ -40934,8 +40936,8 @@ input[type=text]::placeholder {
   }
 
   .sm\:hover\:from-gitpod-kumquat-light:hover {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .sm\:hover\:from-gitpod-kumquat:hover {
@@ -41322,7 +41324,7 @@ input[type=text]::placeholder {
   }
 
   .sm\:hover\:via-gitpod-kumquat-light:hover {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .sm\:hover\:via-gitpod-kumquat:hover {
@@ -41706,7 +41708,7 @@ input[type=text]::placeholder {
   }
 
   .sm\:hover\:to-gitpod-kumquat-light:hover {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .sm\:hover\:to-gitpod-kumquat:hover {
@@ -42182,8 +42184,8 @@ input[type=text]::placeholder {
   }
 
   .sm\:focus\:from-gitpod-kumquat-light:focus {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .sm\:focus\:from-gitpod-kumquat:focus {
@@ -42570,7 +42572,7 @@ input[type=text]::placeholder {
   }
 
   .sm\:focus\:via-gitpod-kumquat-light:focus {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .sm\:focus\:via-gitpod-kumquat:focus {
@@ -42954,7 +42956,7 @@ input[type=text]::placeholder {
   }
 
   .sm\:focus\:to-gitpod-kumquat-light:focus {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .sm\:focus\:to-gitpod-kumquat:focus {
@@ -43809,7 +43811,7 @@ input[type=text]::placeholder {
 
   .sm\:border-gitpod-kumquat-light {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .sm\:border-gitpod-kumquat {
@@ -44286,7 +44288,7 @@ input[type=text]::placeholder {
 
   .group:hover .sm\:group-hover\:border-gitpod-kumquat-light {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .group:hover .sm\:group-hover\:border-gitpod-kumquat {
@@ -44763,7 +44765,7 @@ input[type=text]::placeholder {
 
   .sm\:focus-within\:border-gitpod-kumquat-light:focus-within {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .sm\:focus-within\:border-gitpod-kumquat:focus-within {
@@ -45240,7 +45242,7 @@ input[type=text]::placeholder {
 
   .sm\:hover\:border-gitpod-kumquat-light:hover {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .sm\:hover\:border-gitpod-kumquat:hover {
@@ -45717,7 +45719,7 @@ input[type=text]::placeholder {
 
   .sm\:focus\:border-gitpod-kumquat-light:focus {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .sm\:focus\:border-gitpod-kumquat:focus {
@@ -53152,22 +53154,22 @@ input[type=text]::placeholder {
 
   .sm\:placeholder-gitpod-kumquat-light::-webkit-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .sm\:placeholder-gitpod-kumquat-light:-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .sm\:placeholder-gitpod-kumquat-light::-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .sm\:placeholder-gitpod-kumquat-light::placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .sm\:placeholder-gitpod-kumquat::-webkit-input-placeholder {
@@ -55060,22 +55062,22 @@ input[type=text]::placeholder {
 
   .sm\:focus\:placeholder-gitpod-kumquat-light:focus::-webkit-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .sm\:focus\:placeholder-gitpod-kumquat-light:focus:-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .sm\:focus\:placeholder-gitpod-kumquat-light:focus::-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .sm\:focus\:placeholder-gitpod-kumquat-light:focus::placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .sm\:focus\:placeholder-gitpod-kumquat:focus::-webkit-input-placeholder {
@@ -59153,7 +59155,7 @@ input[type=text]::placeholder {
   }
 
   .sm\:ring-offset-gitpod-kumquat-light {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .sm\:ring-offset-gitpod-kumquat {
@@ -59537,7 +59539,7 @@ input[type=text]::placeholder {
   }
 
   .sm\:focus-within\:ring-offset-gitpod-kumquat-light:focus-within {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .sm\:focus-within\:ring-offset-gitpod-kumquat:focus-within {
@@ -59921,7 +59923,7 @@ input[type=text]::placeholder {
   }
 
   .sm\:focus\:ring-offset-gitpod-kumquat-light:focus {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .sm\:focus\:ring-offset-gitpod-kumquat:focus {
@@ -60456,7 +60458,7 @@ input[type=text]::placeholder {
 
   .sm\:ring-gitpod-kumquat-light {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .sm\:ring-gitpod-kumquat {
@@ -60933,7 +60935,7 @@ input[type=text]::placeholder {
 
   .sm\:focus-within\:ring-gitpod-kumquat-light:focus-within {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .sm\:focus-within\:ring-gitpod-kumquat:focus-within {
@@ -61410,7 +61412,7 @@ input[type=text]::placeholder {
 
   .sm\:focus\:ring-gitpod-kumquat-light:focus {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .sm\:focus\:ring-gitpod-kumquat:focus {
@@ -62111,7 +62113,7 @@ input[type=text]::placeholder {
 
   .sm\:text-gitpod-kumquat-light {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .sm\:text-gitpod-kumquat {
@@ -62588,7 +62590,7 @@ input[type=text]::placeholder {
 
   .group:hover .sm\:group-hover\:text-gitpod-kumquat-light {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .group:hover .sm\:group-hover\:text-gitpod-kumquat {
@@ -63065,7 +63067,7 @@ input[type=text]::placeholder {
 
   .sm\:focus-within\:text-gitpod-kumquat-light:focus-within {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .sm\:focus-within\:text-gitpod-kumquat:focus-within {
@@ -63542,7 +63544,7 @@ input[type=text]::placeholder {
 
   .sm\:hover\:text-gitpod-kumquat-light:hover {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .sm\:hover\:text-gitpod-kumquat:hover {
@@ -64019,7 +64021,7 @@ input[type=text]::placeholder {
 
   .sm\:focus\:text-gitpod-kumquat-light:focus {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .sm\:focus\:text-gitpod-kumquat:focus {
@@ -70308,7 +70310,7 @@ input[type=text]::placeholder {
 
   .md\:divide-gitpod-kumquat-light > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-divide-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-divide-opacity)) !important;
   }
 
   .md\:divide-gitpod-kumquat > :not([hidden]) ~ :not([hidden]) {
@@ -70969,7 +70971,7 @@ input[type=text]::placeholder {
 
   .md\:bg-gitpod-kumquat-light {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .md\:bg-gitpod-kumquat {
@@ -71446,7 +71448,7 @@ input[type=text]::placeholder {
 
   .group:hover .md\:group-hover\:bg-gitpod-kumquat-light {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .group:hover .md\:group-hover\:bg-gitpod-kumquat {
@@ -71923,7 +71925,7 @@ input[type=text]::placeholder {
 
   .md\:focus-within\:bg-gitpod-kumquat-light:focus-within {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .md\:focus-within\:bg-gitpod-kumquat:focus-within {
@@ -72400,7 +72402,7 @@ input[type=text]::placeholder {
 
   .md\:hover\:bg-gitpod-kumquat-light:hover {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .md\:hover\:bg-gitpod-kumquat:hover {
@@ -72877,7 +72879,7 @@ input[type=text]::placeholder {
 
   .md\:focus\:bg-gitpod-kumquat-light:focus {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .md\:focus\:bg-gitpod-kumquat:focus {
@@ -73391,8 +73393,8 @@ input[type=text]::placeholder {
   }
 
   .md\:from-gitpod-kumquat-light {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .md\:from-gitpod-kumquat {
@@ -73779,7 +73781,7 @@ input[type=text]::placeholder {
   }
 
   .md\:via-gitpod-kumquat-light {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .md\:via-gitpod-kumquat {
@@ -74163,7 +74165,7 @@ input[type=text]::placeholder {
   }
 
   .md\:to-gitpod-kumquat-light {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .md\:to-gitpod-kumquat {
@@ -74639,8 +74641,8 @@ input[type=text]::placeholder {
   }
 
   .md\:hover\:from-gitpod-kumquat-light:hover {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .md\:hover\:from-gitpod-kumquat:hover {
@@ -75027,7 +75029,7 @@ input[type=text]::placeholder {
   }
 
   .md\:hover\:via-gitpod-kumquat-light:hover {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .md\:hover\:via-gitpod-kumquat:hover {
@@ -75411,7 +75413,7 @@ input[type=text]::placeholder {
   }
 
   .md\:hover\:to-gitpod-kumquat-light:hover {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .md\:hover\:to-gitpod-kumquat:hover {
@@ -75887,8 +75889,8 @@ input[type=text]::placeholder {
   }
 
   .md\:focus\:from-gitpod-kumquat-light:focus {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .md\:focus\:from-gitpod-kumquat:focus {
@@ -76275,7 +76277,7 @@ input[type=text]::placeholder {
   }
 
   .md\:focus\:via-gitpod-kumquat-light:focus {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .md\:focus\:via-gitpod-kumquat:focus {
@@ -76659,7 +76661,7 @@ input[type=text]::placeholder {
   }
 
   .md\:focus\:to-gitpod-kumquat-light:focus {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .md\:focus\:to-gitpod-kumquat:focus {
@@ -77514,7 +77516,7 @@ input[type=text]::placeholder {
 
   .md\:border-gitpod-kumquat-light {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .md\:border-gitpod-kumquat {
@@ -77991,7 +77993,7 @@ input[type=text]::placeholder {
 
   .group:hover .md\:group-hover\:border-gitpod-kumquat-light {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .group:hover .md\:group-hover\:border-gitpod-kumquat {
@@ -78468,7 +78470,7 @@ input[type=text]::placeholder {
 
   .md\:focus-within\:border-gitpod-kumquat-light:focus-within {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .md\:focus-within\:border-gitpod-kumquat:focus-within {
@@ -78945,7 +78947,7 @@ input[type=text]::placeholder {
 
   .md\:hover\:border-gitpod-kumquat-light:hover {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .md\:hover\:border-gitpod-kumquat:hover {
@@ -79422,7 +79424,7 @@ input[type=text]::placeholder {
 
   .md\:focus\:border-gitpod-kumquat-light:focus {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .md\:focus\:border-gitpod-kumquat:focus {
@@ -86857,22 +86859,22 @@ input[type=text]::placeholder {
 
   .md\:placeholder-gitpod-kumquat-light::-webkit-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .md\:placeholder-gitpod-kumquat-light:-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .md\:placeholder-gitpod-kumquat-light::-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .md\:placeholder-gitpod-kumquat-light::placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .md\:placeholder-gitpod-kumquat::-webkit-input-placeholder {
@@ -88765,22 +88767,22 @@ input[type=text]::placeholder {
 
   .md\:focus\:placeholder-gitpod-kumquat-light:focus::-webkit-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .md\:focus\:placeholder-gitpod-kumquat-light:focus:-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .md\:focus\:placeholder-gitpod-kumquat-light:focus::-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .md\:focus\:placeholder-gitpod-kumquat-light:focus::placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .md\:focus\:placeholder-gitpod-kumquat:focus::-webkit-input-placeholder {
@@ -92858,7 +92860,7 @@ input[type=text]::placeholder {
   }
 
   .md\:ring-offset-gitpod-kumquat-light {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .md\:ring-offset-gitpod-kumquat {
@@ -93242,7 +93244,7 @@ input[type=text]::placeholder {
   }
 
   .md\:focus-within\:ring-offset-gitpod-kumquat-light:focus-within {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .md\:focus-within\:ring-offset-gitpod-kumquat:focus-within {
@@ -93626,7 +93628,7 @@ input[type=text]::placeholder {
   }
 
   .md\:focus\:ring-offset-gitpod-kumquat-light:focus {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .md\:focus\:ring-offset-gitpod-kumquat:focus {
@@ -94161,7 +94163,7 @@ input[type=text]::placeholder {
 
   .md\:ring-gitpod-kumquat-light {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .md\:ring-gitpod-kumquat {
@@ -94638,7 +94640,7 @@ input[type=text]::placeholder {
 
   .md\:focus-within\:ring-gitpod-kumquat-light:focus-within {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .md\:focus-within\:ring-gitpod-kumquat:focus-within {
@@ -95115,7 +95117,7 @@ input[type=text]::placeholder {
 
   .md\:focus\:ring-gitpod-kumquat-light:focus {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .md\:focus\:ring-gitpod-kumquat:focus {
@@ -95816,7 +95818,7 @@ input[type=text]::placeholder {
 
   .md\:text-gitpod-kumquat-light {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .md\:text-gitpod-kumquat {
@@ -96293,7 +96295,7 @@ input[type=text]::placeholder {
 
   .group:hover .md\:group-hover\:text-gitpod-kumquat-light {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .group:hover .md\:group-hover\:text-gitpod-kumquat {
@@ -96770,7 +96772,7 @@ input[type=text]::placeholder {
 
   .md\:focus-within\:text-gitpod-kumquat-light:focus-within {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .md\:focus-within\:text-gitpod-kumquat:focus-within {
@@ -97247,7 +97249,7 @@ input[type=text]::placeholder {
 
   .md\:hover\:text-gitpod-kumquat-light:hover {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .md\:hover\:text-gitpod-kumquat:hover {
@@ -97724,7 +97726,7 @@ input[type=text]::placeholder {
 
   .md\:focus\:text-gitpod-kumquat-light:focus {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .md\:focus\:text-gitpod-kumquat:focus {
@@ -104013,7 +104015,7 @@ input[type=text]::placeholder {
 
   .lg\:divide-gitpod-kumquat-light > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-divide-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-divide-opacity)) !important;
   }
 
   .lg\:divide-gitpod-kumquat > :not([hidden]) ~ :not([hidden]) {
@@ -104674,7 +104676,7 @@ input[type=text]::placeholder {
 
   .lg\:bg-gitpod-kumquat-light {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .lg\:bg-gitpod-kumquat {
@@ -105151,7 +105153,7 @@ input[type=text]::placeholder {
 
   .group:hover .lg\:group-hover\:bg-gitpod-kumquat-light {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .group:hover .lg\:group-hover\:bg-gitpod-kumquat {
@@ -105628,7 +105630,7 @@ input[type=text]::placeholder {
 
   .lg\:focus-within\:bg-gitpod-kumquat-light:focus-within {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .lg\:focus-within\:bg-gitpod-kumquat:focus-within {
@@ -106105,7 +106107,7 @@ input[type=text]::placeholder {
 
   .lg\:hover\:bg-gitpod-kumquat-light:hover {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .lg\:hover\:bg-gitpod-kumquat:hover {
@@ -106582,7 +106584,7 @@ input[type=text]::placeholder {
 
   .lg\:focus\:bg-gitpod-kumquat-light:focus {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .lg\:focus\:bg-gitpod-kumquat:focus {
@@ -107096,8 +107098,8 @@ input[type=text]::placeholder {
   }
 
   .lg\:from-gitpod-kumquat-light {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .lg\:from-gitpod-kumquat {
@@ -107484,7 +107486,7 @@ input[type=text]::placeholder {
   }
 
   .lg\:via-gitpod-kumquat-light {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .lg\:via-gitpod-kumquat {
@@ -107868,7 +107870,7 @@ input[type=text]::placeholder {
   }
 
   .lg\:to-gitpod-kumquat-light {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .lg\:to-gitpod-kumquat {
@@ -108344,8 +108346,8 @@ input[type=text]::placeholder {
   }
 
   .lg\:hover\:from-gitpod-kumquat-light:hover {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .lg\:hover\:from-gitpod-kumquat:hover {
@@ -108732,7 +108734,7 @@ input[type=text]::placeholder {
   }
 
   .lg\:hover\:via-gitpod-kumquat-light:hover {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .lg\:hover\:via-gitpod-kumquat:hover {
@@ -109116,7 +109118,7 @@ input[type=text]::placeholder {
   }
 
   .lg\:hover\:to-gitpod-kumquat-light:hover {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .lg\:hover\:to-gitpod-kumquat:hover {
@@ -109592,8 +109594,8 @@ input[type=text]::placeholder {
   }
 
   .lg\:focus\:from-gitpod-kumquat-light:focus {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .lg\:focus\:from-gitpod-kumquat:focus {
@@ -109980,7 +109982,7 @@ input[type=text]::placeholder {
   }
 
   .lg\:focus\:via-gitpod-kumquat-light:focus {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .lg\:focus\:via-gitpod-kumquat:focus {
@@ -110364,7 +110366,7 @@ input[type=text]::placeholder {
   }
 
   .lg\:focus\:to-gitpod-kumquat-light:focus {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .lg\:focus\:to-gitpod-kumquat:focus {
@@ -111219,7 +111221,7 @@ input[type=text]::placeholder {
 
   .lg\:border-gitpod-kumquat-light {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .lg\:border-gitpod-kumquat {
@@ -111696,7 +111698,7 @@ input[type=text]::placeholder {
 
   .group:hover .lg\:group-hover\:border-gitpod-kumquat-light {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .group:hover .lg\:group-hover\:border-gitpod-kumquat {
@@ -112173,7 +112175,7 @@ input[type=text]::placeholder {
 
   .lg\:focus-within\:border-gitpod-kumquat-light:focus-within {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .lg\:focus-within\:border-gitpod-kumquat:focus-within {
@@ -112650,7 +112652,7 @@ input[type=text]::placeholder {
 
   .lg\:hover\:border-gitpod-kumquat-light:hover {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .lg\:hover\:border-gitpod-kumquat:hover {
@@ -113127,7 +113129,7 @@ input[type=text]::placeholder {
 
   .lg\:focus\:border-gitpod-kumquat-light:focus {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .lg\:focus\:border-gitpod-kumquat:focus {
@@ -120562,22 +120564,22 @@ input[type=text]::placeholder {
 
   .lg\:placeholder-gitpod-kumquat-light::-webkit-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .lg\:placeholder-gitpod-kumquat-light:-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .lg\:placeholder-gitpod-kumquat-light::-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .lg\:placeholder-gitpod-kumquat-light::placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .lg\:placeholder-gitpod-kumquat::-webkit-input-placeholder {
@@ -122470,22 +122472,22 @@ input[type=text]::placeholder {
 
   .lg\:focus\:placeholder-gitpod-kumquat-light:focus::-webkit-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .lg\:focus\:placeholder-gitpod-kumquat-light:focus:-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .lg\:focus\:placeholder-gitpod-kumquat-light:focus::-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .lg\:focus\:placeholder-gitpod-kumquat-light:focus::placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .lg\:focus\:placeholder-gitpod-kumquat:focus::-webkit-input-placeholder {
@@ -126563,7 +126565,7 @@ input[type=text]::placeholder {
   }
 
   .lg\:ring-offset-gitpod-kumquat-light {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .lg\:ring-offset-gitpod-kumquat {
@@ -126947,7 +126949,7 @@ input[type=text]::placeholder {
   }
 
   .lg\:focus-within\:ring-offset-gitpod-kumquat-light:focus-within {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .lg\:focus-within\:ring-offset-gitpod-kumquat:focus-within {
@@ -127331,7 +127333,7 @@ input[type=text]::placeholder {
   }
 
   .lg\:focus\:ring-offset-gitpod-kumquat-light:focus {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .lg\:focus\:ring-offset-gitpod-kumquat:focus {
@@ -127866,7 +127868,7 @@ input[type=text]::placeholder {
 
   .lg\:ring-gitpod-kumquat-light {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .lg\:ring-gitpod-kumquat {
@@ -128343,7 +128345,7 @@ input[type=text]::placeholder {
 
   .lg\:focus-within\:ring-gitpod-kumquat-light:focus-within {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .lg\:focus-within\:ring-gitpod-kumquat:focus-within {
@@ -128820,7 +128822,7 @@ input[type=text]::placeholder {
 
   .lg\:focus\:ring-gitpod-kumquat-light:focus {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .lg\:focus\:ring-gitpod-kumquat:focus {
@@ -129521,7 +129523,7 @@ input[type=text]::placeholder {
 
   .lg\:text-gitpod-kumquat-light {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .lg\:text-gitpod-kumquat {
@@ -129998,7 +130000,7 @@ input[type=text]::placeholder {
 
   .group:hover .lg\:group-hover\:text-gitpod-kumquat-light {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .group:hover .lg\:group-hover\:text-gitpod-kumquat {
@@ -130475,7 +130477,7 @@ input[type=text]::placeholder {
 
   .lg\:focus-within\:text-gitpod-kumquat-light:focus-within {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .lg\:focus-within\:text-gitpod-kumquat:focus-within {
@@ -130952,7 +130954,7 @@ input[type=text]::placeholder {
 
   .lg\:hover\:text-gitpod-kumquat-light:hover {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .lg\:hover\:text-gitpod-kumquat:hover {
@@ -131429,7 +131431,7 @@ input[type=text]::placeholder {
 
   .lg\:focus\:text-gitpod-kumquat-light:focus {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .lg\:focus\:text-gitpod-kumquat:focus {
@@ -137718,7 +137720,7 @@ input[type=text]::placeholder {
 
   .xl\:divide-gitpod-kumquat-light > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-divide-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-divide-opacity)) !important;
   }
 
   .xl\:divide-gitpod-kumquat > :not([hidden]) ~ :not([hidden]) {
@@ -138379,7 +138381,7 @@ input[type=text]::placeholder {
 
   .xl\:bg-gitpod-kumquat-light {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .xl\:bg-gitpod-kumquat {
@@ -138856,7 +138858,7 @@ input[type=text]::placeholder {
 
   .group:hover .xl\:group-hover\:bg-gitpod-kumquat-light {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .group:hover .xl\:group-hover\:bg-gitpod-kumquat {
@@ -139333,7 +139335,7 @@ input[type=text]::placeholder {
 
   .xl\:focus-within\:bg-gitpod-kumquat-light:focus-within {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .xl\:focus-within\:bg-gitpod-kumquat:focus-within {
@@ -139810,7 +139812,7 @@ input[type=text]::placeholder {
 
   .xl\:hover\:bg-gitpod-kumquat-light:hover {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .xl\:hover\:bg-gitpod-kumquat:hover {
@@ -140287,7 +140289,7 @@ input[type=text]::placeholder {
 
   .xl\:focus\:bg-gitpod-kumquat-light:focus {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .xl\:focus\:bg-gitpod-kumquat:focus {
@@ -140801,8 +140803,8 @@ input[type=text]::placeholder {
   }
 
   .xl\:from-gitpod-kumquat-light {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .xl\:from-gitpod-kumquat {
@@ -141189,7 +141191,7 @@ input[type=text]::placeholder {
   }
 
   .xl\:via-gitpod-kumquat-light {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .xl\:via-gitpod-kumquat {
@@ -141573,7 +141575,7 @@ input[type=text]::placeholder {
   }
 
   .xl\:to-gitpod-kumquat-light {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .xl\:to-gitpod-kumquat {
@@ -142049,8 +142051,8 @@ input[type=text]::placeholder {
   }
 
   .xl\:hover\:from-gitpod-kumquat-light:hover {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .xl\:hover\:from-gitpod-kumquat:hover {
@@ -142437,7 +142439,7 @@ input[type=text]::placeholder {
   }
 
   .xl\:hover\:via-gitpod-kumquat-light:hover {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .xl\:hover\:via-gitpod-kumquat:hover {
@@ -142821,7 +142823,7 @@ input[type=text]::placeholder {
   }
 
   .xl\:hover\:to-gitpod-kumquat-light:hover {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .xl\:hover\:to-gitpod-kumquat:hover {
@@ -143297,8 +143299,8 @@ input[type=text]::placeholder {
   }
 
   .xl\:focus\:from-gitpod-kumquat-light:focus {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .xl\:focus\:from-gitpod-kumquat:focus {
@@ -143685,7 +143687,7 @@ input[type=text]::placeholder {
   }
 
   .xl\:focus\:via-gitpod-kumquat-light:focus {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .xl\:focus\:via-gitpod-kumquat:focus {
@@ -144069,7 +144071,7 @@ input[type=text]::placeholder {
   }
 
   .xl\:focus\:to-gitpod-kumquat-light:focus {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .xl\:focus\:to-gitpod-kumquat:focus {
@@ -144924,7 +144926,7 @@ input[type=text]::placeholder {
 
   .xl\:border-gitpod-kumquat-light {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .xl\:border-gitpod-kumquat {
@@ -145401,7 +145403,7 @@ input[type=text]::placeholder {
 
   .group:hover .xl\:group-hover\:border-gitpod-kumquat-light {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .group:hover .xl\:group-hover\:border-gitpod-kumquat {
@@ -145878,7 +145880,7 @@ input[type=text]::placeholder {
 
   .xl\:focus-within\:border-gitpod-kumquat-light:focus-within {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .xl\:focus-within\:border-gitpod-kumquat:focus-within {
@@ -146355,7 +146357,7 @@ input[type=text]::placeholder {
 
   .xl\:hover\:border-gitpod-kumquat-light:hover {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .xl\:hover\:border-gitpod-kumquat:hover {
@@ -146832,7 +146834,7 @@ input[type=text]::placeholder {
 
   .xl\:focus\:border-gitpod-kumquat-light:focus {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .xl\:focus\:border-gitpod-kumquat:focus {
@@ -154267,22 +154269,22 @@ input[type=text]::placeholder {
 
   .xl\:placeholder-gitpod-kumquat-light::-webkit-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .xl\:placeholder-gitpod-kumquat-light:-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .xl\:placeholder-gitpod-kumquat-light::-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .xl\:placeholder-gitpod-kumquat-light::placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .xl\:placeholder-gitpod-kumquat::-webkit-input-placeholder {
@@ -156175,22 +156177,22 @@ input[type=text]::placeholder {
 
   .xl\:focus\:placeholder-gitpod-kumquat-light:focus::-webkit-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .xl\:focus\:placeholder-gitpod-kumquat-light:focus:-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .xl\:focus\:placeholder-gitpod-kumquat-light:focus::-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .xl\:focus\:placeholder-gitpod-kumquat-light:focus::placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .xl\:focus\:placeholder-gitpod-kumquat:focus::-webkit-input-placeholder {
@@ -160268,7 +160270,7 @@ input[type=text]::placeholder {
   }
 
   .xl\:ring-offset-gitpod-kumquat-light {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .xl\:ring-offset-gitpod-kumquat {
@@ -160652,7 +160654,7 @@ input[type=text]::placeholder {
   }
 
   .xl\:focus-within\:ring-offset-gitpod-kumquat-light:focus-within {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .xl\:focus-within\:ring-offset-gitpod-kumquat:focus-within {
@@ -161036,7 +161038,7 @@ input[type=text]::placeholder {
   }
 
   .xl\:focus\:ring-offset-gitpod-kumquat-light:focus {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .xl\:focus\:ring-offset-gitpod-kumquat:focus {
@@ -161571,7 +161573,7 @@ input[type=text]::placeholder {
 
   .xl\:ring-gitpod-kumquat-light {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .xl\:ring-gitpod-kumquat {
@@ -162048,7 +162050,7 @@ input[type=text]::placeholder {
 
   .xl\:focus-within\:ring-gitpod-kumquat-light:focus-within {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .xl\:focus-within\:ring-gitpod-kumquat:focus-within {
@@ -162525,7 +162527,7 @@ input[type=text]::placeholder {
 
   .xl\:focus\:ring-gitpod-kumquat-light:focus {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .xl\:focus\:ring-gitpod-kumquat:focus {
@@ -163226,7 +163228,7 @@ input[type=text]::placeholder {
 
   .xl\:text-gitpod-kumquat-light {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .xl\:text-gitpod-kumquat {
@@ -163703,7 +163705,7 @@ input[type=text]::placeholder {
 
   .group:hover .xl\:group-hover\:text-gitpod-kumquat-light {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .group:hover .xl\:group-hover\:text-gitpod-kumquat {
@@ -164180,7 +164182,7 @@ input[type=text]::placeholder {
 
   .xl\:focus-within\:text-gitpod-kumquat-light:focus-within {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .xl\:focus-within\:text-gitpod-kumquat:focus-within {
@@ -164657,7 +164659,7 @@ input[type=text]::placeholder {
 
   .xl\:hover\:text-gitpod-kumquat-light:hover {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .xl\:hover\:text-gitpod-kumquat:hover {
@@ -165134,7 +165136,7 @@ input[type=text]::placeholder {
 
   .xl\:focus\:text-gitpod-kumquat-light:focus {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .xl\:focus\:text-gitpod-kumquat:focus {
@@ -171423,7 +171425,7 @@ input[type=text]::placeholder {
 
   .\32xl\:divide-gitpod-kumquat-light > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-divide-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-divide-opacity)) !important;
   }
 
   .\32xl\:divide-gitpod-kumquat > :not([hidden]) ~ :not([hidden]) {
@@ -172084,7 +172086,7 @@ input[type=text]::placeholder {
 
   .\32xl\:bg-gitpod-kumquat-light {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .\32xl\:bg-gitpod-kumquat {
@@ -172561,7 +172563,7 @@ input[type=text]::placeholder {
 
   .group:hover .\32xl\:group-hover\:bg-gitpod-kumquat-light {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .group:hover .\32xl\:group-hover\:bg-gitpod-kumquat {
@@ -173038,7 +173040,7 @@ input[type=text]::placeholder {
 
   .\32xl\:focus-within\:bg-gitpod-kumquat-light:focus-within {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .\32xl\:focus-within\:bg-gitpod-kumquat:focus-within {
@@ -173515,7 +173517,7 @@ input[type=text]::placeholder {
 
   .\32xl\:hover\:bg-gitpod-kumquat-light:hover {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .\32xl\:hover\:bg-gitpod-kumquat:hover {
@@ -173992,7 +173994,7 @@ input[type=text]::placeholder {
 
   .\32xl\:focus\:bg-gitpod-kumquat-light:focus {
     --tw-bg-opacity: 1 !important;
-    background-color: rgba(255, 206, 79, var(--tw-bg-opacity)) !important;
+    background-color: rgba(255, 228, 188, var(--tw-bg-opacity)) !important;
   }
 
   .\32xl\:focus\:bg-gitpod-kumquat:focus {
@@ -174506,8 +174508,8 @@ input[type=text]::placeholder {
   }
 
   .\32xl\:from-gitpod-kumquat-light {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .\32xl\:from-gitpod-kumquat {
@@ -174894,7 +174896,7 @@ input[type=text]::placeholder {
   }
 
   .\32xl\:via-gitpod-kumquat-light {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .\32xl\:via-gitpod-kumquat {
@@ -175278,7 +175280,7 @@ input[type=text]::placeholder {
   }
 
   .\32xl\:to-gitpod-kumquat-light {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .\32xl\:to-gitpod-kumquat {
@@ -175754,8 +175756,8 @@ input[type=text]::placeholder {
   }
 
   .\32xl\:hover\:from-gitpod-kumquat-light:hover {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .\32xl\:hover\:from-gitpod-kumquat:hover {
@@ -176142,7 +176144,7 @@ input[type=text]::placeholder {
   }
 
   .\32xl\:hover\:via-gitpod-kumquat-light:hover {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .\32xl\:hover\:via-gitpod-kumquat:hover {
@@ -176526,7 +176528,7 @@ input[type=text]::placeholder {
   }
 
   .\32xl\:hover\:to-gitpod-kumquat-light:hover {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .\32xl\:hover\:to-gitpod-kumquat:hover {
@@ -177002,8 +177004,8 @@ input[type=text]::placeholder {
   }
 
   .\32xl\:focus\:from-gitpod-kumquat-light:focus {
-    --tw-gradient-from: #FFCE4F !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-from: #FFE4BC !important;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .\32xl\:focus\:from-gitpod-kumquat:focus {
@@ -177390,7 +177392,7 @@ input[type=text]::placeholder {
   }
 
   .\32xl\:focus\:via-gitpod-kumquat-light:focus {
-    --tw-gradient-stops: var(--tw-gradient-from), #FFCE4F, var(--tw-gradient-to, rgba(255, 206, 79, 0)) !important;
+    --tw-gradient-stops: var(--tw-gradient-from), #FFE4BC, var(--tw-gradient-to, rgba(255, 228, 188, 0)) !important;
   }
 
   .\32xl\:focus\:via-gitpod-kumquat:focus {
@@ -177774,7 +177776,7 @@ input[type=text]::placeholder {
   }
 
   .\32xl\:focus\:to-gitpod-kumquat-light:focus {
-    --tw-gradient-to: #FFCE4F !important;
+    --tw-gradient-to: #FFE4BC !important;
   }
 
   .\32xl\:focus\:to-gitpod-kumquat:focus {
@@ -178629,7 +178631,7 @@ input[type=text]::placeholder {
 
   .\32xl\:border-gitpod-kumquat-light {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .\32xl\:border-gitpod-kumquat {
@@ -179106,7 +179108,7 @@ input[type=text]::placeholder {
 
   .group:hover .\32xl\:group-hover\:border-gitpod-kumquat-light {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .group:hover .\32xl\:group-hover\:border-gitpod-kumquat {
@@ -179583,7 +179585,7 @@ input[type=text]::placeholder {
 
   .\32xl\:focus-within\:border-gitpod-kumquat-light:focus-within {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .\32xl\:focus-within\:border-gitpod-kumquat:focus-within {
@@ -180060,7 +180062,7 @@ input[type=text]::placeholder {
 
   .\32xl\:hover\:border-gitpod-kumquat-light:hover {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .\32xl\:hover\:border-gitpod-kumquat:hover {
@@ -180537,7 +180539,7 @@ input[type=text]::placeholder {
 
   .\32xl\:focus\:border-gitpod-kumquat-light:focus {
     --tw-border-opacity: 1 !important;
-    border-color: rgba(255, 206, 79, var(--tw-border-opacity)) !important;
+    border-color: rgba(255, 228, 188, var(--tw-border-opacity)) !important;
   }
 
   .\32xl\:focus\:border-gitpod-kumquat:focus {
@@ -187972,22 +187974,22 @@ input[type=text]::placeholder {
 
   .\32xl\:placeholder-gitpod-kumquat-light::-webkit-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .\32xl\:placeholder-gitpod-kumquat-light:-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .\32xl\:placeholder-gitpod-kumquat-light::-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .\32xl\:placeholder-gitpod-kumquat-light::placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .\32xl\:placeholder-gitpod-kumquat::-webkit-input-placeholder {
@@ -189880,22 +189882,22 @@ input[type=text]::placeholder {
 
   .\32xl\:focus\:placeholder-gitpod-kumquat-light:focus::-webkit-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .\32xl\:focus\:placeholder-gitpod-kumquat-light:focus:-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .\32xl\:focus\:placeholder-gitpod-kumquat-light:focus::-ms-input-placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .\32xl\:focus\:placeholder-gitpod-kumquat-light:focus::placeholder {
     --tw-placeholder-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-placeholder-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-placeholder-opacity)) !important;
   }
 
   .\32xl\:focus\:placeholder-gitpod-kumquat:focus::-webkit-input-placeholder {
@@ -193973,7 +193975,7 @@ input[type=text]::placeholder {
   }
 
   .\32xl\:ring-offset-gitpod-kumquat-light {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .\32xl\:ring-offset-gitpod-kumquat {
@@ -194357,7 +194359,7 @@ input[type=text]::placeholder {
   }
 
   .\32xl\:focus-within\:ring-offset-gitpod-kumquat-light:focus-within {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .\32xl\:focus-within\:ring-offset-gitpod-kumquat:focus-within {
@@ -194741,7 +194743,7 @@ input[type=text]::placeholder {
   }
 
   .\32xl\:focus\:ring-offset-gitpod-kumquat-light:focus {
-    --tw-ring-offset-color: #FFCE4F !important;
+    --tw-ring-offset-color: #FFE4BC !important;
   }
 
   .\32xl\:focus\:ring-offset-gitpod-kumquat:focus {
@@ -195276,7 +195278,7 @@ input[type=text]::placeholder {
 
   .\32xl\:ring-gitpod-kumquat-light {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .\32xl\:ring-gitpod-kumquat {
@@ -195753,7 +195755,7 @@ input[type=text]::placeholder {
 
   .\32xl\:focus-within\:ring-gitpod-kumquat-light:focus-within {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .\32xl\:focus-within\:ring-gitpod-kumquat:focus-within {
@@ -196230,7 +196232,7 @@ input[type=text]::placeholder {
 
   .\32xl\:focus\:ring-gitpod-kumquat-light:focus {
     --tw-ring-opacity: 1 !important;
-    --tw-ring-color: rgba(255, 206, 79, var(--tw-ring-opacity)) !important;
+    --tw-ring-color: rgba(255, 228, 188, var(--tw-ring-opacity)) !important;
   }
 
   .\32xl\:focus\:ring-gitpod-kumquat:focus {
@@ -196931,7 +196933,7 @@ input[type=text]::placeholder {
 
   .\32xl\:text-gitpod-kumquat-light {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .\32xl\:text-gitpod-kumquat {
@@ -197408,7 +197410,7 @@ input[type=text]::placeholder {
 
   .group:hover .\32xl\:group-hover\:text-gitpod-kumquat-light {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .group:hover .\32xl\:group-hover\:text-gitpod-kumquat {
@@ -197885,7 +197887,7 @@ input[type=text]::placeholder {
 
   .\32xl\:focus-within\:text-gitpod-kumquat-light:focus-within {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .\32xl\:focus-within\:text-gitpod-kumquat:focus-within {
@@ -198362,7 +198364,7 @@ input[type=text]::placeholder {
 
   .\32xl\:hover\:text-gitpod-kumquat-light:hover {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .\32xl\:hover\:text-gitpod-kumquat:hover {
@@ -198839,7 +198841,7 @@ input[type=text]::placeholder {
 
   .\32xl\:focus\:text-gitpod-kumquat-light:focus {
     --tw-text-opacity: 1 !important;
-    color: rgba(255, 206, 79, var(--tw-text-opacity)) !important;
+    color: rgba(255, 228, 188, var(--tw-text-opacity)) !important;
   }
 
   .\32xl\:focus\:text-gitpod-kumquat:focus {
diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
index e988d654ded8c3..521f6bce3862db 100644
--- a/components/dashboard/src/workspaces/WorkspaceEntry.tsx
+++ b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
@@ -6,8 +6,10 @@ import moment from 'moment';
 import { getGitpodService } from '../service/service';
 import Modal from '../components/Modal';
 import { MouseEvent, useState } from 'react';
+import { WorkspaceModel } from './workspace-model';
 
-export function WorkspaceEntry(desc: WorkspaceInfo) {
+
+export function WorkspaceEntry({desc, model}: {desc: WorkspaceInfo, model: WorkspaceModel}) {
     const [isModalVisible, setModalVisible] = useState(false);
     const [isChangesModalVisible, setChangesModalVisible] = useState(false);
     const state: WorkspaceInstancePhase = desc.latestInstance?.status?.phase || 'stopped';
@@ -60,7 +62,7 @@ export function WorkspaceEntry(desc: WorkspaceInfo) {
             title: 'Share',
             active: !!ws.shareable,
             onClick: () => {
-                getGitpodService().server.controlAdmission(ws.id, ws.shareable ? "owner" : "everyone");
+                model.toggleShared(ws.id);
             }
         },
         {
@@ -68,7 +70,7 @@ export function WorkspaceEntry(desc: WorkspaceInfo) {
             active: !!ws.pinned,
             separator: true,
             onClick: () => {
-                getGitpodService().server.updateWorkspaceUserPin(ws.id, 'toggle')
+                model.togglePinned(ws.id);
             }
         },
         {
@@ -107,7 +109,7 @@ export function WorkspaceEntry(desc: WorkspaceInfo) {
                 <div className="font-medium text-gray-500 truncate">{currentBranch}</div>
                 {
                     numberOfChanges > 0 ?
-                    <div className={"text-sm text-gitpod-kumquat truncate cursor-pointer hover:underline"} onClick={showChanges}>{changesLabel}</div>
+                    <div className={"text-sm text-red truncate cursor-pointer hover:underline"} onClick={showChanges}>{changesLabel}</div>
                     :
                     <div className="text-sm text-gray-400 truncate">No Changes</div>    
                 }
@@ -117,7 +119,7 @@ export function WorkspaceEntry(desc: WorkspaceInfo) {
             </div>
         </div>
         <div className="flex w-2/12 self-center space-x-2" onClick={startWsOnClick}>
-            <div className="text-sm text-gray-400 truncate">{moment(desc.latestInstance?.startedTime).fromNow()}</div>
+            <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">
             <ContextMenu menuEntries={menuEntries}>
diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx
index c21b323329a748..bb77d05efb28b4 100644
--- a/components/dashboard/src/workspaces/Workspaces.tsx
+++ b/components/dashboard/src/workspaces/Workspaces.tsx
@@ -1,24 +1,35 @@
 import React from "react";
-import { WorkspaceInfo } from "@gitpod/gitpod-protocol";
+import { WhitelistedRepository, WorkspaceInfo } from "@gitpod/gitpod-protocol";
 import Header from "../components/Header";
 import DropDown from "../components/DropDown"
 import { WorkspaceModel } from "./workspace-model";
 import { WorkspaceEntry } from "./WorkspaceEntry";
+import Modal from "../components/Modal";
+import { getGitpodService, gitpodHostUrl } from "../service/service";
 
 export interface WorkspacesProps {
 }
 
 export interface WorkspacesState {
     workspaces: WorkspaceInfo[];
+    isTemplateModelOpen: boolean;
+    repos: WhitelistedRepository[];
 }
 
 export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState> {
 
-    protected workspaceModel: WorkspaceModel;
+    protected workspaceModel: WorkspaceModel | undefined;
 
     constructor(props: WorkspacesProps) {
         super(props);
+    }
+
+    async componentDidMount() {
         this.workspaceModel = new WorkspaceModel(this.setWorkspaces);
+        const repos = await getGitpodService().server.getFeaturedRepositories();
+        this.setState({
+            repos
+        })
     }
 
     protected setWorkspaces = (workspaces: WorkspaceInfo[]) => {
@@ -28,46 +39,121 @@ export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState
     }
 
     render() {
-        const onActive = () => this.workspaceModel.active = true;
-        const onRecent = () => this.workspaceModel.active = false;
+        const wsModel = this.workspaceModel;
+        const toggleTemplateModal = () => this.setState({
+            isTemplateModelOpen: !this.state?.isTemplateModelOpen
+        });
+        const onActive = () => wsModel!.active = true;
+        const onAll = () => wsModel!.active = false;
         return <>
-            <Header title="Workspaces" subtitle="Manage past workspaces" />
+            <Header title="Workspaces" subtitle="Manage all workspaces and see pending changes." />
 
             <div className="lg:px-28 px-10 pt-8 flex">
                 <div className="flex">
                     <div className="py-4">
                         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 490 490">
-                            <path fill="none" stroke="#777" stroke-width="36" stroke-linecap="round"
+                            <path fill="none" stroke="#999" strokeWidth="36" strokeLinecap="round"
                                 d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110" />
                         </svg>
                     </div>
-                    <input className="border-0" type="text" placeholder="Search Workspace" onChange={(v) => { console.log(v) }} />
+                    <input className="border-0" type="text" placeholder="Search Workspace" onChange={(v) => { if (wsModel) wsModel.setSearch(v.target.value) }} />
                 </div>
                 <div className="flex-1" />
                 <div className="py-3">
-                    <DropDown entries={[{
+                    <DropDown prefix="Filter: " contextMenuWidth="w-32" entries={[{
                         title: 'Active',
                         onClick: onActive
                     }, {
-                        title: 'Past',
-                        onClick: onRecent
+                        title: 'All',
+                        onClick: onAll
+                    }]} />
+                </div>
+                <div className="py-3 pl-3">
+                    <DropDown prefix="Limit: " contextMenuWidth="w-32" entries={[{
+                        title: '50',
+                        onClick: () => { if (wsModel) wsModel.limit = 50; }
+                    }, {
+                        title: '100',
+                        onClick: () => { if (wsModel) wsModel.limit = 100; }
+                    }, {
+                        title: '200',
+                        onClick: () => { if (wsModel) wsModel.limit = 200; }
                     }]} />
                 </div>
             </div>
-            <div className="lg:px-28 px-10 flex flex-col space-y-2">
-                <div className="py-3 flex justify-between space-x-2 text-sm text-gray-400 border-t border-b border-gray-200">
-                    <div className="w-10"></div>
-                    <div className="w-3/12">Name</div>
-                    <div className="w-4/12">Context</div>
-                    <div className="w-2/12">Pending Changes</div>
-                    <div className="w-2/12">Last Active</div>
-                    <div className="w-8"></div>
+            {wsModel && (
+                this.state?.workspaces.length > 0 || wsModel.searchTerm ?
+                    <div className="lg:px-28 px-10 flex flex-col space-y-2">
+                        <div className="px-6 py-3 flex justify-between space-x-2 text-sm text-gray-400 border-t border-b border-gray-200">
+                            <div className="w-6"></div>
+                            <div className="w-3/12">Name</div>
+                            <div className="w-4/12">Context</div>
+                            <div className="w-2/12">Pending Changes</div>
+                            <div className="w-2/12">Last Active</div>
+                            <div className="w-8"></div>
+                        </div>
+                        {
+                            wsModel.active || wsModel.searchTerm ? null :
+                                <div className="whitespace-nowrap flex space-x-2 py-6 px-6 w-full justify-between bg-gitpod-kumquat-light rounded-xl">
+                                    <div className="pr-3 self-center w-6">
+                                        <div className="relative rounded-full w-3 h-3 bg-red">
+                                            <div className="absolute text-xs text-gray-100"
+                                                style={{
+                                                    left: "5px",
+                                                    top: "-2px"
+                                                }}
+                                                ref={(node) => {
+                                                    if (node) {
+                                                        node.style.setProperty("font-size", "10px", "important");
+                                                    }
+                                                }}>!</div>
+                                        </div>
+                                    </div>
+                                    <div className="flex-1 flex flex-col overflow-x-auto">
+                                        <div className="text-red font-semibold">Garbage Collection</div>
+                                        <p className="text-gray-500">Unpinned workspaces that have been stopped for more than 14 days will be automatically deleted. <a className="text-blue-600 underline underline-thickness-thin underline-offset-small hover:text-gray-800" href="https://www.gitpod.io/docs/life-of-workspace/#garbage-collection">Learn more</a></p>
+                                    </div>
+                                </div>
+                        }
+                        {
+                            this.state?.workspaces.map(e => {
+                                return <WorkspaceEntry key={e.workspace.id} desc={e} model={wsModel} />
+                            })
+                        }
+                    </div>
+                    :
+                    <div className="lg:px-28 px-10 flex flex-col space-y-2">
+                        <div className="px-6 py-3 flex justify-between space-x-2 text-sm text-gray-400 border-t border-gray-200 h-96">
+                            <div className="flex flex-col items-center w-96 m-auto">
+                                <h3 className="text-center pb-3">No Active Workspaces</h3>
+                                <div className="text-center pb-6 text-gray-500">Prefix a git repository URL with gitpod.io/# or open a workspace template. <a className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600" href="https://www.gitpod.io/docs/getting-started/">Learn how to get started</a></div>
+                                <button onClick={toggleTemplateModal}>Select Template</button>
+                            </div>
+                        </div>
+                    </div>
+            )}
+            <Modal onClose={toggleTemplateModal} visible={!!this.state?.isTemplateModelOpen}>
+                <h3 className="">Template            </h3>
+                {/* separator */}
+                <div className="absolute border-b pb-3 left-0 top-16 w-full"></div>
+                <div className="pt-8">
+                    <p>Select a template to open a workspace</p>
+                    <div className="space-y-2 pt-4 overflow-y-scroll h-80">
+                        {this.state?.repos && this.state.repos.map(r => {
+                            const url = gitpodHostUrl.withContext(r.url).toString();
+                            return <a key={r.name} href={url} className="rounded-xl group hover:bg-gray-100 flex p-4 my-1">
+                                <div className="w-full">
+                                    <p className="text-base text-gray-800 font-semibold">{r.name}</p>
+                                    <p>{r.url}</p>
+                                </div>
+                                <div className="flex">
+                                    <button>Open</button>
+                                </div>
+                            </a>;
+                        })}
+                    </div>
                 </div>
-                {
-                    this.state?.workspaces.map(e => {
-                        return <WorkspaceEntry key={e.workspace.id} {...e} />
-                    })
-                }
-            </div></>;
+            </Modal>
+        </>;
     }
 }
\ No newline at end of file
diff --git a/components/dashboard/src/workspaces/workspace-model.ts b/components/dashboard/src/workspaces/workspace-model.ts
index 517e2691edfb8d..fad617b2ce5ec1 100644
--- a/components/dashboard/src/workspaces/workspace-model.ts
+++ b/components/dashboard/src/workspaces/workspace-model.ts
@@ -6,10 +6,21 @@ export class WorkspaceModel implements Disposable, Partial<GitpodClient> {
     protected workspaces = new Map<string,WorkspaceInfo>();
     protected currentlyFetching = new Set<string>();
     protected disposables = new DisposableCollection();
+    protected internalLimit = 50;
+    set limit(limit: number) {
+        this.internalLimit = limit;
+        this.internalRefetch();
+    }
     
     constructor(protected setWorkspaces: (ws: WorkspaceInfo[]) => void) {
+        this.internalRefetch();
+    }
+
+    protected internalRefetch() {
+        this.disposables.dispose();
+        this.disposables = new DisposableCollection();
         getGitpodService().server.getWorkspaces({
-            limit: 50
+            limit: this.internalLimit
         }).then( infos => {
             this.updateMap(infos);
             this.notifyWorkpaces();
@@ -58,15 +69,47 @@ export class WorkspaceModel implements Disposable, Partial<GitpodClient> {
             this.notifyWorkpaces();
         }
     }
+    searchTerm: string | undefined;
+    setSearch(searchTerm: string) {
+        if (searchTerm !== this.searchTerm) {
+            this.searchTerm = searchTerm;
+            this.notifyWorkpaces();
+        }
+    }
+
+    togglePinned(workspaceId: string) {
+        const ws = this.workspaces.get(workspaceId)?.workspace;
+        if (ws) {
+            ws.pinned = !ws.pinned;
+            getGitpodService().server.updateWorkspaceUserPin(ws.id, 'toggle');
+            this.notifyWorkpaces();
+        }
+    }
+
+    toggleShared(workspaceId: string) {
+        const ws = this.workspaces.get(workspaceId)?.workspace;
+        if (ws) {
+            ws.shareable = !ws.shareable;
+            getGitpodService().server.controlAdmission(ws.id, ws.shareable ? "owner" : "everyone");
+            this.notifyWorkpaces();
+        }
+    }
 
     protected notifyWorkpaces(): void {
         let infos = Array.from(this.workspaces.values());
-        infos = infos.sort((a,b) => a.latestInstance?.creationTime.localeCompare(b.latestInstance?.creationTime || '') || 1);
-        this.setWorkspaces(infos.filter(ws => this.isActive(ws) === this.active) || []);
+        infos = infos.filter(ws => !this.active || this.isActive(ws));
+        if (this.searchTerm) {
+            infos = infos.filter(ws => (ws.workspace.description+ws.workspace.id+ws.workspace.contextURL+ws.workspace.context).toLowerCase().indexOf(this.searchTerm!.toLowerCase()) !== -1);
+        }
+        infos = infos.sort((a,b) => {  
+           return WorkspaceInfo.lastActiveISODate(b).localeCompare(WorkspaceInfo.lastActiveISODate(a));
+        });
+        this.setWorkspaces(infos);
     }
     
     protected isActive(info: WorkspaceInfo): boolean {
         return info.workspace.pinned || 
             info.latestInstance?.status?.phase !== 'stopped';
     }
+
 }
\ No newline at end of file
diff --git a/components/dashboard/tailwind.config.js b/components/dashboard/tailwind.config.js
index 7195f29f969ceb..5bd69f0e9c69b6 100644
--- a/components/dashboard/tailwind.config.js
+++ b/components/dashboard/tailwind.config.js
@@ -20,7 +20,7 @@ module.exports = {
                 },
                 'gitpod-black': '#161616',
                 'gitpod-gray': '#8E8787',
-                'gitpod-kumquat-light': '#FFCE4F',
+                'gitpod-kumquat-light': '#FFE4BC',
                 'gitpod-kumquat': '#FFB45B',
                 'gitpod-kumquat-dark': '#FF8A00',
                 'gitpod-kumquat-gradient': 'linear-gradient(137.41deg, #FFAD33 14.37%, #FF8A00 91.32%)',
diff --git a/components/gitpod-protocol/src/protocol.ts b/components/gitpod-protocol/src/protocol.ts
index df759ddf0554b0..841170c5c6b7c8 100644
--- a/components/gitpod-protocol/src/protocol.ts
+++ b/components/gitpod-protocol/src/protocol.ts
@@ -957,6 +957,12 @@ export interface WorkspaceInfo {
     latestInstance?: WorkspaceInstance
 }
 
+export namespace WorkspaceInfo {
+    export function lastActiveISODate(info: WorkspaceInfo): string {
+        return info.latestInstance?.creationTime || info.workspace.creationTime;
+    }
+}
+
 export type RunningWorkspaceInfo = WorkspaceInfo & { latestInstance: WorkspaceInstance };
 
 export interface WorkspaceCreationResult {