fix(frontend): improves UI/UX of aliases modal

Signed-off-by: yamashush <38120991+yamashush@users.noreply.github.com>

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",

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>

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"
   >
+    <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"
+        class="btn btn-danger"
-        data-testid="aliasButtonMakePrimary"
-        disabled=""
-        title="editor.modal.aliases.makePrimary"
-        type="button"
-      >
-        BootstrapIconMock_StarFill
-      </button>
-      <button
-        class="text-danger btn btn-light"
         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"
   >
+    <div>
       test-primary
+    </div>
     <div>
       <button
-        class="me-2 text-warning btn btn-light"
+        class="me-2 btn btn-secondary"
-        data-testid="aliasIsPrimary"
+        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"
   >
+    <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"
   >
+    <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"
+        class="btn btn-danger"
-        data-testid="aliasIsPrimary"
-        disabled=""
-        title="editor.modal.aliases.isPrimary"
-        type="button"
-      >
-        BootstrapIconMock_Star
-      </button>
-      <button
-        class="text-danger btn btn-light"
         data-testid="aliasButtonRemove"
         title="editor.modal.aliases.removeAlias"
         type="button"

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'
+          variant='primary'
-          className={'text-secondary ms-2'}
+          className={'ms-2'}
           disabled={!isOwner || !newAliasValid || newAlias === ''}
           title={addAliasText}
           {...testId('addAliasButton')}>

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',

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 { Star as IconStar, X as IconX } from 'react-bootstrap-icons'
-import { useTranslation } from 'react-i18next'
+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
+          <Badge bg='secondary' className={'ms-2'} title={isPrimaryText} {...testId('aliasPrimaryBadge')}>
-            className={'me-2 text-warning'}
+            <Trans i18nKey={'editor.modal.aliases.primaryLabel'}></Trans>
-            variant='light'
+          </Badge>
-            disabled={true}
-            title={isPrimaryText}
-            {...testId('aliasIsPrimary')}>
-            <UiIcon icon={IconStar} />
-          </Button>
         )}
+      </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'
+          variant='danger'
-          className={'text-danger'}
           disabled={!isOwner}
           title={removeAliasText}
           onClick={onRemoveClick}