From c5d8341c453e3e92da4472ed5c11c2d79a603d61 Mon Sep 17 00:00:00 2001
From: yamashush <38120991+yamashush@users.noreply.github.com>
Date: Fri, 12 Jan 2024 19:51:14 +0900
Subject: [PATCH] fix(frontend): improves UI/UX of aliases modal

Signed-off-by: yamashush <38120991+yamashush@users.noreply.github.com>
---
 frontend/locales/en.json                      |  1 +
 .../aliases-add-form.spec.tsx.snap            |  4 +-
 .../aliases-list-entry.spec.tsx.snap          | 70 ++++++++++---------
 .../aliases-modal/aliases-add-form.tsx        |  6 +-
 .../aliases-modal/aliases-list-entry.spec.tsx |  4 +-
 .../aliases-modal/aliases-list-entry.tsx      | 27 ++++---
 6 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 1b468ef21..b7884a0c0 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -441,6 +441,7 @@
         "addAlias": "Add alias",
         "makePrimary": "Mark this alias as primary",
         "isPrimary": "This is the primary alias",
+        "primaryLabel": "Primary Alias",
         "removeAlias": "Remove this alias",
         "errorAddingAlias": "The chosen alias can not be added to this note",
         "errorRemovingAlias": "There was an error removing the alias",
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/__snapshots__/aliases-add-form.spec.tsx.snap b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/__snapshots__/aliases-add-form.spec.tsx.snap
index 4fb774a3a..d4cb68ea1 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/__snapshots__/aliases-add-form.spec.tsx.snap
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/__snapshots__/aliases-add-form.spec.tsx.snap
@@ -14,13 +14,13 @@ exports[`AliasesAddForm renders the input form 1`] = `
         value=""
       />
       <button
-        class="text-secondary ms-2 btn btn-light"
+        class="ms-2 btn btn-primary"
         data-testid="addAliasButton"
         disabled=""
         title="editor.modal.aliases.addAlias"
         type="submit"
       >
-        BootstrapIconMock_Plus
+        BootstrapIconMock_PlusLg
       </button>
     </div>
   </form>
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/__snapshots__/aliases-list-entry.spec.tsx.snap b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/__snapshots__/aliases-list-entry.spec.tsx.snap
index 2277f6a9b..c24e3fccc 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/__snapshots__/aliases-list-entry.spec.tsx.snap
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/__snapshots__/aliases-list-entry.spec.tsx.snap
@@ -1,23 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AliasesListEntry disables button in AliasesListEntry if it's not primary 1`] = `
+exports[`AliasesListEntry adds aliasPrimaryBadge & removes aliasButtonMakePrimary in AliasesListEntry if it's primary 1`] = `
 <div>
   <li
     class="list-group-item d-flex flex-row justify-content-between align-items-center"
   >
-    test-primary
+    <div>
+      test-primary
+      <span
+        class="ms-2 badge bg-secondary"
+        data-testid="aliasPrimaryBadge"
+        title="editor.modal.aliases.isPrimary"
+      >
+        editor.modal.aliases.primaryLabel
+      </span>
+    </div>
     <div>
       <button
-        class="me-2 btn btn-light"
-        data-testid="aliasButtonMakePrimary"
-        disabled=""
-        title="editor.modal.aliases.makePrimary"
-        type="button"
-      >
-        BootstrapIconMock_StarFill
-      </button>
-      <button
-        class="text-danger btn btn-light"
+        class="btn btn-danger"
         data-testid="aliasButtonRemove"
         disabled=""
         title="editor.modal.aliases.removeAlias"
