CE-2202: Use Secondary color from ess-common

package-lock.json

@@ -5,12 +5,13 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "ce-deploy-ui",
       "version": "0.1.0",
       "dependencies": {
         "@ahooksjs/use-url-state": "^3.5.0",
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
-        "@ess-ics/ce-ui-common": "^4.1.0",
+        "@ess-ics/ce-ui-common": "4.2.0",
         "@fontsource/roboto": "^4.1.0",
         "@mui/icons-material": "^5.14.1",
         "@mui/material": "^5.14.1",
@@ -3022,9 +3023,9 @@
       }
     },
     "node_modules/@ess-ics/ce-ui-common": {
-      "version": "4.1.0",
-      "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-4.1.0.tgz",
-      "integrity": "sha1-3bxeFh3pLpnf1NXGSCq40n6FCwk=",
+      "version": "4.2.0",
+      "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-4.2.0.tgz",
+      "integrity": "sha1-DFaYJnYe+3vP55lG84iAosDD8ns=",
       "dependencies": {
         "@fontsource/titillium-web": "^4.5.9",
         "@mui/x-data-grid-pro": "^6.5.0",
@@ -9744,8 +9745,6 @@
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
       "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -9760,9 +9759,7 @@
     "node_modules/ajv-formats/node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "optional": true,
-      "peer": true
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "node_modules/ajv-keywords": {
       "version": "5.1.0",
@@ -38833,9 +38830,9 @@
       "dev": true
     },
     "@ess-ics/ce-ui-common": {
-      "version": "4.1.0",
-      "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-4.1.0.tgz",
-      "integrity": "sha1-3bxeFh3pLpnf1NXGSCq40n6FCwk=",
+      "version": "4.2.0",
+      "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-4.2.0.tgz",
+      "integrity": "sha1-DFaYJnYe+3vP55lG84iAosDD8ns=",
       "requires": {
         "@fontsource/titillium-web": "^4.5.9",
         "@mui/x-data-grid-pro": "^6.5.0",
@@ -43319,13 +43316,14 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "requires": {},
+      "requires": {
+        "ajv": "^8.0.0"
+      },
       "dependencies": {
         "ajv": {
-          "version": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
           "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-          "optional": true,
-          "peer": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -43336,9 +43334,7 @@
         "json-schema-traverse": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-          "optional": true,
-          "peer": true
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
         }
       }
     },

package.json

@@ -7,7 +7,7 @@
     "@ahooksjs/use-url-state": "^3.5.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@ess-ics/ce-ui-common": "^4.1.0",
+    "@ess-ics/ce-ui-common": "4.2.0",
     "@fontsource/roboto": "^4.1.0",
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.1",

src/components/IOC/IOCManage/IOCManage.js

@@ -169,7 +169,7 @@ export function IOCManage({
                 <span>
                   <Button
                     variant="contained"
-                    color="secondary"
+                    color="primary"
                     onClick={() => {
                       setDeployDialogOpen(true);
                     }}
@@ -184,7 +184,7 @@ export function IOCManage({
                   <span>
                     <Button
                       variant="contained"
-                      color="secondary"
+                      color="primary"
                       style={{ marginRight: 20 }}
                       onClick={() => {
                         setUndeployDialogOpen(true);

src/components/IOC/IOCService/IOCService.js

@@ -5,7 +5,6 @@ import {
   Typography,
   Tooltip
 } from "@mui/material";
-import { styled } from "@mui/material/styles";
 import React, {
   useState,
   useEffect,
@@ -21,31 +20,6 @@ import AccessControl from "../../auth/AccessControl";
 import { useNavigate } from "react-router-dom";
 import { apiContext } from "../../../api/DeployApi";
 
-const StartButton = styled(Button)(({ theme }) => ({
-  backgroundColor: theme.palette.essGrass.main,
-  color: theme.palette.essWhite.main,
-  "&:disabled": {
-    backgroundColor: theme.palette.grey[300],
-    color: theme.palette.grey[500]
-  },
-  "&:hover": {
-    backgroundColor: theme.palette.essGrass.main,
-    color: theme.palette.essWhite.main
-  }
-}));
-const StopButton = styled(Button)(({ theme }) => ({
-  backgroundColor: theme.palette.essNavy.main,
-  color: theme.palette.essWhite.main,
-  "&:disabled": {
-    backgroundColor: theme.palette.grey[300],
-    color: theme.palette.grey[500]
-  },
-  "&:hover": {
-    backgroundColor: theme.palette.essNavy.main,
-    color: theme.palette.essWhite.main
-  }
-}));
-
 export function IOCService({
   ioc,
   currentCommand,
@@ -256,22 +230,34 @@ export function IOCService({
       >
         <Grid item>
           <Tooltip title={disabledStopButtonTitle}>
-            <StopButton
-              onClick={() => setStopModalOpen(true)}
+            <Button
+              color="secondary"
               disabled={buttonDisabled}
+              variant="contained"
+              sx={{
+                ":hover": {
+                  bgcolor: "secondary.light"
+                }
+              }}
+              onClick={() => setStopModalOpen(true)}
             >
               Stop
-            </StopButton>
+            </Button>
           </Tooltip>
         </Grid>
         <Grid item>
           <Tooltip title={disabledStartButtonTitle}>
-            <StartButton
-              onClick={() => setStartModalOpen(true)}
+            <Button
+              color="essGrass"
+              variant="contained"
               disabled={buttonDisabled}
+              sx={{
+                color: "essWhite.main" // theme.palette.primary.main
+              }}
+              onClick={() => setStartModalOpen(true)}
             >
               Start
-            </StartButton>
+            </Button>
           </Tooltip>
         </Grid>
         <Grid

src/style/Theme.js

@@ -33,10 +33,6 @@ theme = createTheme(theme, {
     }
   },
   palette: {
-    // TODO: Add secondary to common theme?
-    secondary: {
-      main: theme.palette.essNavy.main
-    },
     status: {
       ...theme.palette.status,
       icons: theme.palette.grey[800]