From 45f4c70833fe54954285f3ed60403cbd9147d5dc Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 14 May 2024 09:38:58 +0400 Subject: [PATCH 01/44] langswitcher --- docusaurus.config.js | 4 + src/styles/index.scss | 4 +- .../MobileSidebar/PrimaryMenu/index.tsx | 69 +++++++++++++++ .../PrimaryMenu/primary-menu.scss | 57 +++++++++++++ .../LocaleDropdownNavbarItem/index.tsx | 60 +++++++++++++ .../locale-dropdown-navbar-item.scss | 85 +++++++++++++++++++ static/img/chevron-left.svg | 3 + static/img/language-switcher.svg | 10 +++ 8 files changed, 290 insertions(+), 2 deletions(-) create mode 100644 src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx create mode 100644 src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss create mode 100644 src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx create mode 100644 src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss create mode 100644 static/img/chevron-left.svg create mode 100644 static/img/language-switcher.svg diff --git a/docusaurus.config.js b/docusaurus.config.js index e2ee9d034..2af551e8a 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -123,6 +123,10 @@ const config = { type: 'custom-user-navbar-item', position: 'right', }, + { + type: 'localeDropdown', + position: 'right', + }, ], }, prism: { diff --git a/src/styles/index.scss b/src/styles/index.scss index b5b8ec452..b9982fee2 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -79,7 +79,7 @@ button { ul li a, nav a, nav a div { - font-family: var(--ubuntu-font-family); + font-family: var(--ibm-font-family-base); } h1, @@ -237,7 +237,7 @@ div[class*='sidebarViewport'] { .search-overlay { display: none; } - &.search-closed + div[class*='searchBox'] { + &.search-closed ~ div[class*='searchBox'] { display: none; } &.search-open { diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx new file mode 100644 index 000000000..db7108ccb --- /dev/null +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common'; +import { splitNavbarItems, useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'; +import NavbarItem from '@theme/NavbarItem'; +import './primary-menu.scss'; +import { Button } from '@deriv/ui'; + +export function useNavbarItems() { + // TODO temporary casting until ThemeConfig type is improved + return useThemeConfig().navbar.items; +} + +export default function CustomMobileSidebar() { + const [languageSidebarVisible, setLanguageSidebarVisible] = React.useState(false); + const mobileSidebar = useNavbarMobileSidebar(); + const items = useNavbarItems(); + const [leftItems] = splitNavbarItems(items); + + React.useEffect(() => { + if (!mobileSidebar?.shown) { + setLanguageSidebarVisible(false); + } + }, [mobileSidebar]); + + const toggleLanguageSidebar = () => { + setLanguageSidebarVisible(!languageSidebarVisible); + }; + + return ( + +
+ {leftItems.map((item, i) => ( + + new Error( + `A theme navbar item failed to render. + Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config: + ${JSON.stringify(item, null, 2)}`, + ) + } + > + { + mobileSidebar.toggle(); + }} + /> + + ))} +
+
+ Language Switcher +
+ + {/* Conditionally render the language sidebar */} +
+ +
+
En
+
Fr
+
Th
+
+
+ + ); +} diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss new file mode 100644 index 000000000..d2025cc2d --- /dev/null +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss @@ -0,0 +1,57 @@ +@media (max-width: 996px) { + .navbar-sidebar__item { + .navbar__item { + display: block; + padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal); + font-size: 0.875rem; + font-weight: var(--ifm-font-weight-normal); + line-height: 1.25rem; + height: 40px; + width: 100vw; + } + + .navbar__link { + &--active { + background-color: var(--ifm-menu-color-background-active); + } + } + + /* Style for the language sidebar */ + .language_sidebar { + position: fixed; + top: 0; + left: 0; + background-color: var(--ifm-navbar-background-color); + width: var(--ifm-navbar-sidebar-width); + height: 100%; + opacity: 0; + visibility: hidden; + transform: translateX(-100%); + transition-property: opacity, visibility, transform; + transition-duration: var(--ifm-transition-fast); + transition-timing-function: ease-in-out; + + &.visible { + opacity: 1; + visibility: visible; + transform: translateX(0); + } + + &__buttons { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--ifm-navbar-border-color); + } + + &__items { + margin: 18px; + display: flex; + height: calc(100% - var(--ifm-navbar-height)); + transform: translateZ(0); + transition: transform var(--ifm-transition-fast) ease-in-out; + flex-direction: column; + } + } + } +} diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx new file mode 100644 index 000000000..0fc8c85fb --- /dev/null +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'; +import { useLocation } from '@docusaurus/router'; +import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; +import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; +import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; +import classnames from 'classnames'; +import './locale-dropdown-navbar-item.scss'; + +export default function LocaleDropdownNavbarItem({ + dropdownItemsBefore, + dropdownItemsAfter, + ...props +}: Props): JSX.Element { + const { + i18n: { currentLocale, locales, localeConfigs }, + } = useDocusaurusContext(); + const alternatePageUtils = useAlternatePageUtils(); + const { search, hash } = useLocation(); + + const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { + const baseTo = `pathname://${alternatePageUtils.createUrl({ + locale, + fullyQualified: false, + })}`; + // preserve ?search#hash suffix on locale switches + const to = `${baseTo}${search}${hash}`; + return { + label: localeConfigs[locale].label, + lang: localeConfigs[locale].htmlLang, + to, + target: '_self', + autoAddBaseUrl: false, + className: classnames({ 'dropdown__link--active': locale === currentLocale }), + }; + }); + + const getShortNames = (locale) => { + switch (locale) { + case 'en': + return 'EN'; + case 'es': + return 'ES'; + case 'fr': + return 'FR'; + default: + return 'EN'; + } + }; + + const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; + const dropdownLabel = getShortNames(currentLocale); + + 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 new file mode 100644 index 000000000..177c4fd18 --- /dev/null +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -0,0 +1,85 @@ +.language_switcher { + .dropdown { + position: relative; + } + .dropdown > .navbar__link:after { + display: none; + } + + .dropdown__menu { + position: fixed; + display: flex; + top: 80px; + left: 0px; + padding-right: 100px; + width: 100vw; + min-width: 1280px; + padding-bottom: 32px; + flex-direction: column; + align-items: center; + gap: 24px; + background-color: var(--ifm-navbar-background-color); + box-shadow: var(--ifm-navbar-shadow); + overscroll-behavior-y: contain; + overflow-y: auto; + align-items: flex-end; + z-index: 999; + } + + .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 { + background-image: url('/img/language-switcher.svg'); + background-repeat: no-repeat; + display: flex; + padding: 2px 22px; + align-items: center; + gap: 4px; + justify-content: flex-end; + padding-top: rem(2.5); + @media screen { + display: grid; + } + @media (max-width: 996px) { + display: none; + } + } + + .navbar__link { + font-weight: normal; + } + .dropdown__link { + font-size: 16px; + font-weight: normal; + margin-top: 15px; + } + + .dropdown:hover { + .navbar__link { + color: var(--colors-coral500); + } + } + + .dropdown__link--active { + color: var(--colors-coral500); + background-color: var(--colors-greyLight100); + } + + .dropdown__link--active:hover { + color: var(--colors-coral500); + } +} diff --git a/static/img/chevron-left.svg b/static/img/chevron-left.svg new file mode 100644 index 000000000..4dfab339e --- /dev/null +++ b/static/img/chevron-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/language-switcher.svg b/static/img/language-switcher.svg new file mode 100644 index 000000000..4bedbccc0 --- /dev/null +++ b/static/img/language-switcher.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From e7ddbb0d21b7fcd455d0a36d5c59e02dfe7da1bc Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 14 May 2024 16:25:40 +0400 Subject: [PATCH 02/44] mobile sidebar --- package-lock.json | 10 ++++++++ package.json | 1 + .../MobileSidebar/PrimaryMenu/index.tsx | 15 ++++++++---- .../PrimaryMenu/primary-menu.scss | 23 +++++++++++++++---- 4 files changed, 39 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index fed36c2fa..c0e9d2798 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@deriv/deriv-api": "^1.0.11", + "@deriv/quill-icons": "^1.22.7", "@deriv/ui": "^0.1.0", "@docusaurus/core": "^2.4.0", "@docusaurus/plugin-client-redirects": "^2.4.0", @@ -2632,6 +2633,15 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/@deriv/quill-icons": { + "version": "1.22.7", + "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.22.7.tgz", + "integrity": "sha512-6+HkLQya5dSllZ1gPwxrJuPPAFphSSieGhbpeWyrJsgKCFog9JmfKUoVdE/WmItElAh+JW3TWqzcQIOKklySMQ==", + "peerDependencies": { + "react": ">= 16", + "react-dom": ">= 16" + } + }, "node_modules/@deriv/ui": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/@deriv/ui/-/ui-0.1.0.tgz", diff --git a/package.json b/package.json index 546d18e96..ec946343e 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ }, "dependencies": { "@deriv/deriv-api": "^1.0.11", + "@deriv/quill-icons": "^1.22.7", "@deriv/ui": "^0.1.0", "@docusaurus/core": "^2.4.0", "@docusaurus/plugin-client-redirects": "^2.4.0", diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index db7108ccb..e9dc0a28f 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -4,6 +4,10 @@ import { splitNavbarItems, useNavbarMobileSidebar } from '@docusaurus/theme-comm import NavbarItem from '@theme/NavbarItem'; import './primary-menu.scss'; import { Button } from '@deriv/ui'; +import { + LabelPairedGlobeCaptionRegularIcon, + StandaloneChevronLeftRegularIcon, +} from '@deriv/quill-icons'; export function useNavbarItems() { // TODO temporary casting until ThemeConfig type is improved @@ -50,18 +54,19 @@ export default function CustomMobileSidebar() { ))}
- Language Switcher + EN
{/* Conditionally render the language sidebar */}
-
En
-
Fr
-
Th
+
English
+
Español
+
Français
+
Português
diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss index d2025cc2d..e1c69c05a 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss @@ -1,9 +1,12 @@ @media (max-width: 996px) { .navbar-sidebar__item { .navbar__item { - display: block; - padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal); + display: flex; + padding: 16px 16px; font-size: 0.875rem; + align-items: flex-start; + gap: 8px; + align-self: stretch; font-weight: var(--ifm-font-weight-normal); line-height: 1.25rem; height: 40px; @@ -39,14 +42,24 @@ &__buttons { display: flex; - justify-content: space-between; + width: 32px; + height: 32px; + padding: 0px 16px; + justify-content: center; align-items: center; - border-bottom: 1px solid var(--ifm-navbar-border-color); } &__items { - margin: 18px; + margin-top: 16px; display: flex; + height: 48px; + min-height: 48px; + max-height: 48px; + padding: 0px 16px; + padding-left: 32px; + padding-right: 32px; + gap: 32px; + align-self: stretch; height: calc(100% - var(--ifm-navbar-height)); transform: translateZ(0); transition: transform var(--ifm-transition-fast) ease-in-out; From dbacd7b582a641fd9a441403311973971411fb6b Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 14 May 2024 16:52:56 +0400 Subject: [PATCH 03/44] portugese --- docusaurus.config.js | 2 +- src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 2af551e8a..e1c346a2d 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -27,7 +27,7 @@ const config = { // to replace "en" with "zh-Hans". i18n: { defaultLocale: 'en', - locales: ['en', 'es', 'fr'], + locales: ['en', 'es', 'fr', 'pt'], localeConfigs: { en: { label: 'English', diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 0fc8c85fb..a0ca776df 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -44,6 +44,8 @@ export default function LocaleDropdownNavbarItem({ return 'ES'; case 'fr': return 'FR'; + case 'pt': + return 'PT'; default: return 'EN'; } From 5b7e1c9b48f11b7296609c7c9ad25e87215be155 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 15 May 2024 11:27:15 +0400 Subject: [PATCH 04/44] fixing below desktop view --- .../LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss index 177c4fd18..f4968f8b9 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -51,9 +51,6 @@ gap: 4px; justify-content: flex-end; padding-top: rem(2.5); - @media screen { - display: grid; - } @media (max-width: 996px) { display: none; } From f0dba40ec07448c72068eb8e251d21f980088dc6 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 15 May 2024 12:24:47 +0400 Subject: [PATCH 05/44] fix styling mobile --- .../MobileSidebar/PrimaryMenu/index.tsx | 19 ++++++++++--------- .../PrimaryMenu/primary-menu.scss | 12 +++--------- .../locale-dropdown-navbar-item.scss | 1 - 3 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index e9dc0a28f..270aa508a 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -9,8 +9,9 @@ import { StandaloneChevronLeftRegularIcon, } from '@deriv/quill-icons'; +import config from '@generated/docusaurus.config'; // Adjust the path as needed + export function useNavbarItems() { - // TODO temporary casting until ThemeConfig type is improved return useThemeConfig().navbar.items; } @@ -30,6 +31,9 @@ export default function CustomMobileSidebar() { setLanguageSidebarVisible(!languageSidebarVisible); }; + // Get the available locales from Docusaurus config + const { locales } = config.i18n; + return (
@@ -57,16 +61,13 @@ export default function CustomMobileSidebar() { EN
- {/* Conditionally render the language sidebar */}
- + +
-
English
-
Español
-
Français
-
Português
+ {locales.map((locale) => ( +
{locale}
+ ))}
diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss index e1c69c05a..67cc33322 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss @@ -19,7 +19,6 @@ } } - /* Style for the language sidebar */ .language_sidebar { position: fixed; top: 0; @@ -40,13 +39,8 @@ transform: translateX(0); } - &__buttons { - display: flex; - width: 32px; - height: 32px; - padding: 0px 16px; - justify-content: center; - align-items: center; + &.side { + margin-left: 25.5px; } &__items { @@ -56,7 +50,7 @@ min-height: 48px; max-height: 48px; padding: 0px 16px; - padding-left: 32px; + margin-left: 32px; padding-right: 32px; gap: 32px; align-self: stretch; diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss index f4968f8b9..39a6325f8 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -50,7 +50,6 @@ align-items: center; gap: 4px; justify-content: flex-end; - padding-top: rem(2.5); @media (max-width: 996px) { display: none; } From 314df2e3ea97af0668a1d9d2d90ac296b3f664e6 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 15 May 2024 13:27:00 +0400 Subject: [PATCH 06/44] chevron left styling --- src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss index 67cc33322..7210c0f10 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss @@ -37,10 +37,7 @@ opacity: 1; visibility: visible; transform: translateX(0); - } - - &.side { - margin-left: 25.5px; + margin-left: 10px; } &__items { From ed47e0f7d2c3e1aad3dd7dadd0d784802d75ee1a Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 22 May 2024 16:33:49 +0400 Subject: [PATCH 07/44] mobile fix --- .../MobileSidebar/PrimaryMenu/index.tsx | 68 ++++++++++++++++--- .../PrimaryMenu/primary-menu.scss | 36 +++++----- .../LocaleDropdownNavbarItem/index.tsx | 4 +- 3 files changed, 79 insertions(+), 29 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index 270aa508a..6ec3c1bbc 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -1,6 +1,10 @@ import React from 'react'; import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common'; -import { splitNavbarItems, useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'; +import { + splitNavbarItems, + useNavbarMobileSidebar, + useAlternatePageUtils, +} from '@docusaurus/theme-common/internal'; import NavbarItem from '@theme/NavbarItem'; import './primary-menu.scss'; import { Button } from '@deriv/ui'; @@ -8,8 +12,9 @@ import { LabelPairedGlobeCaptionRegularIcon, StandaloneChevronLeftRegularIcon, } from '@deriv/quill-icons'; - -import config from '@generated/docusaurus.config'; // Adjust the path as needed +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { useLocation } from '@docusaurus/router'; +import classnames from 'classnames'; export function useNavbarItems() { return useThemeConfig().navbar.items; @@ -31,8 +36,44 @@ export default function CustomMobileSidebar() { setLanguageSidebarVisible(!languageSidebarVisible); }; - // Get the available locales from Docusaurus config - const { locales } = config.i18n; + const { + i18n: { currentLocale, locales, localeConfigs }, + } = useDocusaurusContext(); + const alternatePageUtils = useAlternatePageUtils(); + const { search, hash } = useLocation(); + + const localeItems = locales.map((locale) => { + const baseTo = `pathname:${alternatePageUtils.createUrl({ + locale, + fullyQualified: false, + })}`; + const to = `${baseTo}${search}${hash}`; + return { + label: localeConfigs[locale].label, + lang: localeConfigs[locale].htmlLang, + to, + target: '_self', + autoAddBaseUrl: false, + className: classnames({ 'dropdown__link--active': locale === currentLocale }), + }; + }); + + const getShortNames = (locale) => { + switch (locale) { + case 'en': + return 'EN'; + case 'es': + return 'ES'; + case 'fr': + return 'FR'; + case 'pt': + return 'PT'; + default: + return 'EN'; + } + }; + + const dropdownLabel = getShortNames(currentLocale); return ( @@ -43,8 +84,8 @@ export default function CustomMobileSidebar() { onError={(error) => new Error( `A theme navbar item failed to render. - Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config: - ${JSON.stringify(item, null, 2)}`, + Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config: + ${JSON.stringify(item, null, 2)}`, ) } > @@ -58,15 +99,22 @@ export default function CustomMobileSidebar() { ))}
- EN + {dropdownLabel}
- {locales.map((locale) => ( -
{locale}
+ {localeItems.map((localeItem) => ( + mobileSidebar.toggle()} + > + {localeItem.label} + ))}
diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss index 7210c0f10..31d709462 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss @@ -5,6 +5,7 @@ padding: 16px 16px; font-size: 0.875rem; align-items: flex-start; + background-color: var(--ifm-navbar-background-color); gap: 8px; align-self: stretch; font-weight: var(--ifm-font-weight-normal); @@ -13,12 +14,6 @@ width: 100vw; } - .navbar__link { - &--active { - background-color: var(--ifm-menu-color-background-active); - } - } - .language_sidebar { position: fixed; top: 0; @@ -37,24 +32,31 @@ opacity: 1; visibility: visible; transform: translateX(0); - margin-left: 10px; } &__items { margin-top: 16px; display: flex; - height: 48px; - min-height: 48px; - max-height: 48px; padding: 0px 16px; - margin-left: 32px; - padding-right: 32px; - gap: 32px; - align-self: stretch; - height: calc(100% - var(--ifm-navbar-height)); - transform: translateZ(0); - transition: transform var(--ifm-transition-fast) ease-in-out; flex-direction: column; + gap: 24px; + align-items: flex-start; + } + + a { + overflow: hidden; + font-family: var(--ibm-font-family-base); + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: rgba(0, 0, 0, 0.72) !important; + text-decoration: none; + + &:hover, + &:active, + &.dropdown__link--active { + color: var(--colors-coral500) !important; + } } } } diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index a0ca776df..56be54c93 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -20,11 +20,11 @@ export default function LocaleDropdownNavbarItem({ const { search, hash } = useLocation(); const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { - const baseTo = `pathname://${alternatePageUtils.createUrl({ + const baseTo = `pathname:${alternatePageUtils.createUrl({ locale, fullyQualified: false, })}`; - // preserve ?search#hash suffix on locale switches + const to = `${baseTo}${search}${hash}`; return { label: localeConfigs[locale].label, From a4f28a3785b4b0a48446b9e9fad002f85a170ba7 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 22 May 2024 16:48:25 +0400 Subject: [PATCH 08/44] mobile fix --- src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss index 31d709462..8d9917014 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss @@ -51,6 +51,7 @@ line-height: 24px; color: rgba(0, 0, 0, 0.72) !important; text-decoration: none; + background-color: white; &:hover, &:active, From d86343cdee36ed24c0113407e010ea8c5a079e06 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Thu, 23 May 2024 10:09:13 +0400 Subject: [PATCH 09/44] lang fix --- .../MobileSidebar/PrimaryMenu/index.tsx | 19 ++++++++++++------- .../LocaleDropdownNavbarItem/index.tsx | 18 ++++++++++++------ 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index 6ec3c1bbc..acb0046e4 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -7,7 +7,6 @@ import { } from '@docusaurus/theme-common/internal'; import NavbarItem from '@theme/NavbarItem'; import './primary-menu.scss'; -import { Button } from '@deriv/ui'; import { LabelPairedGlobeCaptionRegularIcon, StandaloneChevronLeftRegularIcon, @@ -20,11 +19,16 @@ export function useNavbarItems() { return useThemeConfig().navbar.items; } +function normalizePath(path) { + return path.replace(/\/{2,}/g, '/'); +} + export default function CustomMobileSidebar() { const [languageSidebarVisible, setLanguageSidebarVisible] = React.useState(false); const mobileSidebar = useNavbarMobileSidebar(); const items = useNavbarItems(); const [leftItems] = splitNavbarItems(items); + const { pathname } = useLocation(); React.useEffect(() => { if (!mobileSidebar?.shown) { @@ -40,21 +44,22 @@ export default function CustomMobileSidebar() { i18n: { currentLocale, locales, localeConfigs }, } = useDocusaurusContext(); const alternatePageUtils = useAlternatePageUtils(); - const { search, hash } = useLocation(); const localeItems = locales.map((locale) => { - const baseTo = `pathname:${alternatePageUtils.createUrl({ + const baseTo = alternatePageUtils.createUrl({ locale, fullyQualified: false, - })}`; - const to = `${baseTo}${search}${hash}`; + }); + console.log('baseTo', baseTo); + const localePath = normalizePath(`${baseTo}${pathname}`); + return { label: localeConfigs[locale].label, - lang: localeConfigs[locale].htmlLang, - to, + lang: locale, target: '_self', autoAddBaseUrl: false, className: classnames({ 'dropdown__link--active': locale === currentLocale }), + to: localePath, }; }); diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 56be54c93..040ad4aea 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -8,24 +8,30 @@ import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; import classnames from 'classnames'; import './locale-dropdown-navbar-item.scss'; +function normalizePath(path) { + return path.replace(/\/{2,}/g, '/'); +} + export default function LocaleDropdownNavbarItem({ - dropdownItemsBefore, - dropdownItemsAfter, + dropdownItemsBefore = [], + dropdownItemsAfter = [], ...props }: Props): JSX.Element { const { i18n: { currentLocale, locales, localeConfigs }, } = useDocusaurusContext(); const alternatePageUtils = useAlternatePageUtils(); - const { search, hash } = useLocation(); + const { pathname, search, hash } = useLocation(); const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { - const baseTo = `pathname:${alternatePageUtils.createUrl({ + const baseTo = alternatePageUtils.createUrl({ locale, fullyQualified: false, - })}`; + }); + + const localePath = normalizePath(`${baseTo}${pathname}`); + const to = `${localePath}${search}${hash}`; - const to = `${baseTo}${search}${hash}`; return { label: localeConfigs[locale].label, lang: localeConfigs[locale].htmlLang, From 6d0d1a5cb7d724848cc72f4aa03f0c253cd9e312 Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Thu, 23 May 2024 15:51:59 +0800 Subject: [PATCH 10/44] chore: language switcher --- .../MobileSidebar/PrimaryMenu/index.tsx | 21 +++++++------------ .../LocaleDropdownNavbarItem/index.tsx | 15 ++++--------- 2 files changed, 12 insertions(+), 24 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index acb0046e4..60c65bc37 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -14,21 +14,17 @@ import { import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import { useLocation } from '@docusaurus/router'; import classnames from 'classnames'; +import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; export function useNavbarItems() { return useThemeConfig().navbar.items; } -function normalizePath(path) { - return path.replace(/\/{2,}/g, '/'); -} - export default function CustomMobileSidebar() { const [languageSidebarVisible, setLanguageSidebarVisible] = React.useState(false); const mobileSidebar = useNavbarMobileSidebar(); const items = useNavbarItems(); const [leftItems] = splitNavbarItems(items); - const { pathname } = useLocation(); React.useEffect(() => { if (!mobileSidebar?.shown) { @@ -44,22 +40,21 @@ export default function CustomMobileSidebar() { i18n: { currentLocale, locales, localeConfigs }, } = useDocusaurusContext(); const alternatePageUtils = useAlternatePageUtils(); + const { search, hash } = useLocation(); - const localeItems = locales.map((locale) => { - const baseTo = alternatePageUtils.createUrl({ + const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { + const baseTo = `${alternatePageUtils.createUrl({ locale, fullyQualified: false, - }); - console.log('baseTo', baseTo); - const localePath = normalizePath(`${baseTo}${pathname}`); - + })}`; + const to = `${baseTo}${search}${hash}`; return { label: localeConfigs[locale].label, - lang: locale, + lang: localeConfigs[locale].htmlLang, + to, target: '_self', autoAddBaseUrl: false, className: classnames({ 'dropdown__link--active': locale === currentLocale }), - to: localePath, }; }); diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 040ad4aea..ce4baf0f7 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -8,10 +8,6 @@ import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; import classnames from 'classnames'; import './locale-dropdown-navbar-item.scss'; -function normalizePath(path) { - return path.replace(/\/{2,}/g, '/'); -} - export default function LocaleDropdownNavbarItem({ dropdownItemsBefore = [], dropdownItemsAfter = [], @@ -21,17 +17,14 @@ export default function LocaleDropdownNavbarItem({ i18n: { currentLocale, locales, localeConfigs }, } = useDocusaurusContext(); const alternatePageUtils = useAlternatePageUtils(); - const { pathname, search, hash } = useLocation(); + const { search, hash } = useLocation(); const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { - const baseTo = alternatePageUtils.createUrl({ + const baseTo = `pathname://${alternatePageUtils.createUrl({ locale, fullyQualified: false, - }); - - const localePath = normalizePath(`${baseTo}${pathname}`); - const to = `${localePath}${search}${hash}`; - + })}`; + const to = `${baseTo}${search}${hash}`; return { label: localeConfigs[locale].label, lang: localeConfigs[locale].htmlLang, From f15e588379372f8943b4bfafd7f23e7280cc2c0f Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Mon, 27 May 2024 10:39:04 +0400 Subject: [PATCH 11/44] styling changes --- .../locale-dropdown-navbar-item.scss | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss index 39a6325f8..f5854a836 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -9,21 +9,18 @@ .dropdown__menu { position: fixed; display: flex; - top: 80px; + top: 93px !important; left: 0px; - padding-right: 100px; + padding-right: 5.5%; width: 100vw; - min-width: 1280px; + 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); - overscroll-behavior-y: contain; - overflow-y: auto; align-items: flex-end; - z-index: 999; } .navbar__items--right .dropdown__link { @@ -43,9 +40,11 @@ } .dropdown { + height: 72px; + position: relative !important; + top: 25px; background-image: url('/img/language-switcher.svg'); background-repeat: no-repeat; - display: flex; padding: 2px 22px; align-items: center; gap: 4px; From f11ca29acab14c1df0ff845433fbd25c2b350787 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 28 May 2024 05:02:43 +0400 Subject: [PATCH 12/44] url fix --- .../MobileSidebar/PrimaryMenu/index.tsx | 73 +++++++++++++------ .../PrimaryMenu/primary-menu.scss | 2 + .../LocaleDropdownNavbarItem/index.tsx | 69 +++++++++++------- .../locale-dropdown-navbar-item.scss | 2 + 4 files changed, 97 insertions(+), 49 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index acb0046e4..8831a3fa3 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -1,10 +1,6 @@ import React from 'react'; import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common'; -import { - splitNavbarItems, - useNavbarMobileSidebar, - useAlternatePageUtils, -} from '@docusaurus/theme-common/internal'; +import { splitNavbarItems, useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'; import NavbarItem from '@theme/NavbarItem'; import './primary-menu.scss'; import { @@ -19,16 +15,14 @@ export function useNavbarItems() { return useThemeConfig().navbar.items; } -function normalizePath(path) { - return path.replace(/\/{2,}/g, '/'); -} - export default function CustomMobileSidebar() { const [languageSidebarVisible, setLanguageSidebarVisible] = React.useState(false); const mobileSidebar = useNavbarMobileSidebar(); const items = useNavbarItems(); const [leftItems] = splitNavbarItems(items); - const { pathname } = useLocation(); + const { pathname, search, hash } = useLocation(); + const pathSegments = pathname.split('/').filter(Boolean); + const currentLocale = pathSegments[0]; React.useEffect(() => { if (!mobileSidebar?.shown) { @@ -41,25 +35,55 @@ export default function CustomMobileSidebar() { }; const { - i18n: { currentLocale, locales, localeConfigs }, + i18n: { currentLocale: currentLocaleCtx, locales, localeConfigs }, } = useDocusaurusContext(); - const alternatePageUtils = useAlternatePageUtils(); + + const constructHref = (locale) => { + if (pathname === '/') { + return locale === 'en' ? '/' : `/${locale}`; + } else { + const firstSlashIndex = pathname.indexOf('/'); + const secondSlashIndex = pathname.indexOf('/', firstSlashIndex + 1); + let newPathname = pathname; + + if (secondSlashIndex === -1) { + newPathname = + locale === 'en' || pathname === '/en' + ? pathname.substring(firstSlashIndex) + : `/${locale}${pathname}`; + } else { + const currentLocaleInPath = pathname.substring(1, secondSlashIndex); + const isValidLocale = locales.includes(currentLocaleInPath); + + if (isValidLocale && locale === 'en') { + return pathname.substring(secondSlashIndex); + } else if (isValidLocale) { + return pathname.replace(`/${currentLocaleInPath}`, `/${locale}`); + } else if (locale !== 'en') { + return `/${locale}${pathname}`; + } else { + return pathname; + } + } + + return newPathname; + } + }; + + const handleLocaleChange = (newLocale) => { + const newPathname = constructHref(newLocale); + window.history.pushState(null, '', newPathname); + }; const localeItems = locales.map((locale) => { - const baseTo = alternatePageUtils.createUrl({ - locale, - fullyQualified: false, - }); - console.log('baseTo', baseTo); - const localePath = normalizePath(`${baseTo}${pathname}`); + const newPathname = constructHref(locale); return { label: localeConfigs[locale].label, lang: locale, - target: '_self', - autoAddBaseUrl: false, + to: newPathname, className: classnames({ 'dropdown__link--active': locale === currentLocale }), - to: localePath, + onClick: () => handleLocaleChange(locale), }; }); @@ -78,7 +102,7 @@ export default function CustomMobileSidebar() { } }; - const dropdownLabel = getShortNames(currentLocale); + const dropdownLabel = getShortNames(currentLocaleCtx); return ( @@ -116,7 +140,10 @@ export default function CustomMobileSidebar() { key={localeItem.lang} href={localeItem.to} className={localeItem.className} - onClick={() => mobileSidebar.toggle()} + onClick={() => { + localeItem.onClick(); + mobileSidebar.toggle(); + }} > {localeItem.label} diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss index 8d9917014..a84eb6f51 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss @@ -12,6 +12,7 @@ line-height: 1.25rem; height: 40px; width: 100vw; + cursor: pointer; } .language_sidebar { @@ -41,6 +42,7 @@ flex-direction: column; gap: 24px; align-items: flex-start; + cursor: pointer; } a { diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 040ad4aea..a7f22a9c7 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -1,46 +1,63 @@ import React from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'; import { useLocation } from '@docusaurus/router'; import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; -import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; -import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; import classnames from 'classnames'; import './locale-dropdown-navbar-item.scss'; -function normalizePath(path) { - return path.replace(/\/{2,}/g, '/'); -} - export default function LocaleDropdownNavbarItem({ dropdownItemsBefore = [], dropdownItemsAfter = [], ...props -}: Props): JSX.Element { +}) { const { i18n: { currentLocale, locales, localeConfigs }, } = useDocusaurusContext(); - const alternatePageUtils = useAlternatePageUtils(); - const { pathname, search, hash } = useLocation(); + const { pathname } = useLocation(); - const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { - const baseTo = alternatePageUtils.createUrl({ - locale, - fullyQualified: false, - }); + const constructHref = (locale) => { + if (pathname === '/') { + return locale === 'en' ? '/' : `/${locale}`; + } else { + const firstSlashIndex = pathname.indexOf('/'); + const secondSlashIndex = pathname.indexOf('/', firstSlashIndex + 1); - const localePath = normalizePath(`${baseTo}${pathname}`); - const to = `${localePath}${search}${hash}`; + if (secondSlashIndex === -1) { + // Only one slash + return locale === 'en' ? pathname.substring(firstSlashIndex) : `/${locale}${pathname}`; // Correct for single slash case + } else { + const currentLocaleInPath = pathname.substring(1, secondSlashIndex); + const isValidLocale = locales.includes(currentLocaleInPath); + + if (isValidLocale && locale === 'en') { + // Switch to 'en' when valid locale exists + return pathname.substring(secondSlashIndex); // Remove the locale prefix + } else if (isValidLocale) { + // Switch between valid locales + return pathname.replace(`/${currentLocaleInPath}`, `/${locale}`); + } else if (locale !== 'en') { + // Add locale prefix if no valid locale and not switching to 'en' + return `/${locale}${pathname}`; + } else { + // Switch to 'en' with no valid locale in path + return pathname; // Return the original path + } + } + } + }; + + const handleLocaleChange = (newLocale) => { + const newPathname = constructHref(newLocale); + window.history.pushState({ path: newPathname }, '', newPathname); + }; - return { - label: localeConfigs[locale].label, - lang: localeConfigs[locale].htmlLang, - to, - target: '_self', - autoAddBaseUrl: false, - className: classnames({ 'dropdown__link--active': locale === currentLocale }), - }; - }); + const localeItems = locales.map((locale) => ({ + label: localeConfigs[locale].label, + lang: localeConfigs[locale].htmlLang, + onClick: () => handleLocaleChange(locale), + className: classnames({ 'dropdown__link--active': locale === currentLocale }), + href: constructHref(locale), + })); const getShortNames = (locale) => { switch (locale) { diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss index f5854a836..4b1d965e6 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -1,6 +1,7 @@ .language_switcher { .dropdown { position: relative; + cursor: pointer; } .dropdown > .navbar__link:after { display: none; @@ -21,6 +22,7 @@ background-color: var(--ifm-navbar-background-color); box-shadow: var(--ifm-navbar-shadow); align-items: flex-end; + cursor: pointer; } .navbar__items--right .dropdown__link { From 61c982a2be3262f595e4b061005b35a4f94d4e6f Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 28 May 2024 05:06:43 +0400 Subject: [PATCH 13/44] url fix --- src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index a7f22a9c7..5780f66c4 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -23,24 +23,19 @@ export default function LocaleDropdownNavbarItem({ const secondSlashIndex = pathname.indexOf('/', firstSlashIndex + 1); if (secondSlashIndex === -1) { - // Only one slash return locale === 'en' ? pathname.substring(firstSlashIndex) : `/${locale}${pathname}`; // Correct for single slash case } else { const currentLocaleInPath = pathname.substring(1, secondSlashIndex); const isValidLocale = locales.includes(currentLocaleInPath); if (isValidLocale && locale === 'en') { - // Switch to 'en' when valid locale exists - return pathname.substring(secondSlashIndex); // Remove the locale prefix + return pathname.substring(secondSlashIndex); } else if (isValidLocale) { - // Switch between valid locales return pathname.replace(`/${currentLocaleInPath}`, `/${locale}`); } else if (locale !== 'en') { - // Add locale prefix if no valid locale and not switching to 'en' return `/${locale}${pathname}`; } else { - // Switch to 'en' with no valid locale in path - return pathname; // Return the original path + return pathname; } } } From eae951ade71605a22bf6f4d863b70f49d1f6c9db Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 28 May 2024 12:51:46 +0400 Subject: [PATCH 14/44] url issue --- .../MobileSidebar/PrimaryMenu/index.tsx | 51 +++++----------- .../LocaleDropdownNavbarItem/index.tsx | 61 ++++++++----------- 2 files changed, 42 insertions(+), 70 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index 8831a3fa3..e32d84cdf 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -38,55 +38,36 @@ export default function CustomMobileSidebar() { i18n: { currentLocale: currentLocaleCtx, locales, localeConfigs }, } = useDocusaurusContext(); - const constructHref = (locale) => { - if (pathname === '/') { - return locale === 'en' ? '/' : `/${locale}`; - } else { - const firstSlashIndex = pathname.indexOf('/'); - const secondSlashIndex = pathname.indexOf('/', firstSlashIndex + 1); - let newPathname = pathname; - - if (secondSlashIndex === -1) { - newPathname = - locale === 'en' || pathname === '/en' - ? pathname.substring(firstSlashIndex) - : `/${locale}${pathname}`; + const replaceLocaleInPath = (path, newLocale) => { + const segments = path.split('/').filter(Boolean); + if (locales.includes(segments[0])) { + if (newLocale === 'en') { + segments.shift(); } else { - const currentLocaleInPath = pathname.substring(1, secondSlashIndex); - const isValidLocale = locales.includes(currentLocaleInPath); - - if (isValidLocale && locale === 'en') { - return pathname.substring(secondSlashIndex); - } else if (isValidLocale) { - return pathname.replace(`/${currentLocaleInPath}`, `/${locale}`); - } else if (locale !== 'en') { - return `/${locale}${pathname}`; - } else { - return pathname; - } + segments[0] = newLocale; } - - return newPathname; + } else if (newLocale !== 'en') { + segments.unshift(newLocale); } - }; - - const handleLocaleChange = (newLocale) => { - const newPathname = constructHref(newLocale); - window.history.pushState(null, '', newPathname); + return '/' + segments.join('/'); }; const localeItems = locales.map((locale) => { - const newPathname = constructHref(locale); - + const newPathname = replaceLocaleInPath(pathname, locale); return { label: localeConfigs[locale].label, lang: locale, - to: newPathname, + to: `${newPathname}${search}${hash}`, className: classnames({ 'dropdown__link--active': locale === currentLocale }), onClick: () => handleLocaleChange(locale), }; }); + const handleLocaleChange = (newLocale) => { + const newPathname = replaceLocaleInPath(pathname, newLocale); + window.history.pushState(null, '', newPathname); + }; + const getShortNames = (locale) => { switch (locale) { case 'en': diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 5780f66c4..e0251d3d9 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -1,7 +1,10 @@ import React from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'; import { useLocation } from '@docusaurus/router'; import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; +import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; +import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; import classnames from 'classnames'; import './locale-dropdown-navbar-item.scss'; @@ -9,50 +12,38 @@ export default function LocaleDropdownNavbarItem({ dropdownItemsBefore = [], dropdownItemsAfter = [], ...props -}) { +}: Props): JSX.Element { const { i18n: { currentLocale, locales, localeConfigs }, } = useDocusaurusContext(); - const { pathname } = useLocation(); + const alternatePageUtils = useAlternatePageUtils(); + const { pathname, search, hash } = useLocation(); - const constructHref = (locale) => { - if (pathname === '/') { - return locale === 'en' ? '/' : `/${locale}`; - } else { - const firstSlashIndex = pathname.indexOf('/'); - const secondSlashIndex = pathname.indexOf('/', firstSlashIndex + 1); - - if (secondSlashIndex === -1) { - return locale === 'en' ? pathname.substring(firstSlashIndex) : `/${locale}${pathname}`; // Correct for single slash case + const replaceLocale = (path, newLocale) => { + const segments = path.split('/'); + if (locales.includes(segments[1])) { + if (newLocale === 'en') { + segments.splice(1, 1); } else { - const currentLocaleInPath = pathname.substring(1, secondSlashIndex); - const isValidLocale = locales.includes(currentLocaleInPath); - - if (isValidLocale && locale === 'en') { - return pathname.substring(secondSlashIndex); - } else if (isValidLocale) { - return pathname.replace(`/${currentLocaleInPath}`, `/${locale}`); - } else if (locale !== 'en') { - return `/${locale}${pathname}`; - } else { - return pathname; - } + segments[1] = newLocale; } + } else if (newLocale !== 'en') { + segments.splice(1, 0, newLocale); } + return segments.join('/'); }; - const handleLocaleChange = (newLocale) => { - const newPathname = constructHref(newLocale); - window.history.pushState({ path: newPathname }, '', newPathname); - }; - - const localeItems = locales.map((locale) => ({ - label: localeConfigs[locale].label, - lang: localeConfigs[locale].htmlLang, - onClick: () => handleLocaleChange(locale), - className: classnames({ 'dropdown__link--active': locale === currentLocale }), - href: constructHref(locale), - })); + const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { + const newPath = replaceLocale(pathname, locale); + return { + label: localeConfigs[locale].label, + lang: localeConfigs[locale].htmlLang, + to: `${newPath}${search}${hash}`, + target: '_self', + autoAddBaseUrl: false, + className: classnames({ 'dropdown__link--active': locale === currentLocale }), + }; + }); const getShortNames = (locale) => { switch (locale) { From c639a14e5f1cbe70cf8a2f8b4207f5b3221dbd92 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 28 May 2024 15:57:31 +0400 Subject: [PATCH 15/44] Language Fix --- .../MobileSidebar/PrimaryMenu/index.tsx | 48 ++++++++++--------- .../LocaleDropdownNavbarItem/index.tsx | 28 +++++++---- 2 files changed, 43 insertions(+), 33 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index e32d84cdf..8e8821395 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common'; import { splitNavbarItems, useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'; import NavbarItem from '@theme/NavbarItem'; @@ -21,24 +21,12 @@ export default function CustomMobileSidebar() { const items = useNavbarItems(); const [leftItems] = splitNavbarItems(items); const { pathname, search, hash } = useLocation(); - const pathSegments = pathname.split('/').filter(Boolean); - const currentLocale = pathSegments[0]; - - React.useEffect(() => { - if (!mobileSidebar?.shown) { - setLanguageSidebarVisible(false); - } - }, [mobileSidebar]); - - const toggleLanguageSidebar = () => { - setLanguageSidebarVisible(!languageSidebarVisible); - }; const { i18n: { currentLocale: currentLocaleCtx, locales, localeConfigs }, } = useDocusaurusContext(); - const replaceLocaleInPath = (path, newLocale) => { + const replaceLocale = (path, newLocale) => { const segments = path.split('/').filter(Boolean); if (locales.includes(segments[0])) { if (newLocale === 'en') { @@ -52,22 +40,32 @@ export default function CustomMobileSidebar() { return '/' + segments.join('/'); }; + const [selectedLocale, setSelectedLocale] = React.useState('en'); + + useEffect(() => { + if (pathname) { + pathname.split('/').forEach((path) => { + if (locales.includes(path)) { + setSelectedLocale(path); + } + }); + } + }, [pathname]); + const localeItems = locales.map((locale) => { - const newPathname = replaceLocaleInPath(pathname, locale); + const newPathname = replaceLocale(pathname, locale); return { label: localeConfigs[locale].label, lang: locale, to: `${newPathname}${search}${hash}`, - className: classnames({ 'dropdown__link--active': locale === currentLocale }), - onClick: () => handleLocaleChange(locale), + className: classnames({ 'dropdown__link--active': locale === selectedLocale }), + onClick: () => { + window.history.pushState(null, '', `${newPathname}${search}${hash}`); + setSelectedLocale(locale); + }, }; }); - const handleLocaleChange = (newLocale) => { - const newPathname = replaceLocaleInPath(pathname, newLocale); - window.history.pushState(null, '', newPathname); - }; - const getShortNames = (locale) => { switch (locale) { case 'en': @@ -83,7 +81,11 @@ export default function CustomMobileSidebar() { } }; - const dropdownLabel = getShortNames(currentLocaleCtx); + const dropdownLabel = getShortNames(selectedLocale); + + const toggleLanguageSidebar = () => { + setLanguageSidebarVisible(!languageSidebarVisible); + }; return ( diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index e0251d3d9..ecb433f2c 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -1,23 +1,31 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'; import { useLocation } from '@docusaurus/router'; import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; import classnames from 'classnames'; import './locale-dropdown-navbar-item.scss'; - export default function LocaleDropdownNavbarItem({ dropdownItemsBefore = [], dropdownItemsAfter = [], ...props }: Props): JSX.Element { const { - i18n: { currentLocale, locales, localeConfigs }, + i18n: { locales, localeConfigs }, } = useDocusaurusContext(); - const alternatePageUtils = useAlternatePageUtils(); const { pathname, search, hash } = useLocation(); + const [selectedLocale, setSelectedLocale] = React.useState('en'); + + useEffect(() => { + if (pathname) { + pathname.split('/').forEach((path) => { + if (locales.includes(path)) { + setSelectedLocale(path); + } + }); + } + }, [pathname, selectedLocale]); const replaceLocale = (path, newLocale) => { const segments = path.split('/'); @@ -41,10 +49,12 @@ export default function LocaleDropdownNavbarItem({ to: `${newPath}${search}${hash}`, target: '_self', autoAddBaseUrl: false, - className: classnames({ 'dropdown__link--active': locale === currentLocale }), + className: classnames({ 'dropdown__link--active': locale === selectedLocale }), + onClick: () => { + window.history.pushState(null, '', `${newPath}${search}${hash}`); + }, }; }); - const getShortNames = (locale) => { switch (locale) { case 'en': @@ -59,10 +69,8 @@ export default function LocaleDropdownNavbarItem({ return 'EN'; } }; - const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; - const dropdownLabel = getShortNames(currentLocale); - + const dropdownLabel = getShortNames(selectedLocale); return (
{dropdownLabel}} items={items} /> From 9db8f0c6eb32e8cf7229596313256a2d55e9e2ed Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 28 May 2024 16:05:28 +0400 Subject: [PATCH 16/44] replacing to en language --- .../NavbarItem/LocaleDropdownNavbarItem/index.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index ecb433f2c..e6854e143 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -28,17 +28,17 @@ export default function LocaleDropdownNavbarItem({ }, [pathname, selectedLocale]); const replaceLocale = (path, newLocale) => { - const segments = path.split('/'); - if (locales.includes(segments[1])) { + const segments = path.split('/').filter(Boolean); + if (locales.includes(segments[0])) { if (newLocale === 'en') { - segments.splice(1, 1); + segments.shift(); } else { - segments[1] = newLocale; + segments[0] = newLocale; } } else if (newLocale !== 'en') { - segments.splice(1, 0, newLocale); + segments.unshift(newLocale); } - return segments.join('/'); + return '/' + segments.join('/'); }; const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { From 10767618a60a7a2fa12f03e4705a32273e61756c Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 29 May 2024 12:57:10 +0400 Subject: [PATCH 17/44] clean code and styling fix --- .../MobileSidebar/PrimaryMenu/index.tsx | 53 +++++++++--------- .../PrimaryMenu/primary-menu.scss | 10 +++- .../LocaleDropdownNavbarItem/index.tsx | 55 +++++++++++-------- .../locale-dropdown-navbar-item.scss | 22 +++----- 4 files changed, 74 insertions(+), 66 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index 8e8821395..808c8886d 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -15,19 +15,10 @@ export function useNavbarItems() { return useThemeConfig().navbar.items; } -export default function CustomMobileSidebar() { - const [languageSidebarVisible, setLanguageSidebarVisible] = React.useState(false); - const mobileSidebar = useNavbarMobileSidebar(); - const items = useNavbarItems(); - const [leftItems] = splitNavbarItems(items); - const { pathname, search, hash } = useLocation(); - - const { - i18n: { currentLocale: currentLocaleCtx, locales, localeConfigs }, - } = useDocusaurusContext(); - - const replaceLocale = (path, newLocale) => { - const segments = path.split('/').filter(Boolean); +const replaceLocale = (path, newLocale, locales) => { + const segments = path.split('/').filter(Boolean); + const currentLocale = locales.includes(segments[0]) ? segments[0] : 'en'; + if (newLocale) { if (locales.includes(segments[0])) { if (newLocale === 'en') { segments.shift(); @@ -37,31 +28,41 @@ export default function CustomMobileSidebar() { } else if (newLocale !== 'en') { segments.unshift(newLocale); } - return '/' + segments.join('/'); + console.log('newLocale', newLocale); + } + return { + newPath: '/' + segments.join('/'), + currentLocale, }; +}; - const [selectedLocale, setSelectedLocale] = React.useState('en'); +export default function CustomMobileSidebar() { + const [languageSidebarVisible, setLanguageSidebarVisible] = React.useState(false); + const mobileSidebar = useNavbarMobileSidebar(); + const items = useNavbarItems(); + const [leftItems] = splitNavbarItems(items); + const { pathname, search, hash } = useLocation(); + const { + i18n: { locales, localeConfigs }, + } = useDocusaurusContext(); + const { currentLocale } = replaceLocale(pathname, null, locales); + const [selectedLocale, setSelectedLocale] = React.useState(currentLocale); useEffect(() => { - if (pathname) { - pathname.split('/').forEach((path) => { - if (locales.includes(path)) { - setSelectedLocale(path); - } - }); - } + const { currentLocale } = replaceLocale(pathname, null, locales); + setSelectedLocale(currentLocale); + console.log('currentLocale', currentLocale); }, [pathname]); const localeItems = locales.map((locale) => { - const newPathname = replaceLocale(pathname, locale); + const { newPath } = replaceLocale(pathname, locale, locales); return { label: localeConfigs[locale].label, lang: locale, - to: `${newPathname}${search}${hash}`, + to: `${newPath}${search}${hash}`, className: classnames({ 'dropdown__link--active': locale === selectedLocale }), onClick: () => { - window.history.pushState(null, '', `${newPathname}${search}${hash}`); - setSelectedLocale(locale); + window.history.pushState(null, '', `${newPath}${search}${hash}`); }, }; }); diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss index a84eb6f51..cf3ae473e 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss @@ -15,6 +15,10 @@ cursor: pointer; } + .navbar__item.navbar__link { + color: var(--core-color-solid-slate-1400, #000); + } + .language_sidebar { position: fixed; top: 0; @@ -51,14 +55,14 @@ font-size: 16px; font-weight: 400; line-height: 24px; - color: rgba(0, 0, 0, 0.72) !important; + color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)) !important; text-decoration: none; - background-color: white; + background-color: var(--ifm-navbar-background-color); &:hover, &:active, &.dropdown__link--active { - color: var(--colors-coral500) !important; + color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)) !important; } } } diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index e6854e143..fe9fd6bd1 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -6,29 +6,11 @@ import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; import classnames from 'classnames'; import './locale-dropdown-navbar-item.scss'; -export default function LocaleDropdownNavbarItem({ - dropdownItemsBefore = [], - dropdownItemsAfter = [], - ...props -}: Props): JSX.Element { - const { - i18n: { locales, localeConfigs }, - } = useDocusaurusContext(); - const { pathname, search, hash } = useLocation(); - const [selectedLocale, setSelectedLocale] = React.useState('en'); - useEffect(() => { - if (pathname) { - pathname.split('/').forEach((path) => { - if (locales.includes(path)) { - setSelectedLocale(path); - } - }); - } - }, [pathname, selectedLocale]); - - const replaceLocale = (path, newLocale) => { - const segments = path.split('/').filter(Boolean); +const replaceLocale = (path, newLocale, locales) => { + const segments = path.split('/').filter(Boolean); + const currentLocale = locales.includes(segments[0]) ? segments[0] : 'en'; + if (newLocale) { if (locales.includes(segments[0])) { if (newLocale === 'en') { segments.shift(); @@ -38,11 +20,33 @@ export default function LocaleDropdownNavbarItem({ } else if (newLocale !== 'en') { segments.unshift(newLocale); } - return '/' + segments.join('/'); + console.log('newLocale', newLocale); + } + return { + newPath: '/' + segments.join('/'), + currentLocale, }; +}; + +export default function LocaleDropdownNavbarItem({ + dropdownItemsBefore = [], + dropdownItemsAfter = [], + ...props +}: Props): JSX.Element { + const { + i18n: { locales, localeConfigs }, + } = useDocusaurusContext(); + const { pathname, search, hash } = useLocation(); + const { newPath, currentLocale } = replaceLocale(pathname, null, locales); + const [selectedLocale, setSelectedLocale] = React.useState(currentLocale); + + useEffect(() => { + const { currentLocale } = replaceLocale(pathname, null, locales); + setSelectedLocale(currentLocale); + }, [pathname]); const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { - const newPath = replaceLocale(pathname, locale); + const { newPath } = replaceLocale(pathname, locale, locales); return { label: localeConfigs[locale].label, lang: localeConfigs[locale].htmlLang, @@ -55,6 +59,7 @@ export default function LocaleDropdownNavbarItem({ }, }; }); + const getShortNames = (locale) => { switch (locale) { case 'en': @@ -69,8 +74,10 @@ export default function LocaleDropdownNavbarItem({ return 'EN'; } }; + const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; const dropdownLabel = getShortNames(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 4b1d965e6..a9dc1d5bb 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -7,10 +7,14 @@ display: none; } + a.navbar__link { + color: var(--core-color-solid-slate-1400, #000) !important; + } + .dropdown__menu { position: fixed; display: flex; - top: 93px !important; + top: 90px !important; left: 0px; padding-right: 5.5%; width: 100vw; @@ -63,20 +67,12 @@ font-size: 16px; font-weight: normal; margin-top: 15px; - } - - .dropdown:hover { - .navbar__link { - color: var(--colors-coral500); - } + 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(--colors-coral500); - background-color: var(--colors-greyLight100); - } - - .dropdown__link--active:hover { - color: var(--colors-coral500); + color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)) !important; + background-color: var(--ifm-navbar-background-color); } } From d50ca3ee0c8b02c5d0fb7e5111528a9b75a5b1af Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 29 May 2024 15:56:16 +0400 Subject: [PATCH 18/44] styling changes dropdown --- .../LocaleDropdownNavbarItem/index.tsx | 24 +++++++++++++++---- .../locale-dropdown-navbar-item.scss | 7 +++++- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index fe9fd6bd1..e6cd583ff 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import { useLocation } from '@docusaurus/router'; import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; @@ -20,7 +20,6 @@ const replaceLocale = (path, newLocale, locales) => { } else if (newLocale !== 'en') { segments.unshift(newLocale); } - console.log('newLocale', newLocale); } return { newPath: '/' + segments.join('/'), @@ -38,13 +37,30 @@ export default function LocaleDropdownNavbarItem({ } = useDocusaurusContext(); const { pathname, search, hash } = useLocation(); const { newPath, currentLocale } = replaceLocale(pathname, null, locales); - const [selectedLocale, setSelectedLocale] = React.useState(currentLocale); + const [selectedLocale, setSelectedLocale] = useState(currentLocale); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isScrolled, setIsScrolled] = useState(false); useEffect(() => { const { currentLocale } = replaceLocale(pathname, null, locales); setSelectedLocale(currentLocale); }, [pathname]); + useEffect(() => { + const handleScroll = () => { + if (window.scrollY > 0) { + setIsScrolled(true); + } else { + setIsScrolled(false); + } + }; + + window.addEventListener('scroll', handleScroll); + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { const { newPath } = replaceLocale(pathname, locale, locales); return { @@ -79,7 +95,7 @@ export default function LocaleDropdownNavbarItem({ const dropdownLabel = getShortNames(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 a9dc1d5bb..dbbff293d 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -14,7 +14,7 @@ .dropdown__menu { position: fixed; display: flex; - top: 90px !important; + top: 104px; left: 0px; padding-right: 5.5%; width: 100vw; @@ -63,6 +63,7 @@ .navbar__link { font-weight: normal; } + .dropdown__link { font-size: 16px; font-weight: normal; @@ -75,4 +76,8 @@ color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)) !important; background-color: var(--ifm-navbar-background-color); } + + &.scrolled.dropdown__menu { + margin-top: -32px; + } } From 4ad9e43f254be9c39f3a355b5ed926608c76e00a Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 29 May 2024 16:09:55 +0400 Subject: [PATCH 19/44] language switcher fix --- .../LocaleDropdownNavbarItem/index.tsx | 28 +++++++++---------- .../locale-dropdown-navbar-item.scss | 4 --- 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index e6cd583ff..8efc85886 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -39,27 +39,21 @@ export default function LocaleDropdownNavbarItem({ const { newPath, currentLocale } = replaceLocale(pathname, null, locales); const [selectedLocale, setSelectedLocale] = useState(currentLocale); const [isDropdownOpen, setIsDropdownOpen] = useState(false); - const [isScrolled, setIsScrolled] = useState(false); useEffect(() => { const { currentLocale } = replaceLocale(pathname, null, locales); setSelectedLocale(currentLocale); }, [pathname]); - useEffect(() => { - const handleScroll = () => { - if (window.scrollY > 0) { - setIsScrolled(true); - } else { - setIsScrolled(false); - } - }; + const handleMouseEnter = () => { + setIsDropdownOpen(true); + document.body.style.overflow = 'hidden'; + }; - window.addEventListener('scroll', handleScroll); - return () => { - window.removeEventListener('scroll', handleScroll); - }; - }, []); + const handleMouseLeave = () => { + setIsDropdownOpen(false); + document.body.style.overflow = 'auto'; + }; const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { const { newPath } = replaceLocale(pathname, locale, locales); @@ -95,7 +89,11 @@ export default function LocaleDropdownNavbarItem({ const dropdownLabel = getShortNames(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 dbbff293d..b25017be1 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -76,8 +76,4 @@ color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)) !important; background-color: var(--ifm-navbar-background-color); } - - &.scrolled.dropdown__menu { - margin-top: -32px; - } } From 957d5904c229b6ab6e7dd766d4cc4d6d54945d0b Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 4 Jun 2024 12:03:45 +0400 Subject: [PATCH 20/44] trailing slash --- docusaurus.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index e1c346a2d..60e391f4d 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -16,7 +16,7 @@ const config = { // If you aren't using GitHub pages, you don't need these. organizationName: 'binary-com', // Usually your GitHub org/user name. projectName: 'deriv-api-docs', // Usually your repo name. - trailingSlash: false, + trailingSlash: true, customFields: { trackJsToken: process.env.TRACKJS_TOKEN, From 4bfaea9c18b41a2e528bc1620b1a718214f9d5f4 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 4 Jun 2024 12:21:07 +0400 Subject: [PATCH 21/44] build fix --- docusaurus.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 60e391f4d..ec5455790 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -9,7 +9,7 @@ const config = { tagline: 'Create your own apps', url: 'https://binary-com.github.io', baseUrl: '/', - onBrokenLinks: 'throw', + onBrokenLinks: 'warn', onBrokenMarkdownLinks: 'warn', favicon: 'img/favicon.png', // GitHub pages deployment config. From 1ae55ac18d50b92a43f91da08ec14a45f7316417 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 4 Jun 2024 12:44:09 +0400 Subject: [PATCH 22/44] revert docusaurus change and add trailing slash manually --- docusaurus.config.js | 4 ++-- src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index ec5455790..e1c346a2d 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -9,14 +9,14 @@ const config = { tagline: 'Create your own apps', url: 'https://binary-com.github.io', baseUrl: '/', - onBrokenLinks: 'warn', + onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'warn', favicon: 'img/favicon.png', // GitHub pages deployment config. // If you aren't using GitHub pages, you don't need these. organizationName: 'binary-com', // Usually your GitHub org/user name. projectName: 'deriv-api-docs', // Usually your repo name. - trailingSlash: true, + trailingSlash: false, customFields: { trackJsToken: process.env.TRACKJS_TOKEN, diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 8efc85886..9d32a6f42 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -43,6 +43,12 @@ export default function LocaleDropdownNavbarItem({ useEffect(() => { const { currentLocale } = replaceLocale(pathname, null, locales); setSelectedLocale(currentLocale); + const currentUrl = window.location.href; + const hasSlash = currentUrl.endsWith('/'); + // Add trailing slash if missing (optional logic outside useEffect) + if (!hasSlash) { + window.location.href = currentUrl + '/'; + } }, [pathname]); const handleMouseEnter = () => { From a4224c813a18c99fff3481d94033ad84dbc7b967 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 4 Jun 2024 15:01:35 +0400 Subject: [PATCH 23/44] url fix --- .../LocaleDropdownNavbarItem/index.tsx | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 9d32a6f42..88833a702 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -9,21 +9,15 @@ import './locale-dropdown-navbar-item.scss'; const replaceLocale = (path, newLocale, locales) => { const segments = path.split('/').filter(Boolean); - const currentLocale = locales.includes(segments[0]) ? segments[0] : 'en'; - if (newLocale) { - if (locales.includes(segments[0])) { - if (newLocale === 'en') { - segments.shift(); - } else { - segments[0] = newLocale; - } - } else if (newLocale !== 'en') { - segments.unshift(newLocale); - } + if (locales.includes(segments[0])) { + segments.shift(); + } + if (newLocale && newLocale !== 'en') { + segments.unshift(newLocale); } return { newPath: '/' + segments.join('/'), - currentLocale, + currentLocale: newLocale || 'en', }; }; @@ -45,7 +39,6 @@ export default function LocaleDropdownNavbarItem({ setSelectedLocale(currentLocale); const currentUrl = window.location.href; const hasSlash = currentUrl.endsWith('/'); - // Add trailing slash if missing (optional logic outside useEffect) if (!hasSlash) { window.location.href = currentUrl + '/'; } From a42343b74352cea23b1e8aecf930c3863e0941fc Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 4 Jun 2024 15:52:49 +0400 Subject: [PATCH 24/44] docusuarus --- docusaurus.config.js | 4 ++-- src/features/Home/GetStarted/__tests__/GetStarted.test.tsx | 4 ++-- src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx | 5 ----- 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index e1c346a2d..ec5455790 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -9,14 +9,14 @@ const config = { tagline: 'Create your own apps', url: 'https://binary-com.github.io', baseUrl: '/', - onBrokenLinks: 'throw', + onBrokenLinks: 'warn', onBrokenMarkdownLinks: 'warn', favicon: 'img/favicon.png', // GitHub pages deployment config. // If you aren't using GitHub pages, you don't need these. organizationName: 'binary-com', // Usually your GitHub org/user name. projectName: 'deriv-api-docs', // Usually your repo name. - trailingSlash: false, + trailingSlash: true, customFields: { trackJsToken: process.env.TRACKJS_TOKEN, diff --git a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx index 7a791b197..90b3bc9ae 100644 --- a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx +++ b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx @@ -22,10 +22,10 @@ describe('GetStarted', () => { 'href', 'https://deriv.com/signup/', ); - expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/dashboard'); + expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/dashboard/'); expect(screen.getByTestId('guide').closest('a')).toHaveAttribute( 'href', - '/docs/category/guides', + '/docs/category/guides/', ); }); }); diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 88833a702..4b72a66ec 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -37,11 +37,6 @@ export default function LocaleDropdownNavbarItem({ useEffect(() => { const { currentLocale } = replaceLocale(pathname, null, locales); setSelectedLocale(currentLocale); - const currentUrl = window.location.href; - const hasSlash = currentUrl.endsWith('/'); - if (!hasSlash) { - window.location.href = currentUrl + '/'; - } }, [pathname]); const handleMouseEnter = () => { From 8322d9029b8598c01c07881113a65376bd8f7ad6 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 5 Jun 2024 15:36:54 +0400 Subject: [PATCH 25/44] revert change pull from master --- .../LocaleDropdownNavbarItem/index.tsx | 38 +++++++++++++------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 4b72a66ec..1b91dc7ac 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -7,17 +7,30 @@ import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; import classnames from 'classnames'; import './locale-dropdown-navbar-item.scss'; -const replaceLocale = (path, newLocale, locales) => { +const replaceLocale = (path, newLocale, locales, trailingSlash) => { const segments = path.split('/').filter(Boolean); - if (locales.includes(segments[0])) { - segments.shift(); + const currentLocale = locales.includes(segments[0]) ? segments[0] : 'en'; + + if (newLocale) { + if (locales.includes(segments[0])) { + if (newLocale === 'en') { + segments.shift(); + } else { + segments[0] = newLocale; + } + } else if (newLocale !== 'en') { + segments.unshift(newLocale); + } } - if (newLocale && newLocale !== 'en') { - segments.unshift(newLocale); + + let newPath = '/' + segments.join('/'); + if (trailingSlash && !newPath.endsWith('/')) { + newPath += '/'; } + return { - newPath: '/' + segments.join('/'), - currentLocale: newLocale || 'en', + newPath, + currentLocale, }; }; @@ -28,16 +41,17 @@ export default function LocaleDropdownNavbarItem({ }: Props): JSX.Element { const { i18n: { locales, localeConfigs }, + siteConfig: { trailingSlash }, } = useDocusaurusContext(); const { pathname, search, hash } = useLocation(); - const { newPath, currentLocale } = replaceLocale(pathname, null, locales); + const { newPath, currentLocale } = replaceLocale(pathname, null, locales, trailingSlash); const [selectedLocale, setSelectedLocale] = useState(currentLocale); const [isDropdownOpen, setIsDropdownOpen] = useState(false); useEffect(() => { - const { currentLocale } = replaceLocale(pathname, null, locales); + const { currentLocale } = replaceLocale(pathname, null, locales, trailingSlash); setSelectedLocale(currentLocale); - }, [pathname]); + }, [pathname, locales, trailingSlash]); const handleMouseEnter = () => { setIsDropdownOpen(true); @@ -50,7 +64,7 @@ export default function LocaleDropdownNavbarItem({ }; const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { - const { newPath } = replaceLocale(pathname, locale, locales); + const { newPath } = replaceLocale(pathname, locale, locales, trailingSlash); return { label: localeConfigs[locale].label, lang: localeConfigs[locale].htmlLang, @@ -59,7 +73,7 @@ export default function LocaleDropdownNavbarItem({ autoAddBaseUrl: false, className: classnames({ 'dropdown__link--active': locale === selectedLocale }), onClick: () => { - window.history.pushState(null, '', `${newPath}${search}${hash}`); + window.location.href = `${newPath}${search}${hash}`; }, }; }); From 1ba3eb6aa17eb681b94c6318c3d60b66a9695b5b Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 5 Jun 2024 15:40:51 +0400 Subject: [PATCH 26/44] same changes for mobile --- .../MobileSidebar/PrimaryMenu/index.tsx | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index 808c8886d..f9e91f529 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -15,7 +15,7 @@ export function useNavbarItems() { return useThemeConfig().navbar.items; } -const replaceLocale = (path, newLocale, locales) => { +const replaceLocale = (path, newLocale, locales, trailingSlash) => { const segments = path.split('/').filter(Boolean); const currentLocale = locales.includes(segments[0]) ? segments[0] : 'en'; if (newLocale) { @@ -28,10 +28,15 @@ const replaceLocale = (path, newLocale, locales) => { } else if (newLocale !== 'en') { segments.unshift(newLocale); } - console.log('newLocale', newLocale); } + + let newPath = '/' + segments.join('/'); + if (trailingSlash && !newPath.endsWith('/')) { + newPath += '/'; + } + return { - newPath: '/' + segments.join('/'), + newPath, currentLocale, }; }; @@ -44,18 +49,18 @@ export default function CustomMobileSidebar() { const { pathname, search, hash } = useLocation(); const { i18n: { locales, localeConfigs }, + siteConfig: { trailingSlash }, } = useDocusaurusContext(); - const { currentLocale } = replaceLocale(pathname, null, locales); + const { currentLocale } = replaceLocale(pathname, null, locales, trailingSlash); const [selectedLocale, setSelectedLocale] = React.useState(currentLocale); useEffect(() => { - const { currentLocale } = replaceLocale(pathname, null, locales); + const { currentLocale } = replaceLocale(pathname, null, locales, trailingSlash); setSelectedLocale(currentLocale); - console.log('currentLocale', currentLocale); - }, [pathname]); + }, [pathname, locales, trailingSlash]); const localeItems = locales.map((locale) => { - const { newPath } = replaceLocale(pathname, locale, locales); + const { newPath } = replaceLocale(pathname, locale, locales, trailingSlash); return { label: localeConfigs[locale].label, lang: locale, From 06d77a847d1c7c8193a210d785bb59293f391a3f Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Thu, 6 Jun 2024 11:18:33 +0400 Subject: [PATCH 27/44] replace push by replace --- src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 1b91dc7ac..a22008f22 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -73,7 +73,7 @@ export default function LocaleDropdownNavbarItem({ autoAddBaseUrl: false, className: classnames({ 'dropdown__link--active': locale === selectedLocale }), onClick: () => { - window.location.href = `${newPath}${search}${hash}`; + window.location.replace(`${newPath}${search}${hash}`); }, }; }); From 270dd3ca84be6387fc2aa9e53c8b0ecace9af694 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Thu, 6 Jun 2024 15:21:43 +0400 Subject: [PATCH 28/44] console log to check error in test link --- src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx | 5 +++++ .../locale-dropdown-navbar-item.scss | 5 ++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index a22008f22..99b3c6b03 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -9,7 +9,9 @@ import './locale-dropdown-navbar-item.scss'; const replaceLocale = (path, newLocale, locales, trailingSlash) => { const segments = path.split('/').filter(Boolean); + console.log('segments', segments); const currentLocale = locales.includes(segments[0]) ? segments[0] : 'en'; + console.log('currentLocale', currentLocale); if (newLocale) { if (locales.includes(segments[0])) { @@ -21,11 +23,13 @@ const replaceLocale = (path, newLocale, locales, trailingSlash) => { } else if (newLocale !== 'en') { segments.unshift(newLocale); } + console.log('newLocale', newLocale); } let newPath = '/' + segments.join('/'); if (trailingSlash && !newPath.endsWith('/')) { newPath += '/'; + console.log('newPath1', newPath); } return { @@ -65,6 +69,7 @@ export default function LocaleDropdownNavbarItem({ const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { const { newPath } = replaceLocale(pathname, locale, locales, trailingSlash); + console.log('newPath2', newPath); return { label: localeConfigs[locale].label, lang: localeConfigs[locale].htmlLang, diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss index b25017be1..5f30ad9f6 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -15,8 +15,7 @@ position: fixed; display: flex; top: 104px; - left: 0px; - padding-right: 5.5%; + padding-left: 5.5%; width: 100vw; min-width: 997px; padding-bottom: 32px; @@ -25,7 +24,7 @@ gap: 24px; background-color: var(--ifm-navbar-background-color); box-shadow: var(--ifm-navbar-shadow); - align-items: flex-end; + align-items: flex-start; cursor: pointer; } From f75340d5079fdd33b00e0f2e97502fdfeae23d2c Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Thu, 6 Jun 2024 15:40:49 +0400 Subject: [PATCH 29/44] console lkog --- src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 99b3c6b03..f1ec8eb57 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -73,12 +73,13 @@ export default function LocaleDropdownNavbarItem({ return { label: localeConfigs[locale].label, lang: localeConfigs[locale].htmlLang, - to: `${newPath}${search}${hash}`, + // to: `${newPath}${search}${hash}`, target: '_self', autoAddBaseUrl: false, className: classnames({ 'dropdown__link--active': locale === selectedLocale }), onClick: () => { - window.location.replace(`${newPath}${search}${hash}`); + console.log('sdd', `${newPath}${search}${hash}`); + // window.location.replace(`${newPath}${search}${hash}`); }, }; }); From 420d150cf132adbfb3290ce9b041f16e9ec91c98 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Thu, 6 Jun 2024 16:13:35 +0400 Subject: [PATCH 30/44] D --- src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index f1ec8eb57..51e04a7f2 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -54,7 +54,7 @@ export default function LocaleDropdownNavbarItem({ useEffect(() => { const { currentLocale } = replaceLocale(pathname, null, locales, trailingSlash); - setSelectedLocale(currentLocale); + setSelectedLocale((new_local) => currentLocale); }, [pathname, locales, trailingSlash]); const handleMouseEnter = () => { @@ -73,13 +73,13 @@ export default function LocaleDropdownNavbarItem({ return { label: localeConfigs[locale].label, lang: localeConfigs[locale].htmlLang, - // to: `${newPath}${search}${hash}`, + to: `${newPath}${search}${hash}`, target: '_self', autoAddBaseUrl: false, className: classnames({ 'dropdown__link--active': locale === selectedLocale }), onClick: () => { console.log('sdd', `${newPath}${search}${hash}`); - // window.location.replace(`${newPath}${search}${hash}`); + window.location.replace(`${newPath}${search}${hash}`); }, }; }); From 7c665d15a7c2e81a124c3a10d7c86936c6bc4b06 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Thu, 6 Jun 2024 16:45:21 +0400 Subject: [PATCH 31/44] check --- .../NavbarItem/LocaleDropdownNavbarItem/index.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 51e04a7f2..cce9f92f7 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -25,15 +25,13 @@ const replaceLocale = (path, newLocale, locales, trailingSlash) => { } console.log('newLocale', newLocale); } - - let newPath = '/' + segments.join('/'); - if (trailingSlash && !newPath.endsWith('/')) { - newPath += '/'; - console.log('newPath1', newPath); - } - + // let newPath = '/' + segments.join('/'); + // if (trailingSlash && !newPath.endsWith('/')) { + // newPath += '/'; + // console.log('newPath1', newPath); + // } return { - newPath, + newPath: '/' + segments.join('/'), currentLocale, }; }; From 07dda1e1f5f03c360ab39338cb06eac445d895fc Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Thu, 6 Jun 2024 16:52:08 +0400 Subject: [PATCH 32/44] check --- .../NavbarItem/LocaleDropdownNavbarItem/index.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index cce9f92f7..07db64cf8 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -20,18 +20,19 @@ const replaceLocale = (path, newLocale, locales, trailingSlash) => { } else { segments[0] = newLocale; } - } else if (newLocale !== 'en') { + } else if (newLocale !== segments[0]) { segments.unshift(newLocale); } console.log('newLocale', newLocale); } - // let newPath = '/' + segments.join('/'); - // if (trailingSlash && !newPath.endsWith('/')) { - // newPath += '/'; - // console.log('newPath1', newPath); - // } + console.log(segments, 'www'); + let newPath = '/' + segments.join('/'); + if (trailingSlash && !newPath.endsWith('/')) { + newPath += '/'; + console.log('newPath1', newPath); + } return { - newPath: '/' + segments.join('/'), + newPath, currentLocale, }; }; From 1689dd72de1ccb72c01cdad9163b116c8fe6185f Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Thu, 6 Jun 2024 17:12:08 +0400 Subject: [PATCH 33/44] testing --- src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 07db64cf8..79965144e 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -18,9 +18,12 @@ const replaceLocale = (path, newLocale, locales, trailingSlash) => { if (newLocale === 'en') { segments.shift(); } else { + console.log('www', segments[0], 'www'); segments[0] = newLocale; } - } else if (newLocale !== segments[0]) { + } else if (newLocale !== 'en') { + console.log('www', segments[0], 'else if'); + segments.unshift(newLocale); } console.log('newLocale', newLocale); From a64d942bc072e6f5b6d5393db02c58227bc8a4d8 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Thu, 6 Jun 2024 17:37:10 +0400 Subject: [PATCH 34/44] remove logic of shift and unshift --- .../LocaleDropdownNavbarItem/index.tsx | 33 +++++-------------- 1 file changed, 8 insertions(+), 25 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 79965144e..706b724c0 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -8,31 +8,16 @@ import classnames from 'classnames'; import './locale-dropdown-navbar-item.scss'; const replaceLocale = (path, newLocale, locales, trailingSlash) => { - const segments = path.split('/').filter(Boolean); - console.log('segments', segments); - const currentLocale = locales.includes(segments[0]) ? segments[0] : 'en'; - console.log('currentLocale', currentLocale); - - if (newLocale) { - if (locales.includes(segments[0])) { - if (newLocale === 'en') { - segments.shift(); - } else { - console.log('www', segments[0], 'www'); - segments[0] = newLocale; - } - } else if (newLocale !== 'en') { - console.log('www', segments[0], 'else if'); - - segments.unshift(newLocale); - } - console.log('newLocale', newLocale); + let newPath = path; + const currentLocale = locales.find((locale) => newPath.startsWith(`/${locale}/`)) || 'en'; + if (currentLocale !== 'en') { + newPath = newPath.replace(`/${currentLocale}`, ''); + } + if (newLocale && newLocale !== 'en') { + newPath = `/${newLocale}${newPath}`; } - console.log(segments, 'www'); - let newPath = '/' + segments.join('/'); if (trailingSlash && !newPath.endsWith('/')) { newPath += '/'; - console.log('newPath1', newPath); } return { newPath, @@ -56,7 +41,7 @@ export default function LocaleDropdownNavbarItem({ useEffect(() => { const { currentLocale } = replaceLocale(pathname, null, locales, trailingSlash); - setSelectedLocale((new_local) => currentLocale); + setSelectedLocale(currentLocale); }, [pathname, locales, trailingSlash]); const handleMouseEnter = () => { @@ -71,7 +56,6 @@ export default function LocaleDropdownNavbarItem({ const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { const { newPath } = replaceLocale(pathname, locale, locales, trailingSlash); - console.log('newPath2', newPath); return { label: localeConfigs[locale].label, lang: localeConfigs[locale].htmlLang, @@ -80,7 +64,6 @@ export default function LocaleDropdownNavbarItem({ autoAddBaseUrl: false, className: classnames({ 'dropdown__link--active': locale === selectedLocale }), onClick: () => { - console.log('sdd', `${newPath}${search}${hash}`); window.location.replace(`${newPath}${search}${hash}`); }, }; From 71e8459c8a648c847dd6106967dbf7c16762f3a6 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Fri, 7 Jun 2024 08:29:31 +0400 Subject: [PATCH 35/44] fixes desktop and mobile --- .../MobileSidebar/PrimaryMenu/index.tsx | 51 ++++++++++--------- .../LocaleDropdownNavbarItem/index.tsx | 33 +++++++----- 2 files changed, 48 insertions(+), 36 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index f9e91f529..611dff5af 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common'; import { splitNavbarItems, useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'; import NavbarItem from '@theme/NavbarItem'; @@ -16,43 +16,45 @@ export function useNavbarItems() { } const replaceLocale = (path, newLocale, locales, trailingSlash) => { - const segments = path.split('/').filter(Boolean); - const currentLocale = locales.includes(segments[0]) ? segments[0] : 'en'; - if (newLocale) { - if (locales.includes(segments[0])) { - if (newLocale === 'en') { - segments.shift(); - } else { - segments[0] = newLocale; - } - } else if (newLocale !== 'en') { - segments.unshift(newLocale); + let newPath = path; + let currentLocale = 'en'; + for (const locale of locales) { + if (path.startsWith(`/${locale}/`) || path === `/${locale}`) { + currentLocale = locale; + newPath = path.replace(`/${locale}`, ''); + break; } } - - let newPath = '/' + segments.join('/'); + if (newLocale && newLocale !== 'en') { + newPath = `/${newLocale}${newPath}`; + } if (trailingSlash && !newPath.endsWith('/')) { newPath += '/'; } - return { newPath, currentLocale, }; }; +const changeLocale = (newLocale, locales, trailingSlash) => { + const { pathname } = window.location; + const { newPath } = replaceLocale(pathname, newLocale, locales, trailingSlash); + window.location.replace(`${newPath}`); +}; + export default function CustomMobileSidebar() { - const [languageSidebarVisible, setLanguageSidebarVisible] = React.useState(false); + const [languageSidebarVisible, setLanguageSidebarVisible] = useState(false); const mobileSidebar = useNavbarMobileSidebar(); const items = useNavbarItems(); const [leftItems] = splitNavbarItems(items); - const { pathname, search, hash } = useLocation(); + const { pathname } = useLocation(); const { i18n: { locales, localeConfigs }, siteConfig: { trailingSlash }, } = useDocusaurusContext(); const { currentLocale } = replaceLocale(pathname, null, locales, trailingSlash); - const [selectedLocale, setSelectedLocale] = React.useState(currentLocale); + const [selectedLocale, setSelectedLocale] = useState(currentLocale); useEffect(() => { const { currentLocale } = replaceLocale(pathname, null, locales, trailingSlash); @@ -64,10 +66,10 @@ export default function CustomMobileSidebar() { return { label: localeConfigs[locale].label, lang: locale, - to: `${newPath}${search}${hash}`, className: classnames({ 'dropdown__link--active': locale === selectedLocale }), - onClick: () => { - window.history.pushState(null, '', `${newPath}${search}${hash}`); + onClick: (e) => { + e.preventDefault(); + changeLocale(locale, locales, trailingSlash); }, }; }); @@ -127,10 +129,11 @@ export default function CustomMobileSidebar() { {localeItems.map((localeItem) => ( { - localeItem.onClick(); + onClick={(e) => { + e.preventDefault(); + localeItem.onClick(e); mobileSidebar.toggle(); }} > diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 706b724c0..d9b7dfb36 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -9,9 +9,13 @@ import './locale-dropdown-navbar-item.scss'; const replaceLocale = (path, newLocale, locales, trailingSlash) => { let newPath = path; - const currentLocale = locales.find((locale) => newPath.startsWith(`/${locale}/`)) || 'en'; - if (currentLocale !== 'en') { - newPath = newPath.replace(`/${currentLocale}`, ''); + let currentLocale = 'en'; + for (const locale of locales) { + if (path.startsWith(`/${locale}/`) || path === `/${locale}`) { + currentLocale = locale; + newPath = path.replace(`/${locale}`, ''); + break; + } } if (newLocale && newLocale !== 'en') { newPath = `/${newLocale}${newPath}`; @@ -24,6 +28,11 @@ const replaceLocale = (path, newLocale, locales, trailingSlash) => { currentLocale, }; }; +const changeLocale = (newLocale, locales, trailingSlash) => { + const { pathname } = window.location; + const { newPath } = replaceLocale(pathname, newLocale, locales, trailingSlash); + window.location.replace(`${newPath}`); +}; export default function LocaleDropdownNavbarItem({ dropdownItemsBefore = [], @@ -34,7 +43,7 @@ export default function LocaleDropdownNavbarItem({ i18n: { locales, localeConfigs }, siteConfig: { trailingSlash }, } = useDocusaurusContext(); - const { pathname, search, hash } = useLocation(); + const { pathname } = useLocation(); const { newPath, currentLocale } = replaceLocale(pathname, null, locales, trailingSlash); const [selectedLocale, setSelectedLocale] = useState(currentLocale); const [isDropdownOpen, setIsDropdownOpen] = useState(false); @@ -54,20 +63,20 @@ export default function LocaleDropdownNavbarItem({ document.body.style.overflow = 'auto'; }; - const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { - const { newPath } = replaceLocale(pathname, locale, locales, trailingSlash); - return { + const localeItems: LinkLikeNavbarItemProps[] = []; + for (const locale of locales) { + localeItems.push({ label: localeConfigs[locale].label, lang: localeConfigs[locale].htmlLang, - to: `${newPath}${search}${hash}`, target: '_self', autoAddBaseUrl: false, className: classnames({ 'dropdown__link--active': locale === selectedLocale }), - onClick: () => { - window.location.replace(`${newPath}${search}${hash}`); + onClick: (e) => { + e.preventDefault(); + changeLocale(locale, locales, trailingSlash); }, - }; - }); + }); + } const getShortNames = (locale) => { switch (locale) { From c4c8acc49dde3bdc2030c82535aa01d5232fbe6a Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Fri, 7 Jun 2024 11:42:20 +0400 Subject: [PATCH 36/44] no need of trailing slash from docusaurus --- docusaurus.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index ec5455790..21e99c2af 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -9,14 +9,14 @@ const config = { tagline: 'Create your own apps', url: 'https://binary-com.github.io', baseUrl: '/', - onBrokenLinks: 'warn', + onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'warn', favicon: 'img/favicon.png', // GitHub pages deployment config. // If you aren't using GitHub pages, you don't need these. organizationName: 'binary-com', // Usually your GitHub org/user name. projectName: 'deriv-api-docs', // Usually your repo name. - trailingSlash: true, + // trailingSlash: true, customFields: { trackJsToken: process.env.TRACKJS_TOKEN, From 5e100ccb38ccdd3ca8d785c739293c0179896e23 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Fri, 7 Jun 2024 11:46:51 +0400 Subject: [PATCH 37/44] remove trailing slash from docusaurus --- docusaurus.config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 21e99c2af..5d8600488 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -16,7 +16,6 @@ const config = { // If you aren't using GitHub pages, you don't need these. organizationName: 'binary-com', // Usually your GitHub org/user name. projectName: 'deriv-api-docs', // Usually your repo name. - // trailingSlash: true, customFields: { trackJsToken: process.env.TRACKJS_TOKEN, From 207cfd144047554c9b0724d5cbce62aef20dc218 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Fri, 7 Jun 2024 11:53:30 +0400 Subject: [PATCH 38/44] revert test --- src/features/Home/GetStarted/__tests__/GetStarted.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx index 90b3bc9ae..b09bf53d5 100644 --- a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx +++ b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx @@ -22,7 +22,7 @@ describe('GetStarted', () => { 'href', 'https://deriv.com/signup/', ); - expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/dashboard/'); + expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/dashboard'); expect(screen.getByTestId('guide').closest('a')).toHaveAttribute( 'href', '/docs/category/guides/', From 45af15399f26455c230d8291924c6039a9bf04cc Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Fri, 7 Jun 2024 11:54:07 +0400 Subject: [PATCH 39/44] revert test --- src/features/Home/GetStarted/__tests__/GetStarted.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx index b09bf53d5..7a791b197 100644 --- a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx +++ b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx @@ -25,7 +25,7 @@ describe('GetStarted', () => { expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/dashboard'); expect(screen.getByTestId('guide').closest('a')).toHaveAttribute( 'href', - '/docs/category/guides/', + '/docs/category/guides', ); }); }); From 3cc470d75b9991cdccf3562d71446dd95702ee93 Mon Sep 17 00:00:00 2001 From: shafin-deriv Date: Tue, 11 Jun 2024 13:14:26 +0800 Subject: [PATCH 40/44] chore: update css --- .../current/intro.md | 2 +- package-lock.json | 25 ++- package.json | 4 +- .../account_switcher.module.scss | 2 +- .../custom_checkbox.module.scss | 88 +++++------ .../selected_account.module.scss | 40 ++--- .../custom_select_item.module.scss | 50 +++--- .../NavbarSeparator.module.scss | 30 ++-- .../SearchButton/SearchButton.module.scss | 14 +- .../SkeletonText/SkeletonText.module.scss | 16 +- src/components/Spinner/Spinner.module.scss | 2 +- .../UserNavbarItem/UserNavbarItem.module.scss | 2 +- .../JsonView/JsonData/JsonData.module.scss | 8 +- .../JsonView/JsonView.module.scss | 6 +- .../PlaygroundSection.module.scss | 8 +- .../AuthRequired/AuthRequired.module.scss | 18 +-- .../Home/ApiFeatures/ApiFeatures.module.scss | 2 +- .../NextButton/NextButton.module.scss | 26 ++-- .../PrevButton/PrevButton.module.scss | 24 +-- .../SlideContent/SlideContent.module.scss | 30 ++-- src/features/Home/Carousel/swiper-custom.scss | 26 ++-- .../ApiTokenTable/token-cell.module.scss | 146 +++++++++--------- .../components/AppForm/app-form.module.scss | 2 +- .../components/NoApps/no-apps.module.scss | 2 +- .../RestrictionsAppname.module.scss | 2 +- .../TokenNameRestrictions.module.scss | 2 +- .../manage-apps/manage-apps.module.scss | 2 +- .../AppUpdateForm/app-update-form.scss | 72 +++++++++ src/styles/_utility.scss | 2 +- .../locale-dropdown-navbar-item.scss | 2 + 30 files changed, 368 insertions(+), 287 deletions(-) create mode 100644 src/features/dashboard/update-app/AppUpdateForm/app-update-form.scss diff --git a/i18n/pt/docusaurus-plugin-content-docs/current/intro.md b/i18n/pt/docusaurus-plugin-content-docs/current/intro.md index 3bd37a56b..7fffca696 100644 --- a/i18n/pt/docusaurus-plugin-content-docs/current/intro.md +++ b/i18n/pt/docusaurus-plugin-content-docs/current/intro.md @@ -17,7 +17,7 @@ keywords: description: Obtenha uma visão geral dos exemplos de código e linguagens da API Deriv disponíveis e como utilizá-la para criar a sua aplicação de negociação. --- -importar RenderOfficialContents de '@site/src/components/RenderOfficialContents'; +import RenderOfficialContents from '@site/src/components/RenderOfficialContents'; A nossa Documentação está dividida em diferentes secções: diff --git a/package-lock.json b/package-lock.json index ec59dbd32..d99ad1cd4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,8 +32,8 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.41.5", "react-table": "^7.8.0", - "sass": "^1.77.4", - "sass-loader": "^14.2.1", + "sass": "^1.57.1", + "sass-loader": "^13.2.0", "swiper": "^8.3.2", "trackjs": "^3.10.4", "ts-jest": "^29.0.3", @@ -2573,9 +2573,9 @@ } }, "node_modules/@deriv/api-types": { - "version": "1.0.808", - "resolved": "https://registry.npmjs.org/@deriv/api-types/-/api-types-1.0.808.tgz", - "integrity": "sha512-rcAuoZwHFNXm+VKFpMFMMogFpxytw7nYCtHMmEZ6O3Ssp3o0pc5aw6EGa6ijHYZdYnir0DUWoqyPxYpnjgF2MQ==", + "version": "1.0.809", + "resolved": "https://registry.npmjs.org/@deriv/api-types/-/api-types-1.0.809.tgz", + "integrity": "sha512-V6vM69/Nhwy76SK1htva7ld+xGQqR/UY5uyIIw4vPElbjfsqje9dsYz55jTdyh6H2HNEd7mRJv9ZXlqPaYMoaQ==", "dev": true }, "node_modules/@deriv/deriv-api": { @@ -22935,28 +22935,28 @@ } }, "node_modules/sass-loader": { - "version": "14.2.1", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-14.2.1.tgz", - "integrity": "sha512-G0VcnMYU18a4N7VoNDegg2OuMjYtxnqzQWARVWCIVSZwJeiL9kg8QMsuIZOplsJgTzZLF6jGxI3AClj8I9nRdQ==", + "version": "13.3.3", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.3.tgz", + "integrity": "sha512-mt5YN2F1MOZr3d/wBRcZxeFgwgkH44wVc2zohO2YF6JiOMkiXe4BYRZpSu2sO1g71mo/j16txzUhsKZlqjVGzA==", "dependencies": { "neo-async": "^2.6.2" }, "engines": { - "node": ">= 18.12.0" + "node": ">= 14.15.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/webpack" }, "peerDependencies": { - "@rspack/core": "0.x || 1.x", + "fibers": ">= 3.1.0", "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", "sass": "^1.3.0", "sass-embedded": "*", "webpack": "^5.0.0" }, "peerDependenciesMeta": { - "@rspack/core": { + "fibers": { "optional": true }, "node-sass": { @@ -22967,9 +22967,6 @@ }, "sass-embedded": { "optional": true - }, - "webpack": { - "optional": true } } }, diff --git a/package.json b/package.json index b56366809..7522a1673 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,8 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.41.5", "react-table": "^7.8.0", - "sass": "^1.77.4", - "sass-loader": "^14.2.1", + "sass": "^1.57.1", + "sass-loader": "^13.2.0", "swiper": "^8.3.2", "trackjs": "^3.10.4", "ts-jest": "^29.0.3", diff --git a/src/components/AccountSwitcher/account_switcher.module.scss b/src/components/AccountSwitcher/account_switcher.module.scss index a5414bdbf..868263141 100644 --- a/src/components/AccountSwitcher/account_switcher.module.scss +++ b/src/components/AccountSwitcher/account_switcher.module.scss @@ -73,7 +73,7 @@ width: rem(1.5); height: rem(1.5); transform: rotate(0deg); - transition: transform .2s ease-in-out; + transition: transform 0.2s ease-in-out; } } diff --git a/src/components/CustomCheckbox/custom_checkbox.module.scss b/src/components/CustomCheckbox/custom_checkbox.module.scss index 1115515fb..bfb163134 100644 --- a/src/components/CustomCheckbox/custom_checkbox.module.scss +++ b/src/components/CustomCheckbox/custom_checkbox.module.scss @@ -1,50 +1,50 @@ @use 'src/styles/utility' as *; .customCheckboxContainer { - display: flex; - justify-content: center; + display: flex; + justify-content: center; + position: relative; + min-width: rem(1.6); + padding-top: rem(0.8); + z-index: 0; + margin-bottom: auto; + @media screen and (min-width: 992px) { + align-items: center; + } + label { + cursor: pointer; + margin-left: rem(1.5); + } + .checkboxContainer { position: relative; + width: rem(1.5); + height: rem(1.5); + } + .customCheckbox { + position: absolute; + background-repeat: no-repeat; + display: inline-block; + border: 2px solid var(--ifm-color-emphasis-500); min-width: rem(1.6); - padding-top: rem(0.8); - z-index: 0; - margin-bottom: auto; - @media screen and (min-width: 992px) { - align-items: center; + height: rem(1.6); + border-radius: 2px; + transition: background-color 0.25s, border-color 0.25s; + z-index: 1; + } + input { + // The original checkbox has to be hidden, but still be clickable + // Hence, opacity 0 is used instead of visibility or display + cursor: pointer; + opacity: 0; + z-index: 2; + width: rem(1.5); + height: rem(1.5); + position: absolute; + &:checked + .customCheckbox { + background-image: url(/img/check.svg); + background-position: center; + background-color: var(--colors-coral500); + border-color: var(--colors-coral500); } - label { - cursor: pointer; - margin-left: rem(1.5); - } - .checkboxContainer { - position: relative; - width: rem(1.5); - height: rem(1.5); - } - .customCheckbox { - position: absolute; - background-repeat: no-repeat; - display: inline-block; - border: 2px solid var(--ifm-color-emphasis-500); - min-width: rem(1.6); - height: rem(1.6); - border-radius: 2px; - transition: background-color 0.25s, border-color 0.25s; - z-index: 1; - } - input { - // The original checkbox has to be hidden, but still be clickable - // Hence, opacity 0 is used instead of visibility or display - cursor: pointer; - opacity: 0; - z-index: 2; - width: rem(1.5); - height: rem(1.5); - position: absolute; - &:checked + .customCheckbox { - background-image: url(/img/check.svg); - background-position: center; - background-color: var(--colors-coral500); - border-color: var(--colors-coral500); - } - } -} \ No newline at end of file + } +} diff --git a/src/components/CustomSelectDropdown/account-dropdown/SelectedAccount/selected_account.module.scss b/src/components/CustomSelectDropdown/account-dropdown/SelectedAccount/selected_account.module.scss index fee5e4d8d..2ea15913f 100644 --- a/src/components/CustomSelectDropdown/account-dropdown/SelectedAccount/selected_account.module.scss +++ b/src/components/CustomSelectDropdown/account-dropdown/SelectedAccount/selected_account.module.scss @@ -1,26 +1,26 @@ @use 'src/styles/utility' as *; .selectedAccount { + display: flex; + height: 100%; + align-items: center; + .accountInfoContainer { display: flex; - height: 100%; - align-items: center; - .accountInfoContainer { - display: flex; - flex-direction: column; - margin-left: rem(1); - .accountType { - font-size: rem(1.6); - } - .accountId { - font-size: rem(1.2); - color: var(--ifm-color-emphasis-700); - } + flex-direction: column; + margin-left: rem(1); + .accountType { + font-size: rem(1.6); } - div { - line-height: initial; + .accountId { + font-size: rem(1.2); + color: var(--ifm-color-emphasis-700); } - img { - width: rem(2.4); - height: rem(2.4); - } -} \ No newline at end of file + } + div { + line-height: initial; + } + img { + width: rem(2.4); + height: rem(2.4); + } +} diff --git a/src/components/CustomSelectDropdown/custom_select_item.module.scss b/src/components/CustomSelectDropdown/custom_select_item.module.scss index 035007bca..90dc21756 100644 --- a/src/components/CustomSelectDropdown/custom_select_item.module.scss +++ b/src/components/CustomSelectDropdown/custom_select_item.module.scss @@ -1,32 +1,32 @@ @use 'src/styles/utility' as *; .customSelectItem { + display: flex; + width: 100%; + align-items: center; + font-size: rem(1.4); + transition: background-color 0.2s; + border-radius: 3px; + padding: rem(1); + height: rem(5.2); + line-height: rem(2); + + &:hover { + cursor: pointer; + background-color: var(--ifm-color-emphasis-100); + } + img { + width: rem(3.2); + height: rem(3.2); + } + .accountInfoContainer { display: flex; - width: 100%; - align-items: center; - font-size: rem(1.4); - transition: background-color 0.2s; - border-radius: 3px; - padding: rem(1); - height: rem(5.2); + flex-direction: column; + margin-left: rem(1); line-height: rem(2); - - &:hover { - cursor: pointer; - background-color: var(--ifm-color-emphasis-100); - } - img { - width: rem(3.2); - height: rem(3.2); - } - .accountInfoContainer { - display: flex; - flex-direction: column; - margin-left: rem(1); - line-height: rem(2); - .accountId { - font-size: rem(1); - color: var(--ifm-color-emphasis-600); - } + .accountId { + font-size: rem(1); + color: var(--ifm-color-emphasis-600); } + } } diff --git a/src/components/NavbarSeparator/NavbarSeparator.module.scss b/src/components/NavbarSeparator/NavbarSeparator.module.scss index 062595ea6..eb12e1a2f 100644 --- a/src/components/NavbarSeparator/NavbarSeparator.module.scss +++ b/src/components/NavbarSeparator/NavbarSeparator.module.scss @@ -1,18 +1,18 @@ @use 'src/styles/utility' as *; .separatorContainer { - display: flex; - height: 100%; - padding: 0 rem(1.6); - align-items: center; - justify-content: center; - .navbarSeparator { - display: inline-block; - height: rem(3.2); - width: 1px; - background-color: var(--ifm-color-emphasis-300); - } - @media (max-width: 1200px) { - display: none; - } -} \ No newline at end of file + display: flex; + height: 100%; + padding: 0 rem(1.6); + align-items: center; + justify-content: center; + .navbarSeparator { + display: inline-block; + height: rem(3.2); + width: 1px; + background-color: var(--ifm-color-emphasis-300); + } + @media (max-width: 1200px) { + display: none; + } +} diff --git a/src/components/SearchButton/SearchButton.module.scss b/src/components/SearchButton/SearchButton.module.scss index b22be3426..5ae73a936 100644 --- a/src/components/SearchButton/SearchButton.module.scss +++ b/src/components/SearchButton/SearchButton.module.scss @@ -1,11 +1,11 @@ @use 'src/styles/utility' as *; .searchButton { - width: rem(2.4); - height: rem(2.4); - background-image: url('/img/search-bold.svg'); - background-repeat: no-repeat; - background-size: rem(1.6) rem(1.6); - background-position: center; - cursor: pointer; + width: rem(2.4); + height: rem(2.4); + background-image: url('/img/search-bold.svg'); + background-repeat: no-repeat; + background-size: rem(1.6) rem(1.6); + background-position: center; + cursor: pointer; } diff --git a/src/components/SkeletonText/SkeletonText.module.scss b/src/components/SkeletonText/SkeletonText.module.scss index 805099039..5c35053eb 100644 --- a/src/components/SkeletonText/SkeletonText.module.scss +++ b/src/components/SkeletonText/SkeletonText.module.scss @@ -1,7 +1,12 @@ @use 'src/styles/utility' as *; .skeleton { - background-image: linear-gradient(to right, var(--ifm-color-emphasis-0), var(--ifm-color-emphasis-100), var(--ifm-color-emphasis-200)); + background-image: linear-gradient( + to right, + var(--ifm-color-emphasis-0), + var(--ifm-color-emphasis-100), + var(--ifm-color-emphasis-200) + ); padding: rem(1); height: rem(2); margin-bottom: rem(1.6); @@ -10,8 +15,13 @@ } .skeleton:before { - content: " "; - background-image: linear-gradient(to right, var(--ifm-color-emphasis-200), var(--ifm-color-emphasis-100), var(--ifm-color-emphasis-0)); + content: ' '; + background-image: linear-gradient( + to right, + var(--ifm-color-emphasis-200), + var(--ifm-color-emphasis-100), + var(--ifm-color-emphasis-0) + ); width: 100%; height: 100%; display: inline-block; diff --git a/src/components/Spinner/Spinner.module.scss b/src/components/Spinner/Spinner.module.scss index 72da932da..027578264 100644 --- a/src/components/Spinner/Spinner.module.scss +++ b/src/components/Spinner/Spinner.module.scss @@ -14,7 +14,7 @@ overflow: hidden; animation: rotating 0.5s linear infinite; &:before { - content: ""; + content: ''; left: 50%; top: 50%; width: 70%; diff --git a/src/components/UserNavbarItem/UserNavbarItem.module.scss b/src/components/UserNavbarItem/UserNavbarItem.module.scss index cda818499..fe2df5245 100644 --- a/src/components/UserNavbarItem/UserNavbarItem.module.scss +++ b/src/components/UserNavbarItem/UserNavbarItem.module.scss @@ -19,7 +19,7 @@ background-color: var(--colors-coral500); border-radius: 16px; padding: rem(1) rem(1.6); - transition: background-color .2s; + transition: background-color 0.2s; font-size: rem(1.4); &:hover { color: var(--ifm-color-emphasis-0); diff --git a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonView/JsonData/JsonData.module.scss b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonView/JsonData/JsonData.module.scss index 11f9c1da5..909572a70 100644 --- a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonView/JsonData/JsonData.module.scss +++ b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonView/JsonData/JsonData.module.scss @@ -1,7 +1,7 @@ @use 'src/styles/utility' as *; .reactJsonContainer { - display: flex; - flex-direction: column; - gap: rem(2); -} \ No newline at end of file + display: flex; + flex-direction: column; + gap: rem(2); +} diff --git a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonView/JsonView.module.scss b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonView/JsonView.module.scss index b3f418e28..d664386a0 100644 --- a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonView/JsonView.module.scss +++ b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonView/JsonView.module.scss @@ -1,7 +1,7 @@ @use 'src/styles/utility' as *; .dtJsonView { - display: flex; - flex-direction: column; - gap: rem(2); + display: flex; + flex-direction: column; + gap: rem(2); } diff --git a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/PlaygroundSection.module.scss b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/PlaygroundSection.module.scss index 1d1e85dfc..9b99db84e 100644 --- a/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/PlaygroundSection.module.scss +++ b/src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/PlaygroundSection.module.scss @@ -1,8 +1,8 @@ @use 'src/styles/utility' as *; .playgroundConsole { - margin-top: rem(0.2); - max-height: 60vh; - overflow-y: auto; - width: 100%; + margin-top: rem(0.2); + max-height: 60vh; + overflow-y: auto; + width: 100%; } diff --git a/src/features/Apiexplorer/Schema/AuthRequired/AuthRequired.module.scss b/src/features/Apiexplorer/Schema/AuthRequired/AuthRequired.module.scss index 1c19e6841..f3338e28b 100644 --- a/src/features/Apiexplorer/Schema/AuthRequired/AuthRequired.module.scss +++ b/src/features/Apiexplorer/Schema/AuthRequired/AuthRequired.module.scss @@ -6,13 +6,13 @@ } .schemaRole { - background-color: rgba(255, 255, 255, 0.16); - border: none; - font-size: rem(1.4); - font-weight: 400; - line-height: rem(2.4); - color: var(--ifm-color-white); - height: fit-content; - padding: rem(0.5) rem(0.5); - margin: 0 rem(0.5); + background-color: rgba(255, 255, 255, 0.16); + border: none; + font-size: rem(1.4); + font-weight: 400; + line-height: rem(2.4); + color: var(--ifm-color-white); + height: fit-content; + padding: rem(0.5) rem(0.5); + margin: 0 rem(0.5); } diff --git a/src/features/Home/ApiFeatures/ApiFeatures.module.scss b/src/features/Home/ApiFeatures/ApiFeatures.module.scss index 06c992dc4..4763522c9 100644 --- a/src/features/Home/ApiFeatures/ApiFeatures.module.scss +++ b/src/features/Home/ApiFeatures/ApiFeatures.module.scss @@ -48,7 +48,7 @@ @media screen and (max-width: 992px) { font-size: rem(1.4); } - + .FeatureOptions { align-items: center; list-style-type: none; diff --git a/src/features/Home/Carousel/NextButton/NextButton.module.scss b/src/features/Home/Carousel/NextButton/NextButton.module.scss index 1b69a21a0..0207bf13b 100644 --- a/src/features/Home/Carousel/NextButton/NextButton.module.scss +++ b/src/features/Home/Carousel/NextButton/NextButton.module.scss @@ -1,16 +1,16 @@ @use 'src/styles/utility' as *; .next { - width: rem(2); - height: rem(2); - cursor: pointer; - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: 2; - background: url(/img/arrow_right.svg) no-repeat; - background-size: rem(2); - background-position: center; - overflow: auto; - right: 0; -} \ No newline at end of file + width: rem(2); + height: rem(2); + cursor: pointer; + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 2; + background: url(/img/arrow_right.svg) no-repeat; + background-size: rem(2); + background-position: center; + overflow: auto; + right: 0; +} diff --git a/src/features/Home/Carousel/PrevButton/PrevButton.module.scss b/src/features/Home/Carousel/PrevButton/PrevButton.module.scss index e0bf47cc5..3277b94a4 100644 --- a/src/features/Home/Carousel/PrevButton/PrevButton.module.scss +++ b/src/features/Home/Carousel/PrevButton/PrevButton.module.scss @@ -1,15 +1,15 @@ @use 'src/styles/utility' as *; .prev { - width: rem(2); - height: rem(2); - cursor: pointer; - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: 2; - background: url(/img/arrow_left.svg) no-repeat; - background-size: rem(2); - background-position: center; - left: 0; -} \ No newline at end of file + width: rem(2); + height: rem(2); + cursor: pointer; + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 2; + background: url(/img/arrow_left.svg) no-repeat; + background-size: rem(2); + background-position: center; + left: 0; +} diff --git a/src/features/Home/Carousel/SlideContent/SlideContent.module.scss b/src/features/Home/Carousel/SlideContent/SlideContent.module.scss index 376f2c42c..e83ce0d18 100644 --- a/src/features/Home/Carousel/SlideContent/SlideContent.module.scss +++ b/src/features/Home/Carousel/SlideContent/SlideContent.module.scss @@ -1,18 +1,18 @@ @use 'src/styles/utility' as *; .sliderContent { - text-align: left; - border-left: none; + text-align: left; + border-left: none; - &:after { - box-sizing: border-box; - content: "\201c"; - position: absolute; - font-size: rem(17); - font-weight: 700; - z-index: -1; - left: 0; - top: rem(-8); - color: var(--colors-blue100); - opacity: 56%; - } -} \ No newline at end of file + &:after { + box-sizing: border-box; + content: '\201c'; + position: absolute; + font-size: rem(17); + font-weight: 700; + z-index: -1; + left: 0; + top: rem(-8); + color: var(--colors-blue100); + opacity: 56%; + } +} diff --git a/src/features/Home/Carousel/swiper-custom.scss b/src/features/Home/Carousel/swiper-custom.scss index 2fcd2dffc..bf282895c 100644 --- a/src/features/Home/Carousel/swiper-custom.scss +++ b/src/features/Home/Carousel/swiper-custom.scss @@ -2,18 +2,18 @@ @use 'swiper/scss'; .swiper { - min-width: rem(32); - max-width: rem(58.6); - text-align: center; - cursor: pointer; - .swiper-slide { - height: auto; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - span { - font-size: rem(1.4); - } + min-width: rem(32); + max-width: rem(58.6); + text-align: center; + cursor: pointer; + .swiper-slide { + height: auto; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + span { + font-size: rem(1.4); } + } } diff --git a/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss b/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss index 1e37be36f..f773cd902 100644 --- a/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss +++ b/src/features/dashboard/components/ApiTokenTable/token-cell.module.scss @@ -1,82 +1,82 @@ @use 'src/styles/utility' as *; .hidden_container { - display: flex; - gap: rem(0.45); - .hidden_character { - width: rem(0.5); - height: rem(0.5); - border-radius: 100%; - background-color: var(--ifm-color-emphasis-900); - } + display: flex; + gap: rem(0.45); + .hidden_character { + width: rem(0.5); + height: rem(0.5); + border-radius: 100%; + background-color: var(--ifm-color-emphasis-900); + } } .token_cell { - display: flex; - justify-content: center; - align-items: center; - gap: rem(1); - button { - position: relative; - min-width: rem(1.5); - min-height: rem(1.5); - background-repeat: no-repeat; - background-position: center; - background-color: var(--colors-greyLight200); - border: 1px solid var(--colors-greyLight400); - border-radius: 100%; - padding: rem(0.3); - &.copy_button { - cursor: copy; - background-image: url(/img/copy.svg); - } - &:hover { - &::after { - content: ''; - 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%; - } - } - &.eye_button { - cursor: pointer; - &:hover::after { - content: 'Hide this token'; - } - } - &.copy_button { - &:hover::after { - content: 'Copy this token'; - } - &.is_copying { - background-image: url(/img/check.svg); - background-color: var(--ifm-color-primary-lightest); - border: 1px solid var(--ifm-color-primary); - &:hover::after { - content: 'Token copied!'; - } - } + display: flex; + justify-content: center; + align-items: center; + gap: rem(1); + button { + position: relative; + min-width: rem(1.5); + min-height: rem(1.5); + background-repeat: no-repeat; + background-position: center; + background-color: var(--colors-greyLight200); + border: 1px solid var(--colors-greyLight400); + border-radius: 100%; + padding: rem(0.3); + &.copy_button { + cursor: copy; + background-image: url(/img/copy.svg); + } + &:hover { + &::after { + content: ''; + 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%; + } + } + &.eye_button { + cursor: pointer; + &:hover::after { + content: 'Hide this token'; + } + } + &.copy_button { + &:hover::after { + content: 'Copy this token'; + } + &.is_copying { + background-image: url(/img/check.svg); + background-color: var(--ifm-color-primary-lightest); + border: 1px solid var(--ifm-color-primary); + &:hover::after { + content: 'Token copied!'; } + } } + } } diff --git a/src/features/dashboard/components/AppForm/app-form.module.scss b/src/features/dashboard/components/AppForm/app-form.module.scss index 70901eda0..963e31723 100644 --- a/src/features/dashboard/components/AppForm/app-form.module.scss +++ b/src/features/dashboard/components/AppForm/app-form.module.scss @@ -120,7 +120,7 @@ fieldset .customTextInput:last-child { gap: rem(1); margin-top: rem(1.5); flex-direction: column; - + .subHeading { margin-left: rem(1); } diff --git a/src/features/dashboard/components/NoApps/no-apps.module.scss b/src/features/dashboard/components/NoApps/no-apps.module.scss index 383b151af..fd1769d7c 100644 --- a/src/features/dashboard/components/NoApps/no-apps.module.scss +++ b/src/features/dashboard/components/NoApps/no-apps.module.scss @@ -33,7 +33,7 @@ margin-bottom: rem(2); } -[data-state*="responsive.desktop"] { +[data-state*='responsive.desktop'] { .noAppsWrapper { position: relative; } diff --git a/src/features/dashboard/components/RestrictionsAppname/RestrictionsAppname.module.scss b/src/features/dashboard/components/RestrictionsAppname/RestrictionsAppname.module.scss index 6b0431824..c3a263435 100644 --- a/src/features/dashboard/components/RestrictionsAppname/RestrictionsAppname.module.scss +++ b/src/features/dashboard/components/RestrictionsAppname/RestrictionsAppname.module.scss @@ -1,7 +1,7 @@ @use 'src/styles/utility' as *; .restrictions { - display:flex; + display: flex; flex-direction: column; gap: rem(0.8); font-size: rem(1.2); diff --git a/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.module.scss b/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.module.scss index ba3ed9438..16d134fcb 100644 --- a/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.module.scss +++ b/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.module.scss @@ -1,7 +1,7 @@ @use 'src/styles/utility' as *; .tokenrestrictions { - display:flex; + display: flex; flex-direction: column; gap: rem(0.8); font-size: rem(1.2); diff --git a/src/features/dashboard/manage-apps/manage-apps.module.scss b/src/features/dashboard/manage-apps/manage-apps.module.scss index b2beab871..2524d940a 100644 --- a/src/features/dashboard/manage-apps/manage-apps.module.scss +++ b/src/features/dashboard/manage-apps/manage-apps.module.scss @@ -7,4 +7,4 @@ max-height: calc(100vh - rem(35)); border-top-left-radius: rem(1.6); border-top-right-radius: rem(1.6); -} \ No newline at end of file +} diff --git a/src/features/dashboard/update-app/AppUpdateForm/app-update-form.scss b/src/features/dashboard/update-app/AppUpdateForm/app-update-form.scss new file mode 100644 index 000000000..b28f3f4da --- /dev/null +++ b/src/features/dashboard/update-app/AppUpdateForm/app-update-form.scss @@ -0,0 +1,72 @@ +@use 'src/styles/utility' as *; + +.update_form { + display: flex; + justify-content: center; + + .formContent { + margin-inline: 16px; + max-width: 608px; + } + + .uri_input { + margin-block: 8px; + } + + &__oauth_container { + margin-left: 16px; + } + + &__fields_button { + display: flex; + align-items: center; + justify-content: center; + + button { + margin-inline: 8px; + } + } + + .mblk { + margin-block: 16px; + } + + .mb { + margin-bottom: 16px; + } + + .mst { + margin-top: 36px; + } + + b { + font-weight: bold; + } +} + +.scopes { + display: flex; + flex-direction: column; + margin-bottom: rem(2.5); +} + +.scopeItem { + border: 1.6px solid var(--ifm-color-emphasis-800); + border-radius: 6.4px; + padding: rem(1.28) rem(0.64); +} + +.customCheckboxWrapper { + display: flex; + font-size: medium; + + label { + cursor: pointer; + } + + @media screen and (max-width: 992px) { + label { + margin-top: -6px; + } + } +} diff --git a/src/styles/_utility.scss b/src/styles/_utility.scss index 411888ea7..90bc329bb 100644 --- a/src/styles/_utility.scss +++ b/src/styles/_utility.scss @@ -1,5 +1,5 @@ @use 'sass:math'; @function rem($value) { - @return (math.div($value, 16) * 10) + rem; + @return (math.div($value, 16) * 10) + rem; } diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss index 5f30ad9f6..ae7fc3f48 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -1,3 +1,5 @@ +@use 'src/styles/utility' as *; + .language_switcher { .dropdown { position: relative; From 99edb26aac52339b985a6da21c7fab430c46fe12 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 11 Jun 2024 12:29:42 +0400 Subject: [PATCH 41/44] langauges on right --- .../LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss index ae7fc3f48..2e2a797f5 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/locale-dropdown-navbar-item.scss @@ -17,7 +17,7 @@ position: fixed; display: flex; top: 104px; - padding-left: 5.5%; + padding-right: 5.5%; width: 100vw; min-width: 997px; padding-bottom: 32px; @@ -26,7 +26,7 @@ gap: 24px; background-color: var(--ifm-navbar-background-color); box-shadow: var(--ifm-navbar-shadow); - align-items: flex-start; + align-items: flex-end; cursor: pointer; } From 44271d12e212845210422c8cff77280e3e98f4a2 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 12 Jun 2024 10:40:28 +0400 Subject: [PATCH 42/44] fix: login using another language --- src/components/UserNavbarItem/index.tsx | 7 +++++-- src/features/Apiexplorer/LoginDialog/index.tsx | 7 +++++-- src/features/Auth/Login/Login.tsx | 6 +++++- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/UserNavbarItem/index.tsx b/src/components/UserNavbarItem/index.tsx index e7cab8681..6f1cb9115 100644 --- a/src/components/UserNavbarItem/index.tsx +++ b/src/components/UserNavbarItem/index.tsx @@ -1,3 +1,4 @@ +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useAuthContext from '@site/src/hooks/useAuthContext'; import useLoginUrl from '@site/src/hooks/useLoginUrl'; import useLogout from '@site/src/hooks/useLogout'; @@ -10,13 +11,15 @@ interface IProps { const UserNavbarItem = ({ mobile }: IProps) => { const [authUrl, setAuthUrl] = useState(''); - + const { + i18n: { currentLocale }, + } = useDocusaurusContext(); const { is_logged_in } = useAuthContext(); const { logout } = useLogout(); const { getUrl } = useLoginUrl(); useEffect(() => { - const url = getUrl('en'); + const url = getUrl(currentLocale); setAuthUrl(url); }, [getUrl]); diff --git a/src/features/Apiexplorer/LoginDialog/index.tsx b/src/features/Apiexplorer/LoginDialog/index.tsx index eb58c9efd..eb64560b0 100644 --- a/src/features/Apiexplorer/LoginDialog/index.tsx +++ b/src/features/Apiexplorer/LoginDialog/index.tsx @@ -3,6 +3,7 @@ import { Modal, Button } from '@deriv/ui'; import useLoginUrl from '@site/src/hooks/useLoginUrl'; import styles from './LoginDialog.module.scss'; import Translate from '@docusaurus/Translate'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; type TLoginDialog = { setToggleModal: React.Dispatch>; @@ -10,7 +11,9 @@ type TLoginDialog = { export const LoginDialog = ({ setToggleModal }: TLoginDialog) => { const { getUrl } = useLoginUrl(); - + const { + i18n: { currentLocale }, + } = useDocusaurusContext(); const onOpenChange = useCallback( (open: boolean) => { if (!open) setToggleModal(false); @@ -19,7 +22,7 @@ export const LoginDialog = ({ setToggleModal }: TLoginDialog) => { ); const handleClick = () => { - location.assign(getUrl('en')); + location.assign(getUrl(currentLocale)); }; const handleSignUp = () => { diff --git a/src/features/Auth/Login/Login.tsx b/src/features/Auth/Login/Login.tsx index 4ea78e3d0..ca5f379b6 100644 --- a/src/features/Auth/Login/Login.tsx +++ b/src/features/Auth/Login/Login.tsx @@ -4,12 +4,16 @@ import styles from './Login.module.scss'; import useLoginUrl from '@site/src/hooks/useLoginUrl'; import Footer from '@site/src/components/Footer'; import Translate from '@docusaurus/Translate'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; export const Login = () => { const { getUrl } = useLoginUrl(); + const { + i18n: { currentLocale }, + } = useDocusaurusContext(); const handleClick = () => { - window.location.assign(getUrl('en')); + window.location.assign(getUrl(currentLocale)); }; return (
From 3e03938a15268b57bfb6193fcf0b3f95c369fc0e Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 12 Jun 2024 10:48:26 +0400 Subject: [PATCH 43/44] fix: login using another language --- src/hooks/useLoginUrl/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/hooks/useLoginUrl/index.tsx b/src/hooks/useLoginUrl/index.tsx index ec8cfba57..6b6bdf303 100644 --- a/src/hooks/useLoginUrl/index.tsx +++ b/src/hooks/useLoginUrl/index.tsx @@ -1,11 +1,15 @@ import { generateLoginUrl, getServerConfig } from '@site/src/utils'; import { useCallback } from 'react'; import { useLocation } from '@docusaurus/router'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; const useLoginUrl = () => { + const { + i18n: { currentLocale }, + } = useDocusaurusContext(); const location = useLocation(); const getUrl = useCallback( - (language = 'en') => { + (language = currentLocale) => { const { appId, oauth } = getServerConfig(); const pathname = window.location.pathname; const route = pathname.replace(/\//g, '%2F'); //replacement is done for backend to understand the route From 6284d2a60636b46648532326b7d26a4370edc16b Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 12 Jun 2024 12:33:39 +0400 Subject: [PATCH 44/44] fix: auth url fix --- src/hooks/useLoginUrl/index.tsx | 6 +----- src/pages/auth.tsx | 13 +++++++------ 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/hooks/useLoginUrl/index.tsx b/src/hooks/useLoginUrl/index.tsx index 6b6bdf303..ec8cfba57 100644 --- a/src/hooks/useLoginUrl/index.tsx +++ b/src/hooks/useLoginUrl/index.tsx @@ -1,15 +1,11 @@ import { generateLoginUrl, getServerConfig } from '@site/src/utils'; import { useCallback } from 'react'; import { useLocation } from '@docusaurus/router'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; const useLoginUrl = () => { - const { - i18n: { currentLocale }, - } = useDocusaurusContext(); const location = useLocation(); const getUrl = useCallback( - (language = currentLocale) => { + (language = 'en') => { const { appId, oauth } = getServerConfig(); const pathname = window.location.pathname; const route = pathname.replace(/\//g, '%2F'); //replacement is done for backend to understand the route diff --git a/src/pages/auth.tsx b/src/pages/auth.tsx index 558128389..14f84e064 100644 --- a/src/pages/auth.tsx +++ b/src/pages/auth.tsx @@ -15,12 +15,13 @@ export default function Auth(): JSX.Element { checkUrlParams(search); }, [checkUrlParams, search]); - if (is_logged_in) { - const params = new URLSearchParams(search); - const redirect_route = params.get('route')?.replace(/%2F/g, '/') || '/'; - - return ; - } + useEffect(() => { + if (is_logged_in) { + const params = new URLSearchParams(search); + const redirect_route = params.get('route')?.replace(/%2F/g, '/') || '/'; + window.location.assign(window.location.origin + redirect_route); + } + }, [is_logged_in, search]); return (