Update sidebar (#3738)

Co-authored-by: Justin Rhee <jusrhee@Justins-MacBook-Air-2.local>

api/types/project.go

@@ -14,6 +14,7 @@ type ProjectList struct {
 	APITokensEnabled       bool   `json:"api_tokens_enabled"`
 	StacksEnabled          bool   `json:"stacks_enabled"`
 	CapiProvisionerEnabled bool   `json:"capi_provisioner_enabled"`
+	DBEnabled              bool   `json:"db_enabled"`
 	SimplifiedViewEnabled  bool   `json:"simplified_view_enabled"`
 	AzureEnabled           bool   `json:"azure_enabled"`
 	HelmValuesEnabled      bool   `json:"helm_values_enabled"`
@@ -33,6 +34,7 @@ type Project struct {
 	APITokensEnabled       bool    `json:"api_tokens_enabled"`
 	StacksEnabled          bool    `json:"stacks_enabled"`
 	CapiProvisionerEnabled bool    `json:"capi_provisioner_enabled"`
+	DBEnabled              bool    `json:"db_enabled"`
 	SimplifiedViewEnabled  bool    `json:"simplified_view_enabled"`
 	AzureEnabled           bool    `json:"azure_enabled"`
 	HelmValuesEnabled      bool    `json:"helm_values_enabled"`

dashboard/src/assets/add-ons.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 13.75L10 18.125L17.5 13.75M2.5 10L10 14.375L17.5 10M2.5 6.25L10 10.625L17.5 6.25L10 1.875L2.5 6.25Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dashboard/src/assets/applications.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2507 17.5H3.75065C2.82982 17.5 2.08398 16.7542 2.08398 15.8333V4.16667C2.08398 3.24583 2.82982 2.5 3.75065 2.5H16.2507C17.1715 2.5 17.9173 3.24583 17.9173 4.16667V15.8333C17.9173 16.7542 17.1715 17.5 16.2507 17.5Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.66667 6.66602V17.4993" stroke="white" stroke-width="1.25" stroke-linecap="square"/>
+<path d="M2.08398 6.66667H17.9173" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dashboard/src/assets/cluster.svg

@@ -1,8 +1,54 @@
-<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.4" d="M9.15631 13.4409C11.4924 13.4409 13.3656 11.5569 13.3656 9.20736C13.3656 6.85691 11.4924 4.97385 9.15631 4.97385C6.8202 4.97385 4.94702 6.85691 4.94702 9.20736C4.94702 11.5569 6.8202 13.4409 9.15631 13.4409" fill="white"/>
-<path opacity="0.4" d="M18.2952 10.1931C18.8996 7.81564 17.1276 5.68042 14.8712 5.68042C14.6259 5.68042 14.3913 5.70744 14.162 5.75336C14.1316 5.76057 14.0976 5.77588 14.0797 5.8029C14.0591 5.83712 14.0743 5.88305 14.0967 5.91276C14.7745 6.86915 15.164 8.03357 15.164 9.28354C15.164 10.4813 14.8067 11.598 14.1799 12.5246C14.1155 12.6201 14.1728 12.7489 14.2865 12.7687C14.4441 12.7966 14.6053 12.811 14.77 12.8155C16.4131 12.8588 17.8878 11.7952 18.2952 10.1931" fill="white"/>
-<path opacity="0.4" d="M4.25211 5.75364C4.02378 5.70681 3.78829 5.68069 3.54295 5.68069C1.28653 5.68069 -0.485469 7.81591 0.119824 10.1934C0.526336 11.7955 2.00106 12.859 3.64413 12.8158C3.80888 12.8113 3.97095 12.796 4.12765 12.769C4.24136 12.7492 4.29867 12.6204 4.2342 12.5249C3.60742 11.5973 3.25015 10.4816 3.25015 9.28382C3.25015 8.03295 3.64055 6.86853 4.31837 5.91304C4.33986 5.88332 4.35597 5.83739 4.33448 5.80317C4.31658 5.77525 4.28345 5.76084 4.25211 5.75364" fill="white"/>
-<path d="M13.4409 9.25842C13.4409 6.92232 11.5569 5.04914 9.20739 5.04914C6.85694 5.04914 4.97388 6.92232 4.97388 9.25842C4.97388 11.5945 6.85694 13.4677 9.20739 13.4677C11.5569 13.4677 13.4409 11.5945 13.4409 9.25842" fill="white"/>
-<path opacity="0.4" d="M10.1931 0.119514C7.81564 -0.484882 5.68042 1.28712 5.68042 3.54353C5.68042 3.78887 5.70744 4.02347 5.75336 4.25269C5.76057 4.28314 5.77588 4.31716 5.8029 4.33507C5.83712 4.35566 5.88305 4.34044 5.91276 4.31806C6.86915 3.64024 8.03357 3.25074 9.28354 3.25074C10.4813 3.25074 11.598 3.608 12.5246 4.23479C12.6201 4.29925 12.7489 4.24195 12.7687 4.12823C12.7966 3.97064 12.811 3.80947 12.8155 3.64471C12.8588 2.00165 11.7952 0.526922 10.1931 0.119514" fill="white"/>
-<path opacity="0.4" d="M5.75361 14.1626C5.70678 14.391 5.68066 14.6264 5.68066 14.8718C5.68066 17.1282 7.81588 18.9002 10.1934 18.2949C11.7954 17.8884 12.859 16.4137 12.8158 14.7706C12.8113 14.6059 12.796 14.4438 12.7689 14.2871C12.7491 14.1734 12.6203 14.1161 12.5249 14.1805C11.5973 14.8073 10.4815 15.1646 9.28379 15.1646C8.03292 15.1646 6.8685 14.7742 5.91301 14.0964C5.88329 14.0749 5.83736 14.0588 5.80314 14.0802C5.77522 14.0982 5.76081 14.1313 5.75361 14.1626" fill="white"/>
-</svg>
+<svg
+  width="23"
+  height="23"
+  viewBox="0 0 19 19"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M15.207 12.4403C16.8094 12.4403 18.1092 11.1414 18.1092 9.53907C18.1092 7.93673 16.8094 6.63782 15.207 6.63782"
+    stroke="white"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+  <path
+    d="M3.90217 12.4403C2.29983 12.4403 1 11.1414 1 9.53907C1 7.93673 2.29983 6.63782 3.90217 6.63782"
+    stroke="white"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M9.54993 13.4133C7.4086 13.4133 5.69168 11.6964 5.69168 9.55417C5.69168 7.41284 7.4086 5.69592 9.54993 5.69592C11.6913 5.69592 13.4082 7.41284 13.4082 9.55417C13.4082 11.6964 11.6913 13.4133 9.54993 13.4133Z"
+    stroke="white"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+  <path
+    d="M6.66895 15.207C6.66895 16.8094 7.96787 18.1092 9.5702 18.1092C11.1725 18.1092 12.4715 16.8094 12.4715 15.207"
+    stroke="white"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+  <path
+    d="M6.66895 3.90217C6.66895 2.29983 7.96787 1 9.5702 1C11.1725 1 12.4715 2.29983 12.4715 3.90217"
+    stroke="white"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M5.69591 9.54996C5.69591 7.40863 7.41283 5.69171 9.55508 5.69171C11.6964 5.69171 13.4133 7.40863 13.4133 9.54996C13.4133 11.6913 11.6964 13.4082 9.55508 13.4082C7.41283 13.4082 5.69591 11.6913 5.69591 9.54996Z"
+    stroke="white"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+</svg>

dashboard/src/assets/collapse-sidebar.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.875 1.25V14.75M2.125 1.25H15.875C16.2202 1.25 16.5 1.52982 16.5 1.875V14.125C16.5 14.4702 16.2202 14.75 15.875 14.75H2.125C1.77982 14.75 1.5 14.4702 1.5 14.125V1.875C1.5 1.52982 1.77982 1.25 2.125 1.25Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dashboard/src/assets/database.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.875 6.25C16.875 8.32107 13.797 10 10 10C6.20304 10 3.125 8.32107 3.125 6.25M16.875 6.25C16.875 4.17893 13.797 2.5 10 2.5C6.20304 2.5 3.125 4.17893 3.125 6.25M16.875 6.25V10M3.125 6.25V10M3.125 10C3.125 12.0703 6.20313 13.75 10 13.75C13.7969 13.75 16.875 12.0703 16.875 10M3.125 10V13.75C3.125 15.8203 6.20313 17.5 10 17.5C13.7969 17.5 16.875 15.8203 16.875 13.75V10" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dashboard/src/assets/env-groups.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6484 4.72656L6.10156 7.64844M6.10156 10.3516L10.6484 13.2734M6.5 9C6.5 10.3807 5.38071 11.5 4 11.5C2.61929 11.5 1.5 10.3807 1.5 9C1.5 7.61929 2.61929 6.5 4 6.5C5.38071 6.5 6.5 7.61929 6.5 9ZM15.25 14.625C15.25 16.0057 14.1307 17.125 12.75 17.125C11.3693 17.125 10.25 16.0057 10.25 14.625C10.25 13.2443 11.3693 12.125 12.75 12.125C14.1307 12.125 15.25 13.2443 15.25 14.625ZM15.25 3.375C15.25 4.75571 14.1307 5.875 12.75 5.875C11.3693 5.875 10.25 4.75571 10.25 3.375C10.25 1.99429 11.3693 0.875 12.75 0.875C14.1307 0.875 15.25 1.99429 15.25 3.375Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dashboard/src/assets/integrations.svg

@@ -1,4 +1,3 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.6909 6.94442C12.7546 7.07401 12.7967 7.21278 12.8155 7.35544L13.1635 12.5303L13.3363 15.1314C13.3381 15.3988 13.38 15.6646 13.4608 15.9201C13.6695 16.4157 14.1715 16.7307 14.7176 16.7088L23.0392 16.1644C23.3995 16.1585 23.7475 16.2933 24.0065 16.5391C24.2224 16.744 24.3618 17.012 24.4057 17.3002L24.4204 17.4752C24.0761 22.2436 20.5739 26.2208 15.8154 27.2475C11.0569 28.2742 6.17733 26.1054 3.82589 21.9186C3.14798 20.7023 2.72456 19.3653 2.58048 17.9862C2.52029 17.578 2.49378 17.1656 2.50122 16.7532C2.49379 11.6409 6.13434 7.22121 11.2304 6.15572C11.8438 6.06022 12.445 6.38492 12.6909 6.94442Z" fill="white"/>
-<path opacity="0.4" d="M16.0875 2.50102C21.7873 2.64603 26.5779 6.74474 27.5 12.2654L27.4912 12.3061L27.466 12.3653L27.4695 12.528C27.4564 12.7434 27.3733 12.9507 27.2299 13.1181C27.0806 13.2925 26.8766 13.4113 26.652 13.4574L26.515 13.4762L16.914 14.0983C16.5946 14.1298 16.2766 14.0268 16.0391 13.8149C15.8412 13.6384 15.7147 13.4001 15.679 13.1433L15.0345 3.55633C15.0233 3.52391 15.0233 3.48877 15.0345 3.45635C15.0433 3.19209 15.1597 2.9423 15.3575 2.76279C15.5554 2.58327 15.8183 2.489 16.0875 2.50102Z" fill="white"/>
-</svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00008 9V1.5C10.3143 1.50015 11.6053 1.84561 12.744 2.50179C13.8826 3.15797 14.8289 4.10183 15.4879 5.23881C16.147 6.3758 16.4957 7.66601 16.4992 8.98019C16.5027 10.2944 16.1608 11.5864 15.5077 12.7269C14.8547 13.8673 13.9134 14.8162 12.7783 15.4783C11.6431 16.1405 10.3539 16.4928 9.03969 16.4999C7.72552 16.507 6.43256 16.1686 5.29031 15.5187C4.14806 14.8688 3.19664 13.9302 2.53133 12.7969M15.4923 5.25L2.50789 12.75M1.62508 10.375C1.53981 9.92168 1.49795 9.46126 1.50008 9C1.49909 7.4489 1.97954 5.93573 2.87514 4.6693C3.77073 3.40288 5.0373 2.44564 6.50008 1.92969V7.55469L1.62508 10.375Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dashboard/src/assets/settings.svg

@@ -1,16 +1,4 @@
-<svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4023 13.5801C22.7599 13.7701 23.0359 14.0701 23.23 14.3701C23.6082 14.9901 23.5775 15.7501 23.2096 16.4201L22.4942 17.6201C22.1161 18.2601 21.411 18.6601 20.6854 18.6601C20.3277 18.6601 19.9291 18.5601 19.6021 18.3601C19.3364 18.1901 19.0298 18.1301 18.7028 18.1301C17.691 18.1301 16.8428 18.9601 16.8121 19.9501C16.8121 21.1001 15.8719 22.0001 14.6967 22.0001H13.3068C12.1214 22.0001 11.1812 21.1001 11.1812 19.9501C11.1607 18.9601 10.3125 18.1301 9.30076 18.1301C8.96351 18.1301 8.65693 18.1901 8.40144 18.3601C8.07441 18.5601 7.66563 18.6601 7.31816 18.6601C6.58235 18.6601 5.8772 18.2601 5.49908 17.6201L4.79393 16.4201C4.4158 15.7701 4.39536 14.9901 4.77349 14.3701C4.937 14.0701 5.24359 13.7701 5.59106 13.5801C5.8772 13.4401 6.06116 13.2101 6.23489 12.9401C6.74587 12.0801 6.43928 10.9501 5.57062 10.4401C4.55888 9.87012 4.23185 8.60012 4.81437 7.61012L5.49908 6.43012C6.09181 5.44012 7.35904 5.09012 8.381 5.67012C9.2701 6.15012 10.4249 5.83012 10.9461 4.98012C11.1096 4.70012 11.2016 4.40012 11.1812 4.10012C11.1607 3.71012 11.2731 3.34012 11.4673 3.04012C11.8454 2.42012 12.5301 2.02012 13.2762 2.00012H14.7171C15.4734 2.00012 16.1581 2.42012 16.5362 3.04012C16.7202 3.34012 16.8428 3.71012 16.8121 4.10012C16.7917 4.40012 16.8837 4.70012 17.0472 4.98012C17.5684 5.83012 18.7232 6.15012 19.6225 5.67012C20.6343 5.09012 21.9117 5.44012 22.4942 6.43012L23.1789 7.61012C23.7717 8.60012 23.4447 9.87012 22.4227 10.4401C21.554 10.9501 21.2474 12.0801 21.7686 12.9401C21.9322 13.2101 22.1161 13.4401 22.4023 13.5801ZM11.1096 12.0101C11.1096 13.5801 12.4075 14.8301 14.012 14.8301C15.6165 14.8301 16.8837 13.5801 16.8837 12.0101C16.8837 10.4401 15.6165 9.18012 14.012 9.18012C12.4075 9.18012 11.1096 10.4401 11.1096 12.0101Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_d" x="-2" y="0" width="32" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-</filter>
-</defs>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 12.75C11.0711 12.75 12.75 11.0711 12.75 9C12.75 6.92893 11.0711 5.25 9 5.25C6.92893 5.25 5.25 6.92893 5.25 9C5.25 11.0711 6.92893 12.75 9 12.75Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3516 4.08594C13.5495 4.26823 13.737 4.45573 13.9141 4.64844L16.0469 4.95312C16.3944 5.55665 16.6622 6.20265 16.8437 6.875L15.5469 8.60156C15.5469 8.60156 15.5703 9.13281 15.5469 9.39844L16.8437 11.125C16.6631 11.7976 16.3952 12.4437 16.0469 13.0469L13.9141 13.3516C13.9141 13.3516 13.5469 13.7344 13.3516 13.9141L13.0469 16.0469C12.4434 16.3944 11.7974 16.6622 11.125 16.8437L9.39844 15.5469C9.13333 15.5703 8.86667 15.5703 8.60156 15.5469L6.875 16.8437C6.20236 16.6631 5.55625 16.3952 4.95312 16.0469L4.64844 13.9141C4.45573 13.7318 4.26823 13.5443 4.08594 13.3516L1.95312 13.0469C1.60561 12.4434 1.33776 11.7974 1.15625 11.125L2.45313 9.39844C2.45313 9.39844 2.42969 8.86719 2.45313 8.60156L1.15625 6.875C1.33692 6.20236 1.60481 5.55625 1.95312 4.95312L4.08594 4.64844C4.26823 4.45573 4.45573 4.26823 4.64844 4.08594L4.95312 1.95312C5.55665 1.60561 6.20265 1.33776 6.875 1.15625L8.60156 2.45313C8.86667 2.42968 9.13333 2.42968 9.39844 2.45313L11.125 1.15625C11.7976 1.33692 12.4437 1.60481 13.0469 1.95312L13.3516 4.08594Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

dashboard/src/main/home/add-on-dashboard/AddOnDashboard.tsx

@@ -8,7 +8,7 @@ import React, {
 import styled from "styled-components";
 import _ from "lodash";
 
-import addOn from "assets/add-ons.png";
+import addOn from "assets/add-ons.svg";
 import github from "assets/github.png";
 import time from "assets/time.png";
 import healthy from "assets/status-healthy.png";

dashboard/src/main/home/app-dashboard/AppDashboard.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import _ from "lodash";
 import { Link, LinkProps } from "react-router-dom";
 
-import web from "assets/web.png";
+import applications from "assets/applications.svg";
 import box from "assets/box.png";
 import github from "assets/github.png";
 import time from "assets/time.png";
@@ -39,7 +39,7 @@ const icons = [
   "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-plain.svg",
   "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-plain.svg",
   "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original-wordmark.svg",
-  web,
+  applications,
 ];
 
 const namespaceBlacklist = [
@@ -207,7 +207,7 @@ const AppDashboard: React.FC<Props> = ({ }) => {
   return (
     <StyledAppDashboard>
       <DashboardHeader
-        image={web}
+        image={applications}
         title="Applications"
         description="Web services, workers, and jobs for this project."
         disableLineBreak

dashboard/src/main/home/cluster-dashboard/DashboardRouter.tsx

@@ -174,9 +174,6 @@ const DashboardRouter: React.FC<Props> = ({
       >
         <EnvGroupDashboard currentCluster={currentCluster} />
       </GuardedRoute>
-      <Route path={"/databases"}>
-        <LazyDatabasesRoutes />
-      </Route>
       <Route path={["/cluster-dashboard"]}>
         <DashboardRoutes />
       </Route>

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupDashboard.tsx

@@ -1,8 +1,7 @@
 import React, { Component, useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 
-import sliders from "assets/sliders.svg";
-import loading from "assets/loading.gif";
+import sliders from "assets/env-groups.svg";
 
 import { Context } from "shared/Context";
 import { ClusterType } from "shared/types";

dashboard/src/main/home/integrations/Integrations.tsx

@@ -4,7 +4,7 @@ import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
 import { integrationList } from "shared/common";
 import styled from "styled-components";
 import { pushFiltered } from "shared/routing";
-import integrations from "assets/integrations.png";
+import integrations from "assets/integrations.svg";
 
 import CreateIntegrationForm from "./create-integration/CreateIntegrationForm";
 import IntegrationCategories from "./IntegrationCategories";

dashboard/src/main/home/project-settings/ProjectSettings.tsx

@@ -2,7 +2,7 @@ import React, { Component, useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 
 import { Context } from "shared/Context";
-import settings from "assets/settings.png";
+import settings from "assets/settings.svg";
 
 import InvitePage from "./InviteList";
 import TabRegion from "components/TabRegion";

dashboard/src/main/home/sidebar/ClusterList.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useContext } from "react";
 import styled from "styled-components";
 import gradient from "assets/gradient.png";
 import api from "shared/api";
-import infra from "assets/infra.png";
+import infra from "assets/cluster.svg";
 
 import { Context } from "shared/Context";
 import { ClusterType } from "shared/types";
@@ -70,7 +70,6 @@ const ClusterList: React.FC<PropsType> = (props) => {
           pushFiltered(props, "/apps", ["project_id"], {});
         }}
       >
-
         <Icon src={infra} height={"14px"} />
         <ClusterLabel>{option.label}</ClusterLabel>
       </Option>
@@ -122,8 +121,7 @@ const ClusterLabel = styled.div`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  flex-grow: 1;
-  margin-left: 5px
+  margin-left: 12px
 `;
 
 const Plus = styled.div`
@@ -152,25 +150,21 @@ const InitializeButton = styled.div`
   }
 `;
 
-const Option = styled.div`
+const Option = styled.div<{ selected: boolean }>`
   width: 100%;
-  border-top: 1px solid #00000000;
-  border-bottom: 1px solid
-    ${(props: { selected: boolean; lastItem?: boolean }) =>
-    props.lastItem ? "#ffffff00" : "#ffffff15"};
   height: 45px;
   display: flex;
   align-items: center;
   font-size: 13px;
   align-items: center;
-  padding-left: 10px;
+  padding: 0 15px;
   cursor: pointer;
   padding-right: 10px;
-  background: ${(props: { selected: boolean; lastItem?: boolean }) =>
-    props.selected ? "#ffffff11" : ""};
+  text-decoration: ${props => props.selected ? "underline" : "none"};
+  color: ${props => props.theme.text.primary};
+  opacity: 0.6;
   :hover {
-    background: ${(props: { selected: boolean; lastItem?: boolean }) =>
-    props.selected ? "" : "#ffffff22"};
+    opacity: 1;
   }
 
   > i {
@@ -183,16 +177,16 @@ const Option = styled.div`
 
 const Dropdown = styled.div`
   position: absolute;
-  right: 13px;
-  top: calc(100% + 5px);
-  background: #171b20;
-  width: 210px;
+  left: 12px;
+  top: calc(100% + 10px);
+  background: #121212;
+  width: 230px;
   max-height: 500px;
-  border-radius: 3px;
+  border-radius: 5px;
+  border: 1px solid #494B4F;
   z-index: 999;
   overflow-y: auto;
   margin-bottom: 20px;
-  box-shadow: 0 5px 15px 5px #00000077;
 `;
 
 const ClusterName = styled.div`
@@ -235,9 +229,11 @@ const MainSelector = styled.div`
 const StyledClusterSection = styled.div`
   position: relative;
   margin-left: 3px;
-  background: #545ec7;
-  border-right: 1px solid #2c2e31;
+  background: #181B20;
+  border: 1px solid #383a3f;
+  border-left: none;
 `;
+
 const NavButton = styled(SidebarLink)`
   display: flex;
   align-items: center;
@@ -279,7 +275,7 @@ const NavButton = styled(SidebarLink)`
 
 const Img = styled.img<{ enlarge?: boolean }>`
   padding: ${(props) => (props.enlarge ? "0 0 0 1px" : "4px")};
-  height: 22px;
+  height: 25px;
   padding-top: 4px;
   border-radius: 3px;
   margin-right: 8px;

dashboard/src/main/home/sidebar/ClusterSection.tsx

@@ -60,6 +60,7 @@ export const ClusterSection: React.FC<Props> = ({
         <Relative>
           <SideLine />
           <NavButton
+            noHighlight
             path="/applications"
             targetClusterName={cluster?.name}
             active={
@@ -71,6 +72,7 @@ export const ClusterSection: React.FC<Props> = ({
             Applications
           </NavButton>
           <NavButton
+            noHighlight
             path="/jobs"
             targetClusterName={cluster?.name}
             active={
@@ -82,6 +84,7 @@ export const ClusterSection: React.FC<Props> = ({
             Jobs
           </NavButton>
           <NavButton
+            noHighlight
             path="/env-groups"
             targetClusterName={cluster?.name}
             active={
@@ -96,6 +99,7 @@ export const ClusterSection: React.FC<Props> = ({
             cluster.infra_id > 0 &&
             currentProject.enable_rds_databases && (
               <NavButton
+                noHighlight
                 path="/databases"
                 targetClusterName={cluster?.name}
                 active={
@@ -109,6 +113,7 @@ export const ClusterSection: React.FC<Props> = ({
             )}
           {currentProject?.stacks_enabled ? (
             <NavButton
+              noHighlight
               path="/stacks"
               targetClusterName={cluster?.name}
               active={
@@ -122,6 +127,7 @@ export const ClusterSection: React.FC<Props> = ({
           ) : null}
           {cluster?.preview_envs_enabled && (
             <NavButton
+              noHighlight
               path="/preview-environments"
               targetClusterName={cluster?.name}
               active={
@@ -141,6 +147,7 @@ export const ClusterSection: React.FC<Props> = ({
             </NavButton>
           )}
           <NavButton
+            noHighlight
             path={"/cluster-dashboard"}
             targetClusterName={cluster?.name}
             active={

dashboard/src/main/home/sidebar/ProjectButton.tsx

@@ -74,11 +74,6 @@ const ProjectButton: React.FC<PropsType> = (props) => {
                 <Letter>{currentProject.name[0].toUpperCase()}</Letter>
               </ProjectIcon>
               <ProjectName>{currentProject.name}</ProjectName>
-              <Spacer inline x={.5} />
-
-              {(props.projects.length > 1 || user.isPorterUser) && <RefreshButton>
-                <img src={swap} />
-              </RefreshButton>}
             </MainSelector>
           </Tooltip>
           :
@@ -92,9 +87,6 @@ const ProjectButton: React.FC<PropsType> = (props) => {
             </ProjectIcon>
             <ProjectName>{currentProject.name}</ProjectName>
             <Spacer inline x={.5} />
-            {(props.projects.length > 1 || user.isPorterUser) && <RefreshButton>
-              <img src={swap} />
-            </RefreshButton>}
           </MainSelector>
         }
         {/* {renderDropdown()} */}
@@ -211,9 +203,9 @@ const ProjectImage = styled.img`
 `;
 
 const ProjectIcon = styled.div`
-  width: 25px;
-  min-width: 25px;
-  height: 25px;
+  width: 26px;
+  min-width: 26px;
+  height: 26px;
   border-radius: 3px;
   overflow: hidden;
   position: relative;
@@ -229,18 +221,18 @@ const ProjectIconAlt = styled(ProjectIcon)`
 
 const StyledProjectSection = styled.div`
   position: relative;
-  margin-left: 3px;
   color: ${props => props.theme.text.primary};
+  max-width: 200px;
 `;
 
 const MainSelector = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 10px 0 0;
+  margin: 0;
   font-size: 14px;
   cursor: ${props => (props.projectsLength > 1 || props.isPorterUser) ? "pointer" : "default"};
-  padding: 10px 20px;
+  padding: 10px 22px;
   position: relative;
   :hover {
     > i {
@@ -264,8 +256,8 @@ const ProjectName = styled.div`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  flex-grow: 1; // <-- Add flex-grow here
-  padding-right: 20px; // <-- Add padding-right here
+  max-width: 145px;
+  font-size: 14px;
 `;
 
 const RefreshButton = styled.div`

dashboard/src/main/home/sidebar/ProjectSectionContainer.tsx

@@ -2,9 +2,14 @@ import React, { Component } from "react";
 
 import { Context } from "shared/Context";
 import ProjectButton from "./ProjectButton";
-import ProjectSection from "./ProjectSection";
 
-type PropsType = {};
+import collapseSidebar from "assets/collapse-sidebar.svg";
+
+import styled from "styled-components";
+
+type PropsType = {
+  collapseSidebar: any;
+};
 
 type StateType = {};
 
@@ -19,15 +24,49 @@ export default class ProjectSectionContainer extends Component<
   render() {
 
     return (
-
-      <ProjectButton
-        currentProject={this.context.currentProject}
-        projects={this.context.projects}
-      />
-     
+      <StyledProjectSection>
+        <ProjectButton
+          currentProject={this.context.currentProject}
+          projects={this.context.projects}
+        />
+        <SidebarToggleButton onClick={this.props.collapseSidebar}>
+          <img src={collapseSidebar} />
+        </SidebarToggleButton>
+      </StyledProjectSection>
     );
   }
 
 }
 
 ProjectSectionContainer.contextType = Context;
+
+const SidebarToggleButton = styled.div`
+  height: 25px;
+  min-width: 25px;
+  width: 25px;
+  border-radius: 5px;
+  border: 1px solid #383a3f;
+  cursor: pointer;
+  margin-right: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > img {
+    height: 14px;
+    width: 14px;
+    opacity: 0.5;
+  }
+
+  :hover {
+    border: 1px solid ${props => props.theme.text.primary};
+    > img {
+      opacity: 0.9;
+    }
+  }
+`;
+
+const StyledProjectSection = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -2,13 +2,15 @@ import React, { Component } from "react";
 import styled from "styled-components";
 
 import category from "assets/category.svg";
-import integrations from "assets/integrations-bold.png";
+import integrations from "assets/integrations.svg";
 import rocket from "assets/rocket.png";
-import settings from "assets/settings-bold.png";
-import web from "assets/web-bold.png";
-import addOns from "assets/add-ons-bold.png";
-import infra from "assets/infra.png";
-import sliders from "assets/sliders.svg";
+import settings from "assets/settings.svg";
+import applications from "assets/applications.svg";
+import infra from "assets/cluster.svg";
+import sliders from "assets/env-groups.svg";
+import addOns from "assets/add-ons.svg"
+import database from "assets/database.svg";
+import collapseSidebar from "assets/collapse-sidebar.svg";
 
 import { Context } from "shared/Context";
 
@@ -97,7 +99,7 @@ class Sidebar extends Component<PropsType, StateType> {
     if (!this.state.showSidebar) {
       return (
         <PullTab onClick={this.toggleSidebar}>
-          <i className="material-icons">double_arrow</i>
+          <img src={collapseSidebar} />
         </PullTab>
       );
     }
@@ -115,6 +117,7 @@ class Sidebar extends Component<PropsType, StateType> {
     if (!currentProject?.simplified_view_enabled) {
       return (
         <ScrollWrapper>
+          <Spacer y={.5} />
           <SidebarLabel>Home</SidebarLabel>
           <NavButton path={"/dashboard"}>
             <Img src={category} />
@@ -174,7 +177,6 @@ class Sidebar extends Component<PropsType, StateType> {
         </ScrollWrapper>
       );
     } else if (currentProject.simplified_view_enabled) {
-
       if (currentProject.multi_cluster) {
         return (
           <ScrollWrapper>
@@ -211,7 +213,7 @@ class Sidebar extends Component<PropsType, StateType> {
               path="/apps"
               active={window.location.pathname.startsWith("/apps")}
             >
-              <Img src={web} />
+              <Img src={applications} />
               Applications
             </NavButton>
             <NavButton
@@ -241,7 +243,7 @@ class Sidebar extends Component<PropsType, StateType> {
                     window.location.pathname.startsWith("/cluster-dashboard")
                   }
                 >
-                  <Img src={infra} />
+                  <Img src={settings} />
                   Infrastructure
                 </NavButton>
               )}
@@ -260,14 +262,23 @@ class Sidebar extends Component<PropsType, StateType> {
 
         return (
           <ScrollWrapper>
-            <Spacer y={.5} />
+            <Spacer y={.4} />
             <NavButton
               path="/apps"
               active={window.location.pathname.startsWith("/apps")}
             >
-              <Img src={web} />
+              <Img src={applications} />
               Applications
             </NavButton>
+            {currentProject.db_enabled && (
+              <NavButton
+                path="/databases"
+                active={window.location.pathname.startsWith("/apps")}
+              >
+                <Img src={database} />
+                Databases
+              </NavButton>
+            )}
             <NavButton
               path="/addons"
               active={window.location.pathname.startsWith("/addons")}
@@ -354,20 +365,8 @@ class Sidebar extends Component<PropsType, StateType> {
         {this.renderPullTab()}
         <StyledSidebar showSidebar={this.state.showSidebar}>
           <SidebarBg />
-          <CollapseButton
-            onClick={this.toggleSidebar}
-            onMouseOver={() => {
-              this.setState({ showTooltip: true });
-            }}
-            onMouseOut={() => {
-              this.setState({ showTooltip: false });
-            }}
-          >
-            {this.renderTooltip()}
-            <i className="material-icons">double_arrow</i>
-          </CollapseButton>
-
-          <ProjectSectionContainer />
+          <Spacer y={0.5} />
+          <ProjectSectionContainer collapseSidebar={this.toggleSidebar} />
           {this.renderProjectContents()}
           {this.context.featurePreview && (
             <Container row>
@@ -415,30 +414,23 @@ const NavButton = styled(SidebarLink)`
   border-radius: 5px;
   position: relative;
   text-decoration: none;
-  height: 34px;
-  margin: 5px 15px;
-  padding: 0 30px 2px 6px;
+  height: 45px;
+  margin: 7px 22px;
+  padding: 0 30px 2px 7px;
   font-size: 13px;
-  color: ${props => props.theme.text.primary};
   cursor: ${(props: { disabled?: boolean }) =>
     props.disabled ? "not-allowed" : "pointer"};
 
-  background: ${(props: any) => (props.active ? "#ffffff11" : "")};
-
-  :hover {
-    background: ${(props: any) => (props.active ? "#ffffff11" : "#ffffff08")};
-  }
-
   &.active {
-    background: #ffffff11;
+    background: #202126;
 
     :hover {
-      background: #ffffff11;
+      background: #202126;
     }
   }
 
   :hover {
-    background: #ffffff08;
+    background: #ffffff09;
   }
 
   > i {
@@ -451,7 +443,7 @@ const NavButton = styled(SidebarLink)`
 
 const Img = styled.img<{ enlarge?: boolean }>`
   padding: ${(props) => (props.enlarge ? "0 0 0 1px" : "4px")};
-  height: 22px;
+  height: 25px;
   padding-top: 4px;
   border-radius: 3px;
   margin-right: 8px;
@@ -480,25 +472,31 @@ const SidebarLabel = styled.div`
 const PullTab = styled.div`
   position: fixed;
   width: 30px;
-  height: 50px;
-  background: #7a838f77;
+  height: 30px;
+  border: 1px solid #383a3f;
+  border-left: none;
   top: calc(50vh - 60px);
   left: 0;
   z-index: 1;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  :hover {
-    background: #99a5af77;
+  > img {
+    height: 14px;
+    width: 14px;
+    opacity: 0.5;
   }
 
-  > i {
-    color: #ffffff77;
-    font-size: 18px;
-    position: absolute;
-    top: 15px;
-    left: 4px;
+  :hover {
+    border: 1px solid ${props => props.theme.text.primary};
+    border-left: none;
+    > img {
+      opacity: 0.9;
+    }
   }
 `;
 
@@ -556,7 +554,7 @@ const CollapseButton = styled.div`
 `;
 
 const StyledSidebar = styled.section`
-  width: 240px;
+  width: 260px;
   position: relative;
   padding-top: 20px;
   height: 100vh;
@@ -566,7 +564,7 @@ const StyledSidebar = styled.section`
   animation-fill-mode: forwards;
   @keyframes showSidebar {
     from {
-      margin-left: -240px;
+      margin-left: -260px;
     }
     to {
       margin-left: 0px;
@@ -577,7 +575,7 @@ const StyledSidebar = styled.section`
       margin-left: 0px;
     }
     to {
-      margin-left: -240px;
+      margin-left: -260px;
     }
   }
 `;

dashboard/src/main/home/sidebar/SidebarLink.tsx

@@ -2,10 +2,13 @@ import React, { useContext } from "react";
 import { NavLink, NavLinkProps, useParams } from "react-router-dom";
 import { Context } from "shared/Context";
 import { useRouting } from "shared/routing";
+import sidebarHighlight from "assets/sidebar-highlight.png";
+
+import styled from "styled-components";
 
 const SidebarLink: React.FC<
-  { path: string; targetClusterName?: string, active?: boolean } & Omit<NavLinkProps, "to">
-> = ({ children, path, targetClusterName, active, ...rest }) => {
+  { path: string; targetClusterName?: string, active?: boolean, noHighlight?: boolean } & Omit<NavLinkProps, "to">
+> = ({ children, path, targetClusterName, active, noHighlight, ...rest }) => {
   const params = useParams<{ namespace: string }>();
   const { getQueryParam } = useRouting();
   const { currentCluster, currentProject } = useContext(Context);
@@ -41,10 +44,28 @@ const SidebarLink: React.FC<
   };
 
   return (
-    <NavLink to={withQueryParams(path)} {...rest}>
-      {children}
-    </NavLink>
+      <NavLink to={withQueryParams(path)} {...rest}>
+        {!noHighlight && window.location.pathname.split("/")[1] === path?.split("/")[1] && <Highlight src={sidebarHighlight} />}
+        <StyledSideBarLink active={window.location.pathname.split("/")[1] === path?.split("/")[1]}>
+          {children}
+        </StyledSideBarLink>
+      </NavLink>
   );
 };
 
 export default SidebarLink;
+
+const Highlight = styled.img`
+  position: absolute;
+  top: 1px; 
+  left: -22px; 
+  height: 43px;
+`;
+
+const StyledSideBarLink = styled.div<{ active: boolean }>`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  color: ${(props) => props.theme.text.primary};
+  opacity: ${(props) => (props.active ? 1 : 0.6)};
+`;

dashboard/src/shared/types.tsx

@@ -268,6 +268,7 @@ export interface ProjectType {
   id: number;
   name: string;
   preview_envs_enabled: boolean;
+  db_enabled: boolean;
   enable_rds_databases: boolean;
   managed_infra_enabled: boolean;
   capi_provisioner_enabled: boolean;

internal/models/project.go

@@ -25,6 +25,9 @@ const (
 	// CapiProvisionerEnabled enables the CAPI Provisioning flow
 	CapiProvisionerEnabled FeatureFlagLabel = "capi_provisioner_enabled"
 
+	// DBEnabled enables the "Databases" tab
+	DBEnabled FeatureFlagLabel = "db_enabled"
+
 	// EnableReprovision enables the provisioning button after initial creation of the cluster
 	EnableReprovision FeatureFlagLabel = "enable_reprovision"
 
@@ -61,6 +64,7 @@ var ProjectFeatureFlags = map[FeatureFlagLabel]bool{
 	APITokensEnabled:       false,
 	AzureEnabled:           false,
 	CapiProvisionerEnabled: true,
+	DBEnabled:              false,
 	EnableReprovision:      false,
 	FullAddOns:             false,
 	HelmValuesEnabled:      false,
@@ -177,6 +181,8 @@ func (p *Project) GetFeatureFlag(flagName FeatureFlagLabel, launchDarklyClient *
 			return p.AzureEnabled
 		case "capi_provisioner_enabled":
 			return p.CapiProvisionerEnabled
+		case "db_enabled":
+			return false
 		case "enable_reprovision":
 			return p.EnableReprovision
 		case "full_add_ons":
@@ -231,6 +237,7 @@ func (p *Project) ToProjectType(launchDarklyClient *features.Client) types.Proje
 		StacksEnabled:          p.GetFeatureFlag(StacksEnabled, launchDarklyClient),
 		APITokensEnabled:       p.GetFeatureFlag(APITokensEnabled, launchDarklyClient),
 		CapiProvisionerEnabled: p.GetFeatureFlag(CapiProvisionerEnabled, launchDarklyClient),
+		DBEnabled:              p.GetFeatureFlag(DBEnabled, launchDarklyClient),
 		SimplifiedViewEnabled:  p.GetFeatureFlag(SimplifiedViewEnabled, launchDarklyClient),
 		AzureEnabled:           p.GetFeatureFlag(AzureEnabled, launchDarklyClient),
 		HelmValuesEnabled:      p.GetFeatureFlag(HelmValuesEnabled, launchDarklyClient),
@@ -263,6 +270,7 @@ func (p *Project) ToProjectListType() *types.ProjectList {
 		ManagedInfraEnabled:    p.ManagedInfraEnabled,
 		StacksEnabled:          p.StacksEnabled,
 		APITokensEnabled:       p.APITokensEnabled,
+		DBEnabled:              false,
 		CapiProvisionerEnabled: p.CapiProvisionerEnabled,
 		SimplifiedViewEnabled:  p.SimplifiedViewEnabled,
 		AzureEnabled:           p.AzureEnabled,