diff --git a/docusaurus.config.js b/docusaurus.config.js index faa6c7de4..eff4dd7f7 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -49,6 +49,7 @@ const config = { ], }, ], + require.resolve('./plugins/custom-webpack-plugin'), ], presets: [ diff --git a/plugins/custom-webpack-plugin.js b/plugins/custom-webpack-plugin.js new file mode 100644 index 000000000..48be9e788 --- /dev/null +++ b/plugins/custom-webpack-plugin.js @@ -0,0 +1,10 @@ +export default function customWebpackPlugin(context, options) { + return { + name: 'custom-webpack-plugin', + configureWebpack(config, isServer, utils) { + return { + devtool: 'source-map', // Enable source maps + }; + }, + }; +} 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 739528e85..15bf12315 100644 --- a/src/components/AccountSwitcher/index.tsx +++ b/src/components/AccountSwitcher/index.tsx @@ -1,11 +1,11 @@ -import React, { useState, useRef, useEffect } from 'react'; +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 styles from './account_switcher.module.scss'; -import { InputDropdown } from '@deriv-com/quill-ui'; -import useAccountSelector from '@site/src/hooks/useAccountSelector'; interface AccountSwitcherProps { onChange: (accountName: string) => void; @@ -36,7 +36,7 @@ const AccountSwitcher = ({ onChange }: AccountSwitcherProps) => { })); return ( -
+
{ }); 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/RequestJSONBox/RequestJSONBox.module.scss b/src/features/Apiexplorer/RequestJSONBox/RequestJSONBox.module.scss index 21d895901..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; @@ -79,7 +78,7 @@ div[role='dialog'] { } } -@media (max-width: 425px) { +@media (max-width: 500px) { div[role='dialog'] { height: unset; width: rem(32); 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 ( <> -
+
{ { 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/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss index 186f70768..4b0797545 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss +++ b/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); } 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..58e2ce78d 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,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/TokenRegister/token-register.scss b/src/features/dashboard/components/TokenRegister/token-register.scss index eb1f85d8d..082754292 100644 --- a/src/features/dashboard/components/TokenRegister/token-register.scss +++ b/src/features/dashboard/components/TokenRegister/token-register.scss @@ -36,7 +36,9 @@ } .token_register__account__switcher { - max-width: 360px; + @media screen and (min-width: 501px) { + max-width: 360px; + } } .token_register__account { diff --git a/src/features/dashboard/manage-dashboard/index.tsx b/src/features/dashboard/manage-dashboard/index.tsx index 5cdd573b3..95ad9e89c 100644 --- a/src/features/dashboard/manage-dashboard/index.tsx +++ b/src/features/dashboard/manage-dashboard/index.tsx @@ -123,7 +123,7 @@ const ManageDashboard = () => { 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 03a8621af..fe2f4dc26 100644 --- a/src/features/dashboard/manage-dashboard/manage-dashboard.scss +++ b/src/features/dashboard/manage-dashboard/manage-dashboard.scss @@ -4,7 +4,14 @@ } } -.breadcrumbs { - padding-left: 5%; - padding-top: 1rem; +.breadcrumbs_wrapper { + width: 100%; + margin-top: 1.5rem; + max-width: 82rem; + margin-left: auto; + margin-right: auto; + + @media screen and (max-width: 1440px) { + max-width: 90%; + } } diff --git a/src/styles/index.scss b/src/styles/index.scss index 6cc99021a..c7a863802 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -213,6 +213,12 @@ div[class*='sidebarViewport'] { } } +.quill-modal { + &__content-wrapper { + overflow: auto !important; + } +} + .modal-overlay { > div { z-index: 1000; @@ -401,6 +407,12 @@ div[class*='sidebarViewport'] { width: calc(100% - 1.25rem) !important; } &__inner { + @media screen and (min-width: 1440px) { + max-width: 1310px; + gap: rem(14); + margin: auto; + } + .navbar__items:first-child a { font-weight: normal; } @@ -427,7 +439,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..3d8a5fec6 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..f45222b87 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -1,64 +1,37 @@ @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; } - .dropdown__menu { - position: fixed; - display: flex; - top: 72px; - padding-right: 5.5%; - width: 100vw; - min-width: 997px; - 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; + .navbar__item { + padding: 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); - } - } + .dropdown__menu { + padding: 0 15px 12px; - .navbar__items--right a { - @media (max-width: 1201px) { - font-size: rem(1.4); + li { + cursor: pointer; + + a:hover { + background-color: var(--hover-solid-light-100); + border-radius: 10px; + } } } - .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 { @@ -69,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); } }