Merge pull request #1578 from ErickCReis/feat/update-primer-react

feat(primer/react): update version

package.json

@@ -7,8 +7,8 @@
     "@bytemd/plugin-math": "1.21.0",
     "@bytemd/plugin-mermaid": "1.21.0",
     "@bytemd/react": "1.21.0",
-    "@primer/octicons-react": "18.3.0",
-    "@primer/react": "35.25.1",
+    "@primer/octicons-react": "19.8.0",
+    "@primer/react": "36.4.0",
     "@resvg/resvg-js": "2.4.1",
     "@upstash/ratelimit": "0.4.2",
     "@upstash/redis": "1.20.4",

pages/interface/components/EmptyState/index.js

@@ -10,7 +10,7 @@ export default function EmptyState(props) {
       <Heading sx={{ fontSize: 3 }}>{title}</Heading>
       {description && <Text>{description}</Text>}
       {action && (
-        <Button style={{ marginTop: '1rem' }} leadingIcon={PlusIcon} onClick={action.onClick}>
+        <Button style={{ marginTop: '1rem' }} leadingVisual={PlusIcon} onClick={action.onClick}>
           {action.text}
         </Button>
       )}

pages/interface/components/PasswordInput/index.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { FormControl, TextInput } from '@/TabNewsUI';
-import { EyeClosedIcon, EyeIcon } from '@/TabNewsUI/icons';
+import { AlertFillIcon, EyeClosedIcon, EyeIcon } from '@/TabNewsUI/icons';
 
 export default function PasswordInput({ inputRef, id, name, label, errorObject, setErrorObject, ...props }) {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -70,7 +70,10 @@ export default function PasswordInput({ inputRef, id, name, label, errorObject,
         {...props}
       />
       {capsLockWarningMessage && (
-        <FormControl.Validation variant="warning">{capsLockWarningMessage}</FormControl.Validation>
+        <FormControl.Caption sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+          <AlertFillIcon size={12} />
+          {capsLockWarningMessage}
+        </FormControl.Caption>
       )}
       {['empty', 'password', 'password_confirm'].includes(errorObject?.key) && (
         <FormControl.Validation variant="error">{errorObject.message}</FormControl.Validation>

pages/interface/components/SearchBox/index.js

@@ -58,7 +58,7 @@ export default function useSearchBox() {
           },
           ...sx,
         }}
-        leadingIcon={SearchIcon}
+        leadingVisual={SearchIcon}
         {...props}>
         Pesquisar
       </Button>
@@ -80,7 +80,7 @@ export default function useSearchBox() {
           },
           ...sx,
         }}
-        leadingIcon={SearchIcon}
+        leadingVisual={SearchIcon}
         {...props}>
         Pesquisar
       </Button>

pages/interface/components/TabNewsUI/icons/index.js

@@ -1,6 +1,7 @@
 export { CgTab } from 'react-icons/cg';
 export { FaPause, FaPlay, FaTree, FaUser } from 'react-icons/fa';
 export {
+  AlertFillIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -24,8 +25,8 @@ export {
   SignOutIcon,
   SquareFillIcon,
   SunIcon,
-  TrashIcon,
   ThreeBarsIcon,
+  TrashIcon,
   UnfoldIcon,
   XCircleFillIcon,
 } from '@primer/octicons-react';

pages/perfil/index.public.js

@@ -143,11 +143,11 @@ function EditProfileForm() {
         await fetchUser();
 
         if (user.email !== email) {
-          setErrorObject({
-            message: `Atenção: Um email de confirmação foi enviado para ${email}`,
-            key: 'email',
-            type: 'confirmation',
-          });
+          const hasSavedModifications = Object.keys(payload).length > 1;
+          const text = hasSavedModifications
+            ? `Alterações salvas. O email será alterado apenas após a confirmação pelo link enviado para "${email}".`
+            : `Alteração pendente. Um email de confirmação foi enviado para "${email}".`;
+          setGlobalMessageObject({ text, type: 'warning' });
           setEmailDisabled(true);
         } else {
           setGlobalMessageObject({
@@ -246,10 +246,6 @@ function EditProfileForm() {
               </Box>
             </FormControl.Validation>
           )}
-
-          {errorObject?.key === 'email' && errorObject?.type === 'confirmation' && (
-            <FormControl.Validation variant="warning">{errorObject.message}</FormControl.Validation>
-          )}
         </FormControl>
 
         <FormControl id="description">