Merge pull request #45 from fga-eps-mds/refactor/US008

refactor: adjust confirmation modal style
fga-eps-mds · Sep 13, 2024 · 3c93291 · 3c93291
2 parents ddf619e + 7bb4ec2
commit 3c93291
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 8 deletions.
diff --git a/public/locales/en/repositories.json b/public/locales/en/repositories.json
@@ -9,6 +9,7 @@
   "not-found": "No Repository found...",
   "delete": {
     "title": "Confirm deletion of ",
+    "titleRest": "by typing its name bellow",
     "alert": "This will permanently delete the item ",
     "button": "CONFIRM DELETION",
     "toast-success": "Repository successfully deleted!",

diff --git a/public/locales/pt/repositories.json b/public/locales/pt/repositories.json
@@ -9,6 +9,7 @@
   "not-found": "Nenhum Repositório encontrado...",
   "delete": {
     "title": "Confirme a exclusão de ",
+    "titleRest": "digitando o nome dele abaixo.",
     "alert": "Isso irá deletar permanentemente o item ",
     "button": "CONFIRMAR EXCLUSÃO",
     "toast-sucess": "Repositório excluído com sucesso!",
@@ -19,7 +20,7 @@
     "name": "Nome do Repositório",
     "description": "Descrição",
     "url": "URL do Repositório",
-    "plataform": "Plataforma",
+    "platform": "Plataforma",
     "save": "Salvar Alterações",
     "sucess": "Repositório atualizado com sucesso!",
     "product": "Produto"

diff --git a/src/pages/products/[product]/repositories/manage-repository/RepositoryForm.tsx b/src/pages/products/[product]/repositories/manage-repository/RepositoryForm.tsx
@@ -248,13 +248,14 @@ const RepositoryForm: NextPageWithLayout = () => {
               select
               label={t('edit.platform')}
               value={platform}
+              disabled={imported}
               onChange={(e) => setPlataform(e.target.value)}
               sx={{ mb: 2 }}
               data-testid="repo-platform-input"
             >
               {platforms.map((plat) => (
                 <MenuItem key={plat.value} value={plat.value}>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                     {plat.icon}
                     {plat.label}
                   </Box>

diff --git a/src/shared/components/ConfirmationModal/ConfirmationModal.tsx b/src/shared/components/ConfirmationModal/ConfirmationModal.tsx
@@ -8,7 +8,7 @@ import {
   Alert,
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
-import WarningIcon from '@mui/icons-material/Warning';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 import { useTranslation } from 'react-i18next';
 
 type ConfirmationModalProps = {
@@ -56,7 +56,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
         top: '50%',
         left: '50%',
         transform: 'translate(-50%, -50%)',
-        width: 400,
+        maxWidth: 600,
         bgcolor: 'background.paper',
         boxShadow: 24,
         p: 4,
@@ -66,11 +66,20 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
         </IconButton>
         <Typography variant="h6"> {`${t('delete.title')} ${itemName}.`}</Typography>
         <Alert
-          icon={<WarningIcon />}
+          icon={<WarningAmberIcon style={{ color: '#df8e16' }} />}
           severity="warning"
+          style={{
+            backgroundColor: '#f8e6cb',
+            color: '#DF8E16',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: '1px solid #df8e16',
+            fontWeight: 'bolder'
+          }}
           sx={{ mt: 2, mb: 3 }}
         >
-          {`${t('delete.title')} ${itemName}`}
+          {`${t('delete.title')} ${itemName} ${t('delete.titleRest')}`}
         </Alert>
         {/* Restante do componente */}
         <input

diff --git a/src/shared/components/SearchButton/SearchButton.tsx b/src/shared/components/SearchButton/SearchButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconButton, InputAdornment, TextField } from '@mui/material';
+import { InputAdornment, TextField } from '@mui/material';
 import { Search } from '@mui/icons-material';
 
 interface SearchProps {
@@ -19,9 +19,12 @@ const SearchButton = ({ onInput, label, placeHolder }: SearchProps) => (
     variant="outlined"
     placeholder={placeHolder ?? 'Buscar...'}
     size="small"
+    style={{
+      minWidth: '250px'
+    }}
     InputProps={{
       endAdornment: (
-        <InputAdornment position="start">
+        <InputAdornment position="end">
           <Search style={{ fill: '#2B4D6F' }} />
         </InputAdornment>
       ),