Ahmed/dapi 715/chore resolve dashboard UI flow

src/components/AccountSwitcher/account_switcher.module.scss

@@ -1,5 +1,9 @@
 @use 'src/styles/utility' as *;
 
+.accountSwitcherWrapper > div {
+  max-width: 100%;
+}
+
 .customSelectItem {
   display: flex;
   width: 100%;

src/components/AccountSwitcher/index.tsx

@@ -1,12 +1,11 @@
 import React, { useState, useRef } from 'react';
+import { InputDropdown } from '@deriv-com/quill-ui';
 import { isNotDemoCurrency } from '@site/src/utils';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import useOnClickOutside from '@site/src/hooks/useOnClickOutside';
+import useAccountSelector from '@site/src/hooks/useAccountSelector';
 import CurrencyIcon from '../CurrencyIcon';
-import AccountDropdown from '../CustomSelectDropdown/account-dropdown/AccountDropdown';
 import styles from './account_switcher.module.scss';
-import { InputDropdown } from '@deriv-com/quill-ui';
-import useAccountSelector from '@site/src/hooks/useAccountSelector';
 
 const AccountSwitcher = () => {
   const { onSelectAccount } = useAccountSelector();
@@ -28,7 +27,7 @@ const AccountSwitcher = () => {
   }));
 
   return (
-    <div ref={dropdownRef} className={`right-navigation ${styles.accountSwitcher}`}>
+    <div ref={dropdownRef} className={styles.accountSwitcherWrapper}>
       <InputDropdown
         label='Account type'
         options={options}

src/components/CustomAccordion/custom-accordion.scss

@@ -40,7 +40,7 @@
     align-items: center;
     justify-content: space-between;
     font-size: 16px;
-    line-height: 1;
+    line-height: 1.5;
     font-weight: 400;
 
     @media screen and (max-width: 786px) {

src/components/CustomTabs/custom-tabs.scss

@@ -3,9 +3,12 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  font-size: 20px;
+  font-family: var(--ibm-font-family-base);
+  font-weight: var(--ifm-font-weight-semibold);
 
   &_header {
-    margin-block: 64px;
+    margin-block: 45px;
     background-color: var(--opacity-black-75);
     padding: 12px;
     border-radius: 24px;
@@ -17,10 +20,14 @@
       align-items: center;
     }
     &__item {
-      padding: 18px;
-      min-width: 160px;
+      padding: 10px 18px;
+      min-width: 17rem;
       cursor: pointer;
 
+      @media screen and (max-width: 500px) {
+        min-width: 160px;
+      }
+
       &.active {
         background-color: var(--solid-slate-50);
         border-radius: 12px;
@@ -33,6 +40,9 @@
   }
 
   &_content {
+    width: 1310px;
+    margin: auto;
+
     @media screen and (max-width: 1023px) {
       width: 100%;
     }

src/components/Footer/Footer.module.scss

@@ -17,7 +17,7 @@
     display: flex;
     flex-direction: row;
     gap: rem(9.6);
-    max-width: 1264px;
+    max-width: 1310px;
   }
 
   .FooterLogo {

src/components/UserNavbarItem/__tests__/item.desktop.test.tsx

@@ -23,7 +23,7 @@ describe.skip('User Navbar Desktop Item', () => {
     });
 
     it('Should render login link navbar item', async () => {
-      const login_nav_button = screen.getByRole('button', { name: /login/i });
+      const login_nav_button = screen.getByRole('button', { name: /log in/i });
       expect(login_nav_button).toBeVisible();
 
       await act(async () => {

src/components/UserNavbarItem/item.desktop.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
 import { Button } from '@deriv-com/quill-ui';
 import {
   LabelPairedGridLgRegularIcon,
@@ -9,7 +10,6 @@ import useLogout from '@site/src/hooks/useLogout';
 import useDeviceType from '@site/src/hooks/useDeviceType';
 import { IUserNavbarItemProps } from './item.types';
 import styles from './UserNavbarItem.module.scss';
-import Translate from '@docusaurus/Translate';
 
 interface IActionProps {
   handleClick: () => void;

src/features/Apiexplorer/RequestJSONBox/RequestJSONBox.module.scss

@@ -3,7 +3,6 @@
 .playgroundBox {
   border-radius: 6px;
   border: none;
-  margin-left: rem(0.5);
   margin-top: rem(2);
   position: relative;
   display: flex;
@@ -79,7 +78,7 @@ div[role='dialog'] {
   }
 }
 
-@media (max-width: 425px) {
+@media (max-width: 500px) {
   div[role='dialog'] {
     height: unset;
     width: rem(32);

src/features/Apiexplorer/index.tsx

@@ -20,7 +20,7 @@ export default function ApiExplorerFeatures() {
   const has_info = Object.keys(request_info).length === 0;
   return (
     <>
-      <div className='breadcrumbs'>
+      <div className='breadcrumbs_wrapper'>
         <Breadcrumbs
           links={[
             {

src/features/Apiexplorer/styles.module.scss

@@ -20,6 +20,11 @@
     display: flex;
     color: var(--ifm-color-emphasis-1000);
 
+    @media screen and (min-width: 1440px) {
+      width: 1310px;
+      margin: auto;
+    }
+
     .playground {
       display: flex;
       justify-content: center;

src/features/Home/ApiFeatures/ApiFeatures.module.scss

@@ -34,7 +34,7 @@
       }
     }
 
-    @media (min-width: 425px) {
+    @media (min-width: 500px) {
       margin-left: rem(4);
     }
     .FeatureParagraph {

src/features/Home/Benefits/Benefits.module.scss

@@ -22,7 +22,7 @@
       gap: rem(8.8);
     }
 
-    @media screen and (max-width: 425px) {
+    @media screen and (max-width: 500px) {
       flex-direction: column;
       gap: rem(3);
     }

src/features/Home/HeroHeader/HeroHeader.module.scss

@@ -18,7 +18,7 @@
     padding-top: unset;
   }
 
-  @media screen and (min-width: 320px) and (max-width: 415px) {
+  @media screen and (min-width: 320px) and (max-width: 500px) {
     height: rem(35);
   }
   .HeroContainerStyle {

src/features/Home/WaysToEarn/WaysToEarn.module.scss

@@ -12,6 +12,12 @@
     align-items: center;
     justify-content: space-around;
     margin: 0 auto;
+
+    @media screen and (min-width: 1400px) {
+      width: fit-content;
+      gap: rem(20);
+    }
+
     @media screen and (max-width: 992px) {
       width: 100%;
     }

src/features/dashboard/components/ApiTokenTable/api-table.module.scss

@@ -31,13 +31,12 @@
 
   table {
     z-index: 1;
-    position: relative;
     table-layout: fixed;
     border-collapse: collapse;
-    @extend .flex-center;
-    padding: 48px;
-    padding-top: 0px !important;
-    max-height: 500px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-inline: 48px;
 
     th,
     td,
@@ -91,7 +90,7 @@
     justify-content: space-between;
     align-items: flex-start;
     align-self: stretch;
-    padding: 48px;
+    padding: 48px 48px 25px;
     gap: 16px;
 
     @media (max-width: 1023px) {
@@ -101,15 +100,23 @@
       padding: unset;
     }
 
+    p {
+      margin-top: 5px;
+    }
+
     &__button {
-      margin-top: 16px;
+      @media screen and (max-width: 1023px) {
+        margin-top: 1rem;
+      }
 
       @media (max-width: 500px) {
         width: 100%;
         padding-inline: 0;
       }
 
       &__text {
+        font-size: 16px;
+
         @media screen and (max-width: 786px) {
           padding: 0 1rem;
         }
@@ -132,10 +139,6 @@
     &__texts {
       flex: 1;
       display: block;
-
-      h3 {
-        margin-bottom: 16px;
-      }
     }
   }
 }

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

@@ -38,6 +38,7 @@ const tableColumns: TTokenColumn[] = [
     Header: 'Token scopes',
     accessor: 'scopes',
     Cell: ScopesCell,
+    minWidth: 300,
   },
   {
     Header: 'Last used',

src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-block: 72px;
+  padding-block: 40px;
   width: 100%;
 
   &_top {

src/features/dashboard/components/AppsTable/apps-table.scss

@@ -1,7 +1,6 @@
 .apps_table {
   border: 1px solid var(--opacity-black-100);
   border-radius: 32px;
-  margin: 48px;
   margin-top: 0;
 
   &.mobile {
@@ -81,7 +80,6 @@
       padding: unset;
     }
     &__button {
-      margin-top: 16px;
       @media screen and (max-width: 1023px) {
         margin: 10px 20px 0;
         padding-inline: 20px;
@@ -93,6 +91,8 @@
       }
 
       &__text {
+        font-size: 16px;
+
         @media screen and (max-width: 1023px) {
           padding: 0 1rem;
         }
@@ -102,14 +102,15 @@
     &__texts {
       display: block;
       max-width: 72%;
+
+      p {
+        margin-top: 5px;
+      }
+
       @media screen and (max-width: 786px) {
         max-width: 100%;
         padding-inline: 45px;
         margin-bottom: 10px;
-
-        p {
-          margin-top: 10px;
-        }
       }
 
       @media screen and (max-width: 500px) {
@@ -132,6 +133,7 @@
 
     &__button {
       padding-inline: 20px;
+      font-size: 16px;
       @media screen and (max-width: 500px) {
         width: 50%;
       }

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

@@ -1,7 +1,6 @@
 @use 'src/styles/utility' as *;
 
 .appActions {
-  width: 168px;
   display: flex;
 
   svg {

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

@@ -271,13 +271,14 @@ const AppsTable = ({ apps }: AppsTableProps) => {
       {
         Header: translate({ message: 'OAuth scopes' }),
         accessor: 'scopes',
-        minWidth: 200,
         Cell: ScopesCell,
+        minWidth: 230,
       },
       {
         Header: translate({ message: 'OAuth redirect URL' }),
         accessor: 'redirect_uri',
-        minWidth: 350,
+        width: 400,
+        maxWidth: 520,
         Cell: CopyTextCell,
       },
       {

src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss

@@ -19,7 +19,7 @@
   @media (max-width: 768px) {
     padding: unset;
   }
-  @media (max-width: 425px) {
+  @media (max-width: 500px) {
     font-size: rem(1.2);
   }
 

src/features/dashboard/components/Table/copy-text.cell.scss

@@ -1,8 +1,16 @@
 .copy_text_cell {
-  display: ruby-text;
+  display: flex;
   text-align: left;
+  align-items: center;
   cursor: pointer;
 
+  p {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &__icon {
     margin-left: 8px;
     vertical-align: middle;

src/features/dashboard/components/Table/copy-text.cell.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { LabelPairedCopyLgRegularIcon } from '@deriv/quill-icons';
 import './copy-text.cell.scss';
+import { Text } from '@deriv-com/quill-ui';
 
 const CopyTextCell: React.FC<{
   cell: {
@@ -16,7 +17,7 @@ const CopyTextCell: React.FC<{
             navigator.clipboard.writeText(cell.value.toString());
           }}
         >
-          {cell.value}
+          <Text>{cell.value}</Text>
           <span className={'copy_text_cell__icon'}>
             <LabelPairedCopyLgRegularIcon />
           </span>