Merge pull request #594 from AppQuality/develop

Release 20230626

Author: cannarocks

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 .eslintcache
 
 generate-devel-token.json
+generate-devel-token-*.json
 
 # vs code configuration
 .vscode

package.json

@@ -3,7 +3,7 @@
   "version": "1.4.0",
   "private": true,
   "dependencies": {
-    "@appquality/unguess-design-system": "3.0.4",
+    "@appquality/unguess-design-system": "3.1.2",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",

src/App.test.tsx

@@ -4,16 +4,15 @@ import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { useTranslation } from 'react-i18next';
 import Helmet from 'react-helmet';
 import Pages from 'src/common/Pages';
-import { theme } from 'src/app/theme';
+import { appTheme } from 'src/app/theme';
 import { Provider } from 'react-redux';
 import { store } from './store';
 
 const App = () => {
   const { t } = useTranslation();
-
   return (
     <Provider store={store}>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={appTheme}>
         <GlobalStyle />
         <Helmet>
           <meta
@@ -25,13 +24,13 @@ const App = () => {
         </Helmet>
         <ToastProvider
           limit={5}
-          zIndex={theme.levels.modal}
+          zIndex={500}
           placementProps={{
             top: {
               style: {
                 top:
-                  parseInt(theme.components.chrome.header.height, 10) +
-                  theme.space.base * 4,
+                  parseInt(appTheme.components.chrome.header.height, 10) +
+                  appTheme.space.base * 4,
               },
             },
           }}

src/app/App.tsx

@@ -1,20 +1,20 @@
 import {
   theme as baseTheme,
-  CHARTS_COLOR_PALETTE,
+  getColor,
 } from '@appquality/unguess-design-system';
 
 export const SEVERITY_COLORS: Record<Severities, string> = {
-  critical: CHARTS_COLOR_PALETTE.mattone,
-  high: CHARTS_COLOR_PALETTE.gubbioLight,
-  medium: CHARTS_COLOR_PALETTE.blueRoyal,
-  low: CHARTS_COLOR_PALETTE.darkPine,
+  critical: baseTheme.palette.red[900],
+  high: baseTheme.palette.yellow[600],
+  medium: baseTheme.palette.blue[600],
+  low: baseTheme.palette.teal[700],
 };
 
 export const SEVERITY_HUES: Record<Severities, string> = {
-  critical: CHARTS_COLOR_PALETTE.mattone,
-  high: CHARTS_COLOR_PALETTE.gubbioLight,
-  medium: CHARTS_COLOR_PALETTE.blueRoyal,
-  low: CHARTS_COLOR_PALETTE.darkPine,
+  critical: baseTheme.palette.red[900],
+  high: baseTheme.palette.yellow[600],
+  medium: baseTheme.palette.blue[600],
+  low: baseTheme.palette.teal[700],
 };
 // temporary fix for the bug state colors
 export const BUG_STATE_COLORS: Record<
@@ -30,38 +30,45 @@ export const BUG_STATE_COLORS: Record<
     color: baseTheme.palette.grey[400],
   },
   'to be imported': {
-    stroke: baseTheme.palette.azure[400],
-    color: baseTheme.palette.azure[400],
+    stroke: baseTheme.palette.azure[500],
+    color: baseTheme.palette.azure[500],
   },
   open: {
-    stroke: baseTheme.palette.azure[400],
-    color: baseTheme.palette.azure[400],
+    stroke: baseTheme.palette.azure[500],
+    color: baseTheme.palette.azure[500],
   },
   'to be retested': {
-    stroke: baseTheme.palette.yellow[400],
-    color: baseTheme.palette.yellow[400],
+    stroke: baseTheme.palette.yellow[500],
+    color: baseTheme.palette.yellow[500],
   },
   solved: {
-    stroke: baseTheme.palette.green[600],
-    color: baseTheme.palette.green[600],
+    stroke: baseTheme.palette.green[500],
+    color: baseTheme.palette.green[500],
   },
   'not a bug': {
     stroke: baseTheme.palette.grey[600],
     color: baseTheme.palette.grey[600],
   },
 };
 
-const theme = {
+const appTheme = {
   ...baseTheme,
   colors: {
     ...baseTheme.colors,
     bySeverity: SEVERITY_COLORS,
     byBugState: BUG_STATE_COLORS,
     bySeverityHues: SEVERITY_HUES,
-    darkPine: CHARTS_COLOR_PALETTE.darkPine,
   },
   components: {
     ...baseTheme.components,
+    text: {
+      neutralColor: baseTheme.colors.foreground,
+      primaryColor: getColor(baseTheme.colors.primaryHue, 600),
+      successColor: getColor(baseTheme.colors.successHue, 700),
+      warningColor: getColor(baseTheme.colors.warningHue, 700),
+      dangerColor: getColor(baseTheme.colors.dangerHue, 700),
+      infoColor: getColor(baseTheme.colors.infoHue, 700),
+    },
     'tables.header_row': {
       height: 'auto',
     },
@@ -72,4 +79,5 @@ const theme = {
   },
 };
 
-export { theme };
+export type AppTheme = typeof appTheme;
+export { appTheme };