Repository: saleor/saleor
Pull request: Contrast improvements
Closes #4419
Closes #4509

<!-- Please mention all relevant issue numbers. -->

### Screenshots

<!-- If your changes affect the UI, providing "before" and "after" screenshots will
greatly reduce the amount of work needed to review your work. -->

### Pull Request Checklist

<!-- Please keep this section. It will make maintainer's life easier. -->

1. [ ] Privileged views and APIs are guarded by proper permission checks.
1. [ ] All visible strings are translated with proper context.
1. [ ] All data-formatting is locale-aware (dates, numbers, and so on).
1. [ ] Database queries are optimized and the number of queries is constant.
1. [ ] Database migration files are up to date.
1. [ ] The changes are tested.
1. [ ] The code is documented (docstrings, project documentation).
1. [ ] GraphQL schema and type definitions are up to date.
1. [ ] Changes are mentioned in the changelog.


Problem statement:
Contrast Improvements
Request: Change colors of the active elements in the UI. Those colors does not change in dark theme.

Reason: After reviewing the dashboard I noticed that we need to make improvements on the colors that we use. I've made changes to the design and we need to implement those changes. Changes can be seen on Figma


Dark UI Improvements
We need to make small improvements for Dark UI so it fits the Figma project:

- [x] Font Color on Primary Buttons
- [x] Account Dropdown - Color and photo
- [x] Card break lines are too bright - Permissions section

Hints from issue discussion:

Commit message: Fix avatar types

Patch to review:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b46261b9de5..8550b21dab1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix dashboard menu styles - #4491 by @benekex2
 - Do not allow random ids to appear in snapshots - #4495 by @dominik-zeglen
 - Order is no longer created when the payment was unsuccessful in the API - #4500 by @NyanKiyoshi
+- Contrast improvements - #4508 by @benekex2
 
 ## 2.8.0
 
diff --git a/saleor/static/dashboard-next/auth/mutations.ts b/saleor/static/dashboard-next/auth/mutations.ts
index 8d4007ba714..6566fee3fcc 100644
--- a/saleor/static/dashboard-next/auth/mutations.ts
+++ b/saleor/static/dashboard-next/auth/mutations.ts
@@ -16,6 +16,9 @@ export const fragmentUser = gql`
       code
       name
     }
+    avatar {
+      url
+    }
   }
 `;
 
diff --git a/saleor/static/dashboard-next/auth/types/TokenAuth.ts b/saleor/static/dashboard-next/auth/types/TokenAuth.ts
index a282edc4727..3cae7fada83 100644
--- a/saleor/static/dashboard-next/auth/types/TokenAuth.ts
+++ b/saleor/static/dashboard-next/auth/types/TokenAuth.ts
@@ -20,6 +20,11 @@ export interface TokenAuth_tokenCreate_user_permissions {
   name: string;
 }
 
