update dashboard icons

dashboard/src/assets/add-on-grad.svg

@@ -0,0 +1,9 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 12.875L8.5 17.25L16 12.875M1 9.125L8.5 13.5L16 9.125M1 5.375L8.5 9.75L16 5.375L8.5 1L1 5.375Z" stroke="url(#paint0_linear_851_144)" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_851_144" x1="3" y1="1" x2="16" y2="19.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#3C3C3C"/>
+</linearGradient>
+</defs>
+</svg>

dashboard/src/assets/application-grad.svg

@@ -0,0 +1,9 @@
+<svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2654 10.332V9.23203H10.0654V10.332H12.2654ZM10.0654 31.9987V33.0987H12.2654V31.9987H10.0654ZM2 9.23398C1.39249 9.23398 0.9 9.72647 0.9 10.334C0.9 10.9415 1.39249 11.434 2 11.434V9.23398ZM33.6667 11.434C34.2742 11.434 34.7667 10.9415 34.7667 10.334C34.7667 9.72647 34.2742 9.23398 33.6667 9.23398V11.434ZM30.3333 30.9H5.33333V33.1H30.3333V30.9ZM5.33333 30.9C4.09918 30.9 3.1 29.9008 3.1 28.6667H0.9C0.9 31.1158 2.88415 33.1 5.33333 33.1V30.9ZM3.1 28.6667V5.33333H0.9V28.6667H3.1ZM3.1 5.33333C3.1 4.09918 4.09918 3.1 5.33333 3.1V0.9C2.88415 0.9 0.9 2.88415 0.9 5.33333H3.1ZM5.33333 3.1H30.3333V0.9H5.33333V3.1ZM30.3333 3.1C31.5675 3.1 32.5667 4.09918 32.5667 5.33333H34.7667C34.7667 2.88415 32.7825 0.9 30.3333 0.9V3.1ZM32.5667 5.33333V28.6667H34.7667V5.33333H32.5667ZM32.5667 28.6667C32.5667 29.9008 31.5675 30.9 30.3333 30.9V33.1C32.7825 33.1 34.7667 31.1158 34.7667 28.6667H32.5667ZM10.0654 10.332V31.9987H12.2654V10.332H10.0654ZM2 11.434H33.6667V9.23398H2V11.434Z" fill="url(#paint0_linear_813_134)"/>
+<defs>
+<linearGradient id="paint0_linear_813_134" x1="2" y1="2" x2="34" y2="32" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#484849"/>
+</linearGradient>
+</defs>
+</svg>

dashboard/src/assets/compliance-grad.svg

@@ -0,0 +1,9 @@
+<svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 15.7018L13 18.578L19 12.8256M2 7.07334L11.3167 2.60729C13.0059 1.79757 14.9941 1.79757 16.6833 2.60729L26 7.07334C26 7.07334 26 15.4717 26 19.901C26 24.3303 21.7293 27.3202 14 32C6.27067 27.3202 2 23.3715 2 19.901V7.07334Z" stroke="url(#paint0_linear_1298_6)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1298_6" x1="2" y1="2" x2="45" y2="64.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#484849" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

dashboard/src/assets/database-grad.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.75 4.75C14.75 6.82107 11.672 8.5 7.875 8.5C4.07804 8.5 1 6.82107 1 4.75M14.75 4.75C14.75 2.67893 11.672 1 7.875 1C4.07804 1 1 2.67893 1 4.75M14.75 4.75V8.5M1 4.75V8.5M14.75 8.5C14.75 10.5703 11.6719 12.25 7.875 12.25C4.07813 12.25 1 10.5703 1 8.5M14.75 8.5V12.25C14.75 14.3203 11.6719 16 7.875 16C4.07813 16 1 14.3203 1 12.25V8.5" stroke="url(#paint0_linear_849_138)" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_849_138" x1="1" y1="1" x2="26" y2="27.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#484849" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

dashboard/src/assets/env-group-grad.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1484 4.85156L5.60156 7.77344M5.60156 10.4766L10.1484 13.3984M6 9.125C6 10.5057 4.88071 11.625 3.5 11.625C2.11929 11.625 1 10.5057 1 9.125C1 7.74429 2.11929 6.625 3.5 6.625C4.88071 6.625 6 7.74429 6 9.125ZM14.75 14.75C14.75 16.1307 13.6307 17.25 12.25 17.25C10.8693 17.25 9.75 16.1307 9.75 14.75C9.75 13.3693 10.8693 12.25 12.25 12.25C13.6307 12.25 14.75 13.3693 14.75 14.75ZM14.75 3.5C14.75 4.88071 13.6307 6 12.25 6C10.8693 6 9.75 4.88071 9.75 3.5C9.75 2.11929 10.8693 1 12.25 1C13.6307 1 14.75 2.11929 14.75 3.5Z" stroke="url(#paint0_linear_851_147)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_851_147" x1="3.5" y1="1" x2="19" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#464646"/>
+</linearGradient>
+</defs>
+</svg>

dashboard/src/assets/infra-grad.svg

@@ -0,0 +1,29 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29 23C31.7607 23 34 20.7615 34 18C34 15.2385 31.7607 13 29 13" stroke="url(#paint0_linear_1298_26)" stroke-width="2.2"/>
+<path d="M7 23C4.23941 23 2 20.7615 2 18C2 15.2385 4.23941 13 7 13" stroke="url(#paint1_linear_1298_26)" stroke-width="2.2"/>
+<path d="M13 29C13 31.7607 15.2385 34 18 34C20.7613 34 23 31.7607 23 29" stroke="url(#paint2_linear_1298_26)" stroke-width="2.2"/>
+<path d="M13 7C13 4.23941 15.2385 2 18 2C20.7613 2 23 4.23941 23 7" stroke="url(#paint3_linear_1298_26)" stroke-width="2.2"/>
+<path d="M11 18C11 14.115 14.1146 11 18.0009 11C21.8854 11 25 14.115 25 18C25 21.885 21.8854 25 18.0009 25C14.1146 25 11 21.885 11 18Z" stroke="url(#paint4_linear_1298_26)" stroke-width="2.2"/>
+<defs>
+<linearGradient id="paint0_linear_1298_26" x1="5.5" y1="2.5" x2="41.273" y2="50.416" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#484849"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1298_26" x1="7" y1="4" x2="32.5" y2="35" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#484849"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1298_26" x1="1.5" y1="2.5" x2="43.5" y2="55" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#484849"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1298_26" x1="6.5" y1="2" x2="33.5" y2="34" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#484849"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1298_26" x1="11" y1="6.5" x2="29.5" y2="35.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#484849"/>
+</linearGradient>
+</defs>
+</svg>

dashboard/src/assets/integration-grad.svg

@@ -0,0 +1,9 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.9042 16.9032V2C19.5158 2.0003 22.0812 2.68676 24.3441 3.99065C26.6067 5.29454 28.4872 7.17009 29.7967 9.42937C31.1065 11.6887 31.7994 14.2525 31.8064 16.8639C31.8134 19.4753 31.1339 22.0426 29.8361 24.3089C28.5384 26.575 26.6679 28.4606 24.4122 29.7762C22.1564 31.0921 19.5945 31.7921 16.9829 31.8062C14.3713 31.8203 11.802 31.1479 9.5321 29.8565C7.26222 28.5651 5.37156 26.7 4.04945 24.448M29.8055 9.45161L4.00287 24.3548M2.24855 19.6355C2.07911 18.7347 1.99592 17.8198 2.00015 16.9032C1.99819 13.821 2.95294 10.8142 4.73267 8.2977C6.51239 5.7812 9.02932 3.87908 11.9362 2.85384V14.0312L2.24855 19.6355Z" stroke="url(#paint0_linear_1298_9)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1298_9" x1="2" y1="2" x2="34.5" y2="39" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#484849"/>
+</linearGradient>
+</defs>
+</svg>

dashboard/src/assets/settings-grad.svg

@@ -0,0 +1,14 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 26C22.4183 26 26 22.4183 26 18C26 13.5817 22.4183 10 18 10C13.5817 10 10 13.5817 10 18C10 22.4183 13.5817 26 18 26Z" stroke="url(#paint0_linear_1298_13)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.8766 7.97612C27.2803 8.34796 27.6628 8.73043 28.0241 9.12353L32.3746 9.74503C33.0835 10.9761 33.6298 12.2939 34 13.6654L31.3547 17.1873C31.3547 17.1873 31.4025 18.271 31.3547 18.8128L34 22.3347C33.6316 23.7067 33.0851 25.0247 32.3746 26.2551L28.0241 26.8766C28.0241 26.8766 27.275 27.6575 26.8766 28.0241L26.2551 32.3746C25.0241 33.0835 23.7063 33.6298 22.3347 34L18.8128 31.3547C18.272 31.4025 17.7281 31.4025 17.1873 31.3547L13.6654 34C12.2933 33.6316 10.9753 33.0851 9.74503 32.3746L9.12353 28.0241C8.73043 27.6522 8.34796 27.2697 7.97612 26.8766L3.62549 26.2551C2.91663 25.0241 2.37025 23.7063 2 22.3347L4.64544 18.8128C4.64544 18.8128 4.59762 17.7291 4.64544 17.1873L2 13.6654C2.36854 12.2933 2.91499 10.9753 3.62549 9.74503L7.97612 9.12353C8.34796 8.73043 8.73043 8.34796 9.12353 7.97612L9.74503 3.62549C10.9761 2.91663 12.2939 2.37025 13.6654 2L17.1873 4.64544C17.7281 4.5976 18.272 4.5976 18.8128 4.64544L22.3347 2C23.7067 2.36854 25.0247 2.91499 26.2551 3.62549L26.8766 7.97612Z" stroke="url(#paint1_linear_1298_13)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1298_13" x1="10" y1="6" x2="29" y2="35" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#484849"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1298_13" x1="2" y1="2" x2="34" y2="42" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F8F8"/>
+<stop offset="1" stop-color="#484849"/>
+</linearGradient>
+</defs>
+</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.svg";
+import addOnGrad from "assets/add-on-grad.svg";
 import time from "assets/time.png";
 import healthy from "assets/status-healthy.png";
 import grid from "assets/grid.png";
@@ -150,7 +150,7 @@ const AddOnDashboard: React.FC<Props> = ({
   return (
     <StyledAppDashboard>
       <DashboardHeader
-        image={addOn}
+        image={addOnGrad}
         title="Add-ons"
         capitalize={false}
         description="Add-ons and supporting workloads for this project."

dashboard/src/main/home/app-dashboard/apps/Apps.tsx

@@ -28,7 +28,7 @@ import grid from "assets/grid.png";
 import list from "assets/list.png";
 import pull_request from "assets/pull_request_icon.svg";
 import letter from "assets/vector.svg";
-import web from "assets/web.png";
+import applicationGrad from "assets/application-grad.svg";
 
 import AppGrid from "./AppGrid";
 import { appRevisionWithSourceValidator } from "./types";
@@ -335,7 +335,7 @@ const Apps: React.FC = () => {
     <StyledAppDashboard>
       {!currentDeploymentTarget?.is_preview && (
         <DashboardHeader
-          image={web}
+          image={applicationGrad}
           title="Applications"
           description="Web services, workers, and jobs for this project."
           disableLineBreak

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

@@ -13,6 +13,7 @@ import useAuth from "shared/auth/useAuth";
 import { Context } from "shared/Context";
 import { getQueryParam } from "shared/routing";
 import editIcon from "assets/edit-button.svg";
+import infraGrad from "assets/infra-grad.svg";
 
 import DashboardHeader from "../DashboardHeader";
 import ClusterRevisionSelector from "./ClusterRevisionSelector";
@@ -23,6 +24,7 @@ import Metrics from "./Metrics";
 import { NamespaceList } from "./NamespaceList";
 import NodeList from "./NodeList";
 import ProvisionerStatus from "./ProvisionerStatus";
+import Image from "components/porter/Image";
 
 type TabEnum =
   | "nodes"
@@ -265,60 +267,7 @@ export const Dashboard: React.FunctionComponent = () => {
         title={
           <Flex>
             <Flex>
-              <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>
+              <Image size={25} src={infraGrad} /> 
               <Spacer inline />
               {context.currentCluster.vanity_name ||
                 context.currentCluster.name}

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

@@ -1,7 +1,7 @@
 import React, { Component, useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 
-import sliders from "assets/env-groups.svg";
+import envGroupGrad from "assets/env-group-grad.svg";
 
 import { Context } from "shared/Context";
 import { ClusterType } from "shared/types";
@@ -146,7 +146,7 @@ const EnvGroupDashboard = (props: PropsType) => {
       return (
         <>
           <DashboardHeader
-            image={sliders}
+            image={envGroupGrad}
             title="Environment groups"
             description="Groups of environment variables for storing secrets and configuration."
             disableLineBreak

dashboard/src/main/home/cluster-dashboard/preview-environments/v2/PreviewEnvs.tsx

@@ -7,7 +7,7 @@ import Spacer from "components/porter/Spacer";
 import TabSelector from "components/TabSelector";
 import { useDeploymentTargetList } from "lib/hooks/useDeploymentTarget";
 
-import PullRequestIcon from "assets/pull_request_icon.svg";
+import prGrad from "assets/pr-grad.svg";
 
 import DashboardHeader from "../../DashboardHeader";
 import { ConfigurableAppList } from "./ConfigurableAppList";
@@ -41,8 +41,9 @@ const PreviewEnvs: React.FC = () => {
   return (
     <StyledAppDashboard>
       <DashboardHeader
-        image={PullRequestIcon}
+        image={prGrad}
         title="Preview Apps"
+        capitalize={false}
         description="Preview apps are created for each pull request. They are automatically deleted when the pull request is closed."
         disableLineBreak
       />

dashboard/src/main/home/compliance-dashboard/ComplianceDashboard.tsx

@@ -9,7 +9,7 @@ import Text from "components/porter/Text";
 import DashboardHeader from "main/home/cluster-dashboard/DashboardHeader";
 
 import { Context } from "shared/Context";
-import compliance from "assets/compliance.svg";
+import complianceGrad from "assets/compliance-grad.svg";
 import linkExternal from "assets/link-external.svg";
 import vanta from "assets/vanta.svg";
 
@@ -35,7 +35,7 @@ const ComplianceDashboard: React.FC = () => {
     >
       <StyledComplianceDashboard>
         <DashboardHeader
-          image={compliance}
+          image={complianceGrad}
           title="Compliance"
           description="Configure your Porter infrastructure for various compliance frameworks."
           disableLineBreak

dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx

@@ -25,7 +25,7 @@ import { Context } from "shared/Context";
 import { search } from "shared/search";
 import { readableDate } from "shared/string_utils";
 import engine from "assets/computer-chip.svg";
-import database from "assets/database.svg";
+import databaseGrad from "assets/database-grad.svg";
 import grid from "assets/grid.png";
 import list from "assets/list.png";
 import notFound from "assets/not-found.png";
@@ -145,7 +145,7 @@ const DatabaseDashboard: React.FC = () => {
             }}
             prefix={
               <Container row>
-                <Image src={database} size={15} opacity={0.6} />
+                <Image src={databaseGrad} size={15} opacity={0.6} />
                 <Spacer inline x={0.5} />
                 Type
               </Container>
@@ -325,7 +325,7 @@ const DatabaseDashboard: React.FC = () => {
   return (
     <StyledAppDashboard>
       <DashboardHeader
-        image={database}
+        image={databaseGrad}
         title="Databases"
         description="Storage, caches, and stateful workloads for this project."
         disableLineBreak

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.svg";
+import integrationGrad from "assets/integration-grad.svg";
 
 import CreateIntegrationForm from "./create-integration/CreateIntegrationForm";
 import IntegrationCategories from "./IntegrationCategories";
@@ -78,7 +78,7 @@ const Integrations: React.FC<PropsType> = (props) => {
         <Route>
           <>
             <DashboardHeader
-              image={integrations}
+              image={integrationGrad}
               title="Integrations"
               description="Manage third-party integrations for your Porter project."
               disableLineBreak

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.svg";
+import settingsGrad from "assets/settings-grad.svg";
 
 import InvitePage from "./InviteList";
 import TabRegion from "components/TabRegion";
@@ -238,10 +238,11 @@ function ProjectSettings(props: any) {
   return (
     <StyledProjectSettings>
       <DashboardHeader
-        image={settings}
+        image={settingsGrad}
         title="Project settings"
         description="Configure access permissions and additional project settings."
         disableLineBreak
+        capitalize={false}
       />
       <TabRegion
         currentTab={currentTab}