Merge pull request #188 from sanjam-deriv/managetokensdesign

Author: hubert-deriv

src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss

@@ -19,10 +19,14 @@
     font-size: var(--fontSizes-2xs);
   }
 
+  .description {
+    padding-right: rem(1);
+  }
+
   .warning_container {
     display: flex;
     gap: rem(1);
-    background-color : #FFAD3A29;
+    background-color: #ffad3a29;
     padding: rem(0.8);
     font-size: var(--fontSizes-2xs);
     img {

src/features/dashboard/components/ApiTokenCard/index.tsx

@@ -19,11 +19,11 @@ const ApiTokenCard = ({ register, name, label, description, ...rest }: IApiToken
       <div className={styles.api_token_card_input}>
         <CustomCheckbox name={name} id={`${name}-scope`} register={register(name)}>
           <label data-testid={`card-label-${name}`} htmlFor={`${name}-scope`}>
-            <b>{label}</b>
+            <b> {label} </b>
           </label>
         </CustomCheckbox>
       </div>
-      <Text role={'definition'} as={'p'} type={'small'}>
+      <Text role={'definition'} as={'p'} type={'small'} className={styles.description}>
         {description}
       </Text>
       <React.Fragment>

src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx

@@ -21,19 +21,19 @@ const DeleteTokenDialog = ({ onDelete, setToggleModal }: TDeleteTokendialog) =>
     () => [
       {
         id: 0,
-        text: 'Yes, delete',
-        color: 'primary',
+        text: 'Cancel',
+        color: 'secondary',
         onClick: () => {
           setToggleModal(false);
-          onDelete();
         },
       },
       {
         id: 1,
-        text: 'No, keep it',
-        color: 'secondary',
+        text: 'Yes, delete',
+        color: 'primary',
         onClick: () => {
           setToggleModal(false);
+          onDelete();
         },
       },
     ],
@@ -46,7 +46,7 @@ const DeleteTokenDialog = ({ onDelete, setToggleModal }: TDeleteTokendialog) =>
         <div className='modal-overlay'>
           <Modal.Overlay />
           <Modal.DialogContent
-            title='Deleting token'
+            title='Delete token'
             content='Are you sure you want to delete this token?'
             action_buttons={actionButtons}
             has_close_button

src/features/dashboard/components/ApiTokenTable/__tests__/index.test.tsx

@@ -119,7 +119,7 @@ describe('DeleteTokenDialog', () => {
     const delete_modal = await screen.findByText(/Are you sure you want to delete this token?/i);
     expect(delete_modal).toBeInTheDocument();
 
-    const cancel_button = await screen.findByRole('button', { name: 'No, keep it' });
+    const cancel_button = await screen.findByRole('button', { name: 'Cancel' });
     await userEvent.click(cancel_button);
 
     expect(delete_modal).not.toBeInTheDocument();

src/features/dashboard/components/ApiTokenTable/cells.module.scss

@@ -14,37 +14,35 @@
     background-repeat: no-repeat;
     background-position: center;
     background-image: url(/img/delete.svg);
-    background-color: var(--colors-greyLight200);
-    border: 1px solid var(--colors-greyLight400);
     border-radius: 100%;
     cursor: pointer;
     &:hover {
       &::after {
-          content: 'Delete token';
-          text-align: center;
-          position: absolute;
-          display: inline-block;
-          border-radius: 4px;
-          padding: rem(1);
-          color: var(--ifm-color-emphasis-100);
-          background-color: var(--ifm-color-emphasis-700);
-          font-size: var(--fontSizes-3xs);
-          top: calc(-50% - 20px);
-          left: 50%;
-          min-width: 100px;
-          transform: translate(-50%, -50%);
+        content: 'Delete token';
+        text-align: center;
+        position: absolute;
+        display: inline-block;
+        border-radius: 4px;
+        padding: rem(1);
+        color: var(--ifm-color-emphasis-100);
+        background-color: var(--ifm-color-emphasis-700);
+        font-size: var(--fontSizes-3xs);
+        top: calc(-50% - 20px);
+        left: 50%;
+        min-width: 100px;
+        transform: translate(-50%, -50%);
       }
       &::before {
-          content: '';
-          position: absolute;
-          width: 0; 
-          height: 0; 
-          border-left: rem(0.7) solid transparent;
-          border-right: rem(0.7) solid transparent;
-          border-top: rem(0.7) solid var(--ifm-color-emphasis-700);
-          top: calc(-50% + 2px);
-          transform: translate(-50%, -50%);
-          left: 50%;
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-left: rem(0.7) solid transparent;
+        border-right: rem(0.7) solid transparent;
+        border-top: rem(0.7) solid var(--ifm-color-emphasis-700);
+        top: calc(-50% + 2px);
+        transform: translate(-50%, -50%);
+        left: 50%;
       }
     }
   }

src/features/dashboard/components/AppsTable/__tests__/apps-table.test.tsx

@@ -88,7 +88,7 @@ describe('Apps Table', () => {
     const deleteDialogTitle = await screen.findByText('Are you sure you want to delete this app?');
     expect(deleteDialogTitle).toBeInTheDocument();
 
-    const closeDeleteDialog = await screen.findByText(/no, keep it/i);
+    const closeDeleteDialog = await screen.findByText(/cancel/i);
     await userEvent.click(closeDeleteDialog);
 
     expect(deleteDialogTitle).not.toBeInTheDocument();

src/features/dashboard/components/Dialogs/DeleteAppDialog/__tests__/delete-app-dialog.test.tsx

@@ -46,13 +46,13 @@ describe('Delete App Dialog', () => {
 
   it('Should render proper buttons', () => {
     const okButton = screen.getByRole('button', { name: /yes, delete/i });
-    const cancelButton = screen.getByRole('button', { name: /no, keep it/i });
+    const cancelButton = screen.getByRole('button', { name: /Cancel/i });
     expect(okButton).toBeInTheDocument();
     expect(cancelButton).toBeInTheDocument();
   });
 
   it('Should call onClose on cancel button click', async () => {
-    const cancelButton = screen.getByRole('button', { name: /no, keep it/i });
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
 
     await userEvent.click(cancelButton);
 

src/features/dashboard/components/Dialogs/DeleteAppDialog/index.tsx

@@ -33,7 +33,7 @@ const DeleteAppDialog = ({ appId, onClose }: TDeleteAppDialogProps) => {
       },
       {
         id: 1,
-        text: 'No, keep it',
+        text: 'Cancel',
         color: 'secondary',
         onClick: () => {
           onClose();