update(roles): ui styles update (#272)

eclipse-tractusx · Sep 18, 2023 · e9aa4dc · e9aa4dc
1 parent 2697ec8
commit e9aa4dc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     ]
   },
   "dependencies": {
-    "@catena-x/portal-shared-components": "^2.0.26",
+    "@catena-x/portal-shared-components": "^2.0.27",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/error-message": "^2.0.1",

diff --git a/src/components/pages/AppOverview/AddRoles.tsx b/src/components/pages/AppOverview/AddRoles.tsx
@@ -87,7 +87,18 @@ export default function AddRoles() {
           establishedRoles: string
           checkbox: string
         }
-      }) => <Chip color="info" label={row.establishedRoles} withIcon={false} />,
+      }) => (
+        <Chip
+          color="info"
+          label={row.establishedRoles}
+          withIcon={false}
+          sx={{
+            '.span.MuiChip-label:hover': {
+              backgroundColor: 'transparent',
+            },
+          }}
+        />
+      ),
     },
     {
       field: 'checkbox',
@@ -130,7 +141,7 @@ export default function AddRoles() {
       />
       <div className="main-container">
         <div className="main-row">
-          <Box sx={{ textAlign: 'center' }}>
+          <Box sx={{ textAlign: 'center', paddingTop: '20px' }}>
             <Button size="small" onClick={() => setAddRolesOverlayOpen(true)}>
               {t('content.addRoles.uploadAdditionalRoles')}
             </Button>

diff --git a/src/components/pages/AppOverview/AddRolesOverlay.tsx b/src/components/pages/AppOverview/AddRolesOverlay.tsx
@@ -31,7 +31,7 @@ import {
   Typography,
 } from '@catena-x/portal-shared-components'
 import { PAGES } from 'types/Constants'
-import { Grid } from '@mui/material'
+import { Box, Grid } from '@mui/material'
 import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined'
 import { Controller, useForm } from 'react-hook-form'
 import { Dropzone } from 'components/shared/basic/Dropzone'
@@ -229,15 +229,7 @@ const AddRolesOverlay = ({
                 }}
                 acceptFormat={{ 'text/csv': ['.csv'] }}
                 maxFilesToUpload={1}
-                enableDeleteOverlay={true}
-                deleteOverlayTranslation={{
-                  title: '',
-                  content: t(
-                    'content.apprelease.technicalIntegration.deleteOverlayContent'
-                  ),
-                  action_no: `${t('global.actions.no')}`,
-                  action_yes: `${t('global.actions.yes')}`,
-                }}
+                enableDeleteOverlay={false}
               />
             )}
           />
@@ -255,7 +247,9 @@ const AddRolesOverlay = ({
           )}
 
           {rolesPreviews?.length > 0 && (
-            <StaticTable data={tableData} horizontal={false} />
+            <Box sx={{ width: '80%', margin: '40px auto 0' }}>
+              <StaticTable data={tableData} horizontal={false} />
+            </Box>
           )}
           <Typography align="center" variant="body2" sx={{ mt: 5, mb: 2 }}>
             {t('content.addRoles.confirmButtonDescription')}