Fix neutral buttons (#4101)

* Fix Close buttons

* Add translation

app/javascript/components/admin/roles/forms/CreateRoleForm.jsx

@@ -4,6 +4,7 @@ import {
   Button, Stack,
 } from 'react-bootstrap';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import Form from '../../../shared_components/forms/Form';
 import Spinner from '../../../shared_components/utilities/Spinner';
 import FormControl from '../../../shared_components/forms/FormControl';
@@ -11,6 +12,7 @@ import { createRoleFormConfig, createRoleFormFields } from '../../../../helpers/
 import useCreateRole from '../../../../hooks/mutations/admin/roles/useCreateRole';
 
 export default function CreateRoleForm({ handleClose }) {
+  const { t } = useTranslation();
   const createRole = useCreateRole({ onSettled: handleClose });
   const methods = useForm(createRoleFormConfig);
   const fields = createRoleFormFields;
@@ -19,11 +21,11 @@ export default function CreateRoleForm({ handleClose }) {
     <Form methods={methods} onSubmit={createRole.mutate}>
       <FormControl field={fields.name} type="text" />
       <Stack className="mt-1" direction="horizontal" gap={1}>
-        <Button variant="brand-outline" className="ms-auto" onClick={handleClose}>
-          Close
+        <Button variant="neutral" className="ms-auto" onClick={handleClose}>
+          {t('close')}
         </Button>
         <Button variant="brand" type="submit" disabled={createRole.isLoading}>
-          Create Role
+          {t('admin.roles.create_role')}
           {createRole.isLoading && <Spinner />}
         </Button>
       </Stack>

app/javascript/components/rooms/room/presentation/forms/DeletePresentationForm.jsx

@@ -20,7 +20,7 @@ export default function DeletePresentationForm({ handleClose }) {
       <p className="text-center"> { t('room.presentation.are_you_sure_delete_presentation') }</p>
       <Form methods={methods} onSubmit={deletePresentation.mutate}>
         <Stack direction="horizontal" gap={1} className="float-end">
-          <Button variant="brand-outline" onClick={handleClose}>
+          <Button variant="close" onClick={handleClose}>
             { t('close') }
           </Button>
           <Button variant="danger" type="submit" disabled={deletePresentation.isLoading}>

app/javascript/components/shared_components/modals/CreateRoleModal.jsx

@@ -9,7 +9,7 @@ export default function CreateRoleModal() {
 
   return (
     <Modal
-      modalButton={<Button variant="brand" className="ms-auto">{ t('admin.roles.create_role') }</Button>}
+      modalButton={<Button variant="brand" className="ms-auto">{ t('admin.roles.add_role') }</Button>}
       title={t('admin.roles.create_new_role')}
       body={<CreateRoleForm />}
     />

app/javascript/components/users/user/SetAvatar.jsx

@@ -94,7 +94,7 @@ export default function SetAvatar({ user }) {
           </div>
         </Modal.Body>
         <Modal.Footer>
-          <Button variant="brand-outline" onClick={handleClose}>
+          <Button variant="neutral" onClick={handleClose}>
             { t('close') }
           </Button>
           <Button variant="brand" onClick={handleSave}>

public/locales/en.json

@@ -286,7 +286,8 @@
       "delete_role": "Delete Role",
       "are_you_sure_delete_role": "Are you sure you want to delete this role?",
       "enter_role_name": "Enter a role name",
-      "create_role": "+ Create Role",
+      "add_role": "+ Create Role",
+      "create_role": "Create Role",
       "create_new_role": "Create a new role",
       "no_role_found": "No role found."
     }