From f942e7b39f276e6c9d1259074a722b22c3d7a88d Mon Sep 17 00:00:00 2001 From: muhammad-ahmed Date: Wed, 11 Sep 2024 13:39:44 +0800 Subject: [PATCH 1/9] ahmed/DAPI-715/chore--resolve-dashboard-ui-flow --- src/components/CustomTabs/custom-tabs.scss | 5 ++ .../__tests__/item.desktop.test.tsx | 2 +- .../UserNavbarItem/item.desktop.tsx | 2 +- src/features/Apiexplorer/index.tsx | 2 +- .../Home/WaysToEarn/WaysToEarn.module.scss | 6 +++ .../components/AppsTable/apps-table.scss | 12 ++--- .../dashboard/manage-dashboard/index.tsx | 2 +- .../manage-dashboard/manage-dashboard.scss | 13 +++-- src/styles/index.scss | 8 +++- .../PrimaryMenu/primary-menu.scss | 1 + .../LocaleDropdownNavbarItem/index.tsx | 37 +++++++-------- .../locale-dropdown-navbar-item.scss | 47 +++++-------------- 12 files changed, 65 insertions(+), 72 deletions(-) diff --git a/src/components/CustomTabs/custom-tabs.scss b/src/components/CustomTabs/custom-tabs.scss index f21d03289..05b16cf2b 100644 --- a/src/components/CustomTabs/custom-tabs.scss +++ b/src/components/CustomTabs/custom-tabs.scss @@ -33,8 +33,13 @@ } &_content { + width: 90%; + // position: absolute; + // top: 50%; + @media screen and (max-width: 1023px) { width: 100%; + position: unset; } } } diff --git a/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx b/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx index 39b14cba9..25614fc41 100644 --- a/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx +++ b/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx @@ -23,7 +23,7 @@ describe('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 () => { diff --git a/src/components/UserNavbarItem/item.desktop.tsx b/src/components/UserNavbarItem/item.desktop.tsx index 3e97f5f86..7bb2bdf30 100644 --- a/src/components/UserNavbarItem/item.desktop.tsx +++ b/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; diff --git a/src/features/Apiexplorer/index.tsx b/src/features/Apiexplorer/index.tsx index 664a9a928..9717bda49 100644 --- a/src/features/Apiexplorer/index.tsx +++ b/src/features/Apiexplorer/index.tsx @@ -20,7 +20,7 @@ export default function ApiExplorerFeatures() { const has_info = Object.keys(request_info).length === 0; return ( <> -
+
{ onCancel={() => setAppRegisterModalOpen(false)} onConfigure={handleAppConfigure} /> -
+
{renderScreen()} diff --git a/src/features/dashboard/manage-dashboard/manage-dashboard.scss b/src/features/dashboard/manage-dashboard/manage-dashboard.scss index 9286eb1c7..f7d5becb4 100644 --- a/src/features/dashboard/manage-dashboard/manage-dashboard.scss +++ b/src/features/dashboard/manage-dashboard/manage-dashboard.scss @@ -4,11 +4,14 @@ } } -.breadcrumbs { - padding-left: 5%; - padding-top: 1.6%; +.breadcrumbs_wrapper { + width: 100%; + margin-top: 2rem; + max-width: 82rem; + margin-left: auto; + margin-right: auto; - @media screen and (max-width: 1200px) { - padding-top: 3.5em; + @media screen and (max-width: 1440px) { + max-width: auto; } } diff --git a/src/styles/index.scss b/src/styles/index.scss index 78b9c14da..c29089ba4 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -400,6 +400,12 @@ div[class*='sidebarViewport'] { width: calc(100% - 1.25rem) !important; } &__inner { + @media screen and (min-width: 1440px) { + width: auto; + gap: rem(32); + margin: auto; + } + .navbar__items:first-child a { font-weight: normal; } @@ -426,7 +432,7 @@ div[class*='sidebarViewport'] { &__brand { margin-right: rem(10); - @media screen and (max-width: 1024px) { + @media screen and (max-width: 1440px) { margin-right: rem(4); } } diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss index fd3cc8eae..2e43088e3 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss @@ -39,6 +39,7 @@ } .language_sidebar { + padding: 1rem; position: fixed; top: 0; left: 0; diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 9cc486be2..ee49e10a2 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -1,10 +1,11 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import { useLocation } from '@docusaurus/router'; +import { LabelPairedGlobeLgRegularIcon } from '@deriv/quill-icons'; import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; -import classnames from 'classnames'; +import clsx from 'clsx'; import './locale-dropdown-navbar-item.scss'; const replaceLocale = (path, newLocale, locales, trailingSlash) => { @@ -44,25 +45,14 @@ export default function LocaleDropdownNavbarItem({ siteConfig: { trailingSlash }, } = useDocusaurusContext(); const { pathname } = useLocation(); - const { newPath, currentLocale } = replaceLocale(pathname, null, locales, trailingSlash); + const { currentLocale } = replaceLocale(pathname, null, locales, trailingSlash); const [selectedLocale, setSelectedLocale] = useState(currentLocale); - const [isDropdownOpen, setIsDropdownOpen] = useState(false); useEffect(() => { const { currentLocale } = replaceLocale(pathname, null, locales, trailingSlash); setSelectedLocale(currentLocale); }, [pathname, locales, trailingSlash]); - const handleMouseEnter = () => { - setIsDropdownOpen(true); - document.body.style.overflow = 'overlay'; - }; - - const handleMouseLeave = () => { - setIsDropdownOpen(false); - document.body.style.overflow = 'auto'; - }; - const localeItems: LinkLikeNavbarItemProps[] = []; for (const locale of locales) { localeItems.push({ @@ -70,7 +60,7 @@ export default function LocaleDropdownNavbarItem({ lang: localeConfigs[locale].htmlLang, target: '_self', autoAddBaseUrl: false, - className: classnames({ 'dropdown__link--active': locale === selectedLocale }), + className: clsx({ 'dropdown__link--active': locale === selectedLocale }), onClick: (e) => { e.preventDefault(); changeLocale(locale, locales, trailingSlash); @@ -96,13 +86,18 @@ export default function LocaleDropdownNavbarItem({ const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; const dropdownLabel = getShortNames(selectedLocale); + const localeDropdownLabel = useMemo(() => { + return ( +
+ + {dropdownLabel} +
+ ); + }, [selectedLocale]); + return ( -
- {dropdownLabel}} items={items} /> +
+
); } diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss index bf9a6b787..f364e19f9 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -1,25 +1,25 @@ @use 'src/styles/utility' as *; .language_switcher { - .dropdown { - position: relative; - cursor: pointer; - } .dropdown > .navbar__link:after { display: none; } a.navbar__link { color: var(--core-color-solid-slate-1400, #000) !important; + display: inline-block; + } + + .navbar__item { + padding: 0; } .dropdown__menu { position: fixed; display: flex; - top: 72px; + top: 65px; padding-right: 5.5%; - width: 100vw; - min-width: 997px; + width: 100%; padding-bottom: 32px; flex-direction: column; align-items: center; @@ -28,37 +28,14 @@ box-shadow: var(--ifm-navbar-shadow); align-items: flex-end; cursor: pointer; + border-radius: 0; } - .navbar__items--right .dropdown__link { - font-weight: normal; - font-style: normal; - line-height: 24px; - font-size: 18px; - @media (max-width: 1201px) { - font-size: rem(1.4); - } - } - - .navbar__items--right a { - @media (max-width: 1201px) { - font-size: rem(1.4); - } - } - - .dropdown { - height: 72px; - position: relative !important; - top: 25px; - background-image: url('/img/language-switcher.svg'); - background-repeat: no-repeat; - padding: 2px 22px; + .localeItem { + display: flex; + gap: 10px; + flex-direction: row; align-items: center; - gap: 4px; - justify-content: flex-end; - @media (max-width: 996px) { - display: none; - } } .navbar__link { From 1eab8e8541de7ad469f41ffcaa24337d331b5c34 Mon Sep 17 00:00:00 2001 From: muhammad-ahmed Date: Wed, 18 Sep 2024 14:39:02 +0800 Subject: [PATCH 2/9] footer, header and breadcrumbs alignment fix --- src/components/CustomTabs/custom-tabs.scss | 3 +++ src/components/Footer/Footer.module.scss | 2 +- src/features/dashboard/manage-dashboard/manage-dashboard.scss | 4 ++-- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/CustomTabs/custom-tabs.scss b/src/components/CustomTabs/custom-tabs.scss index 3b2236151..558ce3a34 100644 --- a/src/components/CustomTabs/custom-tabs.scss +++ b/src/components/CustomTabs/custom-tabs.scss @@ -3,6 +3,9 @@ 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; diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index 905bc894b..5fe8feb11 100644 --- a/src/components/Footer/Footer.module.scss +++ b/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 { diff --git a/src/features/dashboard/manage-dashboard/manage-dashboard.scss b/src/features/dashboard/manage-dashboard/manage-dashboard.scss index f7d5becb4..fe2f4dc26 100644 --- a/src/features/dashboard/manage-dashboard/manage-dashboard.scss +++ b/src/features/dashboard/manage-dashboard/manage-dashboard.scss @@ -6,12 +6,12 @@ .breadcrumbs_wrapper { width: 100%; - margin-top: 2rem; + margin-top: 1.5rem; max-width: 82rem; margin-left: auto; margin-right: auto; @media screen and (max-width: 1440px) { - max-width: auto; + max-width: 90%; } } From bb50eb2aea049c54031d5e2d07331a0a1f710ca4 Mon Sep 17 00:00:00 2001 From: muhammad-ahmed Date: Fri, 20 Sep 2024 16:45:20 +0800 Subject: [PATCH 3/9] dashboard tab list view screens UI fixes --- .../CustomAccordion/custom-accordion.scss | 2 +- src/components/CustomTabs/custom-tabs.scss | 15 ++++++----- .../ApiTokenTable/api-table.module.scss | 25 +++++++++++-------- .../components/ApiTokenTable/index.tsx | 1 + .../app-dashboard-container.scss | 2 +- .../components/AppsTable/apps-table.scss | 4 ++- .../components/AppsTable/cells.module.scss | 1 - .../dashboard/components/AppsTable/index.tsx | 5 ++-- .../components/Table/copy-text.cell.scss | 10 +++++++- .../components/Table/copy-text.cell.tsx | 3 ++- .../dashboard/components/Table/index.tsx | 7 ++++-- .../dashboard/components/Table/table.scss | 8 ++++++ src/styles/index.scss | 4 +-- 13 files changed, 58 insertions(+), 29 deletions(-) diff --git a/src/components/CustomAccordion/custom-accordion.scss b/src/components/CustomAccordion/custom-accordion.scss index b131dcb8c..fe7a6fe1d 100644 --- a/src/components/CustomAccordion/custom-accordion.scss +++ b/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) { diff --git a/src/components/CustomTabs/custom-tabs.scss b/src/components/CustomTabs/custom-tabs.scss index 558ce3a34..205359f81 100644 --- a/src/components/CustomTabs/custom-tabs.scss +++ b/src/components/CustomTabs/custom-tabs.scss @@ -8,7 +8,7 @@ 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; @@ -20,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; @@ -36,9 +40,8 @@ } &_content { - width: 90%; - // position: absolute; - // top: 50%; + width: 1310px; + margin: auto; @media screen and (max-width: 1023px) { width: 100%; diff --git a/src/features/dashboard/components/ApiTokenTable/api-table.module.scss b/src/features/dashboard/components/ApiTokenTable/api-table.module.scss index 243f3f8ae..31c4b3d8f 100644 --- a/src/features/dashboard/components/ApiTokenTable/api-table.module.scss +++ b/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,8 +100,14 @@ 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%; @@ -110,6 +115,8 @@ } &__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; - } } } } diff --git a/src/features/dashboard/components/ApiTokenTable/index.tsx b/src/features/dashboard/components/ApiTokenTable/index.tsx index 1e1c1a207..c7d50042a 100644 --- a/src/features/dashboard/components/ApiTokenTable/index.tsx +++ b/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', diff --git a/src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.scss b/src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.scss index 4ebfac219..92d4b98f7 100644 --- a/src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.scss +++ b/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 { diff --git a/src/features/dashboard/components/AppsTable/apps-table.scss b/src/features/dashboard/components/AppsTable/apps-table.scss index dc6060c5f..2e465b2e6 100644 --- a/src/features/dashboard/components/AppsTable/apps-table.scss +++ b/src/features/dashboard/components/AppsTable/apps-table.scss @@ -80,7 +80,6 @@ padding: unset; } &__button { - margin-top: 8px; @media screen and (max-width: 1023px) { margin: 10px 20px 0; padding-inline: 20px; @@ -92,6 +91,8 @@ } &__text { + font-size: 16px; + @media screen and (max-width: 1023px) { padding: 0 1rem; } @@ -132,6 +133,7 @@ &__button { padding-inline: 20px; + font-size: 16px; @media screen and (max-width: 500px) { width: 50%; } diff --git a/src/features/dashboard/components/AppsTable/cells.module.scss b/src/features/dashboard/components/AppsTable/cells.module.scss index 4e068e391..5f95f1d39 100644 --- a/src/features/dashboard/components/AppsTable/cells.module.scss +++ b/src/features/dashboard/components/AppsTable/cells.module.scss @@ -1,7 +1,6 @@ @use 'src/styles/utility' as *; .appActions { - width: 168px; display: flex; svg { diff --git a/src/features/dashboard/components/AppsTable/index.tsx b/src/features/dashboard/components/AppsTable/index.tsx index f19e20775..aac5e2a4a 100644 --- a/src/features/dashboard/components/AppsTable/index.tsx +++ b/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, }, { diff --git a/src/features/dashboard/components/Table/copy-text.cell.scss b/src/features/dashboard/components/Table/copy-text.cell.scss index 5edf052b4..05e89dc1e 100644 --- a/src/features/dashboard/components/Table/copy-text.cell.scss +++ b/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; diff --git a/src/features/dashboard/components/Table/copy-text.cell.tsx b/src/features/dashboard/components/Table/copy-text.cell.tsx index 085a2f96c..817a31f18 100644 --- a/src/features/dashboard/components/Table/copy-text.cell.tsx +++ b/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} + {cell.value} diff --git a/src/features/dashboard/components/Table/index.tsx b/src/features/dashboard/components/Table/index.tsx index 3cb68402e..b4aa92e72 100644 --- a/src/features/dashboard/components/Table/index.tsx +++ b/src/features/dashboard/components/Table/index.tsx @@ -1,5 +1,6 @@ import React, { HTMLAttributes } from 'react'; import { Cell, Column, TableState, useTable } from 'react-table'; +import { Heading, Text } from '@deriv-com/quill-ui'; import './table.scss'; const defaultPropGetter = () => ({}); @@ -46,7 +47,7 @@ const Table = ({ maxWidth: column.maxWidth > 1000 ? 'auto' : column.maxWidth, }} > - {column.render('Header')} + {column.render('Header')} ))} @@ -67,7 +68,9 @@ const Table = ({ maxWidth: cell.column.maxWidth > 1000 ? 'auto' : cell.column.maxWidth, }} > - {cell.render('Cell', getCustomCellProps(cell))} + + {cell.render('Cell', getCustomCellProps(cell))} + ); })} diff --git a/src/features/dashboard/components/Table/table.scss b/src/features/dashboard/components/Table/table.scss index c6b74e2fc..fb2b8928f 100644 --- a/src/features/dashboard/components/Table/table.scss +++ b/src/features/dashboard/components/Table/table.scss @@ -52,3 +52,11 @@ background-color: var(--ifm-color-emphasis-0); } } + +/*.tableCellValue { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; +}*/ diff --git a/src/styles/index.scss b/src/styles/index.scss index c29089ba4..e9f1bde41 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -401,8 +401,8 @@ div[class*='sidebarViewport'] { } &__inner { @media screen and (min-width: 1440px) { - width: auto; - gap: rem(32); + max-width: 1310px; + gap: rem(14); margin: auto; } From 3c7e7847c233a64588cbda8fc5da8e0389603272 Mon Sep 17 00:00:00 2001 From: muhammad-ahmed Date: Mon, 23 Sep 2024 12:33:38 +0800 Subject: [PATCH 4/9] responsive UI fixes --- .../account_switcher.module.scss | 4 +++ src/components/AccountSwitcher/index.tsx | 7 ++--- .../RequestJSONBox/RequestJSONBox.module.scss | 2 +- .../Home/ApiFeatures/ApiFeatures.module.scss | 2 +- .../Home/Benefits/Benefits.module.scss | 2 +- .../Home/HeroHeader/HeroHeader.module.scss | 2 +- .../register-app-dialog-success.module.scss | 2 +- .../TokenRegister/token-register.scss | 4 ++- .../LocaleDropdownNavbarItem/index.tsx | 2 +- .../locale-dropdown-navbar-item.scss | 28 ++++++++----------- 10 files changed, 28 insertions(+), 27 deletions(-) diff --git a/src/components/AccountSwitcher/account_switcher.module.scss b/src/components/AccountSwitcher/account_switcher.module.scss index 798f141c3..c7720359a 100644 --- a/src/components/AccountSwitcher/account_switcher.module.scss +++ b/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%; diff --git a/src/components/AccountSwitcher/index.tsx b/src/components/AccountSwitcher/index.tsx index 100247741..2bd13964f 100644 --- a/src/components/AccountSwitcher/index.tsx +++ b/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 ( -
+
+
); diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss index f364e19f9..f45222b87 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -15,20 +15,16 @@ } .dropdown__menu { - position: fixed; - display: flex; - top: 65px; - padding-right: 5.5%; - width: 100%; - padding-bottom: 32px; - flex-direction: column; - align-items: center; - gap: 24px; - background-color: var(--ifm-navbar-background-color); - box-shadow: var(--ifm-navbar-shadow); - align-items: flex-end; - cursor: pointer; - border-radius: 0; + padding: 0 15px 12px; + + li { + cursor: pointer; + + a:hover { + background-color: var(--hover-solid-light-100); + border-radius: 10px; + } + } } .localeItem { @@ -46,12 +42,12 @@ font-size: 16px; font-weight: normal; margin-top: 15px; + padding: 10px; color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)) !important; - background-color: var(--ifm-navbar-background-color); } .dropdown__link--active { - color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)) !important; + color: var(--colors-coral500) !important; background-color: var(--ifm-navbar-background-color); } } From d3c356c835345161a77006a8f0a15875bb3e6d37 Mon Sep 17 00:00:00 2001 From: muhammad-ahmed Date: Mon, 23 Sep 2024 12:47:05 +0800 Subject: [PATCH 5/9] fix playbox spacing issue --- .../Apiexplorer/RequestJSONBox/RequestJSONBox.module.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/features/Apiexplorer/RequestJSONBox/RequestJSONBox.module.scss b/src/features/Apiexplorer/RequestJSONBox/RequestJSONBox.module.scss index daa841e2d..f0b8cb077 100644 --- a/src/features/Apiexplorer/RequestJSONBox/RequestJSONBox.module.scss +++ b/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; From 3104167681a5aa9256444be8e1f6a88a2dbac9c9 Mon Sep 17 00:00:00 2001 From: muhammad-ahmed Date: Mon, 23 Sep 2024 12:49:39 +0800 Subject: [PATCH 6/9] remove comment --- src/features/dashboard/components/Table/index.tsx | 4 +--- src/features/dashboard/components/Table/table.scss | 8 -------- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/src/features/dashboard/components/Table/index.tsx b/src/features/dashboard/components/Table/index.tsx index b4aa92e72..58e2ce78d 100644 --- a/src/features/dashboard/components/Table/index.tsx +++ b/src/features/dashboard/components/Table/index.tsx @@ -68,9 +68,7 @@ const Table = ({ maxWidth: cell.column.maxWidth > 1000 ? 'auto' : cell.column.maxWidth, }} > - - {cell.render('Cell', getCustomCellProps(cell))} - + {cell.render('Cell', getCustomCellProps(cell))} ); })} diff --git a/src/features/dashboard/components/Table/table.scss b/src/features/dashboard/components/Table/table.scss index fb2b8928f..c6b74e2fc 100644 --- a/src/features/dashboard/components/Table/table.scss +++ b/src/features/dashboard/components/Table/table.scss @@ -52,11 +52,3 @@ background-color: var(--ifm-color-emphasis-0); } } - -/*.tableCellValue { - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 2; - line-clamp: 2; - -webkit-box-orient: vertical; -}*/ From 93a15e0e10463aec1db4f57c454a5930ed2e2379 Mon Sep 17 00:00:00 2001 From: muhammad-ahmed Date: Mon, 23 Sep 2024 14:40:38 +0800 Subject: [PATCH 7/9] UI fixes --- .vscode/settings.json | 4 +++- src/components/CustomTabs/custom-tabs.scss | 1 - src/features/Apiexplorer/styles.module.scss | 5 +++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 8c167a488..02db64b75 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,7 @@ { - "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + }, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true } diff --git a/src/components/CustomTabs/custom-tabs.scss b/src/components/CustomTabs/custom-tabs.scss index 205359f81..69bec75bc 100644 --- a/src/components/CustomTabs/custom-tabs.scss +++ b/src/components/CustomTabs/custom-tabs.scss @@ -45,7 +45,6 @@ @media screen and (max-width: 1023px) { width: 100%; - position: unset; } } } diff --git a/src/features/Apiexplorer/styles.module.scss b/src/features/Apiexplorer/styles.module.scss index 0fb15a653..16d5cc71d 100644 --- a/src/features/Apiexplorer/styles.module.scss +++ b/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; From b841a01e381f90630f10bd8648e44209a66a6f2a Mon Sep 17 00:00:00 2001 From: muhammad-ahmed Date: Mon, 23 Sep 2024 14:43:01 +0800 Subject: [PATCH 8/9] reset setting file --- .vscode/settings.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 02db64b75..8c167a488 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,5 @@ { - "editor.codeActionsOnSave": { - "source.fixAll.eslint": "explicit" - }, + "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true } From 053fe151aa51438f5eb6d31c7717fb67ee3c8b5d Mon Sep 17 00:00:00 2001 From: muhammad-ahmed Date: Mon, 23 Sep 2024 14:43:39 +0800 Subject: [PATCH 9/9] firefox right line on modal fix --- src/styles/index.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/index.scss b/src/styles/index.scss index e9f1bde41..ab863a1c8 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -212,6 +212,12 @@ div[class*='sidebarViewport'] { } } +.quill-modal { + &__content-wrapper { + overflow: auto !important; + } +} + .modal-overlay { > div { z-index: 1000;