@@ -30,24 +30,26 @@ exports[`AliasesListEntry disables button in AliasesListEntry if it's not primar
 </div>
 `;
 
-exports[`AliasesListEntry disables button in AliasesListEntry if it's primary 1`] = `
+exports[`AliasesListEntry removes aliasPrimaryBadge & adds aliasButtonMakePrimary in AliasesListEntry if it's not primary 1`] = `
 <div>
   <li
     class="list-group-item d-flex flex-row justify-content-between align-items-center"
   >
-    test-primary
+    <div>
+      test-primary
+    </div>
     <div>
       <button
-        class="me-2 text-warning btn btn-light"
-        data-testid="aliasIsPrimary"
+        class="me-2 btn btn-secondary"
+        data-testid="aliasButtonMakePrimary"
         disabled=""
-        title="editor.modal.aliases.isPrimary"
+        title="editor.modal.aliases.makePrimary"
         type="button"
       >
         BootstrapIconMock_Star
       </button>
       <button
-        class="text-danger btn btn-light"
+        class="btn btn-danger"
         data-testid="aliasButtonRemove"
         disabled=""
         title="editor.modal.aliases.removeAlias"
@@ -65,18 +67,20 @@ exports[`AliasesListEntry renders an AliasesListEntry that is not primary 1`] =
   <li
     class="list-group-item d-flex flex-row justify-content-between align-items-center"
   >
-    test-non-primary
+    <div>
+      test-non-primary
+    </div>
     <div>
       <button
-        class="me-2 btn btn-light"
+        class="me-2 btn btn-secondary"
         data-testid="aliasButtonMakePrimary"
         title="editor.modal.aliases.makePrimary"
         type="button"
       >
-        BootstrapIconMock_StarFill
+        BootstrapIconMock_Star
       </button>
       <button
-        class="text-danger btn btn-light"
+        class="btn btn-danger"
         data-testid="aliasButtonRemove"
         title="editor.modal.aliases.removeAlias"
         type="button"
@@ -93,19 +97,19 @@ exports[`AliasesListEntry renders an AliasesListEntry that is primary 1`] = `
   <li
     class="list-group-item d-flex flex-row justify-content-between align-items-center"
   >
-    test-primary
+    <div>
+      test-primary
+      <span
+        class="ms-2 badge bg-secondary"
+        data-testid="aliasPrimaryBadge"
+        title="editor.modal.aliases.isPrimary"
+      >
+        editor.modal.aliases.primaryLabel
+      </span>
+    </div>
     <div>
       <button
-        class="me-2 text-warning btn btn-light"
-        data-testid="aliasIsPrimary"
-        disabled=""
-        title="editor.modal.aliases.isPrimary"
-        type="button"
-      >
-        BootstrapIconMock_Star
-      </button>
-      <button
-        class="text-danger btn btn-light"
+        class="btn btn-danger"
         data-testid="aliasButtonRemove"
         title="editor.modal.aliases.removeAlias"
         type="button"
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-add-form.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-add-form.tsx
index b60ec128d..c43761a03 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-add-form.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-add-form.tsx
@@ -15,7 +15,7 @@ import { useUiNotifications } from '../../../../../notifications/ui-notification
 import type { FormEvent } from 'react'
 import React, { useCallback, useMemo, useState } from 'react'
 import { Button, Form, InputGroup } from 'react-bootstrap'
-import { Plus as IconPlus } from 'react-bootstrap-icons'
+import { PlusLg as IconPlus } from 'react-bootstrap-icons'
 
 const validAliasRegex = /^[a-z0-9_-]*$/
 
@@ -66,8 +66,8 @@ export const AliasesAddForm: React.FC = () => {
         />
         <Button
           type={'submit'}
-          variant='light'
-          className={'text-secondary ms-2'}
+          variant='primary'
+          className={'ms-2'}
           disabled={!isOwner || !newAliasValid || newAlias === ''}
           title={addAliasText}
           {...testId('addAliasButton')}>
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.spec.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.spec.tsx
index 2cbe12789..3849c4f9c 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.spec.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.spec.tsx
@@ -53,7 +53,7 @@ describe('AliasesListEntry', () => {
     expect(NoteDetailsReduxModule.updateMetadata).toBeCalled()
   })
 
-  it("disables button in AliasesListEntry if it's primary", () => {
+  it("adds aliasPrimaryBadge & removes aliasButtonMakePrimary in AliasesListEntry if it's primary", () => {
     mockNotePermissions('test2', 'test')
     const testAlias: Alias = {
       name: 'test-primary',
@@ -89,7 +89,7 @@ describe('AliasesListEntry', () => {
     expect(NoteDetailsReduxModule.updateMetadata).toBeCalled()
   })
 
-  it("disables button in AliasesListEntry if it's not primary", () => {
+  it("removes aliasPrimaryBadge & adds aliasButtonMakePrimary in AliasesListEntry if it's not primary", () => {
     mockNotePermissions('test2', 'test')
     const testAlias: Alias = {
       name: 'test-primary',
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.tsx
index 2702504b1..dc363f29a 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry/aliases-modal/aliases-list-entry.tsx
@@ -12,9 +12,10 @@ import { testId } from '../../../../../../utils/test-id'
 import { UiIcon } from '../../../../../common/icons/ui-icon'
 import { useUiNotifications } from '../../../../../notifications/ui-notification-boundary'
 import React, { useCallback } from 'react'
+import { Badge } from 'react-bootstrap'
 import { Button } from 'react-bootstrap'
-import { Star as IconStar, StarFill as IconStarFill, X as IconX } from 'react-bootstrap-icons'
-import { useTranslation } from 'react-i18next'
+import { Star as IconStar, X as IconX } from 'react-bootstrap-icons'
+import { useTranslation, Trans } from 'react-i18next'
 
 export interface AliasesListEntryProps {
   alias: Alias
@@ -48,32 +49,28 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
 
   return (
     <li className={'list-group-item d-flex flex-row justify-content-between align-items-center'}>
-      {alias.name}
       <div>
+        {alias.name}
         {alias.primaryAlias && (
-          <Button
-            className={'me-2 text-warning'}
-            variant='light'
-            disabled={true}
-            title={isPrimaryText}
-            {...testId('aliasIsPrimary')}>
-            <UiIcon icon={IconStar} />
-          </Button>
+          <Badge bg='secondary' className={'ms-2'} title={isPrimaryText} {...testId('aliasPrimaryBadge')}>
+            <Trans i18nKey={'editor.modal.aliases.primaryLabel'}></Trans>
+          </Badge>
         )}
+      </div>
+      <div>
         {!alias.primaryAlias && (
           <Button
             className={'me-2'}
-            variant='light'
+            variant='secondary'
             disabled={!isOwner}
             title={makePrimaryText}
             onClick={onMakePrimaryClick}
             {...testId('aliasButtonMakePrimary')}>
-            <UiIcon icon={IconStarFill} />
+            <UiIcon icon={IconStar} />
           </Button>
         )}
         <Button
-          variant='light'
-          className={'text-danger'}
+          variant='danger'
           disabled={!isOwner}
           title={removeAliasText}
           onClick={onRemoveClick}