+export interface TokenAuth_tokenCreate_user_avatar {
+  __typename: "Image";
+  url: string;
+}
+
 export interface TokenAuth_tokenCreate_user {
   __typename: "User";
   id: string;
@@ -29,6 +34,7 @@ export interface TokenAuth_tokenCreate_user {
   isStaff: boolean;
   note: string | null;
   permissions: (TokenAuth_tokenCreate_user_permissions | null)[] | null;
+  avatar: TokenAuth_tokenCreate_user_avatar | null;
 }
 
 export interface TokenAuth_tokenCreate {
diff --git a/saleor/static/dashboard-next/auth/types/User.ts b/saleor/static/dashboard-next/auth/types/User.ts
index 6027f7f8281..6609b989765 100644
--- a/saleor/static/dashboard-next/auth/types/User.ts
+++ b/saleor/static/dashboard-next/auth/types/User.ts
@@ -14,6 +14,11 @@ export interface User_permissions {
   name: string;
 }
 
+export interface User_avatar {
+  __typename: "Image";
+  url: string;
+}
+
 export interface User {
   __typename: "User";
   id: string;
@@ -23,4 +28,5 @@ export interface User {
   isStaff: boolean;
   note: string | null;
   permissions: (User_permissions | null)[] | null;
+  avatar: User_avatar | null;
 }
diff --git a/saleor/static/dashboard-next/auth/types/VerifyToken.ts b/saleor/static/dashboard-next/auth/types/VerifyToken.ts
index 52dc496a414..10e83496ed1 100644
--- a/saleor/static/dashboard-next/auth/types/VerifyToken.ts
+++ b/saleor/static/dashboard-next/auth/types/VerifyToken.ts
@@ -14,6 +14,11 @@ export interface VerifyToken_tokenVerify_user_permissions {
   name: string;
 }
 
+export interface VerifyToken_tokenVerify_user_avatar {
+  __typename: "Image";
+  url: string;
+}
+
 export interface VerifyToken_tokenVerify_user {
   __typename: "User";
   id: string;
@@ -23,6 +28,7 @@ export interface VerifyToken_tokenVerify_user {
   isStaff: boolean;
   note: string | null;
   permissions: (VerifyToken_tokenVerify_user_permissions | null)[] | null;
+  avatar: VerifyToken_tokenVerify_user_avatar | null;
 }
 
 export interface VerifyToken_tokenVerify {
diff --git a/saleor/static/dashboard-next/components/AppLayout/AppLayout.tsx b/saleor/static/dashboard-next/components/AppLayout/AppLayout.tsx
index 9ffdd419c8e..dd024c20841 100644
--- a/saleor/static/dashboard-next/components/AppLayout/AppLayout.tsx
+++ b/saleor/static/dashboard-next/components/AppLayout/AppLayout.tsx
@@ -1,3 +1,4 @@
+import Avatar from "@material-ui/core/Avatar";
 import Chip from "@material-ui/core/Chip";
 import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 import Grow from "@material-ui/core/Grow";
@@ -231,8 +232,8 @@ const styles = (theme: Theme) =>
       display: "flex"
     },
     userChip: {
-      backgroundColor: theme.palette.common.white,
-      border: `1px solid ${theme.palette.grey[200]}`
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.text.primary
     },
     userMenuContainer: {
       position: "relative"
@@ -383,6 +384,9 @@ const AppLayout = withStyles(styles, {
                               ref={anchor}
                             >
                               <Chip
+                                avatar={
+                                  <Avatar alt="user" src={user.avatar.url} />
+                                }
                                 className={classes.userChip}
                                 label={
                                   <>
diff --git a/saleor/static/dashboard-next/components/Theme/ThemeProvider.tsx b/saleor/static/dashboard-next/components/Theme/ThemeProvider.tsx
index 72757031e72..c08d6fb85fa 100644
--- a/saleor/static/dashboard-next/components/Theme/ThemeProvider.tsx
+++ b/saleor/static/dashboard-next/components/Theme/ThemeProvider.tsx
@@ -12,6 +12,7 @@ const dark: IThemeColors = {
     default: "#1D1E1F",
     paper: "#2E2F31"
   },
+  buttonText: "#202124",
   error: "#C22D74",
   font: {
     default: "#FCFCFC",
@@ -28,7 +29,8 @@ const dark: IThemeColors = {
   },
   paperBorder: "#252728",
   primary: "#13BEBB",
-  secondary: "#21125E"
+  secondary: "#21125E",
+  textColor: "#FFFFFF"
 };
 const light: IThemeColors = {
   autofill: "#f4f6c5",
@@ -36,6 +38,7 @@ const light: IThemeColors = {
     default: "#F1F6F6",
     paper: "#FFFFFF"
   },
+  buttonText: "#FFFFFF",
   error: "#C22D74",
   font: {
     default: "#3D3D3D",
@@ -51,8 +54,9 @@ const light: IThemeColors = {
     focused: "#DCEBEB"
   },
   paperBorder: "#EAEAEA",
-  primary: "#13BEBB",
-  secondary: "#21125E"
+  primary: "#06847B",
+  secondary: "#21125E",
+  textColor: "#06847B"
 };
 
 interface IThemeContext {
diff --git a/saleor/static/dashboard-next/icons/Calendar.tsx b/saleor/static/dashboard-next/icons/Calendar.tsx
index c7250b42dc2..3df4eb7491b 100644
--- a/saleor/static/dashboard-next/icons/Calendar.tsx
+++ b/saleor/static/dashboard-next/icons/Calendar.tsx
@@ -18,7 +18,7 @@ export const Calendar = createSvgIcon(
         y2="25.7327"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#13BEBB" />
+        <stop stopColor="#06847B" />
         <stop offset="1" stopColor="#3EE7CD" />
       </linearGradient>
     </defs>
diff --git a/saleor/static/dashboard-next/icons/Draggable.tsx b/saleor/static/dashboard-next/icons/Draggable.tsx
index cdaad7d5e9d..245d84a6f4a 100644
--- a/saleor/static/dashboard-next/icons/Draggable.tsx
+++ b/saleor/static/dashboard-next/icons/Draggable.tsx
@@ -21,7 +21,7 @@ export const Draggable = createSvgIcon(
         y2="10.4478"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#13BEBB" />
+        <stop stopColor="#06847B" />
         <stop offset="1" stopColor="#3EE7CD" />
       </linearGradient>
     </defs>
diff --git a/saleor/static/dashboard-next/icons/Image.tsx b/saleor/static/dashboard-next/icons/Image.tsx
index 458cbc3c96d..00e4e9238cc 100644
--- a/saleor/static/dashboard-next/icons/Image.tsx
+++ b/saleor/static/dashboard-next/icons/Image.tsx
@@ -16,7 +16,7 @@ export const Image = createSvgIcon(
         y2="23.5714"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#13BEBB" />
+        <stop stopColor="#06847B" />
         <stop offset="1" stopColor="#3EE7CD" />
       </linearGradient>
     </defs>
diff --git a/saleor/static/dashboard-next/icons/Navigation.tsx b/saleor/static/dashboard-next/icons/Navigation.tsx
index c7c7d29a9c3..5e48f814d82 100644
--- a/saleor/static/dashboard-next/icons/Navigation.tsx
+++ b/saleor/static/dashboard-next/icons/Navigation.tsx
@@ -24,7 +24,7 @@ export const Navigation = createSvgIcon(
         y2="46.8339"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#13BEBB" />
+        <stop stopColor="#06847B" />
         <stop offset="1" stopColor="#3EE7CD" />
       </linearGradient>
       <linearGradient
@@ -35,7 +35,7 @@ export const Navigation = createSvgIcon(
         y2="33.2176"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#13BEBB" />
+        <stop stopColor="#06847B" />
         <stop offset="1" stopColor="#3EE7CD" />
       </linearGradient>
     </defs>
diff --git a/saleor/static/dashboard-next/icons/Orders.tsx b/saleor/static/dashboard-next/icons/Orders.tsx
index 7026b704af9..14e6a02461e 100644
--- a/saleor/static/dashboard-next/icons/Orders.tsx
+++ b/saleor/static/dashboard-next/icons/Orders.tsx
@@ -18,7 +18,7 @@ export const Orders = createSvgIcon(
         y2="40.6161"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#13BEBB" />
+        <stop stopColor="#06847B" />
         <stop offset="1" stopColor="#3EE7CD" />
       </linearGradient>
     </defs>
diff --git a/saleor/static/dashboard-next/icons/Pages.tsx b/saleor/static/dashboard-next/icons/Pages.tsx
index 6aa43bc3233..8a74b647201 100644
--- a/saleor/static/dashboard-next/icons/Pages.tsx
+++ b/saleor/static/dashboard-next/icons/Pages.tsx
@@ -18,7 +18,7 @@ export const Pages = createSvgIcon(
         y2="46.7403"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#13BEBB" />
+        <stop stopColor="#06847B" />
         <stop offset="1" stopColor="#3EE7CD" />
       </linearGradient>
     </defs>
diff --git a/saleor/static/dashboard-next/icons/ProductTypes.tsx b/saleor/static/dashboard-next/icons/ProductTypes.tsx
index c86899204ce..a35417ac891 100644
--- a/saleor/static/dashboard-next/icons/ProductTypes.tsx
+++ b/saleor/static/dashboard-next/icons/ProductTypes.tsx
@@ -18,7 +18,7 @@ export const ProductTypes = createSvgIcon(
         y2="46.78"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#13BEBB" />
+        <stop stopColor="#06847B" />
         <stop offset="1" stopColor="#3EE7CD" />
       </linearGradient>
     </defs>
diff --git a/saleor/static/dashboard-next/icons/Sales.tsx b/saleor/static/dashboard-next/icons/Sales.tsx
index dae31094fcd..4aba8d63ce8 100644
--- a/saleor/static/dashboard-next/icons/Sales.tsx
+++ b/saleor/static/dashboard-next/icons/Sales.tsx
@@ -18,7 +18,7 @@ export const Sales = createSvgIcon(
         y2="46.3533"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#13BEBB" />
+        <stop stopColor="#06847B" />
         <stop offset="1" stopColor="#3EE7CD" />
       </linearGradient>
     </defs>
diff --git a/saleor/static/dashboard-next/icons/ShippingMethods.tsx b/saleor/static/dashboard-next/icons/ShippingMethods.tsx
index 0c4c90d0374..145bd25dd5c 100644
--- a/saleor/static/dashboard-next/icons/ShippingMethods.tsx
+++ b/saleor/static/dashboard-next/icons/ShippingMethods.tsx
@@ -18,7 +18,7 @@ export const ShippingMethods = createSvgIcon(
         y2="47.1429"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#13BEBB" />
+        <stop stopColor="#06847B" />
         <stop offset="1" stopColor="#3EE7CD" />
       </linearGradient>
     </defs>
diff --git a/saleor/static/dashboard-next/icons/SiteSettings.tsx b/saleor/static/dashboard-next/icons/SiteSettings.tsx
index 38829145dce..a0fdac5f810 100644
--- a/saleor/static/dashboard-next/icons/SiteSettings.tsx
+++ b/saleor/static/dashboard-next/icons/SiteSettings.tsx
@@ -18,7 +18,7 @@ export const SiteSettings = createSvgIcon(
         y2="47.2508"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#13BEBB" />
+        <stop stopColor="#06847B" />
         <stop offset="1" stopColor="#3EE7CD" />
       </linearGradient>
     </defs>
diff --git a/saleor/static/dashboard-next/icons/StaffMembers.tsx b/saleor/static/dashboard-next/icons/StaffMembers.tsx
index bf1c4516276..f583d01a310 100644
--- a/saleor/static/dashboard-next/icons/StaffMembers.tsx
+++ b/saleor/static/dashboard-next/icons/StaffMembers.tsx
@@ -18,7 +18,7 @@ export const StaffMembers = createSvgIcon(
         y2="46.2508"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#13BEBB" />
+        <stop stopColor="#06847B" />
         <stop offset="1" stopColor="#3EE7CD" />
       </linearGradient>
     </defs>
diff --git a/saleor/static/dashboard-next/icons/Taxes.tsx b/saleor/static/dashboard-next/icons/Taxes.tsx
index ae62d42069e..0f910dced44 100644
--- a/saleor/static/dashboard-next/icons/Taxes.tsx
+++ b/saleor/static/dashboard-next/icons/Taxes.tsx
@@ -18,7 +18,7 @@ export const Taxes = createSvgIcon(
         y2="43.2798"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#13BEBB" />
+        <stop stopColor="#06847B" />
         <stop offset="1" stopColor="#3EE7CD" />
       </linearGradient>
     </defs>
diff --git a/saleor/static/dashboard-next/staff/components/StaffPermissions/StaffPermissions.tsx b/saleor/static/dashboard-next/staff/components/StaffPermissions/StaffPermissions.tsx
index d67db42a238..aea41e7bb69 100644
--- a/saleor/static/dashboard-next/staff/components/StaffPermissions/StaffPermissions.tsx
+++ b/saleor/static/dashboard-next/staff/components/StaffPermissions/StaffPermissions.tsx
@@ -21,7 +21,7 @@ const styles = (theme: Theme) =>
       marginTop: theme.spacing.unit
     },
     hr: {
-      backgroundColor: "#eaeaea",
+      backgroundColor: theme.overrides.MuiCard.root.borderColor,
       border: "none",
       height: 1,
       marginBottom: 0,
diff --git a/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap b/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap
index 75f323fa48f..44a5f0f6e90 100644
--- a/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap
+++ b/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap
@@ -17503,7 +17503,7 @@ Ctrl + K"
                       y2="23.5714"
                     >
                       <stop
-                        stop-color="#13BEBB"
+                        stop-color="#06847B"
                       />
                       <stop
                         offset="1"
@@ -18158,7 +18158,7 @@ Ctrl + K"
                       y2="23.5714"
                     >
                       <stop
-                        stop-color="#13BEBB"
+                        stop-color="#06847B"
                       />
                       <stop
                         offset="1"
@@ -18406,7 +18406,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
                   y2="46.78"
                 >
                   <stop
-                    stop-color="#13BEBB"
+                    stop-color="#06847B"
                   />
                   <stop
                     offset="1"
@@ -18462,7 +18462,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
                   y2="46.2508"
                 >
                   <stop
-                    stop-color="#13BEBB"
+                    stop-color="#06847B"
                   />
                   <stop
                     offset="1"
@@ -18518,7 +18518,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
                   y2="47.1429"
                 >
                   <stop
-                    stop-color="#13BEBB"
+                    stop-color="#06847B"
                   />
                   <stop
                     offset="1"
@@ -18574,7 +18574,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
                   y2="43.2798"
                 >
                   <stop
-                    stop-color="#13BEBB"
+                    stop-color="#06847B"
                   />
                   <stop
                     offset="1"
@@ -18636,7 +18636,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
                   y2="46.8339"
                 >
                   <stop
-                    stop-color="#13BEBB"
+                    stop-color="#06847B"
                   />
                   <stop
                     offset="1"
@@ -18652,7 +18652,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
                   y2="33.2176"
                 >
                   <stop
-                    stop-color="#13BEBB"
+                    stop-color="#06847B"
                   />
                   <stop
                     offset="1"
@@ -18708,7 +18708,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
                   y2="47.2508"
                 >
                   <stop
-                    stop-color="#13BEBB"
+                    stop-color="#06847B"
                   />
                   <stop
                     offset="1"
@@ -18764,7 +18764,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
                   y2="46.7403"
                 >
                   <stop
-                    stop-color="#13BEBB"
+                    stop-color="#06847B"
                   />
                   <stop
                     offset="1"
@@ -18847,7 +18847,7 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
                   y2="46.78"
                 >
                   <stop
-                    stop-color="#13BEBB"
+                    stop-color="#06847B"
                   />
                   <stop
                     offset="1"
@@ -18903,7 +18903,7 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
                   y2="43.2798"
                 >
                   <stop
-                    stop-color="#13BEBB"
+                    stop-color="#06847B"
                   />
                   <stop
                     offset="1"
@@ -18965,7 +18965,7 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
                   y2="46.8339"
                 >
                   <stop
-                    stop-color="#13BEBB"
+                    stop-color="#06847B"
                   />
                   <stop
                     offset="1"
@@ -18981,7 +18981,7 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
                   y2="33.2176"
                 >
                   <stop
-                    stop-color="#13BEBB"
+                    stop-color="#06847B"
                   />
                   <stop
                     offset="1"
@@ -19037,7 +19037,7 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
                   y2="46.7403"
                 >
                   <stop
-                    stop-color="#13BEBB"
+                    stop-color="#06847B"
                   />
                   <stop
                     offset="1"
@@ -35358,7 +35358,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
                       y2="46.3533"
                     >
                       <stop
-                        stop-color="#13BEBB"
+                        stop-color="#06847B"
                       />
                       <stop
                         offset="1"
@@ -35419,7 +35419,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
                       y2="40.6161"
                     >
                       <stop
-                        stop-color="#13BEBB"
+                        stop-color="#06847B"
                       />
                       <stop
                         offset="1"
@@ -36064,7 +36064,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                       y2="46.3533"
                     >
                       <stop
-                        stop-color="#13BEBB"
+                        stop-color="#06847B"
                       />
                       <stop
                         offset="1"
@@ -36130,7 +36130,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
                       y2="40.6161"
                     >
                       <stop
-                        stop-color="#13BEBB"
+                        stop-color="#06847B"
                       />
                       <stop
                         offset="1"
@@ -36467,7 +36467,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
                       y2="46.3533"
                     >
                       <stop
-                        stop-color="#13BEBB"
+                        stop-color="#06847B"
                       />
                       <stop
                         offset="1"
@@ -36528,7 +36528,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
                       y2="40.6161"
                     >
                       <stop
-                        stop-color="#13BEBB"
+                        stop-color="#06847B"
                       />
                       <stop
                         offset="1"
@@ -36907,7 +36907,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                                 y2="10.4478"
                               >
                                 <stop
-                                  stop-color="#13BEBB"
+                                  stop-color="#06847B"
                                 />
                                 <stop
                                   offset="1"
@@ -37038,7 +37038,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                                 y2="10.4478"
                               >
                                 <stop
-                                  stop-color="#13BEBB"
+                                  stop-color="#06847B"
                                 />
                                 <stop
                                   offset="1"
@@ -37169,7 +37169,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                                 y2="10.4478"
                               >
                                 <stop
-                                  stop-color="#13BEBB"
+                                  stop-color="#06847B"
                                 />
                                 <stop
                                   offset="1"
@@ -37296,7 +37296,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                                 y2="10.4478"
                               >
                                 <stop
-                                  stop-color="#13BEBB"
+                                  stop-color="#06847B"
                                 />
                                 <stop
                                   offset="1"
@@ -37423,7 +37423,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
                                 y2="10.4478"
                               >
                                 <stop
-                                  stop-color="#13BEBB"
+                                  stop-color="#06847B"
                                 />
                                 <stop
                                   offset="1"
@@ -66422,7 +66422,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                             y2="23.5714"
                           >
                             <stop
-                              stop-color="#13BEBB"
+                              stop-color="#06847B"
                             />
                             <stop
                               offset="1"
@@ -66823,7 +66823,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                             y2="23.5714"
                           >
                             <stop
-                              stop-color="#13BEBB"
+                              stop-color="#06847B"
                             />
                             <stop
                               offset="1"
@@ -67196,7 +67196,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                             y2="23.5714"
                           >
                             <stop
-                              stop-color="#13BEBB"
+                              stop-color="#06847B"
                             />
                             <stop
                               offset="1"
@@ -68160,7 +68160,7 @@ Ctrl + K"
                         y2="23.5714"
                       >
                         <stop
-                          stop-color="#13BEBB"
+                          stop-color="#06847B"
                         />
                         <stop
                           offset="1"
@@ -70536,7 +70536,7 @@ Ctrl + K"
                         y2="23.5714"
                       >
                         <stop
-                          stop-color="#13BEBB"
+                          stop-color="#06847B"
                         />
                         <stop
                           offset="1"
@@ -71905,7 +71905,7 @@ Ctrl + K"
                         y2="23.5714"
                       >
                         <stop
-                          stop-color="#13BEBB"
+                          stop-color="#06847B"
                         />
                         <stop
                           offset="1"
diff --git a/saleor/static/dashboard-next/storybook/stories/configuration/ConfigurationPage.tsx b/saleor/static/dashboard-next/storybook/stories/configuration/ConfigurationPage.tsx
index 1ece8491237..36576cb33eb 100644
--- a/saleor/static/dashboard-next/storybook/stories/configuration/ConfigurationPage.tsx
+++ b/saleor/static/dashboard-next/storybook/stories/configuration/ConfigurationPage.tsx
@@ -11,6 +11,10 @@ import Decorator from "../../Decorator";
 
 const user = {
   __typename: staffMember.__typename,
+  avatar: {
+    __typename: staffMember.avatar.__typename,
+    url: staffMember.avatar.url
+  },
   email: staffMember.email,
   firstName: "Adam Evan",
   id: staffMember.id,
diff --git a/saleor/static/dashboard-next/theme.ts b/saleor/static/dashboard-next/theme.ts
index 3826ae4471c..986d89ba07b 100644
--- a/saleor/static/dashboard-next/theme.ts
+++ b/saleor/static/dashboard-next/theme.ts
@@ -12,7 +12,13 @@ const createShadow = (pv, pb, ps, uv, ub, us, av, ab, as) =>
 export const ICONBUTTON_SIZE = 48;
 
 export type IThemeColors = Record<
-  "primary" | "secondary" | "error" | "paperBorder" | "autofill",
+  | "primary"
+  | "secondary"
+  | "error"
+  | "paperBorder"
+  | "autofill"
+  | "buttonText"
+  | "textColor",
   string
 > & {
   background: Record<"default" | "paper", string>;
@@ -35,7 +41,18 @@ export default (colors: IThemeColors): Theme =>
             backgroundColor: fade(colors.primary, 0.12)
           }
         },
+        flat: {
+          "& span": {
+            color: colors.textColor
+          }
+        },
+        flatPrimary: {
+          "& span": {
+            color: colors.textColor
+          }
+        },
         label: {
+          color: colors.buttonText,
           fontWeight: 600
         },
         root: {


Code review comments:
diff_hunk: @@ -12,7 +12,13 @@ const createShadow = (pv, pb, ps, uv, ub, us, av, ab, as) =>
 export const ICONBUTTON_SIZE = 48;
 
 export type IThemeColors = Record<
-  "primary" | "secondary" | "error" | "paperBorder" | "autofill",
+  | "primary"
+  | "secondary"
+  | "error"
+  | "paperBorder"
+  | "autofill"
+  | "buttonText"
+  | "textColor",
path: saleor/static/dashboard-next/theme.ts
text: @user1:
`buttonText` and `textColor` belong to `Record<"default" | "gray", string>` type.