fix(ui): replace transparent background for Alert (#515)

* fix(ui): replace transparent background for Alert * fix(e2e): tests * fix(ci): pnpm version bump * fix(e2e): tests * fix(e2e): tests * fix(ci): loki version bump and set browser version * fix(e2e): tests * fix(ci): pull docker image * fix(e2e): tests * fix(e2e): tests * fix(e2e): tests * fix(e2e): tests * fix(e2e): tests * fix(e2e): tests * fix(e2e): tests * fix(e2e): tests * fix(e2e): tests * fix(e2e): tests
hazelcast · Sep 27, 2023 · d231d00 · d231d00
1 parent ddd3509
commit d231d00
Show file tree

Hide file tree

Showing 35 changed files with 259 additions and 10 deletions.
diff --git a/.github/actions/install/action.yml b/.github/actions/install/action.yml
@@ -13,7 +13,7 @@ runs:
       name: Install pnpm
       id: pnpm-install
       with:
-        version: 7
+        version: 8
         run_install: false
 
     - name: Get pnpm store directory

diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Critical.png b/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Critical.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Critical_Action.png b/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Critical_Action.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Critical_Actions.png b/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Critical_Actions.png
diff --git a/...oki/reference/chrome_minimal_Components_Alert_Critical_Without_Close_Button.png b/...oki/reference/chrome_minimal_Components_Alert_Critical_Without_Close_Button.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Info.png b/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Info.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Info_Action.png b/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Info_Action.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Info_Actions.png b/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Info_Actions.png
diff --git a/...i/.loki/reference/chrome_minimal_Components_Alert_Info_Without_Close_Button.png b/...i/.loki/reference/chrome_minimal_Components_Alert_Info_Without_Close_Button.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Success.png b/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Success.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Success_Action.png b/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Success_Action.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Success_Actions.png b/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Success_Actions.png
diff --git a/...loki/reference/chrome_minimal_Components_Alert_Success_Without_Close_Button.png b/...loki/reference/chrome_minimal_Components_Alert_Success_Without_Close_Button.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Warning.png b/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Warning.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Warning_Action.png b/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Warning_Action.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Warning_Actions.png b/packages/ui/.loki/reference/chrome_minimal_Components_Alert_Warning_Actions.png
diff --git a/...loki/reference/chrome_minimal_Components_Alert_Warning_Without_Close_Button.png b/...loki/reference/chrome_minimal_Components_Alert_Warning_Without_Close_Button.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Card_With_Caption.png b/packages/ui/.loki/reference/chrome_minimal_Components_Card_With_Caption.png
diff --git a/...ki/reference/chrome_minimal_Components_CheckableSelectField_Without_Options.png b/...ki/reference/chrome_minimal_Components_CheckableSelectField_Without_Options.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_MultiSelectField_Open.png b/packages/ui/.loki/reference/chrome_minimal_Components_MultiSelectField_Open.png
diff --git a/.../reference/chrome_minimal_Components_MultiSelectField_Open_With_Input_Value.png b/.../reference/chrome_minimal_Components_MultiSelectField_Open_With_Input_Value.png
diff --git a/...me_minimal_Components_MultiSelectField_Open_With_Input_Value_And_No_Results.png b/...me_minimal_Components_MultiSelectField_Open_With_Input_Value_And_No_Results.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Default.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Default.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Fullscreen.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Fullscreen.png
diff --git a/...rence/chrome_minimal_Components_Overlay_Fullscreen_With_Full_Height_Content.png b/...rence/chrome_minimal_Components_Overlay_Fullscreen_With_Full_Height_Content.png
diff --git a/...ki/reference/chrome_minimal_Components_Overlay_Fullscreen_With_Long_Content.png b/...ki/reference/chrome_minimal_Components_Overlay_Fullscreen_With_Long_Content.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Not_Closable.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Not_Closable.png
diff --git a/...ges/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png b/...ges/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Title.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Title.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_SelectField_Open.png b/packages/ui/.loki/reference/chrome_minimal_Components_SelectField_Open.png
diff --git a/....loki/reference/chrome_minimal_Components_SelectField_Open_With_Input_Value.png b/....loki/reference/chrome_minimal_Components_SelectField_Open_With_Input_Value.png
diff --git a/.../chrome_minimal_Components_SelectField_Open_With_Input_Value_And_No_Results.png b/.../chrome_minimal_Components_SelectField_Open_With_Input_Value_And_No_Results.png
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -32,9 +32,9 @@
     "build-storybook": "build-storybook",
     "publish-storybook": "chromatic --storybook-build-dir storybook-static --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes",
     "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
-    "test:visual": "loki --verboseRenderer --requireReference --reactUri file:./storybook-static --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
+    "test:visual": "loki --verboseRenderer --requireReference --chromeTolerance 3 --reactUri file:./storybook-static --chromeDockerImage 'yukinying/chrome-headless-browser-stable:110.0.5481.77' --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
     "test:visual:approve": "loki approve",
-    "generate-screenshots": "pnpm run build-storybook && loki update --reactUri file:./storybook-static --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
+    "generate-screenshots": "pnpm run build-storybook && loki update --reactUri file:./storybook-static --chromeDockerImage 'yukinying/chrome-headless-browser-stable:110.0.5481.77' --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
     "lint": "pnpm run lint:ts && pnpm run lint:css",
     "lint:fix": "pnpm run lint:ts:fix && pnpm run lint:css:fix",
     "lint:ts": "eslint --ext .ts,.tsx .",
@@ -95,7 +95,7 @@
     "doiuse": "^4.4.1",
     "enzyme": "^3.11.0",
     "jest-axe": "^5.0.1",
-    "loki": "^0.31.1",
+    "loki": "^0.32.0",
     "postcss": "^8.4.23",
     "postcss-cli": "^9.1.0",
     "postcss-reporter": "^7.0.5",

diff --git a/packages/ui/src/Alert.module.scss b/packages/ui/src/Alert.module.scss
@@ -38,7 +38,7 @@
   &.success {
     color: c.$colorText;
     border-color: c.$colorSuccess;
-    background-color: rgba(c.$colorSuccess, 30%);
+    background-color: c.$colorSuccessLight;
 
     .icon {
       color: c.$colorText;
@@ -55,7 +55,7 @@
   &.info {
     color: c.$colorText;
     border-color: c.$colorInfo;
-    background-color: rgba(c.$colorInfo, 30%);
+    background-color: c.$colorInfoLight;
 
     .icon {
       color: c.$colorText;
@@ -72,7 +72,7 @@
   &.warning {
     color: c.$colorText;
     border-color: c.$colorWarning;
-    background-color: rgba(c.$colorWarning, 30%);
+    background-color: c.$colorWarningLight;
 
     .icon {
       color: c.$colorText;
@@ -89,7 +89,7 @@
   &.critical {
     color: c.$colorText;
     border-color: c.$colorError;
-    background-color: rgba(c.$colorError, 30%);
+    background-color: c.$colorErrorLight;
 
     .icon {
       color: c.$colorText;