From 1f2c78831da8b29fe49eb0f1d294be0acd188729 Mon Sep 17 00:00:00 2001
From: yamashush <38120991+yamashush@users.noreply.github.com>
Date: Sun, 21 Jan 2024 19:34:45 +0900
Subject: [PATCH] improve accessibility on permission modal

Signed-off-by: yamashush <38120991+yamashush@users.noreply.github.com>
---
 .../permissions-modal/permission-add-entry-field.tsx      | 6 +++---
 .../permissions-modal/permission-entry-buttons.tsx        | 8 ++++----
 .../permissions-modal/permission-owner-change.tsx         | 2 +-
 .../permissions-modal/permission-owner-info.tsx           | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-add-entry-field.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-add-entry-field.tsx
index 2c8582a34..37941e8a7 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-add-entry-field.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-add-entry-field.tsx
@@ -9,7 +9,7 @@ import { UiIcon } from '../../../../../common/icons/ui-icon'
 import type { PermissionDisabledProps } from './permission-disabled.prop'
 import React, { useCallback, useState } from 'react'
 import { Button, FormControl, InputGroup } from 'react-bootstrap'
-import { Plus as IconPlus } from 'react-bootstrap-icons'
+import { PlusLg as IconPlus } from 'react-bootstrap-icons'
 
 export interface PermissionAddEntryFieldProps {
   onAddEntry: (identifier: string) => void
@@ -42,8 +42,8 @@ export const PermissionAddEntryField: React.FC<PermissionAddEntryFieldProps & Pe
       <InputGroup className={'me-1 mb-1'}>
         <FormControl value={newEntryIdentifier} placeholder={placeholderText} onChange={onChange} disabled={disabled} />
         <Button
-          variant='light'
-          className={'text-secondary ms-2'}
+          variant='primary'
+          className={'text-ms-2'}
           title={placeholderText}
           onClick={onSubmit}
           disabled={disabled}>
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-buttons.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-buttons.tsx
index ba2516c25..0a8341dcd 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-buttons.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-buttons.tsx
@@ -75,10 +75,7 @@ export const PermissionEntryButtons: React.FC<PermissionEntryButtonsProps & Perm
 
   return (
     <div>
-      <Button variant='light' className={'text-danger me-2'} disabled={disabled} title={removeTitle} onClick={onRemove}>
-        <UiIcon icon={IconX} />
-      </Button>
-      <ToggleButtonGroup type='radio' name='edit-mode' value={currentSetting}>
+      <ToggleButtonGroup className={'me-2'} type='radio' name='edit-mode' value={currentSetting}>
         <Button
           disabled={disabled}
           title={setReadOnlyTitle}
@@ -94,6 +91,9 @@ export const PermissionEntryButtons: React.FC<PermissionEntryButtonsProps & Perm
           <UiIcon icon={IconPencil} />
         </Button>
       </ToggleButtonGroup>
+      <Button variant='danger' disabled={disabled} title={removeTitle} onClick={onRemove}>
+        <UiIcon icon={IconX} />
+      </Button>
     </div>
   )
 }
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-owner-change.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-owner-change.tsx
index 1da4a0dd0..c5af5cf40 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-owner-change.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-owner-change.tsx
@@ -38,7 +38,7 @@ export const PermissionOwnerChange: React.FC<PermissionOwnerChangeProps> = ({ on
     <InputGroup className={'me-1 mb-1'}>
       <FormControl value={ownerFieldValue} placeholder={placeholderText} onChange={onChangeField} />
       <Button
-        variant='light'
+        variant='primary'
         title={buttonTitleText}
         onClick={onClickConfirm}
         className={'ms-2'}
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-owner-info.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-owner-info.tsx
index 0353de0d5..d738bab88 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-owner-info.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-owner-info.tsx
@@ -36,7 +36,7 @@ export const PermissionOwnerInfo: React.FC<PermissionOwnerInfoProps & Permission
   return (
     <Fragment>
       <UserAvatarForUsername username={noteOwner} />
-      <Button variant='light' disabled={disabled} title={buttonTitle} onClick={onEditOwner}>
+      <Button variant='primary' disabled={disabled} title={buttonTitle} onClick={onEditOwner}>
         <UiIcon icon={IconPencil} />
       </Button>
     </Fragment>