- {reactTranslator.getMessage('short_name')}
+
diff --git a/src/options/components/About/about.pcss b/src/options/components/About/about.pcss
index 670cb39e0..1ea66a97f 100644
--- a/src/options/components/About/about.pcss
+++ b/src/options/components/About/about.pcss
@@ -1,41 +1,29 @@
.about {
- padding-top: 32px;
- margin-left: 16px;
+ &__info {
+ padding: 16px 16px 0;
- &__header {
- margin-bottom: 48px;
- }
+ &-name {
+ color: var(--text-main-text-main-default);
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 1.3;
+ }
- &__title {
- font-size: 16px;
- line-height: 19px;
- font-weight: 500;
+ &-version {
+ color: var(--text-description-description-default);
+ font-size: 14px;
+ line-height: 1.3;
+ }
}
- &__version {
+ &__copyright {
+ padding: 8px 16px 24px;
+ color: var(--text-description-description-default);
font-size: 14px;
- line-height: 17px;
- font-weight: 400;
- color: var(--gray88);
- }
-
- &__description {
- max-width: 385px;
- line-height: 22px;
- }
-
- &__nav {
- display: flex;
- flex-direction: column;
+ line-height: 1.3;
}
&__link {
- margin-bottom: 16px;
- color: var(--green700);
- transition: var(--t3) color;
-
- &:hover {
- color: var(--green900);
- }
+ text-decoration: none;
}
}
diff --git a/src/options/components/Account/Account.tsx b/src/options/components/Account/Account.tsx
index 5579f0719..e2f78f43b 100644
--- a/src/options/components/Account/Account.tsx
+++ b/src/options/components/Account/Account.tsx
@@ -1,15 +1,16 @@
-import React, { type ReactNode, useContext } from 'react';
+import React, { useContext } from 'react';
import { observer } from 'mobx-react';
-import { rootStore } from '../../stores';
-import { Title } from '../ui/Title';
import { FORWARDER_URL_QUERIES } from '../../../background/config';
-import { getForwarderUrl } from '../../../common/helpers';
-import { reactTranslator } from '../../../common/reactTranslator';
import { translator } from '../../../common/translator';
+import { reactTranslator } from '../../../common/reactTranslator';
import { SubscriptionType } from '../../../common/constants';
+import { getForwarderUrl } from '../../../common/helpers';
+import { rootStore } from '../../stores';
+import { Title } from '../ui/Title';
+import { Button } from '../ui/Button';
-import { Features } from './Features/Features';
+import { Features } from './Features';
import './account.pcss';
@@ -20,27 +21,26 @@ export const Account = observer(() => {
currentUsername,
isPremiumToken,
premiumFeatures,
- hidePremiumFeatures,
- openPremiumPromoPage,
subscriptionType,
subscriptionTimeExpiresIso,
forwarderDomain,
} = settingsStore;
+ const { maxDevicesCount } = authStore;
const editAccountUrl = getForwarderUrl(forwarderDomain, FORWARDER_URL_QUERIES.EDIT_ACCOUNT);
- const { maxDevicesCount } = authStore;
+ const showGetSubscriptionButton = !isPremiumToken && !premiumFeatures;
- const signOut = async (): Promise
=> {
+ const handleSignOut = async (): Promise => {
await authStore.deauthenticate();
};
- const hideFeatures = async (): Promise => {
- await hidePremiumFeatures();
+ const handleHideFeatures = async (): Promise => {
+ await settingsStore.hidePremiumFeatures();
};
- const upgrade = async (): Promise => {
- await openPremiumPromoPage();
+ const handleUpgrade = async (): Promise => {
+ await settingsStore.openPremiumPromoPage();
};
let expiresDate;
@@ -63,7 +63,7 @@ export const Account = observer(() => {
[SubscriptionType.TwoYears]: translator.getMessage('account_two_year_paid'),
};
- const getAccountType = (): ReactNode => {
+ const getAccountType = (): React.ReactNode => {
if (!isPremiumToken) {
return translator.getMessage('account_free');
}
@@ -77,86 +77,82 @@ export const Account = observer(() => {
return (
<>
-
-
-
-
- {getAccountType()}
-
- {expiresDate && (
-
- {reactTranslator.getMessage('account_valid_until', {
- date: expiresDate,
- b: (chunks: any) => (
-
- {chunks}
-
- ),
- })}
+
+ <div className="account__info">
+ {getAccountType()}
</div>
- )}
- {maxDevicesCount !== undefined && (
- <div className="account__info-item">
- {reactTranslator.getMessage('account_max_devices_count', {
- num: maxDevicesCount,
+ {expiresDate && isPremiumToken && (
+ <div className="account__info">
+ {reactTranslator.getMessage('account_valid_until', {
+ date: expiresDate,
+ b: (chunks: any) => (
+ <b>{chunks}</b>
+ ),
+ })}
+ </div>
+ )}
+ {maxDevicesCount !== undefined && (
+ <div className="account__info">
+ {reactTranslator.getMessage('account_max_devices_count', {
+ num: maxDevicesCount,
+ b: (chunks: any) => (
+ <b>{chunks}</b>
+ ),
+ })}
+ </div>
+ )}
+ <div className="account__info">
+ {reactTranslator.getMessage('account_logged_in_as', {
+ username: currentUsername,
b: (chunks: any) => (
- <span className="account__info-item--bold">
- {chunks}
- </span>
+ <b>{chunks}</b>
),
})}
</div>
- )}
- <div className="account__info-item">
- {reactTranslator.getMessage('account_logged_in_as', {
- username: currentUsername,
- b: (chunks: any) => (
- <span className="account__info-item--bold">
- {chunks}
- </span>
- ),
- })}
- </div>
- </div>
- <div className="account__actions">
- <a
- href={editAccountUrl}
- className="button button--large button--outline-gray account__action"
- target="_blank"
- rel="noopener noreferrer"
- >
- {translator.getMessage('account_edit')}
- </a>
- <button
- type="button"
- className="button button--large button--outline-red account__action"
- onClick={signOut}
- >
- {translator.getMessage('account_sign_out')}
- </button>
- </div>
- {(!isPremiumToken && premiumFeatures) && (
- <div className="account__features">
- <Features />
- <div className="account__actions">
- <button
- type="button"
- className="button button--large button--primary account__action"
- onClick={upgrade}
- >
- {translator.getMessage('account_get_subscription')}
- </button>
- <button
- type="button"
- className="button button--large button--outline-gray account__action"
- onClick={hideFeatures}
- >
- {translator.getMessage('rate_hide')}
- </button>
- </div>
</div>
)}
+ />
+ <div className="account__actions">
+ {showGetSubscriptionButton && (
+ <Button className="account__action" onClick={handleUpgrade}>
+ {translator.getMessage('account_get_subscription')}
+ </Button>
+ )}
+ <a
+ href={editAccountUrl}
+ className="button button--medium button--outlined account__action"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <span className="button__text">
+ {translator.getMessage('account_edit')}
+ </span>
+ </a>
+ <Button
+ variant="outlined"
+ color="danger"
+ className="account__action"
+ onClick={handleSignOut}
+ >
+ {translator.getMessage('account_sign_out')}
+ </Button>
</div>
+ {!isPremiumToken && premiumFeatures && (
+ <div className="account__features">
+ <Features />
+ <div className="account__actions account__actions--features">
+ <Button className="account__action" onClick={handleUpgrade}>
+ {translator.getMessage('account_get_subscription')}
+ </Button>
+ <Button className="account__action" variant="outlined" onClick={handleHideFeatures}>
+ {translator.getMessage('rate_hide')}
+ </Button>
+ </div>
+ </div>
+ )}
</>
);
});
diff --git a/src/options/components/Account/Features/Features.tsx b/src/options/components/Account/Features/Features.tsx
index cdef28b55..e388105ba 100644
--- a/src/options/components/Account/Features/Features.tsx
+++ b/src/options/components/Account/Features/Features.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { UNLIMITED_FEATURES } from '../../../../common/components/constants';
-import { reactTranslator } from '../../../../common/reactTranslator';
+import { translator } from '../../../../common/translator';
import { Title } from '../../ui/Title';
import './features.pcss';
@@ -9,7 +9,11 @@ import './features.pcss';
export const Features = () => {
return (
<div className="features">
- <Title title={reactTranslator.getMessage('account_unlimited_title')} />
+ <Title
+ title={translator.getMessage('account_unlimited_title')}
+ size="medium"
+ className="features__title"
+ />
<div className="features__list">
{UNLIMITED_FEATURES.map((feature) => {
const { image, title, info } = feature;
diff --git a/src/options/components/Account/Features/features.pcss b/src/options/components/Account/Features/features.pcss
index 72ef2bbb3..c2d20935c 100644
--- a/src/options/components/Account/Features/features.pcss
+++ b/src/options/components/Account/Features/features.pcss
@@ -1,33 +1,39 @@
.features {
- padding-right: 16px;
+ &__title {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ &__list {
+ margin: 10px 0;
+ display: flex;
+ flex-direction: column;
+ row-gap: 10px;
+ }
&__item {
- margin-bottom: 24px;
display: flex;
- align-items: center;
+ align-items: flex-start;
+ padding: 16px;
+ column-gap: 8px;
}
&__image {
- width: 56px;
- height: 56px;
- margin-right: 24px;
+ width: 48px;
+ height: 48px;
flex-shrink: 0;
}
&__title {
- font-weight: 500;
- font-size: 16px;
- line-height: 24px;
+ color: var(--text-main-text-main-default);
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 1.2;
}
&__desc {
- color: var(--gray88);
- font-size: 14px;
- line-height: 18px;
- }
-
- & .content__title {
- margin: 0 0 32px 0;
- padding-left: 0;
+ color: var(--text-description-description-default);
+ font-size: 16px;
+ line-height: 1.5;
}
}
diff --git a/src/options/components/Account/account.pcss b/src/options/components/Account/account.pcss
index d10f6065b..c35a4bd62 100644
--- a/src/options/components/Account/account.pcss
+++ b/src/options/components/Account/account.pcss
@@ -1,44 +1,39 @@
.account {
- margin-left: 16px;
- font-weight: 400;
- font-size: 14px;
- line-height: 18px;
+ &__description {
+ color: var(--text-main-text-main-default);
+ }
&__info {
- padding-top: 8px;
-
- &-item {
- font-size: 16px;
- line-height: 21px;
- font-weight: 400;
- margin-bottom: 16px;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- &--bold {
- font-weight: 600;
- }
+ & + & {
+ margin-top: 24px;
}
}
&__actions {
- margin-top: 24px;
display: flex;
- gap: 16px;
+ flex-direction: column;
+ margin-top: 24px;
+ padding: 0 16px;
+ row-gap: 16px;
- @media (--mobile) {
- flex-direction: column;
- padding-right: 16px;
+ &--features {
+ margin-top: 0;
+ }
+ }
- .button {
- width: 100%;
- }
+ &__action {
+ text-decoration: none;
+ width: 260px;
+ /* Overriding button's default font style */
+ font-size: 16px;
+ font-weight: 600;
+
+ @media (--mobile) {
+ width: 100%;
}
}
&__features {
- padding-top: 48px;
+ padding-top: 40px;
}
}
diff --git a/src/options/components/App/App.tsx b/src/options/components/App/App.tsx
index 0d28ceb8f..b85f64270 100644
--- a/src/options/components/App/App.tsx
+++ b/src/options/components/App/App.tsx
@@ -1,31 +1,27 @@
import React, { useContext, useEffect, useLayoutEffect } from 'react';
import { observer } from 'mobx-react';
import { HashRouter, Route, Switch } from 'react-router-dom';
-import Modal from 'react-modal';
-import { RequestStatus } from '../../stores/consts';
+import { useAppearanceTheme } from '../../../common/useAppearanceTheme';
import { rootStore } from '../../stores';
+import { RequestStatus } from '../../stores/consts';
+import { useCustomDnsFromQuery } from '../../hooks/useQueryStringData';
+import { useMessageHandler } from '../../hooks/useMessageHandler';
+import { Notifications } from '../ui/Notifications';
+import { Icons } from '../ui/Icon';
+import { Preloader } from '../Preloader';
+import { SignedOut } from '../SignedOut';
import { Sidebar } from '../Sidebar';
-import { Settings } from '../Settings';
-import { FreeGbs } from '../FreeGbs';
+import { General } from '../General';
+import { Exclusions } from '../Exclusions';
import { Account } from '../Account';
-import { About } from '../About';
-import { SignedOut } from '../SignedOut';
-import { Preloader } from '../Preloader';
-import Icons from '../ui/Icons';
import { Support } from '../Support';
-import { Notifications } from '../ui/Notifications';
-import { useAppearanceTheme } from '../../../common/useAppearanceTheme';
-import { Exclusions } from '../Exclusions';
-import { useCustomDnsFromQuery } from '../../hooks/useQueryStringData';
-
-import { useMessageHandler } from './useMessageHandler';
+import { About } from '../About';
+import { FreeGbs } from '../FreeGbs';
import '../../styles/main.pcss';
import './app.pcss';
-Modal.setAppElement('#root');
-
const getContent = (
authenticated: boolean,
requestProcessState: RequestStatus,
@@ -39,7 +35,7 @@ const getContent = (
<div className="content" inert={isContentLocked ? '' : undefined}>
<div className="content__wrapper">
<Switch>
- <Route path="/" exact component={Settings} />
+ <Route path="/" exact component={General} />
<Route path="/exclusions" exact component={Exclusions} />
<Route path="/account" component={Account} />
<Route path="/about" component={About} />
@@ -47,7 +43,7 @@ const getContent = (
{!isPremiumToken && (
<Route path="/free-gbs" component={FreeGbs} />
)}
- <Route component={Settings} />
+ <Route component={General} />
</Switch>
</div>
</div>
diff --git a/src/options/components/App/app.pcss b/src/options/components/App/app.pcss
index 0570d33f8..96dc7693a 100644
--- a/src/options/components/App/app.pcss
+++ b/src/options/components/App/app.pcss
@@ -15,59 +15,29 @@
padding: 40px 0;
flex: 1 1 auto;
display: flex;
- align-items: flex-start;
- justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
@media (--tablet) {
padding: 32px 0;
}
&__wrapper {
+ flex: 1 1 auto;
+ display: flex;
+ flex-direction: column;
width: 100%;
max-width: 630px;
- }
-
- &__title {
- width: 100%;
- display: inline-flex;
- align-items: center;
- justify-content: space-between;
- padding-left: 16px;
- margin-top: 0;
- margin-bottom: 16px;
- font-size: 32px;
- line-height: 38px;
- &--pointer {
- cursor: pointer;
- margin: 0;
- padding-left: 0;
+ @media (--tablet) {
+ padding: 0 16px;
}
}
-
- &__subtitle {
- margin: 0 0 16px 16px;
- font-size: 16px;
- line-height: 24px;
- }
-
- &__link {
- font-size: 1.3rem;
- font-weight: 400;
- color: var(--brand-primary);
- }
}
-.modal {
- &__title {
- letter-spacing: 0;
- font-size: 32px;
- font-weight: 700;
- line-height: 1.2;
- margin-bottom: 12px;
-
- @media (--mobile) {
- font-size: 24px;
- }
- }
+.text-ellipsis {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
diff --git a/src/options/components/Exclusions/Actions/Actions.tsx b/src/options/components/Exclusions/Actions/Actions.tsx
index 2068a2fef..a5e1eb2d8 100644
--- a/src/options/components/Exclusions/Actions/Actions.tsx
+++ b/src/options/components/Exclusions/Actions/Actions.tsx
@@ -2,28 +2,33 @@
import React, { useContext, useState, useRef } from 'react';
import { observer } from 'mobx-react';
-import classnames from 'classnames';
import identity from 'lodash/identity';
import format from 'date-fns/format';
import JSZip from 'jszip';
import FileSaver from 'file-saver';
import { rootStore } from '../../../stores';
-import { reactTranslator } from '../../../../common/reactTranslator';
import { translator } from '../../../../common/translator';
import { isValidExclusion } from '../../../../common/utils/string';
import { type ExclusionsContentMap } from '../../../../common/constants';
import { log } from '../../../../common/logger';
import { messenger } from '../../../../common/messenger';
import { ExclusionsMode } from '../../../../common/exclusionsConstants';
-import { useOutsideClick } from '../../../../common/components/ui/useOutsideClick';
+import { Select } from '../../ui/Select';
-import { SelectListModal } from './SelectListModal/SelectListModal';
+import { SelectListModal } from './SelectListModal';
import { ExclusionDataType, type ExclusionsImportData, readExclusionsFile } from './fileHelpers';
import { RemoveAllModal } from './RemoveAllModal';
import './actions.pcss';
+enum Action {
+ Default = 'default',
+ Export = 'export',
+ Import = 'import',
+ Remove = 'remove',
+}
+
const prepareExclusionsAfterImport = (exclusionsString: string) => {
return exclusionsString
.split('\n')
@@ -72,26 +77,19 @@ const exportExclusions = async () => {
export const Actions = observer(() => {
const { exclusionsStore, notificationsStore } = useContext(rootStore);
-
- const [isMoreActionsMenuOpen, setIsMoreActionsMenuOpen] = useState(false);
+ const { selectListModalOpen } = exclusionsStore;
const importEl = useRef<HTMLInputElement>(null);
- const moreActionsMenu = useRef<HTMLDivElement>(null);
- const [isSelectListModalOpen, setSelectListModalState] = useState(false);
const [fileContent, setFileContent] = useState('');
- const ref = useRef<HTMLDivElement>(null);
-
- useOutsideClick(ref, () => setIsMoreActionsMenuOpen(false));
-
const closeSelectListModal = () => {
- setSelectListModalState(false);
+ exclusionsStore.closeSelectListModal();
setFileContent('');
};
const openSelectListModal = () => {
- setSelectListModalState(true);
+ exclusionsStore.openSelectListModal();
};
const handleRegularClick = async () => {
@@ -102,7 +100,7 @@ export const Actions = observer(() => {
{ count: exclusionsAddedCount },
),
{
- action: reactTranslator.getMessage('settings_exclusions_undo'),
+ action: translator.getMessage('settings_exclusions_undo'),
handler: exclusionsStore.restoreExclusions,
},
);
@@ -118,7 +116,7 @@ export const Actions = observer(() => {
{ count: exclusionsAddedCount },
),
{
- action: reactTranslator.getMessage('settings_exclusions_undo'),
+ action: translator.getMessage('settings_exclusions_undo'),
handler: exclusionsStore.restoreExclusions,
},
);
@@ -132,28 +130,26 @@ export const Actions = observer(() => {
return null;
};
- const onExportExclusionsClick = async () => {
- setIsMoreActionsMenuOpen(false);
- await exportExclusions();
- };
-
- const onImportExclusionsClick = () => {
- setIsMoreActionsMenuOpen(false);
- if (importEl.current) {
- importEl.current.click();
+ const handleAction = async (action: Action) => {
+ switch (action) {
+ case Action.Export: {
+ await exportExclusions();
+ break;
+ }
+ case Action.Import: {
+ if (importEl.current) {
+ importEl.current.click();
+ }
+ break;
+ }
+ case Action.Remove: {
+ await exclusionsStore.openRemoveAllModal();
+ break;
+ }
+ default: break;
}
};
- const onRemoveAllClick = async () => {
- setIsMoreActionsMenuOpen(false);
- await exclusionsStore.openRemoveAllModal();
- };
-
- const onMoreActionsClick = (e: React.MouseEvent<HTMLButtonElement>) => {
- e.stopPropagation();
- setIsMoreActionsMenuOpen(!isMoreActionsMenuOpen);
- };
-
const handleExclusionsData = async (exclusionsData: ExclusionsImportData[]) => {
const txtExclusionsData = exclusionsData.find((d) => d.type === ExclusionDataType.Txt);
@@ -201,7 +197,7 @@ export const Actions = observer(() => {
{ count: exclusionsAdded },
),
{
- action: reactTranslator.getMessage('settings_exclusions_undo'),
+ action: translator.getMessage('settings_exclusions_undo'),
handler: exclusionsStore.restoreExclusions,
},
);
@@ -214,57 +210,34 @@ export const Actions = observer(() => {
}
};
- const moreActionsListClassnames = classnames('actions__more-actions-list', {
- visible: isMoreActionsMenuOpen,
- });
-
- const exportClassnames = classnames({
- 'actions__hidden-action': exclusionsStore.isAllExclusionsListsEmpty,
- });
-
- const removeAllClassnames = classnames({
- 'actions__hidden-action': exclusionsStore.isCurrentModeExclusionsListEmpty,
- });
-
return (
<>
- <div
- className="actions"
- ref={ref}
- >
- <button
- type="button"
- className="actions__button selector__value"
- onClick={onMoreActionsClick}
- >
- {reactTranslator.getMessage('settings_exclusion_actions')}
- </button>
- <div
- className={moreActionsListClassnames}
- ref={moreActionsMenu}
- tabIndex={-1}
- >
- <button
- type="button"
- className={exportClassnames}
- onClick={onExportExclusionsClick}
- >
- {reactTranslator.getMessage('settings_exclusions_action_export')}
- </button>
- <button
- type="button"
- onClick={onImportExclusionsClick}
- >
- {reactTranslator.getMessage('settings_exclusions_action_import')}
- </button>
- <button
- type="button"
- className={removeAllClassnames}
- onClick={onRemoveAllClick}
- >
- {reactTranslator.getMessage('settings_exclusions_action_remove_all')}
- </button>
- </div>
+ <div className="actions">
+ <Select
+ value={Action.Default}
+ options={[
+ {
+ value: Action.Default,
+ title: translator.getMessage('settings_exclusion_actions'),
+ shouldSkip: true,
+ },
+ {
+ value: Action.Export,
+ title: translator.getMessage('settings_exclusions_action_export'),
+ shouldSkip: exclusionsStore.isAllExclusionsListsEmpty,
+ },
+ {
+ value: Action.Import,
+ title: translator.getMessage('settings_exclusions_action_import'),
+ },
+ {
+ value: Action.Remove,
+ title: translator.getMessage('settings_exclusions_action_remove_all'),
+ shouldSkip: exclusionsStore.isCurrentModeExclusionsListEmpty,
+ },
+ ]}
+ onChange={handleAction}
+ />
<input
type="file"
accept=".txt, .zip"
@@ -274,7 +247,7 @@ export const Actions = observer(() => {
/>
</div>
<SelectListModal
- isOpen={isSelectListModalOpen}
+ isOpen={selectListModalOpen}
closeModal={closeSelectListModal}
handleRegularClick={handleRegularClick}
handleSelectiveClick={handleSelectiveClick}
diff --git a/src/options/components/Exclusions/Actions/RemoveAllModal/RemoveAllModal.tsx b/src/options/components/Exclusions/Actions/RemoveAllModal/RemoveAllModal.tsx
index fe0322981..2754637fa 100644
--- a/src/options/components/Exclusions/Actions/RemoveAllModal/RemoveAllModal.tsx
+++ b/src/options/components/Exclusions/Actions/RemoveAllModal/RemoveAllModal.tsx
@@ -1,11 +1,10 @@
import React, { useContext } from 'react';
import { observer } from 'mobx-react';
-import { ExclusionsModal } from '../../ExclusionsModal/ExclusionsModal';
import { rootStore } from '../../../../stores';
-import { reactTranslator } from '../../../../../common/reactTranslator';
-
-import './remove-all-modal.pcss';
+import { translator } from '../../../../../common/translator';
+import { Modal } from '../../../ui/Modal';
+import { Button } from '../../../ui/Button';
export const RemoveAllModal = observer(() => {
const { exclusionsStore, notificationsStore } = useContext(rootStore);
@@ -20,41 +19,32 @@ export const RemoveAllModal = observer(() => {
await exclusionsStore.clearExclusionsList();
closeModal();
notificationsStore.notifySuccess(
- reactTranslator.getMessage('options_exclusions_remove_all_success'),
+ translator.getMessage('options_exclusions_remove_all_success'),
{
- action: reactTranslator.getMessage('settings_exclusions_undo'),
+ action: translator.getMessage('settings_exclusions_undo'),
handler: exclusionsStore.restoreExclusions,
},
);
};
return (
- <ExclusionsModal
+ <Modal
+ title={translator.getMessage('settings_exclusions_remove_all_exclusions')}
+ description={translator.getMessage('settings_exclusions_remove_all_exclusions_message')}
+ actions={(
+ <>
+ <Button variant="outlined" onClick={closeModal}>
+ {translator.getMessage('options_exclusions_delete_cancel_button')}
+ </Button>
+ <Button color="danger" onClick={removeAllExclusions}>
+ {translator.getMessage('settings_exclusion_modal_remove')}
+ </Button>
+ </>
+ )}
isOpen={isOpen}
- closeModal={closeModal}
- title={reactTranslator.getMessage('settings_exclusions_remove_all_exclusions')}
- >
- <div className="remove-all-modal">
- <div className="remove-all-modal__message">
- {reactTranslator.getMessage('settings_exclusions_remove_all_exclusions_message')}
- </div>
- <div className="form__actions">
- <button
- type="button"
- className="button button--large button--outline-secondary"
- onClick={closeModal}
- >
- {reactTranslator.getMessage('settings_exclusion_modal_cancel')}
- </button>
- <button
- type="button"
- className="button button--large button--primary"
- onClick={removeAllExclusions}
- >
- {reactTranslator.getMessage('settings_exclusion_modal_remove')}
- </button>
- </div>
- </div>
- </ExclusionsModal>
+ className="exclusions__modal exclusions__modal--empty-body"
+ size="medium"
+ onClose={closeModal}
+ />
);
});
diff --git a/src/options/components/Exclusions/Actions/RemoveAllModal/remove-all-modal.pcss b/src/options/components/Exclusions/Actions/RemoveAllModal/remove-all-modal.pcss
deleted file mode 100644
index 6ad1acd90..000000000
--- a/src/options/components/Exclusions/Actions/RemoveAllModal/remove-all-modal.pcss
+++ /dev/null
@@ -1,20 +0,0 @@
-.remove-all-modal {
-
- &__message {
- margin-bottom: 24px;
- max-width: 480px;
- }
-
- & .button {
- min-width: 180px;
- }
-
- & .button--primary {
- background: var(--redDark);
-
- &:focus,
- &:hover {
- background: var(--red);
- }
- }
-}
diff --git a/src/options/components/Exclusions/Actions/SelectListModal/SelectListModal.tsx b/src/options/components/Exclusions/Actions/SelectListModal/SelectListModal.tsx
index 4ce49b971..83229e987 100644
--- a/src/options/components/Exclusions/Actions/SelectListModal/SelectListModal.tsx
+++ b/src/options/components/Exclusions/Actions/SelectListModal/SelectListModal.tsx
@@ -1,12 +1,11 @@
import React, { useState, useContext, useEffect } from 'react';
-import classnames from 'classnames';
-
-import { reactTranslator } from '../../../../../common/reactTranslator';
-import { ExclusionsModal } from '../../ExclusionsModal/ExclusionsModal';
-import { Title } from '../../../ui/Title';
+import { translator } from '../../../../../common/translator';
import { ExclusionsMode } from '../../../../../common/exclusionsConstants';
import { rootStore } from '../../../../stores';
+import { Radio } from '../../../ui/Radio';
+import { Modal } from '../../../ui/Modal';
+import { Button } from '../../../ui/Button';
interface SelectListModalProps {
isOpen: boolean;
@@ -31,8 +30,8 @@ export const SelectListModal = ({
}, [currentMode, isOpen]);
const modesInfo = {
- [ExclusionsMode.Regular]: reactTranslator.getMessage('options_exclusions_import_select_regular'),
- [ExclusionsMode.Selective]: reactTranslator.getMessage('options_exclusions_import_select_selective'),
+ [ExclusionsMode.Regular]: translator.getMessage('options_exclusions_import_select_regular'),
+ [ExclusionsMode.Selective]: translator.getMessage('options_exclusions_import_select_selective'),
};
const handleImportClick = async () => {
@@ -43,58 +42,36 @@ export const SelectListModal = ({
}
};
- const renderRadioButton = (exclusionsType: ExclusionsMode) => {
- const enabled = exclusionsType === selectedList;
- const titleClass = classnames('radio__title', { 'radio__title--active': enabled });
- const xlinkHref = classnames({
- '#bullet_on': enabled,
- '#bullet_off': !enabled,
- });
-
- return (
- <div
- className="radio"
- onClick={() => setSelectedList(exclusionsType)}
- >
- <svg className="radio__icon">
- <use xlinkHref={xlinkHref} />
- </svg>
- <div className="radio__label">
- <div className={titleClass}>
- {modesInfo[exclusionsType]}
- </div>
- </div>
- </div>
- );
- };
+ const renderRadioButton = (exclusionsType: ExclusionsMode) => (
+ <Radio
+ name="exclusion-type"
+ value={exclusionsType}
+ isActive={exclusionsType === selectedList}
+ title={modesInfo[exclusionsType]}
+ onSelect={setSelectedList}
+ />
+ );
return (
- <ExclusionsModal
+ <Modal
isOpen={isOpen}
- closeModal={closeModal}
+ title={translator.getMessage('options_exclusions_import_select_title')}
+ description={translator.getMessage('options_exclusions_import_select_subtitle')}
+ actions={(
+ <>
+ <Button onClick={handleImportClick}>
+ {translator.getMessage('settings_exclusion_import_button')}
+ </Button>
+ <Button variant="outlined" onClick={closeModal}>
+ {translator.getMessage('settings_exclusion_modal_cancel')}
+ </Button>
+ </>
+ )}
+ className="exclusions__modal--radio"
+ onClose={closeModal}
>
- <Title
- title={reactTranslator.getMessage('options_exclusions_import_select_title')}
- subtitle={reactTranslator.getMessage('options_exclusions_import_select_subtitle')}
- />
{renderRadioButton(ExclusionsMode.Selective)}
{renderRadioButton(ExclusionsMode.Regular)}
- <div className="form__actions">
- <button
- type="button"
- onClick={closeModal}
- className="button button--outline-secondary button--large"
- >
- {reactTranslator.getMessage('options_exclusions_delete_cancel_button')}
- </button>
- <button
- type="button"
- onClick={handleImportClick}
- className="button button--primary button--large"
- >
- {reactTranslator.getMessage('settings_exclusion_import_button')}
- </button>
- </div>
- </ExclusionsModal>
+ </Modal>
);
};
diff --git a/src/options/components/Exclusions/Actions/SelectListModal/index.ts b/src/options/components/Exclusions/Actions/SelectListModal/index.ts
new file mode 100644
index 000000000..d2de40125
--- /dev/null
+++ b/src/options/components/Exclusions/Actions/SelectListModal/index.ts
@@ -0,0 +1 @@
+export { SelectListModal } from './SelectListModal';
diff --git a/src/options/components/Exclusions/Actions/actions.pcss b/src/options/components/Exclusions/Actions/actions.pcss
index b7f1a4f9c..03e0f26e8 100644
--- a/src/options/components/Exclusions/Actions/actions.pcss
+++ b/src/options/components/Exclusions/Actions/actions.pcss
@@ -1,73 +1,19 @@
.actions {
- position: absolute;
- top: 0;
- right: 0;
-
- &__button {
- color: var(--gray88);
- font-size: 16px;
- border: none;
- background-size: 10px;
- padding: 5px 25px 5px 5px;
- }
-
- &__more-actions-list {
- position: absolute;
- right: 0;
- top: 30px;
- min-width: 190px;
- z-index: 1;
- background: var(--white);
- list-style: none;
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
- visibility: hidden;
- outline: none;
-
- &.visible {
- visibility: visible;
- }
-
- & button {
- padding: 15px 35px 15px 25px;
- cursor: pointer;
- white-space: nowrap;
- background: none;
- border: none;
- font-size: inherit;
- width: 100%;
- display: flex;
-
- &:hover {
- background-color: var(--grayF3);
-
- @media (prefers-color-scheme: dark) {
- background-color: var(--grayD8);
- }
- }
- }
- }
-
- &__hidden-action {
- display: none;
+ .select__btn {
+ column-gap: 4px;
+ color: var(--text-placeholder-placeholder-default);
}
-}
-.light-mode {
- .actions {
- &__more-actions-list button {
- &:hover {
- background-color: var(--grayF3);
- }
- }
+ .select__list {
+ right: 24px;
+ width: 180px;
+ border-radius: 0;
+ box-shadow: var(--small-light-shadow-br);
}
-}
-.dark-mode {
- .actions {
- &__more-actions-list button {
- &:hover {
- background-color: var(--grayD8);
- }
- }
+ .select__item {
+ padding: 16px;
+ font-size: 14px;
+ line-height: 16px;
}
-}
+}
\ No newline at end of file
diff --git a/src/options/components/Exclusions/ChildrenList/ChildrenList.tsx b/src/options/components/Exclusions/ChildrenList/ChildrenList.tsx
index 6885ff403..f0330d1a5 100644
--- a/src/options/components/Exclusions/ChildrenList/ChildrenList.tsx
+++ b/src/options/components/Exclusions/ChildrenList/ChildrenList.tsx
@@ -3,16 +3,15 @@ import { observer } from 'mobx-react';
import { rootStore } from '../../../stores';
import { Title } from '../../ui/Title';
-import { reactTranslator } from '../../../../common/reactTranslator';
+import { translator } from '../../../../common/translator';
import { ExclusionsMode, ExclusionsType } from '../../../../common/exclusionsConstants';
import { isTopLevel } from '../../../../common/utils/url';
+import { Button } from '../../ui/Button';
+import { Exclusion } from '../Exclusion';
-import { ChildrenListItem } from './ChildrenListItem';
import { SubdomainModal } from './SubdomainModal';
import { ResetServiceModal } from './ResetServiceModal';
-import './children-list.pcss';
-
export const ChildrenList = observer(() => {
const { exclusionsStore } = useContext(rootStore);
const { selectedExclusion } = exclusionsStore;
@@ -22,8 +21,8 @@ export const ChildrenList = observer(() => {
}
const subtitle = exclusionsStore.currentMode === ExclusionsMode.Regular
- ? reactTranslator.getMessage('settings_exclusion_group_settings_subtitle_regular_mode')
- : reactTranslator.getMessage('settings_exclusion_group_settings_subtitle_selective_mode');
+ ? translator.getMessage('settings_exclusion_group_settings_subtitle_regular_mode')
+ : translator.getMessage('settings_exclusion_group_settings_subtitle_selective_mode');
const goBackHandler = () => {
exclusionsStore.goBackHandler();
@@ -43,63 +42,41 @@ export const ChildrenList = observer(() => {
const isExclusionsGroup = selectedExclusion.type === ExclusionsType.Group
&& !isTopLevel(selectedExclusion.hostname);
- const renderResetButton = () => {
- return (
- <button
- type="button"
- className="button button--medium button--outline-gray children-list__reset"
- onClick={openResetServiceModal}
- >
- {reactTranslator.getMessage('settings_exclusion_reset_to_default')}
- </button>
- );
- };
-
- const renderAddSubdomainButton = () => {
- return (
- <button
- type="button"
- className="children-list__add-subdomain simple-button"
- onClick={onAddSubdomainClick}
- >
- <svg className="icon icon--button">
- <use xlinkHref="#plus" />
- </svg>
- <div className="children-list__add-subdomain__text">
- {reactTranslator.getMessage('settings_exclusion_add_subdomain')}
- </div>
- </button>
- );
- };
-
- const renderExclusions = () => exclusionsStore.sortedExclusions?.map((exclusion) => {
- if (exclusion) {
- return <ChildrenListItem exclusion={exclusion} key={exclusion.id} />;
- }
- return undefined;
- });
-
return (
<>
- <div className="children-list__title">
- <button className="back-button" type="button" onClick={goBackHandler}>
- <svg className="icon icon--button">
- <use xlinkHref="#back-arrow" />
- </svg>
- </button>
- <div>
- <Title
- title={selectedExclusion.hostname}
- subtitle={subtitle}
- onClick={goBackHandler}
+ <Title
+ title={selectedExclusion.hostname}
+ subtitle={subtitle}
+ onClick={goBackHandler}
+ />
+ {exclusionsStore.sortedExclusions?.map((exclusion) => {
+ return (
+ <Exclusion
+ key={exclusion.id}
+ exclusion={exclusion}
/>
+ );
+ })}
+ {isExclusionsGroup && (
+ <div className="exclusions__add-subdomain">
+ <Button
+ variant="transparent"
+ beforeIconName="plus"
+ onClick={onAddSubdomainClick}
+ >
+ {translator.getMessage('settings_exclusion_add_subdomain')}
+ </Button>
</div>
- </div>
- <div>
- {renderExclusions()}
- </div>
- {isModifiedService && renderResetButton()}
- {isExclusionsGroup && renderAddSubdomainButton()}
+ )}
+ {isModifiedService && (
+ <Button
+ variant="outlined"
+ className="exclusions__reset-default"
+ onClick={openResetServiceModal}
+ >
+ {translator.getMessage('settings_exclusion_reset_to_default')}
+ </Button>
+ )}
<SubdomainModal />
<ResetServiceModal />
</>
diff --git a/src/options/components/Exclusions/ChildrenList/ChildrenListItem/ChildrenListItem.tsx b/src/options/components/Exclusions/ChildrenList/ChildrenListItem/ChildrenListItem.tsx
deleted file mode 100644
index 1e8df8873..000000000
--- a/src/options/components/Exclusions/ChildrenList/ChildrenListItem/ChildrenListItem.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, { useContext } from 'react';
-import { observer } from 'mobx-react';
-
-import classnames from 'classnames';
-
-import { rootStore } from '../../../../stores';
-import { StateCheckbox } from '../../StateCheckbox';
-import { type ExclusionDtoInterface, ExclusionState, ExclusionsType } from '../../../../../common/exclusionsConstants';
-import { reactTranslator } from '../../../../../common/reactTranslator';
-
-import './children-list-item.pcss';
-
-interface ChildrenListItemProps {
- exclusion: ExclusionDtoInterface;
-}
-
-export const ChildrenListItem = observer(({ exclusion }: ChildrenListItemProps) => {
- const { exclusionsStore, notificationsStore } = useContext(rootStore);
- const { selectedExclusion } = exclusionsStore;
-
- const toggleState = () => {
- exclusionsStore.toggleExclusionState(exclusion.id);
- };
-
- const removeExclusion = (exclusion: ExclusionDtoInterface) => async () => {
- const deletedExclusionsCount = await exclusionsStore.removeExclusion(exclusion);
- notificationsStore.notifySuccess(
- reactTranslator.getMessage(
- 'options_exclusions_deleted_exclusions',
- { count: deletedExclusionsCount },
- ),
- {
- action: reactTranslator.getMessage('settings_exclusions_undo'),
- handler: exclusionsStore.restoreExclusions,
- },
- );
- };
-
- const showGroupSettings = (id: string) => () => {
- exclusionsStore.setSelectedExclusionId(id);
- };
-
- const getExclusionStatus = (hostname: string) => {
- if (hostname === selectedExclusion?.hostname) {
- return reactTranslator.getMessage('settings_exclusion_status_domain');
- }
- if (hostname.startsWith('*')) {
- return reactTranslator.getMessage('settings_exclusion_status_all_subdomains');
- }
- return reactTranslator.getMessage('settings_exclusion_status_subdomain');
- };
-
- const wildcardExclusion = `*.${selectedExclusion?.hostname}`;
-
- const exclusionClassNames = (hostname: string) => classnames('children-list-item', {
- 'children-list-item__domains-details': selectedExclusion?.type === ExclusionsType.Group,
- useless: hostname !== selectedExclusion?.hostname
- && !hostname.startsWith(wildcardExclusion)
- && selectedExclusion?.children.some((exclusion) => {
- return exclusion.hostname.startsWith(wildcardExclusion)
- && exclusion.state === ExclusionState.Enabled;
- }),
- });
-
- const renderServiceExclusionItem = () => {
- return (
- <button
- type="button"
- className="children-list-item__service-hostname"
- onClick={showGroupSettings(exclusion.id)}
- >
- {exclusion.hostname}
- <svg className="icon children-list-item__arrow">
- <use xlinkHref="#small-arrow" />
- </svg>
- </button>
- );
- };
-
- const renderGroupExclusionItem = () => {
- return (
- <div className="children-list-item__group-hostname">
- {exclusion.hostname}
- <div className="children-list-item__group-hostname__status">
- {getExclusionStatus(exclusion.hostname)}
- </div>
- </div>
- );
- };
-
- const renderExclusion = () => {
- return selectedExclusion?.type === ExclusionsType.Service
- ? renderServiceExclusionItem()
- : renderGroupExclusionItem();
- };
-
- return (
- <div
- className={exclusionClassNames(exclusion.hostname)}
- key={exclusion.hostname}
- >
- <StateCheckbox
- state={exclusion.state}
- toggleHandler={toggleState}
- />
- {renderExclusion()}
- <button
- type="button"
- className="children-list-item__remove-button"
- onClick={removeExclusion(exclusion)}
- >
- <svg className="children-list-item__remove-button__icon">
- <use xlinkHref="#basket" />
- </svg>
- </button>
- </div>
- );
-});
diff --git a/src/options/components/Exclusions/ChildrenList/ChildrenListItem/children-list-item.pcss b/src/options/components/Exclusions/ChildrenList/ChildrenListItem/children-list-item.pcss
deleted file mode 100644
index a1d59577e..000000000
--- a/src/options/components/Exclusions/ChildrenList/ChildrenListItem/children-list-item.pcss
+++ /dev/null
@@ -1,91 +0,0 @@
-.children-list-item {
- position: relative;
- display: flex;
- align-items: flex-start;
- padding: 8px 0 8px 16px;
- border-radius: 4px;
-
- &__domains-details {
- padding: 8px 0 8px 32px;
-
- &:first-child {
- padding-left: 16px;
- }
- }
-
- &:hover {
- background: var(--grayF3);
-
- & .children-list-item__remove-button {
- visibility: visible;
- }
- }
-
- @media (--tablet) {
- .children-list-item__remove-button {
- visibility: visible;
- }
- }
-
- &__group-hostname {
- font-size: 16px;
- line-height: 19px;
- color: var(--gray-base);
- cursor: default;
- word-break: break-all;
- padding-right: 50px;
-
- &__status {
- font-size: 14px;
- line-height: 16px;
- color: var(--gray88);
- padding-left: 1px;
- margin-top: 8px;
- }
- }
-
- &__service-hostname {
- font-size: 16px;
- line-height: 24px;
- font-weight: 400;
- color: var(--gray-base);
- width: 85%;
- cursor: pointer;
- background: none;
- border: none;
- display: flex;
- padding: 0;
- }
-
- &__arrow {
- width: 24px;
- height: 24px;
- position: absolute;
- top: 10px;
- right: 48px;
- }
-
- &__remove-button {
- position: absolute;
- right: 16px;
- border: none;
- background: none;
- cursor: pointer;
- visibility: hidden;
- padding: 0;
- max-height: 24px;
-
- &:hover {
- filter: brightness(.7);
- }
-
- &__icon {
- width: 24px;
- height: 24px;
- }
- }
-
- &.useless {
- opacity: .5;
- }
-}
diff --git a/src/options/components/Exclusions/ChildrenList/ChildrenListItem/index.ts b/src/options/components/Exclusions/ChildrenList/ChildrenListItem/index.ts
deleted file mode 100644
index 45e3659e8..000000000
--- a/src/options/components/Exclusions/ChildrenList/ChildrenListItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ChildrenListItem } from './ChildrenListItem';
diff --git a/src/options/components/Exclusions/ChildrenList/ResetServiceModal/ResetServiceModal.tsx b/src/options/components/Exclusions/ChildrenList/ResetServiceModal/ResetServiceModal.tsx
index 5fdbaf01f..e0ad0e26b 100644
--- a/src/options/components/Exclusions/ChildrenList/ResetServiceModal/ResetServiceModal.tsx
+++ b/src/options/components/Exclusions/ChildrenList/ResetServiceModal/ResetServiceModal.tsx
@@ -1,13 +1,10 @@
import React, { useContext } from 'react';
import { observer } from 'mobx-react';
-import Modal from 'react-modal';
import { rootStore } from '../../../../stores';
-import { reactTranslator } from '../../../../../common/reactTranslator';
-import { Title } from '../../../ui/Title';
import { translator } from '../../../../../common/translator';
-
-import './reset-service-modal.pcss';
+import { Modal } from '../../../ui/Modal';
+import { Button } from '../../../ui/Button';
export const ResetServiceModal = observer(() => {
const { exclusionsStore } = useContext(rootStore);
@@ -28,45 +25,27 @@ export const ResetServiceModal = observer(() => {
return (
<Modal
- isOpen={exclusionsStore.resetServiceModalOpen}
- className="modal modal-exclusions reset-service-modal"
- overlayClassName="overlay overlay--fullscreen"
- onRequestClose={closeModal}
- >
- <button
- type="button"
- className="button button--icon modal__close-icon"
- onClick={closeModal}
- >
- <svg className="icon icon--button icon--cross">
- <use xlinkHref="#cross" />
- </svg>
- </button>
- <div className="settings__section">
- <Title
- title={translator.getMessage('settings_exclusion_reset_to_default')}
- />
- {reactTranslator.getMessage(
+ title={translator.getMessage('settings_exclusion_reset_to_default')}
+ description={
+ translator.getMessage(
'settings_exclusion_reset_service_confirmation_message',
{ hostname: selectedExclusion.hostname },
- )}
- </div>
- <div className="reset-service-modal__actions">
- <button
- type="button"
- className="button button--large button--outline-gray"
- onClick={closeModal}
- >
- {reactTranslator.getMessage('settings_exclusion_modal_cancel')}
- </button>
- <button
- type="button"
- className="button button--large button--primary"
- onClick={resetServiceData}
- >
- {reactTranslator.getMessage('settings_exclusion_reset_button')}
- </button>
- </div>
- </Modal>
+ )
+ }
+ actions={(
+ <>
+ <Button variant="outlined" onClick={closeModal}>
+ {translator.getMessage('settings_exclusion_modal_cancel')}
+ </Button>
+ <Button onClick={resetServiceData}>
+ {translator.getMessage('settings_exclusion_reset_button')}
+ </Button>
+ </>
+ )}
+ isOpen={exclusionsStore.resetServiceModalOpen}
+ className="exclusions__modal exclusions__modal--empty-body"
+ size="medium"
+ onClose={closeModal}
+ />
);
});
diff --git a/src/options/components/Exclusions/ChildrenList/ResetServiceModal/reset-service-modal.pcss b/src/options/components/Exclusions/ChildrenList/ResetServiceModal/reset-service-modal.pcss
deleted file mode 100644
index 53aab394c..000000000
--- a/src/options/components/Exclusions/ChildrenList/ResetServiceModal/reset-service-modal.pcss
+++ /dev/null
@@ -1,15 +0,0 @@
-.reset-service-modal {
- &__actions {
- margin-top: 35px;
- display: flex;
- gap: 16px;
-
- @media (--mobile) {
- flex-direction: column-reverse;
-
- .button {
- width: 100%;
- }
- }
- }
-}
diff --git a/src/options/components/Exclusions/ChildrenList/SubdomainModal/SubdomainModal.tsx b/src/options/components/Exclusions/ChildrenList/SubdomainModal/SubdomainModal.tsx
index 4223d85b4..7a00e60df 100644
--- a/src/options/components/Exclusions/ChildrenList/SubdomainModal/SubdomainModal.tsx
+++ b/src/options/components/Exclusions/ChildrenList/SubdomainModal/SubdomainModal.tsx
@@ -1,41 +1,48 @@
import React, { useContext, useState } from 'react';
import { observer } from 'mobx-react';
-import { ExclusionsModal } from '../../ExclusionsModal/ExclusionsModal';
import { rootStore } from '../../../../stores';
-import { reactTranslator } from '../../../../../common/reactTranslator';
-
-import './subdomain-modal.pcss';
+import { translator } from '../../../../../common/translator';
+import { Modal } from '../../../ui/Modal';
+import { Button } from '../../../ui/Button';
+import { Input } from '../../../ui/Input';
export const SubdomainModal = observer(() => {
const { exclusionsStore, notificationsStore } = useContext(rootStore);
const [inputValue, setInputValue] = useState('');
+ const [inputError, setInputError] = useState<null | string>(null);
const isOpen = exclusionsStore.addSubdomainModalOpen;
+ const formId = 'add-subdomain-form';
const closeModal = () => {
exclusionsStore.closeAddSubdomainModal();
setInputValue('');
};
- const addSubdomain = async (
- e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>,
- ) => {
+ const handleInputChange = (value: string) => {
+ setInputValue(value);
+ setInputError(null);
+ };
+
+ const addSubdomain = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
+
if (inputValue.includes(' ')) {
- notificationsStore.notifyError(reactTranslator.getMessage('settings_exclusion_invalid_subdomain'));
+ setInputError(translator.getMessage('settings_exclusion_invalid_subdomain'));
return;
}
+
if (inputValue) {
const addedExclusionsCount = await exclusionsStore.addSubdomainToExclusions(inputValue);
notificationsStore.notifySuccess(
- reactTranslator.getMessage(
+ translator.getMessage(
'options_exclusions_added_exclusions',
{ count: addedExclusionsCount },
),
{
- action: reactTranslator.getMessage('settings_exclusions_undo'),
+ action: translator.getMessage('settings_exclusions_undo'),
handler: exclusionsStore.restoreExclusions,
},
);
@@ -45,50 +52,36 @@ export const SubdomainModal = observer(() => {
};
return (
- <ExclusionsModal
+ <Modal
isOpen={isOpen}
- closeModal={closeModal}
- title={reactTranslator.getMessage('settings_exclusion_add_subdomain')}
+ title={translator.getMessage('settings_exclusion_add_subdomain')}
+ actions={(
+ <>
+ <Button variant="outlined" onClick={closeModal}>
+ {translator.getMessage('settings_exclusion_modal_cancel')}
+ </Button>
+ <Button form={formId} type="submit" disabled={!inputValue}>
+ {translator.getMessage('settings_exclusion_add')}
+ </Button>
+ </>
+ )}
+ className="exclusions__modal"
+ size="medium"
+ onClose={closeModal}
>
- <form
- className="subdomain-modal"
- onSubmit={addSubdomain}
- >
- <label className="input">
- <div className="input__label">
- {reactTranslator.getMessage('settings_exclusion_subdomain_name')}
- </div>
- <input
- type="text"
- className="input__in input__in--content input__in--subdomain"
- value={inputValue}
- onChange={(e) => setInputValue(e.target.value)}
- />
- <div
- className="subdomain-modal__hostname"
- title={exclusionsStore.selectedExclusion?.hostname}
- >
- {exclusionsStore.selectedExclusion?.hostname}
- </div>
- </label>
- <div className="subdomain-modal__actions">
- <button
- type="button"
- className="button button--large button--outline-secondary"
- onClick={closeModal}
- >
- {reactTranslator.getMessage('settings_exclusion_modal_cancel')}
- </button>
- <button
- type="button"
- className="button button--large button--primary"
- disabled={!inputValue}
- onClick={addSubdomain}
- >
- {reactTranslator.getMessage('settings_exclusion_add')}
- </button>
- </div>
+ <form id={formId} onSubmit={addSubdomain}>
+ <Input
+ id="subdomain"
+ name="subdomain"
+ label={translator.getMessage('settings_exclusion_subdomain_name')}
+ placeholder="subdomain"
+ required
+ value={inputValue}
+ error={inputError}
+ postfix={`.${exclusionsStore.selectedExclusion?.hostname}`}
+ onChange={handleInputChange}
+ />
</form>
- </ExclusionsModal>
+ </Modal>
);
});
diff --git a/src/options/components/Exclusions/ChildrenList/SubdomainModal/subdomain-modal.pcss b/src/options/components/Exclusions/ChildrenList/SubdomainModal/subdomain-modal.pcss
deleted file mode 100644
index 7a3d64419..000000000
--- a/src/options/components/Exclusions/ChildrenList/SubdomainModal/subdomain-modal.pcss
+++ /dev/null
@@ -1,50 +0,0 @@
-.subdomain-modal {
- margin: 14px 0 0 0;
-
- &__actions {
- margin-top: 24px;
- display: flex;
- gap: 16px;
-
- @media (--mobile) {
- flex-direction: column-reverse;
-
- .button {
- width: 100%;
- }
- }
- }
-
- & label {
- position: relative;
- display: block;
- }
-
- &__hostname {
- position: absolute;
- max-width: 120px;
- overflow: hidden;
- text-overflow: ellipsis;
- text-wrap: nowrap;
- top: 38px;
- right: 16px;
- padding-left: 15px;
- border-left: 1px solid var(--grayD8);
- }
-}
-
-.light-mode {
- .subdomain-modal {
- &__input {
- background-color: var(--grayF7);
- }
- }
-}
-
-.dark-mode {
- .subdomain-modal {
- &__input {
- background-color: #131313;
- }
- }
-}
diff --git a/src/options/components/Exclusions/ChildrenList/children-list.pcss b/src/options/components/Exclusions/ChildrenList/children-list.pcss
deleted file mode 100644
index a20b9b602..000000000
--- a/src/options/components/Exclusions/ChildrenList/children-list.pcss
+++ /dev/null
@@ -1,30 +0,0 @@
-.children-list {
-
- &__title {
- display: flex;
- align-items: flex-start;
- margin: 0 0 16px 16px;
- padding-right: 16px;
-
- & .content__subtitle {
- margin: 0 0 16px 0;
- }
- }
-
- &__add-subdomain {
- cursor: pointer;
- display: flex;
- margin: 16px 0 0 16px;
- padding: 8px 16px;
-
- &__text {
- font-size: 16px;
- line-height: 24px;
- margin-left: 16px;
- }
- }
-
- &__reset {
- margin: 16px 0 0 16px;
- }
-}
diff --git a/src/options/components/Exclusions/Exclusion/Exclusion.tsx b/src/options/components/Exclusions/Exclusion/Exclusion.tsx
new file mode 100644
index 000000000..f11416e96
--- /dev/null
+++ b/src/options/components/Exclusions/Exclusion/Exclusion.tsx
@@ -0,0 +1,181 @@
+import React, { useContext, useState } from 'react';
+import { observer } from 'mobx-react';
+
+import classNames from 'classnames';
+
+import { type ExclusionDtoInterface, ExclusionState, ExclusionsType } from '../../../../common/exclusionsConstants';
+import { translator } from '../../../../common/translator';
+import { rootStore } from '../../../stores';
+import { Icon } from '../../ui/Icon';
+import { SearchHighlighter } from '../Search';
+
+import './exclusion.pcss';
+
+export interface ExclusionProps {
+ exclusion: ExclusionDtoInterface;
+ hasIcon?: boolean;
+}
+
+const ICONS_ORIGIN = 'https://icons.adguardvpn.com';
+
+function getIconUrl(exclusion: ExclusionDtoInterface) {
+ if (exclusion.type === ExclusionsType.Service && exclusion.iconUrl) {
+ return exclusion.iconUrl;
+ }
+
+ if (exclusion.type === ExclusionsType.Group) {
+ return `${ICONS_ORIGIN}/icon?domain=${exclusion.hostname}`;
+ }
+
+ return null;
+}
+
+function getExclusionDescription(hostname: string, exclusion?: ExclusionDtoInterface | null) {
+ if (hostname === exclusion?.hostname) {
+ return translator.getMessage('settings_exclusion_status_domain');
+ }
+ if (hostname.startsWith('*')) {
+ return translator.getMessage('settings_exclusion_status_all_subdomains');
+ }
+ return translator.getMessage('settings_exclusion_status_subdomain');
+}
+
+function isUselessExclusion(hostname: string, exclusion?: ExclusionDtoInterface | null) {
+ const wildcardExclusion = `*.${exclusion?.hostname}`;
+
+ return (
+ hostname !== exclusion?.hostname
+ && !hostname.startsWith(wildcardExclusion)
+ && exclusion?.children.some((exclusion) => {
+ return exclusion.hostname.startsWith(wildcardExclusion)
+ && exclusion.state === ExclusionState.Enabled;
+ })
+ );
+}
+
+export const Exclusion = observer(({
+ exclusion,
+ hasIcon = false,
+}: ExclusionProps) => {
+ const { exclusionsStore, notificationsStore } = useContext(rootStore);
+ const { selectedExclusion } = exclusionsStore;
+
+ const [iconLoaded, setIconLoaded] = useState(false);
+
+ const hasChildren = exclusion.children.length !== 0;
+ const isGroupExclusion = selectedExclusion?.type === ExclusionsType.Group;
+ const isDomain = exclusion.hostname === selectedExclusion?.hostname;
+ const description = getExclusionDescription(exclusion.hostname, selectedExclusion);
+ const isUseless = isUselessExclusion(exclusion.hostname, selectedExclusion);
+
+ const stateMap = {
+ [ExclusionState.Disabled]: {
+ icon: 'checkbox-disabled',
+ className: 'exclusion--disabled',
+ },
+ [ExclusionState.Enabled]: {
+ icon: 'checkbox-enabled',
+ className: 'exclusion--enabled',
+ },
+ [ExclusionState.PartlyEnabled]: {
+ icon: 'checkbox-partly-enabled',
+ className: 'exclusion--partly-enabled',
+ },
+ };
+
+ const classes = classNames(
+ 'exclusion',
+ stateMap[exclusion.state].className,
+ iconLoaded && 'exclusion--icon-loaded',
+ isGroupExclusion && !isDomain && 'exclusion--group',
+ isUseless && 'exclusion--useless',
+ );
+
+ const checkIconName = stateMap[exclusion.state].icon;
+ const iconUrl = getIconUrl(exclusion);
+
+ const handleIconLoaded = () => {
+ setIconLoaded(true);
+ };
+
+ const handleClick = () => {
+ exclusionsStore.toggleExclusionState(exclusion.id);
+ };
+
+ const handleForwardClick = () => {
+ if (!hasChildren) {
+ handleClick();
+ return;
+ }
+
+ exclusionsStore.setSelectedExclusionId(exclusion.id);
+ };
+
+ const handleDeleteClick = async () => {
+ const deletedExclusionsCount = await exclusionsStore.removeExclusion(exclusion);
+ const message = translator.getMessage(
+ 'options_exclusions_deleted_exclusions',
+ { count: deletedExclusionsCount },
+ );
+ notificationsStore.notifySuccess(message, {
+ action: translator.getMessage('settings_exclusions_undo'),
+ handler: () => exclusionsStore.restoreExclusions(),
+ });
+ };
+
+ return (
+ <div className={classes}>
+ <div className="exclusion__wrapper">
+ <button
+ className="exclusion__check has-tab-focus"
+ type="button"
+ onClick={handleClick}
+ >
+ <Icon name={checkIconName} className="exclusion__check-icon" />
+ </button>
+ <button
+ className="exclusion__btn has-tab-focus"
+ type="button"
+ onClick={handleForwardClick}
+ >
+ <span className="exclusion__btn-content">
+ {hasIcon && (
+ <>
+ {iconUrl && (
+ <img
+ src={iconUrl}
+ alt={exclusion.hostname}
+ onLoad={handleIconLoaded}
+ className="exclusion__btn-icon"
+ />
+ )}
+ <Icon name="globe" className="exclusion__btn-globe-icon" />
+ </>
+ )}
+ <span className="exclusion__btn-title text-ellipsis">
+ <SearchHighlighter
+ value={exclusion.hostname}
+ search={exclusionsStore.exclusionsSearchValue}
+ />
+ </span>
+ {hasChildren && (
+ <Icon name="arrow-down" className="exclusion__btn-forward-icon" />
+ )}
+ </span>
+ {isGroupExclusion && description && (
+ <span className="exclusion__btn-description">
+ {description}
+ </span>
+ )}
+ </button>
+ <button
+ className="exclusion__delete has-tab-focus"
+ type="button"
+ onClick={handleDeleteClick}
+ >
+ <Icon name="basket" className="exclusion__delete-icon" />
+ </button>
+ </div>
+ </div>
+ );
+});
diff --git a/src/options/components/Exclusions/Exclusion/exclusion.pcss b/src/options/components/Exclusions/Exclusion/exclusion.pcss
new file mode 100644
index 000000000..fc2e3ec98
--- /dev/null
+++ b/src/options/components/Exclusions/Exclusion/exclusion.pcss
@@ -0,0 +1,152 @@
+.exclusion {
+ &--group {
+ padding-left: 40px;
+
+ &:first-child {
+ padding-left: 0;
+ }
+ }
+
+ &__wrapper {
+ display: flex;
+ align-items: stretch;
+ justify-content: center;
+ background-color: transparent;
+ transition: var(--t3) background-color;
+ border-radius: 8px;
+
+ &:hover,
+ &:focus-within {
+ background-color: var(--fills-backgrounds-page-background-hovered);
+ }
+
+ &:active {
+ background-color: var(--fills-backgrounds-page-background-pressed);
+ }
+ }
+
+ &__btn,
+ &__check,
+ &__delete {
+ outline-offset: -2px;
+ }
+
+ &__btn {
+ flex: 1 1 auto;
+ display: block;
+ text-align: left;
+ padding: 16px 0;
+ overflow: hidden;
+ white-space: nowrap;
+
+ &-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ column-gap: 16px;
+ overflow: hidden;
+ }
+
+ &-description {
+ display: block;
+ color: var(--text-description-description-default);
+ font-size: 14px;
+ line-height: 1.5;
+ }
+
+ &-globe-icon,
+ &-forward-icon {
+ flex-shrink: 0;
+ }
+
+ &-globe-icon {
+ color: var(--stroke-icons-product-icon-default);
+ }
+
+ &-forward-icon {
+ transition: var(--t3) color;
+ transform: rotate(-90deg);
+ }
+
+ &:hover &-forward-icon,
+ &:focus-visible &-forward-icon {
+ color: var(--text-main-text-main-default);
+ }
+
+ .exclusion--icon-loaded &-globe-icon {
+ display: none;
+ }
+
+ &-icon {
+ flex-shrink: 0;
+ width: 24px;
+ height: 24px;
+ object-fit: cover;
+ display: none;
+
+ .exclusion--icon-loaded & {
+ display: inline-block;
+ }
+ }
+
+ &-title {
+ flex: 1 1 auto;
+ color: var(--text-main-text-main-default);
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 1.5;
+ }
+ }
+
+ &__check,
+ &__delete {
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ flex-shrink: 0;
+ padding: 16px;
+ border-radius: 8px;
+
+ &-icon {
+ color: currentColor;
+ }
+ }
+
+ &__check {
+ color: var(--stroke-icons-product-icon-default);
+
+ .exclusion--disabled & {
+ color: var(--stroke-icons-gray-icons-default);
+ }
+
+ .exclusion--useless & {
+ color: var(--stroke-icons-product-icon-disabled);
+ }
+ }
+
+ &:hover,
+ &:active,
+ &:focus-visible,
+ &:focus-within {
+ .exclusion__delete {
+ opacity: 1;
+ }
+ }
+
+ &__delete {
+ color: var(--stroke-icons-gray-icons-default);
+ /* Use opacity instead of display to not cause layout shifts */
+ opacity: 0;
+ transition: var(--t3) color, var(--t3) opacity;
+
+ @media (--touch-screen) {
+ opacity: 1;
+ }
+
+ &:hover,
+ &:active,
+ &:focus-visible {
+ color: var(--stroke-icons-error-icon-default);
+ }
+ }
+}
diff --git a/src/options/components/Exclusions/Exclusion/index.ts b/src/options/components/Exclusions/Exclusion/index.ts
new file mode 100644
index 000000000..bd5fe953f
--- /dev/null
+++ b/src/options/components/Exclusions/Exclusion/index.ts
@@ -0,0 +1 @@
+export { Exclusion } from './Exclusion';
diff --git a/src/options/components/Exclusions/Exclusions.tsx b/src/options/components/Exclusions/Exclusions.tsx
index 2fbab406b..a23ae42a4 100644
--- a/src/options/components/Exclusions/Exclusions.tsx
+++ b/src/options/components/Exclusions/Exclusions.tsx
@@ -4,16 +4,17 @@ import { observer } from 'mobx-react';
import { rootStore } from '../../stores';
import { Title } from '../ui/Title';
import { translator } from '../../../common/translator';
-import { ExclusionsMode } from '../../../common/exclusionsConstants';
import { reactTranslator } from '../../../common/reactTranslator';
+import { ExclusionsMode } from '../../../common/exclusionsConstants';
+import { Icon } from '../ui/Icon';
+import { Button } from '../ui/Button';
import { ModeSelectorModal } from './ModeSelectorModal';
import { Actions } from './Actions';
import { List } from './List';
-import { AddExclusionModal } from './ExclusionsModal/AddExclusionsModal';
-import { ConfirmAddModal } from './ExclusionsModal/ConfirmAddModal';
+import { AddExclusionModal, ConfirmAddModal } from './ExclusionsModal';
import { ChildrenList } from './ChildrenList';
-import { ExclusionsSearch } from './Search/ExclusionsSearch';
+import { ExclusionsSearch } from './Search';
import './exclusions.pcss';
@@ -35,13 +36,11 @@ export const Exclusions = observer(() => {
return (
<button
type="button"
- className="exclusions__mode--link"
+ className="exclusions__mode-btn has-tab-focus"
onClick={openModeSelectorModal}
>
{chunks}
- <svg className="icon icon--pencil">
- <use xlinkHref="#pencil" />
- </svg>
+ <Icon name="pencil" className="exclusions__mode-btn-icon" />
</button>
);
},
@@ -62,8 +61,8 @@ export const Exclusions = observer(() => {
if (exclusionsStore.currentMode === ExclusionsMode.Selective
&& !exclusionsStore.exclusionsTree.children.length) {
return (
- <div className="exclusions__mode--warning">
- {reactTranslator.getMessage('settings_exclusion_selective_mode_warning')}
+ <div className="exclusions__mode-warning">
+ {translator.getMessage('settings_exclusion_selective_mode_warning')}
</div>
);
}
@@ -71,37 +70,30 @@ export const Exclusions = observer(() => {
};
return (
- <div className="settings">
- <div className="exclusions__mode">
- <Title
- title={translator.getMessage('settings_exclusion_title')}
- />
- <div className="exclusions__mode--info">
- {modeInfo}
- </div>
- {renderSelectiveModeWarning()}
- <Actions />
- </div>
- <div className="exclusions__wrapper">
- <div className="exclusions__search">
- <ExclusionsSearch />
- </div>
- <button
- type="button"
- className="exclusions__add-website simple-button"
+ <div className="exclusions">
+ <Title
+ title={translator.getMessage('settings_exclusion_title')}
+ subtitle={(
+ <>
+ {modeInfo}
+ {renderSelectiveModeWarning()}
+ <ExclusionsSearch />
+ </>
+ )}
+ action={<Actions />}
+ />
+ <List />
+ {!exclusionsStore.exclusionsSearchValue && (
+ <Button
+ variant="transparent"
+ beforeIconName="plus"
onClick={onAddExclusionClick}
>
- <svg className="icon icon--button">
- <use xlinkHref="#plus" />
- </svg>
- <div className="exclusions__add-website__label">
- {reactTranslator.getMessage('settings_exclusion_add_website')}
- </div>
- </button>
- <List />
- <AddExclusionModal />
- <ConfirmAddModal />
- </div>
+ {translator.getMessage('settings_exclusion_add_website')}
+ </Button>
+ )}
+ <AddExclusionModal />
+ <ConfirmAddModal />
<ModeSelectorModal />
</div>
);
diff --git a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/AddExclusionModal.tsx b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/AddExclusionModal.tsx
index e10e3c457..8723f3eef 100644
--- a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/AddExclusionModal.tsx
+++ b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/AddExclusionModal.tsx
@@ -3,18 +3,20 @@ import { observer } from 'mobx-react';
import classnames from 'classnames';
-import { ExclusionsModal } from '../ExclusionsModal';
import { rootStore } from '../../../../stores';
import { AddExclusionMode } from '../../../../stores/ExclusionsStore';
-import { reactTranslator } from '../../../../../common/reactTranslator';
+import { translator } from '../../../../../common/translator';
+import { Modal } from '../../../ui/Modal';
+import { Button } from '../../../ui/Button';
-import { ServiceMode } from './ServiceMode/ServiceMode';
-import { ManualMode } from './ManualMode/ManualMode';
+import { SERVICE_FORM_ID, ServiceMode } from './ServiceMode';
+import { MANUAL_FORM_ID, ManualMode } from './ManualMode';
-import '../exclusions-modal.pcss';
+import './add-exclusion-modal.pcss';
export const AddExclusionModal = observer(() => {
const { exclusionsStore } = useContext(rootStore);
+ const { addExclusionMode } = exclusionsStore;
const isOpen = exclusionsStore.addExclusionModalOpen;
@@ -33,50 +35,74 @@ export const AddExclusionModal = observer(() => {
const ModeSelectButtons = {
service: {
classname: classnames(
- 'mode-select-button',
- { enabled: exclusionsStore.addExclusionMode === AddExclusionMode.Service },
+ 'add-exclusion-modal__tabs-item has-tab-focus',
+ addExclusionMode === AddExclusionMode.Service && 'add-exclusion-modal__tabs-item--active',
),
},
manual: {
classname: classnames(
- 'mode-select-button',
- { enabled: exclusionsStore.addExclusionMode === AddExclusionMode.Manual },
+ 'add-exclusion-modal__tabs-item has-tab-focus',
+ addExclusionMode === AddExclusionMode.Manual && 'add-exclusion-modal__tabs-item--active',
),
},
};
const MODE_MAP = {
- [AddExclusionMode.Service]: () => <ServiceMode />,
- [AddExclusionMode.Manual]: () => <ManualMode />,
+ [AddExclusionMode.Service]: {
+ formId: SERVICE_FORM_ID,
+ btnText: translator.getMessage('settings_exclusion_modal_save'),
+ btnDisabled: !exclusionsStore.servicesToToggle.length,
+ content: () => <ServiceMode />,
+ },
+ [AddExclusionMode.Manual]: {
+ formId: MANUAL_FORM_ID,
+ btnText: translator.getMessage('settings_exclusion_add_manually_add'),
+ btnDisabled: false,
+ content: () => <ManualMode />,
+ },
};
- const mode = MODE_MAP[exclusionsStore.addExclusionMode];
+ const mode = MODE_MAP[addExclusionMode];
return (
- <ExclusionsModal
+ <Modal
isOpen={isOpen}
- closeModal={onClose}
- title={reactTranslator.getMessage('settings_exclusion_add_website')}
+ title={translator.getMessage('settings_exclusion_add_website')}
+ actions={(
+ <>
+ <Button variant="outlined" onClick={onClose}>
+ {translator.getMessage('settings_exclusion_modal_cancel')}
+ </Button>
+ <Button form={mode.formId} type="submit" disabled={mode.btnDisabled}>
+ {mode.btnText}
+ </Button>
+ </>
+ )}
+ className="exclusions__modal add-exclusion-modal"
+ size="medium"
+ onClose={onClose}
>
- <div className="modal__mode-selectors">
+ <div className="add-exclusion-modal__tabs">
<button
onClick={onServiceModeClick}
type="button"
className={ModeSelectButtons.service.classname}
>
- {reactTranslator.getMessage('settings_exclusion_add_from_list')}
+ <span className="add-exclusion-modal__tabs-item-text text-ellipsis">
+ {translator.getMessage('settings_exclusion_add_from_list')}
+ </span>
</button>
<button
onClick={onManualModeClick}
type="button"
className={ModeSelectButtons.manual.classname}
>
- {reactTranslator.getMessage('settings_exclusion_add_manually')}
+ <span className="add-exclusion-modal__tabs-item-text text-ellipsis">
+ {translator.getMessage('settings_exclusion_add_manually')}
+ </span>
</button>
</div>
- <div className="modal__mode">
- {mode()}
- </div>
- </ExclusionsModal>
+ {mode.content()}
+ </Modal>
);
});
diff --git a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ManualMode/ManualMode.tsx b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ManualMode/ManualMode.tsx
index 2cd2b439d..e7709fc3d 100644
--- a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ManualMode/ManualMode.tsx
+++ b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ManualMode/ManualMode.tsx
@@ -1,10 +1,13 @@
import React, { useContext, useState } from 'react';
import { rootStore } from '../../../../../stores';
-import { reactTranslator } from '../../../../../../common/reactTranslator';
+import { translator } from '../../../../../../common/translator';
+import { Input } from '../../../../ui/Input';
import './manual-mode.pcss';
+export const MANUAL_FORM_ID = 'add-exclusion-form-manual';
+
export const ManualMode = () => {
const { exclusionsStore, notificationsStore } = useContext(rootStore);
@@ -14,20 +17,18 @@ export const ManualMode = () => {
exclusionsStore.closeAddExclusionModal();
};
- const addUrl = async (
- e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>,
- ) => {
+ const addUrl = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (exclusionsStore.validateUrl(inputValue)) {
const addedExclusionsCount = await exclusionsStore.addUrlToExclusions(inputValue);
notificationsStore.notifySuccess(
- reactTranslator.getMessage(
+ translator.getMessage(
'options_exclusions_added_exclusions',
{ count: addedExclusionsCount },
),
{
- action: reactTranslator.getMessage('settings_exclusions_undo'),
+ action: translator.getMessage('settings_exclusions_undo'),
handler: exclusionsStore.restoreExclusions,
},
);
@@ -40,48 +41,19 @@ export const ManualMode = () => {
return (
<form
+ id={MANUAL_FORM_ID}
className="manual-mode"
onSubmit={addUrl}
>
- <div className="input__label">
- {reactTranslator.getMessage('settings_exclusion_domain_name')}
- </div>
- <label className="input">
- <input
- type="text"
- className="input__in input__in--content input__in--clear"
- value={inputValue}
- onChange={(e) => setInputValue(e.target.value)}
- />
- {inputValue.length > 0 && (
- <button
- type="button"
- className="button input__clear"
- onClick={() => { setInputValue(''); }}
- >
- <svg className="icon icon--button icon--cross">
- <use xlinkHref="#cross" />
- </svg>
- </button>
- )}
- </label>
- <div className="manual-mode__actions">
- <button
- type="button"
- className="button button--large button--outline-secondary"
- onClick={closeExclusionModal}
- >
- {reactTranslator.getMessage('settings_exclusion_modal_cancel')}
- </button>
- <button
- type="button"
- className="button button--large button--primary"
- onClick={addUrl}
- disabled={!inputValue}
- >
- {reactTranslator.getMessage('settings_exclusion_add_manually_add')}
- </button>
- </div>
+ <Input
+ id="domain"
+ name="domain"
+ label={translator.getMessage('settings_exclusion_domain_name')}
+ placeholder="example.org"
+ required
+ value={inputValue}
+ onChange={setInputValue}
+ />
</form>
);
};
diff --git a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ManualMode/index.ts b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ManualMode/index.ts
new file mode 100644
index 000000000..49f2829a5
--- /dev/null
+++ b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ManualMode/index.ts
@@ -0,0 +1 @@
+export { ManualMode, MANUAL_FORM_ID } from './ManualMode';
diff --git a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ManualMode/manual-mode.pcss b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ManualMode/manual-mode.pcss
index c69f2a39e..9bf78f5ae 100644
--- a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ManualMode/manual-mode.pcss
+++ b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ManualMode/manual-mode.pcss
@@ -1,21 +1,4 @@
.manual-mode {
- text-align: left;
- height: 315px;
-
- &__actions {
- position: absolute;
- right: 32px;
- left: 32px;
- bottom: 30px;
- display: flex;
- gap: 16px;
-
- @media (--mobile) {
- flex-direction: column-reverse;
-
- .button {
- width: 100%;
- }
- }
- }
-}
+ /* To match height of service mode */
+ height: 320px;
+}
\ No newline at end of file
diff --git a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServiceCategory.tsx b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServiceCategory.tsx
index 78347a5fb..7593e170a 100644
--- a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServiceCategory.tsx
+++ b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServiceCategory.tsx
@@ -6,11 +6,10 @@ import cn from 'classnames';
import { rootStore } from '../../../../../stores';
import { type PreparedServiceCategory } from '../../../../../stores/ExclusionsStore';
import { containsIgnoreCase } from '../../../Search/SearchHighlighter/helpers';
+import { Icon } from '../../../../ui/Icon';
import { ServiceRow } from './ServiceRow';
-import s from './service-category.module.pcss';
-
export interface ServiceCategoryProps {
category: PreparedServiceCategory;
}
@@ -39,15 +38,10 @@ export const ServiceCategory = observer(({
const unfoldCategory = exclusionsStore.unfoldAllServiceCategories
|| exclusionsStore.unfoldedServiceCategories.some((id) => id === category.id);
- const categoryClassname = cn('category', {
- category__unfolded: unfoldCategory,
- category__folded: !unfoldCategory,
- });
-
- const categoryServicesClassname = cn('category__services', {
- [s.show]: unfoldCategory,
- [s.hide]: !unfoldCategory,
- });
+ const categoryClassname = cn(
+ 'service-mode-category',
+ unfoldCategory && 'service-mode-category--active',
+ );
if (filteredServices.length === 0) {
return null;
@@ -56,21 +50,19 @@ export const ServiceCategory = observer(({
return (
<div className={categoryClassname}>
<button
+ className="service-mode-category__btn has-tab-focus"
type="button"
- className="category__title"
onClick={handleClickOnCategory}
>
- <svg className="icon icon--button category__title__arrow">
- <use xlinkHref="#arrow" />
- </svg>
- {category.name}
+ <Icon name="arrow-down" className="service-mode-category__btn-icon" />
+ <span className="text-ellipsis">
+ {category.name}
+ </span>
</button>
- <div className={categoryServicesClassname}>
- {
- filteredServices.map((service) => {
- return (<ServiceRow key={service.serviceId} service={service} />);
- })
- }
+ <div className="service-mode-category__services">
+ {filteredServices.map((service) => {
+ return (<ServiceRow key={service.serviceId} service={service} />);
+ })}
</div>
</div>
);
diff --git a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServiceMode.tsx b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServiceMode.tsx
index 3a875e205..50a66e4ec 100644
--- a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServiceMode.tsx
+++ b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServiceMode.tsx
@@ -2,13 +2,15 @@ import React, { useContext } from 'react';
import { observer } from 'mobx-react';
import { rootStore } from '../../../../../stores';
-import { ServicesSearch } from '../../../Search/ServicesSearch';
-import { reactTranslator } from '../../../../../../common/reactTranslator';
+import { ServicesSearch } from '../../../Search';
+import { translator } from '../../../../../../common/translator';
import { ServicesList } from './ServicesList';
import './service-mode.pcss';
+export const SERVICE_FORM_ID = 'add-exclusion-form-service';
+
export const ServiceMode = observer(() => {
const { exclusionsStore, notificationsStore } = useContext(rootStore);
@@ -16,22 +18,24 @@ export const ServiceMode = observer(() => {
exclusionsStore.closeAddExclusionModal();
};
- const handleSaveServices = async () => {
+ const handleSaveServices = async (e: React.FormEvent<HTMLFormElement>) => {
+ e.preventDefault();
+
const toggleServicesResult = await exclusionsStore.toggleServices();
const { added, deleted } = toggleServicesResult;
const addedExclusionsMessage = added
- ? reactTranslator.getMessage('options_exclusions_added_exclusions', { count: added })
+ ? translator.getMessage('options_exclusions_added_exclusions', { count: added })
: '';
const deletedExclusionsMessage = deleted
- ? reactTranslator.getMessage('options_exclusions_deleted_exclusions', { count: deleted })
+ ? translator.getMessage('options_exclusions_deleted_exclusions', { count: deleted })
: '';
notificationsStore.notifySuccess(
`${addedExclusionsMessage} ${deletedExclusionsMessage}`,
{
- action: reactTranslator.getMessage('settings_exclusions_undo'),
+ action: translator.getMessage('settings_exclusions_undo'),
handler: exclusionsStore.restoreExclusions,
},
);
@@ -40,26 +44,13 @@ export const ServiceMode = observer(() => {
};
return (
- <div className="service-mode">
+ <form
+ id={SERVICE_FORM_ID}
+ className="service-mode"
+ onSubmit={handleSaveServices}
+ >
<ServicesSearch />
<ServicesList />
- <div className="service-mode__actions">
- <button
- type="button"
- className="button button--large button--outline-secondary"
- onClick={closeModal}
- >
- {reactTranslator.getMessage('settings_exclusion_modal_cancel')}
- </button>
- <button
- type="button"
- className="button button--large button--primary"
- disabled={!exclusionsStore.servicesToToggle.length}
- onClick={handleSaveServices}
- >
- {reactTranslator.getMessage('settings_exclusion_modal_save')}
- </button>
- </div>
- </div>
+ </form>
);
});
diff --git a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServiceRow.tsx b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServiceRow.tsx
index be9bf7f01..e71cb564e 100644
--- a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServiceRow.tsx
+++ b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServiceRow.tsx
@@ -1,12 +1,12 @@
import React, { useContext } from 'react';
import { observer } from 'mobx-react';
+import classNames from 'classnames';
+
import { rootStore } from '../../../../../stores';
import { ExclusionState, type ServiceDto } from '../../../../../../common/exclusionsConstants';
import { SearchHighlighter } from '../../../Search/SearchHighlighter';
-import { reactTranslator } from '../../../../../../common/reactTranslator';
-
-import './service-mode.pcss';
+import { translator } from '../../../../../../common/translator';
/**
* Returns true if service can be added, and returns false if service can be removed
@@ -40,43 +40,39 @@ export const ServiceRow = observer(({ service }: ServiceRowProps) => {
exclusionsStore.addToServicesToToggle(service.serviceId);
};
- const buttonsMap = {
- add: () => (
- <button
- type="button"
- className="simple-button"
- onClick={addService}
- >
- {reactTranslator.getMessage('settings_exclusion_add')}
- </button>
- ),
- remove: () => (
- <button
- type="button"
- className="simple-button service-row__actions__remove"
- onClick={removeService}
- >
- {reactTranslator.getMessage('settings_exclusion_modal_remove')}
- </button>
- ),
- };
-
const serviceCanBeAdded = canAddService(service, exclusionsStore.servicesToToggle);
- const actionButton = serviceCanBeAdded ? buttonsMap.add() : buttonsMap.remove();
+ const classes = classNames(
+ 'service-mode-item has-tab-focus',
+ !serviceCanBeAdded && 'service-mode-item--active',
+ );
+
+ const buttonText = serviceCanBeAdded
+ ? translator.getMessage('settings_exclusion_add')
+ : translator.getMessage('settings_exclusion_modal_remove');
+
+ const clickHandler = serviceCanBeAdded ? addService : removeService;
return (
- <div className="service-row">
- <img className="service-row__icon" src={service.iconUrl} alt={service.serviceName} />
- <div className="service-row__title">
+ <button
+ type="button"
+ className={classes}
+ onClick={clickHandler}
+ >
+ <img
+ className="service-mode-item__img"
+ src={service.iconUrl}
+ alt={service.serviceName}
+ />
+ <div className="service-mode-item__title text-ellipsis">
<SearchHighlighter
value={service.serviceName}
search={exclusionsStore.servicesSearchValue}
/>
</div>
- <div className="service-row__actions">
- {actionButton}
+ <div className="service-mode-item__action">
+ {buttonText}
</div>
- </div>
+ </button>
);
});
diff --git a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServicesList.tsx b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServicesList.tsx
index c01bec86c..65894aa2e 100644
--- a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServicesList.tsx
+++ b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/ServicesList.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
import { observer } from 'mobx-react';
import { rootStore } from '../../../../../stores';
-import { reactTranslator } from '../../../../../../common/reactTranslator';
+import { translator } from '../../../../../../common/translator';
import { ServiceCategory } from './ServiceCategory';
@@ -11,32 +11,37 @@ export const ServicesList = observer(() => {
const { categories } = exclusionsStore.preparedServicesData;
+ let content: React.ReactNode;
if (!Object.keys(categories).length) {
- return (
- <div className="services-list__connection-problem">
- {reactTranslator.getMessage('settings_exclusion_connection_problem')}
+ content = (
+ <div className="service-mode-list__empty">
+ {translator.getMessage('settings_exclusion_connection_problem')}
</div>
);
- }
-
- if (exclusionsStore.isServicesSearchEmpty) {
- return (
- <div className="search__nothing-found">
- {reactTranslator.getMessage('settings_exclusion_nothing_found')}
+ } else if (exclusionsStore.isServicesSearchEmpty) {
+ content = (
+ <div className="service-mode-list__empty">
+ {translator.getMessage('settings_exclusion_nothing_found')}
+ </div>
+ );
+ } else {
+ content = (
+ <div className="service-mode-list">
+ {Object.values(categories).map((category) => {
+ return (
+ <ServiceCategory
+ key={category.id}
+ category={category}
+ />
+ );
+ })}
</div>
);
}
return (
- <ul className="services-list">
- {Object.values(categories).map((category) => {
- return (
- <ServiceCategory
- key={category.id}
- category={category}
- />
- );
- })}
- </ul>
+ <div className="service-mode__content">
+ {content}
+ </div>
);
});
diff --git a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/index.ts b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/index.ts
new file mode 100644
index 000000000..04c6065c9
--- /dev/null
+++ b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/index.ts
@@ -0,0 +1 @@
+export { ServiceMode, SERVICE_FORM_ID } from './ServiceMode';
diff --git a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/service-category.module.pcss b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/service-category.module.pcss
deleted file mode 100644
index f50e89865..000000000
--- a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/service-category.module.pcss
+++ /dev/null
@@ -1,7 +0,0 @@
-.show {
- display: block;
-}
-
-.hide {
- display: none;
-}
diff --git a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/service-mode.pcss b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/service-mode.pcss
index 4ab0ea39b..d4d3e6900 100644
--- a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/service-mode.pcss
+++ b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/ServiceMode/service-mode.pcss
@@ -1,118 +1,115 @@
.service-mode {
+ display: flex;
+ flex-direction: column;
+ /* To match height of manual mode in case if searching is active */
+ min-height: 320px;
- &__actions {
- position: absolute;
- right: 32px;
- left: 32px;
- bottom: 30px;
- display: flex;
- gap: 16px;
+ &__search {
+ padding: 8px 0;
+ }
- @media (--mobile) {
- flex-direction: column-reverse;
+ &__content {
+ flex: 1 1 auto;
+ }
- .button {
- width: 100%;
- }
+ &-list {
+ &__empty {
+ text-align: center;
+ margin: 50px 0;
+ color: var(--text-description-description-default);
}
}
-}
-
-.services-list {
- margin-top: 20px;
- max-height: 180px;
- overflow-y: auto;
- scrollbar-width: thin;
- &__connection-problem {
- text-align: center;
- margin-top: 100px;
- }
-}
+ &-category {
+ &__btn {
+ width: 100%;
+ padding: 16px;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ column-gap: 16px;
+ transition: var(--t3) background-color;
+ color: var(--text-main-text-main-default);
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 1.5;
+ outline-offset: -2px;
-.category {
- cursor: pointer;
+ &:hover,
+ &:focus-visible {
+ background-color: var(--fills-backgrounds-page-background-hovered);
+ }
- &__title {
- padding: 8px 16px;
- font-size: 16px;
- line-height: 19px;
- font-weight: 400;
- display: flex;
- background: none;
- border: none;
+ &:active {
+ background-color: var(--fills-backgrounds-page-background-pressed);
+ }
- &__arrow {
- margin-right: 8px;
- }
- }
+ &-icon {
+ transition: var(--t3) transform;
+ transform: rotate(-90deg);
- &__unfolded {
- & .icon {
- transform: rotate(90deg);
+ .service-mode-category--active & {
+ transform: rotate(0);
+ }
+ }
}
- }
- &__services {
- background: var(--grayF3);
- padding: 5px 10px;
- border-radius: 5px;
- cursor: default;
+ &__services {
+ display: none;
- @media (prefers-color-scheme: dark) {
- background-color: #131313;
+ .service-mode-category--active & {
+ display: block;
+ }
}
}
-}
-.service-row {
- display: flex;
- align-content: center;
- padding: 8px;
- position: relative;
- cursor: default;
-
- &__title {
- font-size: 16px;
- margin-left: 12px;
- }
+ &-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ column-gap: 16px;
+ padding: 16px;
+ width: 100%;
+ border-radius: 8px;
+ transition: var(--t3) background-color;
+ outline-offset: -2px;
+
+ &:hover,
+ &:focus-visible {
+ background-color: var(--fills-backgrounds-page-background-hovered);
+ }
- &__icon {
- width: 24px;
- height: 24px;
- position: relative;
- overflow: hidden;
- }
+ &:active {
+ background-color: var(--fills-backgrounds-page-background-pressed);
+ }
- &__actions {
- margin-left: auto;
+ &__img {
+ flex-shrink: 0;
+ width: 24px;
+ height: 24px;
+ object-fit: cover;
+ }
- & .simple-button {
+ &__title {
+ text-align: left;
+ flex: 1 1 auto;
font-size: 16px;
+ font-weight: 600;
+ line-height: 1.5;
+ color: var(--text-main-text-main-default);
}
- &__remove {
- color: var(--gray88);
+ &__action {
+ flex-shrink: 0;
+ color: var(--text-links-link-default);
+ text-align: right;
+ font-size: 16px;
+ transition: var(--t3) color;
- &:hover {
- color: var(--gray-base);
+ .service-mode-item--active & {
+ color: var(--text-main-text-main-default);
}
}
}
}
-
-.light-mode {
- .category {
- &__services {
- background: var(--grayF3);
- }
- }
-}
-
-.dark-mode {
- .category {
- &__services {
- background-color: #131313;
- }
- }
-}
diff --git a/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/add-exclusion-modal.pcss b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/add-exclusion-modal.pcss
new file mode 100644
index 000000000..776e009c4
--- /dev/null
+++ b/src/options/components/Exclusions/ExclusionsModal/AddExclusionsModal/add-exclusion-modal.pcss
@@ -0,0 +1,63 @@
+.add-exclusion-modal {
+ .modal__wrapper {
+ flex: 1 1 auto;
+ max-height: 400px;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ scrollbar-width: thin;
+ }
+
+ .modal__header {
+ padding-bottom: 16px;
+ }
+
+ .modal__actions {
+ padding-top: 14px;
+ }
+
+ &__tabs {
+ display: flex;
+ column-gap: 8px;
+ align-items: flex-start;
+ justify-content: flex-start;
+ margin: 16px 0 24px;
+
+ &-item {
+ padding: 8px 16px;
+ border-radius: 8px;
+ font-size: 16px;
+ line-height: 1.5;
+ outline-offset: -2px;
+ transition: var(--t3) color, var(--t3) background-color;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover,
+ &:focus-visible {
+ background-color: var(--fills-backgrounds-page-background-hovered);
+ }
+
+ &:active {
+ background-color: var(--fills-backgrounds-page-background-pressed);
+ }
+
+ &--active {
+ &,
+ &:hover,
+ &:focus-visible,
+ &:active {
+ color: var(--gray-0);
+ background: var(--gray-80);
+ }
+ }
+
+ &-text {
+ width: 100%;
+ text-align: left;
+ }
+ }
+ }
+}
diff --git a/src/options/components/Exclusions/ExclusionsModal/ConfirmAddModal/ConfirmAddModal.tsx b/src/options/components/Exclusions/ExclusionsModal/ConfirmAddModal/ConfirmAddModal.tsx
index 2427de7a0..b13bc53cc 100644
--- a/src/options/components/Exclusions/ExclusionsModal/ConfirmAddModal/ConfirmAddModal.tsx
+++ b/src/options/components/Exclusions/ExclusionsModal/ConfirmAddModal/ConfirmAddModal.tsx
@@ -1,12 +1,10 @@
import React, { useContext } from 'react';
-import Modal from 'react-modal';
import { observer } from 'mobx-react';
-import { Title } from '../../../ui/Title';
import { rootStore } from '../../../../stores';
-import { reactTranslator } from '../../../../../common/reactTranslator';
-
-import './confirm-add-modal.pcss';
+import { translator } from '../../../../../common/translator';
+import { Modal } from '../../../ui/Modal';
+import { Button } from '../../../ui/Button';
export const ConfirmAddModal = observer(() => {
const { exclusionsStore, notificationsStore } = useContext(rootStore);
@@ -20,12 +18,12 @@ export const ConfirmAddModal = observer(() => {
if (urlToConfirm) {
const addedExclusionsCount = await exclusionsStore.addUrlToExclusions(urlToConfirm);
notificationsStore.notifySuccess(
- reactTranslator.getMessage(
+ translator.getMessage(
'options_exclusions_added_exclusions',
{ count: addedExclusionsCount },
),
{
- action: reactTranslator.getMessage('settings_exclusions_undo'),
+ action: translator.getMessage('settings_exclusions_undo'),
handler: exclusionsStore.restoreExclusions,
},
);
@@ -35,44 +33,22 @@ export const ConfirmAddModal = observer(() => {
return (
<Modal
+ title={translator.getMessage('settings_exclusion_add_website')}
+ description={translator.getMessage('settings_exclusions_add_invalid_domain', { url: urlToConfirm })}
+ actions={(
+ <>
+ <Button variant="outlined" onClick={closeModal}>
+ {translator.getMessage('settings_exclusion_modal_cancel')}
+ </Button>
+ <Button onClick={confirmAddUrl}>
+ {translator.getMessage('settings_exclusion_add')}
+ </Button>
+ </>
+ )}
isOpen={confirmAddModalOpen}
- className="modal modal-exclusions confirm-add-modal"
- overlayClassName="overlay overlay--fullscreen"
- onRequestClose={closeModal}
- >
- <button
- type="button"
- className="button button--icon modal__close-icon"
- onClick={closeModal}
- >
- <svg className="icon icon--button icon--cross">
- <use xlinkHref="#cross" />
- </svg>
- </button>
- <div className="settings__section">
- <Title
- title={reactTranslator.getMessage('settings_exclusion_add_website')}
- />
- <div className="confirm-add-modal__message">
- {reactTranslator.getMessage('settings_exclusions_add_invalid_domain', { url: urlToConfirm })}
- </div>
- </div>
- <div className="confirm-add-modal__actions">
- <button
- type="button"
- className="button button--large button--outline-gray"
- onClick={closeModal}
- >
- {reactTranslator.getMessage('settings_exclusion_modal_cancel')}
- </button>
- <button
- type="button"
- className="button button--large button--primary"
- onClick={confirmAddUrl}
- >
- {reactTranslator.getMessage('settings_exclusion_add')}
- </button>
- </div>
- </Modal>
+ className="exclusions__modal exclusions__modal--empty-body"
+ size="medium"
+ onClose={closeModal}
+ />
);
});
diff --git a/src/options/components/Exclusions/ExclusionsModal/ConfirmAddModal/confirm-add-modal.pcss b/src/options/components/Exclusions/ExclusionsModal/ConfirmAddModal/confirm-add-modal.pcss
deleted file mode 100644
index 4c45d53f1..000000000
--- a/src/options/components/Exclusions/ExclusionsModal/ConfirmAddModal/confirm-add-modal.pcss
+++ /dev/null
@@ -1,22 +0,0 @@
-.confirm-add-modal {
- min-height: initial !important;
-
- &__message {
- max-width: 420px;
- margin-bottom: 24px;
- word-break: break-word;
- }
-
- &__actions {
- display: flex;
- gap: 16px;
-
- @media (--mobile) {
- flex-direction: column-reverse;
-
- .button {
- width: 100%;
- }
- }
- }
-}
diff --git a/src/options/components/Exclusions/ExclusionsModal/ExclusionsModal.tsx b/src/options/components/Exclusions/ExclusionsModal/ExclusionsModal.tsx
deleted file mode 100644
index 6bada1ffb..000000000
--- a/src/options/components/Exclusions/ExclusionsModal/ExclusionsModal.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import Modal from 'react-modal';
-
-import './exclusions-modal.pcss';
-
-interface ExclusionsModalProps {
- isOpen: boolean,
- closeModal: () => void,
- title?: React.ReactNode,
- description?: string | React.ReactNode,
- children?: React.ReactNode,
-}
-
-export const ExclusionsModal = ({
- isOpen,
- closeModal,
- title,
- description,
- children,
-}: ExclusionsModalProps) => {
- return (
- <Modal
- isOpen={isOpen}
- className="modal modal-exclusions"
- overlayClassName="overlay overlay--fullscreen"
- onRequestClose={closeModal}
- >
- <button
- type="button"
- className="button button--icon checkbox__button modal__close-icon"
- onClick={closeModal}
- >
- <svg className="icon icon--button icon--cross">
- <use xlinkHref="#cross" />
- </svg>
- </button>
- {
- title && <div className="modal__title">{title}</div>
- }
- {
- description && <div className="modal__description">{description}</div>
- }
- {children}
- </Modal>
- );
-};
diff --git a/src/options/components/Exclusions/ExclusionsModal/exclusions-modal.pcss b/src/options/components/Exclusions/ExclusionsModal/exclusions-modal.pcss
deleted file mode 100644
index 82f00a2a7..000000000
--- a/src/options/components/Exclusions/ExclusionsModal/exclusions-modal.pcss
+++ /dev/null
@@ -1,39 +0,0 @@
-.modal {
- &__mode-selectors {
- margin: 8px 0 24px;
- }
-
- &__mode {
- height: 320px;
-
- @media (--mobile) {
- /* TODO: Hardcoded value, remove after re-design (AG-38059) */
- height: 392px;
- }
- }
-
- & .content__title {
- margin: 0 8px 8px 0;
- padding-left: 0;
- }
-
- & .content__subtitle {
- margin: 0 0 24px 0;
- }
-}
-
-.mode-select-button {
- color: var(--gray-base);
- border: none;
- background: none;
- padding: 8px 16px;
- border-radius: 4px;
- font-size: 16px;
- line-height: 19px;
- cursor: pointer;
-
- &.enabled {
- color: var(--grayF3);
- background-color: var(--gray-base);
- }
-}
diff --git a/src/options/components/Exclusions/ExclusionsModal/index.ts b/src/options/components/Exclusions/ExclusionsModal/index.ts
new file mode 100644
index 000000000..a4c344455
--- /dev/null
+++ b/src/options/components/Exclusions/ExclusionsModal/index.ts
@@ -0,0 +1,2 @@
+export { AddExclusionModal } from './AddExclusionsModal';
+export { ConfirmAddModal } from './ConfirmAddModal';
diff --git a/src/options/components/Exclusions/List/List.tsx b/src/options/components/Exclusions/List/List.tsx
index a89478d3d..7dca8b617 100644
--- a/src/options/components/Exclusions/List/List.tsx
+++ b/src/options/components/Exclusions/List/List.tsx
@@ -2,32 +2,31 @@ import React, { useContext } from 'react';
import { observer } from 'mobx-react';
import { rootStore } from '../../../stores';
-import { reactTranslator } from '../../../../common/reactTranslator';
+import { translator } from '../../../../common/translator';
import { type ExclusionDtoInterface } from '../../../../common/exclusionsConstants';
import { Loader } from '../Loader';
-
-import { ListItem } from './ListItem';
+import { Exclusion } from '../Exclusion';
export const List = observer(() => {
const { exclusionsStore } = useContext(rootStore);
if (exclusionsStore.exclusionsSearchValue && !exclusionsStore.preparedExclusions.length) {
return (
- <div className="search__nothing-found">
- {reactTranslator.getMessage('settings_exclusion_nothing_found')}
+ <div className="exclusions__empty">
+ {translator.getMessage('settings_exclusion_nothing_found')}
</div>
);
}
return (
<div className="loader__container">
- <ul>
- {
- exclusionsStore.preparedExclusions.map((exclusion: ExclusionDtoInterface) => (
- <ListItem exclusion={exclusion} key={exclusion.id} />
- ))
- }
- </ul>
+ {exclusionsStore.preparedExclusions.map((exclusion: ExclusionDtoInterface) => (
+ <Exclusion
+ key={exclusion.id}
+ exclusion={exclusion}
+ hasIcon
+ />
+ ))}
<Loader />
</div>
);
diff --git a/src/options/components/Exclusions/List/ListItem/ListItem.tsx b/src/options/components/Exclusions/List/ListItem/ListItem.tsx
deleted file mode 100644
index 7398e42b5..000000000
--- a/src/options/components/Exclusions/List/ListItem/ListItem.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, { useContext, useRef, useEffect } from 'react';
-import { observer } from 'mobx-react';
-
-import cn from 'classnames';
-
-import { ExclusionsType, type ExclusionDtoInterface } from '../../../../../common/exclusionsConstants';
-import { StateCheckbox } from '../../StateCheckbox';
-import { rootStore } from '../../../../stores';
-import { SearchHighlighter } from '../../Search/SearchHighlighter';
-import { reactTranslator } from '../../../../../common/reactTranslator';
-
-import './list-item.pcss';
-
-const ICON_FOR_DOMAIN = 'https://icons.adguardvpn.com/icon?domain=';
-
-interface ListItemProps {
- exclusion: ExclusionDtoInterface;
-}
-
-export const ListItem = observer(({ exclusion }: ListItemProps) => {
- const { exclusionsStore, notificationsStore } = useContext(rootStore);
-
- const icon = useRef<HTMLImageElement>(null);
-
- const removeExclusion = (exclusion: ExclusionDtoInterface) => async () => {
- const deletedExclusionsCount = await exclusionsStore.removeExclusion(exclusion);
- notificationsStore.notifySuccess(reactTranslator.getMessage(
- 'options_exclusions_deleted_exclusions',
- { count: deletedExclusionsCount },
- ), {
- action: reactTranslator.getMessage('settings_exclusions_undo'),
- handler: exclusionsStore.restoreExclusions,
- });
- };
-
- const toggleState = () => {
- exclusionsStore.toggleExclusionState(exclusion.id);
- };
-
- const followToChildren = (exclusion: ExclusionDtoInterface) => () => {
- if (exclusion.children.length === 0) {
- return;
- }
- exclusionsStore.setSelectedExclusionId(exclusion.id);
- };
-
- const listIndexTitleClasses = (hasChildren: boolean) => cn('list-item__title', {
- 'ip-title': !hasChildren,
- });
-
- useEffect(() => {
- if (icon.current && exclusion.type === ExclusionsType.Service && exclusion.iconUrl) {
- icon.current.onerror = () => {
- if (icon.current) {
- icon.current.src = './assets/images/ip-icon.svg';
- }
- };
- icon.current.src = exclusion.iconUrl;
- }
-
- if (exclusion.type === ExclusionsType.Group) {
- const preloadedIcon = new Image();
- preloadedIcon.src = `${ICON_FOR_DOMAIN}${exclusion.hostname}`;
- preloadedIcon.onload = () => {
- if (icon.current) {
- icon.current.src = preloadedIcon.src;
- }
- };
- }
- });
-
- return (
- <li
- key={exclusion.id}
- className="list-item"
- >
- <StateCheckbox
- state={exclusion.state}
- toggleHandler={toggleState}
- extraClassName="state-checkbox__list-item"
- />
- <button
- type="button"
- className={listIndexTitleClasses(exclusion.children.length > 0)}
- onClick={followToChildren(exclusion)}
- >
- <img
- src="./assets/images/ip-icon.svg"
- ref={icon}
- className="list-item__title__icon"
- alt="exclusion icon"
- />
- <SearchHighlighter
- value={exclusion.hostname}
- search={exclusionsStore.exclusionsSearchValue}
- />
- <svg className="icon list-item__arrow">
- <use xlinkHref="#small-arrow" />
- </svg>
- </button>
- <button
- type="button"
- className="list-item__remove-button"
- onClick={removeExclusion(exclusion)}
- >
- <svg className="list-item__remove-button__icon">
- <use xlinkHref="#basket" />
- </svg>
- </button>
- </li>
- );
-});
diff --git a/src/options/components/Exclusions/List/ListItem/index.ts b/src/options/components/Exclusions/List/ListItem/index.ts
deleted file mode 100644
index b5eb55cd4..000000000
--- a/src/options/components/Exclusions/List/ListItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ListItem } from './ListItem';
diff --git a/src/options/components/Exclusions/List/ListItem/list-item.pcss b/src/options/components/Exclusions/List/ListItem/list-item.pcss
deleted file mode 100644
index 4cac85358..000000000
--- a/src/options/components/Exclusions/List/ListItem/list-item.pcss
+++ /dev/null
@@ -1,76 +0,0 @@
-.list-item {
- display: flex;
- align-items: center;
- border-radius: 5px;
- list-style: none;
- position: relative;
-
- &__title {
- display: flex;
- align-items: center;
- width: 85%;
- min-width: 450px;
- padding: 8px 50px 8px 0;
- word-break: break-all;
- cursor: pointer;
- font-size: 1.6rem;
- border: none;
- background: none;
-
- &.ip-title {
- cursor: default;
-
- & .list-item__arrow {
- display: none;
- }
- }
-
- &__icon {
- width: 24px;
- height: 24px;
- margin-right: 12px;
- }
- }
-
- &__arrow {
- width: 24px;
- height: 24px;
- position: absolute;
- right: 48px;
- }
-
- &__remove-button {
- position: absolute;
- right: 16px;
- border: none;
- max-height: 24px;
- padding: 0;
- background: none;
- cursor: pointer;
- visibility: hidden;
- transition: var(--t3) background;
-
- &:hover {
- filter: brightness(.7);
- }
-
- &__icon {
- width: 24px;
- height: 24px;
- }
- }
-
- &:hover {
- background: var(--grayF3);
-
- & .list-item__remove-button {
- visibility: visible;
- }
- }
-
- @media (--tablet) {
- .list-item__remove-button {
- visibility: visible;
- }
- }
-}
diff --git a/src/options/components/Exclusions/Loader/Loader.tsx b/src/options/components/Exclusions/Loader/Loader.tsx
index 22bcb9762..126230c00 100644
--- a/src/options/components/Exclusions/Loader/Loader.tsx
+++ b/src/options/components/Exclusions/Loader/Loader.tsx
@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
import classnames from 'classnames';
import { rootStore } from '../../../stores';
+import { Icon } from '../../ui/Icon';
import './loader.pcss';
@@ -16,9 +17,8 @@ export const Loader = observer(() => {
return (
<div className={loaderClass}>
- <svg className="loader__spinner">
- <use xlinkHref="#spinner" />
- </svg>
+ <div className="loader__overlay" />
+ <Icon name="spinner" className="loader__spinner" />
</div>
);
});
diff --git a/src/options/components/Exclusions/Loader/loader.pcss b/src/options/components/Exclusions/Loader/loader.pcss
index e7e584457..35085869a 100644
--- a/src/options/components/Exclusions/Loader/loader.pcss
+++ b/src/options/components/Exclusions/Loader/loader.pcss
@@ -10,17 +10,29 @@
height: 100%;
top: 0;
left: 0;
- background: var(--white-fog);
justify-content: center;
align-items: center;
+ &__overlay {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background-color: var(--fills-backgrounds-page-background-default);
+ opacity: 0.7;
+ }
+
&__visible {
display: flex;
}
&__spinner {
+ position: relative;
animation: spin 2s linear infinite;
width: 30px;
+ height: 30px;
+ color: var(--stroke-icons-product-icon-default);
}
&__container {
diff --git a/src/options/components/Exclusions/ModeSelectorModal/ModeSelectorModal.tsx b/src/options/components/Exclusions/ModeSelectorModal/ModeSelectorModal.tsx
index c4c7068c6..345b81e35 100644
--- a/src/options/components/Exclusions/ModeSelectorModal/ModeSelectorModal.tsx
+++ b/src/options/components/Exclusions/ModeSelectorModal/ModeSelectorModal.tsx
@@ -1,14 +1,12 @@
import React, { useContext, useState } from 'react';
-import Modal from 'react-modal';
import { observer } from 'mobx-react';
-import classnames from 'classnames';
-
import { rootStore } from '../../../stores';
import { ExclusionsMode } from '../../../../common/exclusionsConstants';
import { translator } from '../../../../common/translator';
-
-import '../../ui/radio.pcss';
+import { Modal } from '../../ui/Modal';
+import { Radio } from '../../ui/Radio';
+import { Button } from '../../ui/Button';
export const ModeSelectorModal = observer(() => {
const { exclusionsStore } = useContext(rootStore);
@@ -30,72 +28,35 @@ export const ModeSelectorModal = observer(() => {
[ExclusionsMode.Selective]: translator.getMessage('settings_exclusion_selective_title'),
};
- const renderRadioButton = (exclusionsType: ExclusionsMode) => {
- const enabled = exclusionsType === mode;
- const titleClass = classnames('radio__title', { 'radio__title--active': enabled });
-
- const xlinkHref = classnames({
- '#bullet_on': enabled,
- '#bullet_off': !enabled,
- });
-
- return (
- <button
- type="button"
- className="radio"
- onClick={() => setMode(exclusionsType)}
- >
- <svg className="radio__icon">
- <use xlinkHref={xlinkHref} />
- </svg>
- <div className="radio__label">
- <div className={titleClass}>
- {titles[exclusionsType]}
- </div>
- </div>
- </button>
- );
- };
+ const renderRadioButton = (exclusionsType: ExclusionsMode) => (
+ <Radio
+ name="exclusion-mode"
+ value={exclusionsType}
+ isActive={exclusionsType === mode}
+ title={titles[exclusionsType]}
+ onSelect={setMode}
+ />
+ );
return (
<Modal
isOpen={exclusionsStore.modeSelectorModalOpen}
- className="modal modal-exclusions select-mode-confirm"
- overlayClassName="overlay overlay--fullscreen"
- onRequestClose={closeModal}
+ title={translator.getMessage('settings_exclusion_change_mode_modal_title')}
+ actions={(
+ <>
+ <Button onClick={handleSaveMode}>
+ {translator.getMessage('settings_dns_add_custom_server_save_and_select')}
+ </Button>
+ <Button variant="outlined" onClick={closeModal}>
+ {translator.getMessage('settings_exclusion_modal_cancel')}
+ </Button>
+ </>
+ )}
+ className="exclusions__modal--radio"
+ onClose={closeModal}
>
- <button
- type="button"
- className="button button--icon checkbox__button modal__close-icon"
- onClick={closeModal}
- >
- <svg className="icon icon--button icon--cross">
- <use xlinkHref="#cross" />
- </svg>
- </button>
- <div className="modal__title">
- {translator.getMessage('settings_exclusion_change_mode_modal_title')}
- </div>
- <div className="settings__group">
- {renderRadioButton(ExclusionsMode.Regular)}
- {renderRadioButton(ExclusionsMode.Selective)}
- </div>
- <div className="settings__change-mode-actions">
- <button
- type="button"
- className="button button--large button--outline-secondary"
- onClick={closeModal}
- >
- {translator.getMessage('settings_exclusion_modal_cancel')}
- </button>
- <button
- type="button"
- className="button button--large button--primary"
- onClick={handleSaveMode}
- >
- {translator.getMessage('settings_exclusion_modal_save')}
- </button>
- </div>
+ {renderRadioButton(ExclusionsMode.Regular)}
+ {renderRadioButton(ExclusionsMode.Selective)}
</Modal>
);
});
diff --git a/src/options/components/Exclusions/Search/ExclusionsSearch/ExclusionsSearch.tsx b/src/options/components/Exclusions/Search/ExclusionsSearch/ExclusionsSearch.tsx
index ef80be464..861918359 100644
--- a/src/options/components/Exclusions/Search/ExclusionsSearch/ExclusionsSearch.tsx
+++ b/src/options/components/Exclusions/Search/ExclusionsSearch/ExclusionsSearch.tsx
@@ -1,9 +1,9 @@
import React, { useContext } from 'react';
import { observer } from 'mobx-react';
-import { Search } from '../Search';
import { rootStore } from '../../../../stores';
-import { reactTranslator } from '../../../../../common/reactTranslator';
+import { translator } from '../../../../../common/translator';
+import { Input } from '../../../ui/Input';
export const ExclusionsSearch = observer(() => {
const { exclusionsStore } = useContext(rootStore);
@@ -12,16 +12,13 @@ export const ExclusionsSearch = observer(() => {
exclusionsStore.setExclusionsSearchValue(value);
};
- const onClear = () => {
- exclusionsStore.setExclusionsSearchValue('');
- };
-
return (
- <Search
- placeholder={reactTranslator.getMessage('settings_exclusion_search_website')}
- value={exclusionsStore.exclusionsSearchValue}
- onChange={onChange}
- onClear={onClear}
- />
+ <div className="exclusions__search">
+ <Input
+ placeholder={translator.getMessage('settings_exclusion_search_website')}
+ value={exclusionsStore.exclusionsSearchValue}
+ onChange={onChange}
+ />
+ </div>
);
});
diff --git a/src/options/components/Exclusions/Search/Search.tsx b/src/options/components/Exclusions/Search/Search.tsx
deleted file mode 100644
index a583d81b3..000000000
--- a/src/options/components/Exclusions/Search/Search.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-
-import './search.pcss';
-
-interface SearchProps {
- placeholder: React.ReactNode,
- value: string,
- onChange: (value: string) => void,
- onClear: () => void,
-}
-
-export const Search = ({
- placeholder,
- value,
- onChange,
- onClear,
-}: SearchProps) => {
- const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
- onChange(e.target.value);
- };
-
- const handleClear = () => {
- onClear();
- };
-
- return (
- <form className="search">
- <label className="input">
- <input
- type="text"
- className="input__in input__in--clear"
- value={value}
- placeholder={placeholder?.toString()}
- onChange={handleChange}
- />
- {value.length > 0 && (
- <button
- type="button"
- className="button input__clear"
- onClick={handleClear}
- >
- <svg className="icon icon--button icon--cross">
- <use xlinkHref="#cross" />
- </svg>
- </button>
- )}
- </label>
- </form>
- );
-};
diff --git a/src/options/components/Exclusions/Search/ServicesSearch/ServicesSearch.tsx b/src/options/components/Exclusions/Search/ServicesSearch/ServicesSearch.tsx
index 3b8270427..b7e46ae11 100644
--- a/src/options/components/Exclusions/Search/ServicesSearch/ServicesSearch.tsx
+++ b/src/options/components/Exclusions/Search/ServicesSearch/ServicesSearch.tsx
@@ -1,9 +1,9 @@
import React, { useContext } from 'react';
import { observer } from 'mobx-react';
-import { Search } from '../Search';
import { rootStore } from '../../../../stores';
-import { reactTranslator } from '../../../../../common/reactTranslator';
+import { translator } from '../../../../../common/translator';
+import { Input } from '../../../ui/Input';
export const ServicesSearch = observer(() => {
const { exclusionsStore } = useContext(rootStore);
@@ -12,16 +12,13 @@ export const ServicesSearch = observer(() => {
exclusionsStore.setServicesSearchValue(value);
};
- const onClear = () => {
- exclusionsStore.setServicesSearchValue('');
- };
-
return (
- <Search
- placeholder={reactTranslator.getMessage('settings_exclusion_placeholder_search')}
- value={exclusionsStore.servicesSearchValue}
- onChange={onChange}
- onClear={onClear}
- />
+ <div className="exclusions__search exclusions__search--services">
+ <Input
+ placeholder={translator.getMessage('settings_exclusion_placeholder_search')}
+ value={exclusionsStore.servicesSearchValue}
+ onChange={onChange}
+ />
+ </div>
);
});
diff --git a/src/options/components/Exclusions/Search/index.ts b/src/options/components/Exclusions/Search/index.ts
index 6860ea7e1..d41b6d47a 100644
--- a/src/options/components/Exclusions/Search/index.ts
+++ b/src/options/components/Exclusions/Search/index.ts
@@ -1 +1,3 @@
-export { Search } from './Search';
+export { ExclusionsSearch } from './ExclusionsSearch';
+export { ServicesSearch } from './ServicesSearch';
+export { SearchHighlighter } from './SearchHighlighter';
diff --git a/src/options/components/Exclusions/Search/search.pcss b/src/options/components/Exclusions/Search/search.pcss
deleted file mode 100644
index 7da32fa40..000000000
--- a/src/options/components/Exclusions/Search/search.pcss
+++ /dev/null
@@ -1,35 +0,0 @@
-.search {
- position: relative;
-
- &__cross {
- width: 24px;
- height: 24px;
- color: var(--gray88);
-
- &:hover {
- filter: brightness(.7);
- }
- }
-
- &__nothing-found {
- text-align: center;
- margin-top: 90px;
- color: var(--gray88);
- }
-}
-
-.light-mode {
- .search {
- &__input {
- background-color: var(--grayF7);
- }
- }
-}
-
-.dark-mode {
- .search {
- &__input {
- background-color: #131313;
- }
- }
-}
diff --git a/src/options/components/Exclusions/StateCheckbox/StateCheckbox.tsx b/src/options/components/Exclusions/StateCheckbox/StateCheckbox.tsx
deleted file mode 100644
index 82da73026..000000000
--- a/src/options/components/Exclusions/StateCheckbox/StateCheckbox.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-
-import { ExclusionState } from '../../../../common/exclusionsConstants';
-
-import './statecheckbox.pcss';
-
-interface StateCheckboxProps {
- state: ExclusionState,
- toggleHandler: () => void,
- extraClassName?: string,
-}
-
-const getStateIcon = (state: ExclusionState) => {
- if (state === ExclusionState.Enabled) {
- return '#enabled';
- }
- if (state === ExclusionState.PartlyEnabled) {
- return '#partly-enabled';
- }
- return '#disabled';
-};
-
-export const StateCheckbox = ({
- state,
- toggleHandler,
- extraClassName,
-}: StateCheckboxProps) => {
- const btnClassNames = extraClassName
- ? `state-checkbox ${extraClassName}`
- : 'state-checkbox';
- return (
- <button
- className={btnClassNames}
- type="button"
- onClick={toggleHandler}
- >
- <svg className="state-checkbox__icon">
- <use xlinkHref={getStateIcon(state)} />
- </svg>
- </button>
- );
-};
diff --git a/src/options/components/Exclusions/StateCheckbox/index.ts b/src/options/components/Exclusions/StateCheckbox/index.ts
deleted file mode 100644
index 898e85868..000000000
--- a/src/options/components/Exclusions/StateCheckbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { StateCheckbox } from './StateCheckbox';
diff --git a/src/options/components/Exclusions/StateCheckbox/statecheckbox.pcss b/src/options/components/Exclusions/StateCheckbox/statecheckbox.pcss
deleted file mode 100644
index 54ca06427..000000000
--- a/src/options/components/Exclusions/StateCheckbox/statecheckbox.pcss
+++ /dev/null
@@ -1,17 +0,0 @@
-.state-checkbox {
- margin-right: 16px;
- padding: 0;
- background: none;
- border: none;
- cursor: pointer;
- max-height: 24px;
-
- &__list-item {
- margin-right: 12px;
- }
-
- &__icon {
- width: 24px;
- height: 24px;
- }
-}
diff --git a/src/options/components/Exclusions/exclusions.pcss b/src/options/components/Exclusions/exclusions.pcss
index 0e502ca0c..feb0f8fe8 100644
--- a/src/options/components/Exclusions/exclusions.pcss
+++ b/src/options/components/Exclusions/exclusions.pcss
@@ -1,316 +1,110 @@
.exclusions {
- &__mode {
- position: relative;
- margin-right: 16px;
-
- &--info {
- padding: 0 16px;
- }
-
- &--link {
- color: var(--green700);
- font-weight: bold;
- font-size: 1.6rem;
- text-decoration: underline;
- cursor: pointer;
- border: none;
- background: none;
- padding: 0;
+ .title__subtitle {
+ padding-right: 0;
+ }
- &:hover {
- filter: brightness(.8);
+ &__mode {
+ &-btn {
+ color: var(--text-links-link-default);
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 1.3;
+ text-decoration-line: underline;
+
+ &-icon {
+ color: currentColor;
+ width: 16px;
+ height: 16px;
+ margin-left: 2px;
}
}
- &--warning {
- color: var(--orange);
- margin: 8px 0 0 16px;
+ &-warning {
+ margin-top: 20px;
+ color: var(--text-links-attention-link-default);
+ font-size: 16px;
+ line-height: 1.3;
}
}
- &__wrapper {
- padding: 0 16px;
- }
-
&__search {
- margin: 38px 0 16px;
- width: 100%;
- }
-
- &__add-website {
- font-size: 16px;
- line-height: 24px;
- font-weight: 600;
- padding: 8px 0;
- margin: 16px 0 0 0;
- display: flex;
-
- &__label {
- margin-left: 12px;
- }
- }
-}
-
-.settings {
- &__title {
- margin-bottom: 30px;
- font-size: 1.8rem;
- font-weight: 700;
- }
-
- &__subtitle {
- margin-bottom: 15px;
- cursor: pointer;
- display: flex;
- align-items: center;
- }
-
- &__group {
padding: 16px 0;
- }
- &__group-ico {
- flex-shrink: 0;
- width: 24px;
- height: 24px;
- margin-right: 8px;
- background-repeat: no-repeat;
- background-position: 50%;
- color: var(--brand-primary);
- position: relative;
- top: -1px;
- }
-
- &__list,
- &__form {
- margin-left: 10px;
- }
-
- &__list-item {
- position: relative;
- width: 100%;
- padding: 8px 8px 8px 15px;
- border: 1px solid transparent;
- border-radius: 4px;
-
- &--active,
- &:hover,
- &:focus {
- border-color: #efefef;
- }
-
- &:last-child {
- margin-bottom: 0;
+ &--services {
+ padding: 8px 0;
}
}
- &__add {
- display: flex;
- align-items: center;
- padding: 10px 15px;
- font-size: 1.2rem;
- font-weight: 700;
- line-height: 1;
-
- &:focus {
- box-shadow: none;
+ &__modal {
+ .modal__header {
+ padding-bottom: 16px;
}
- }
- &__add-icon {
- margin-right: 12px;
- }
-
- &__control {
- &:first-child {
- margin-bottom: 25px;
- }
- }
-
- &__controls {
- display: flex;
- margin-bottom: 20px;
- flex-direction: column;
-
- &--import-export {
+ .modal__actions {
+ padding-top: 24px;
+ gap: 8px;
justify-content: space-between;
- align-items: center;
- }
- }
-
- &__import-export {
- margin-left: auto;
- }
- &__item {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding-right: 15px;
-
- &--dns-server {
- width: calc(100% + 16px);
- cursor: pointer;
- border: none;
- padding: 16px;
- margin: -12px 0 0 -16px;
- background: none;
- transition: var(--t3) background-color;
- border-radius: 8px;
- text-align: left;
-
- &:hover {
- background-color: var(--grayF3);
+ @media (--tablet-sm) {
+ flex-direction: column-reverse;
}
- & .icon--button {
- position: absolute;
- top: 15px;
- right: 15px;
+ .button {
+ width: 256px;
+ padding: 16px;
+ font-size: 16px;
+ font-weight: 600;
+
+ @media (--tablet-sm) {
+ width: 100%;
+ }
}
}
- }
-
- &__item-title {
- font-size: 1.6rem;
- font-weight: 500;
- color: var(--gray-base);
- }
-
- &__item-subtitle {
- margin: 5px 20px 0 0;
- font-size: 1.4rem;
- line-height: 1.6rem;
- color: var(--gray88);
- }
-
- &__item-content {
- max-width: 420px;
- }
- &__item-desc {
- display: flex;
- margin-top: 4px;
- font-size: 1.4rem;
- line-height: 1.6rem;
- color: var(--gray88);
- overflow: hidden;
- text-overflow: ellipsis;
- }
+ &--radio {
+ .modal__header {
+ padding-bottom: 24px;
+ }
- &__change-mode-actions {
- margin-top: -10px;
- display: flex;
- gap: 16px;
+ .modal__actions {
+ padding-top: 24px;
+ }
- @media (--mobile) {
- flex-direction: column-reverse;
+ .radio {
+ outline-offset: -2px;
- .button {
- width: 100%;
+ &__title {
+ font-weight: 400;
+ }
}
}
- }
-}
-
-.modal {
- max-height: 95%;
- max-width: 95%;
- overflow-y: auto;
- background: var(--white-strong);
- position: relative;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- padding: 32px;
- display: flex;
- flex-direction: column;
- outline: none;
- border-radius: 8px;
-
- &-exclusions {
- width: 600px;
- }
- &--big {
- width: 600px;
- }
-
- &__close-icon {
- position: fixed;
- right: 14px;
- top: 14px;
- }
+ &--empty-body {
+ .modal__header {
+ padding-bottom: 0;
+ }
- &__icon {
- width: 100%;
- min-height: 80px;
- background-image: url('../../../assets/images/trouble-head.svg');
- background-position: center;
- background-repeat: no-repeat;
- margin-top: 20px;
+ .modal__actions {
+ padding-top: 24px;
+ }
+ }
}
- &__message {
- margin: 0 30px 24px;
- font-size: 16px;
- line-height: 22px;
+ &__empty {
text-align: center;
+ margin: 50px 0;
+ color: var(--text-description-description-default);
}
- &__buttons {
- padding-top: 16px;
- }
-
- &__button {
+ &__reset-default {
margin-top: 16px;
- height: 44px;
- padding: 0 10px;
- min-width: 180px;
- border: 1px solid var(--gray88);
- border-radius: 8px;
- font-size: 16px;
- color: var(--gray88);
- letter-spacing: 0.38px;
- text-align: center;
- line-height: 16px;
-
- &--red {
- border-color: var(--redDark);
- background-color: var(--redDark);
- color: var(--white);
- &:hover {
- border-color: var(--red);
- background-color: var(--red);
- }
- }
-
- &--first {
- margin-right: 16px;
+ @media (--tablet-sm) {
+ margin: 16px 16px 0;
}
}
- &.select-mode {
- height: 400px;
-
- & .modal__button {
- width: 200px;
- margin: 0 auto;
- }
- }
-}
-
-.overlay {
- z-index: var(--modal-z);
- background-color: var(--overlay);
- position: fixed;
- top: 0;
-
- &--fullscreen {
- left: 0;
- right: 0;
- bottom: 0;
+ &__add-subdomain {
+ padding-left: 40px;
}
}
diff --git a/src/options/components/FreeGbs/AddDevice.tsx b/src/options/components/FreeGbs/AddDevice.tsx
index 4221dd8a1..dd439b784 100644
--- a/src/options/components/FreeGbs/AddDevice.tsx
+++ b/src/options/components/FreeGbs/AddDevice.tsx
@@ -1,75 +1,76 @@
import React, { useContext } from 'react';
import { observer } from 'mobx-react';
-import { rootStore } from '../../stores';
-import { Title } from '../ui/Title';
import { getForwarderUrl } from '../../../common/helpers';
-import { reactTranslator } from '../../../common/reactTranslator';
-import { COMPLETE_TASK_BONUS_GB } from '../../stores/consts';
+import { translator } from '../../../common/translator';
import { FORWARDER_URL_QUERIES } from '../../../background/config';
+import { COMPLETE_TASK_BONUS_GB } from '../../stores/consts';
+import { rootStore } from '../../stores';
+import { Icon } from '../ui/Icon';
+import { Title } from '../ui/Title';
+import { Button } from '../ui/Button';
export const AddDevice = observer(({ goBackHandler }: { goBackHandler: () => void }) => {
const { settingsStore } = useContext(rootStore);
const { multiplatformBonus, forwarderDomain } = settingsStore;
const otherProductsUrl = getForwarderUrl(forwarderDomain, FORWARDER_URL_QUERIES.OTHER_PRODUCTS);
+ const isCompleted = !multiplatformBonus.available;
- const getContent = () => {
- if (multiplatformBonus.available) {
- return (
- <>
- <Title title={reactTranslator.getMessage('settings_free_gbs_add_device_title')} />
- <div className="free-gbs__info">
- {reactTranslator.getMessage('settings_free_gbs_add_device_info', { your_gb: COMPLETE_TASK_BONUS_GB })}
- </div>
- <img
- src="../../../assets/images/products.svg"
- className="free-gbs__products-pic"
- alt="products"
- />
- <a
- className="button button--large button--primary"
- href={otherProductsUrl}
- target="_blank"
- rel="noreferrer"
- >
- <svg className="icon icon--button free-gbs__external-link">
- <use xlinkHref="#external-link" />
- </svg>
- {reactTranslator.getMessage('settings_free_gbs_add_device_products_button')}
- </a>
- </>
- );
- }
+ const title = isCompleted
+ ? translator.getMessage('settings_free_gbs_devices_added_title')
+ : translator.getMessage('settings_free_gbs_add_device_title');
- return (
- <>
- <Title title={reactTranslator.getMessage('settings_free_gbs_devices_added_title')} />
- <div className="free-gbs__info">{reactTranslator.getMessage('settings_free_gbs_devices_added_info')}</div>
- <button
- type="button"
- className="button button--large button--outline-secondary free-gbs__button"
- onClick={goBackHandler}
- >
- {reactTranslator.getMessage('settings_free_gbs_go_back')}
- </button>
- </>
- );
- };
+ const description = isCompleted
+ ? translator.getMessage('settings_free_gbs_devices_added_info')
+ : translator.getMessage('settings_free_gbs_add_device_info', { your_gb: COMPLETE_TASK_BONUS_GB });
return (
- <div className="free-gbs__content">
- <button
- className="free-gbs__back-button"
- type="button"
- onClick={goBackHandler}
- >
- <svg className="icon icon--button">
- <use xlinkHref="#arrow" />
- </svg>
- </button>
- <div className="free-gbs__picture free-gbs__add-device-pic" />
- {getContent()}
+ <div className="free-gbs-task">
+ <Title title="" onClick={goBackHandler} />
+ <img
+ src="../../../assets/images/add-device.svg"
+ alt={title}
+ className="free-gbs-task__image"
+ />
+ <Title
+ title={title}
+ subtitle={description}
+ className="free-gbs-task__title"
+ />
+ <div className="free-gbs-task__content add-device">
+ {!isCompleted ? (
+ <>
+ <img
+ src="../../../assets/images/products.svg"
+ className="add-device__products"
+ alt="products"
+ />
+ <div className="add-device__button-wrapper">
+ <a
+ href={otherProductsUrl}
+ target="_blank"
+ rel="noreferrer"
+ className="button button--filled button--size-medium add-device__link"
+ >
+ <Icon name="external-link" className="add-device__link-icon" />
+ <span className="text-ellipsis">
+ {translator.getMessage('settings_free_gbs_add_device_products_button')}
+ </span>
+ </a>
+ </div>
+ </>
+ ) : (
+ <Button
+ variant="outlined"
+ size="medium"
+ onClick={goBackHandler}
+ className="free-gbs-task__go-back-btn"
+ >
+ {translator.getMessage('settings_free_gbs_go_back')}
+ </Button>
+ )}
+ </div>
</div>
);
});
diff --git a/src/options/components/FreeGbs/ConfirmEmail.tsx b/src/options/components/FreeGbs/ConfirmEmail.tsx
index 023fcbef1..93fde3ef8 100644
--- a/src/options/components/FreeGbs/ConfirmEmail.tsx
+++ b/src/options/components/FreeGbs/ConfirmEmail.tsx
@@ -1,10 +1,11 @@
import React, { useContext } from 'react';
import { observer } from 'mobx-react';
+import { translator } from '../../../common/translator';
import { rootStore } from '../../stores';
-import { reactTranslator } from '../../../common/reactTranslator';
-import { Title } from '../ui/Title';
import { COMPLETE_TASK_BONUS_GB } from '../../stores/consts';
+import { Button } from '../ui/Button';
+import { Title } from '../ui/Title';
export const ConfirmEmail = observer(({ goBackHandler }: { goBackHandler: () => void }) => {
const { settingsStore, notificationsStore } = useContext(rootStore);
@@ -12,56 +13,52 @@ export const ConfirmEmail = observer(({ goBackHandler }: { goBackHandler: () =>
const resendLink = async () => {
await resendConfirmationLink();
- notificationsStore.notifySuccess(reactTranslator.getMessage('resend_confirm_registration_link_notification'));
+ notificationsStore.notifySuccess(translator.getMessage('resend_confirm_registration_link_notification'));
};
- const getContent = () => {
- if (confirmBonus.available) {
- return (
- <>
- <Title title={reactTranslator.getMessage('settings_free_gbs_confirm_email_title')} />
- <div className="free-gbs__info">
- {reactTranslator.getMessage('settings_free_gbs_confirm_email_info', { your_gb: COMPLETE_TASK_BONUS_GB })}
- </div>
- <button
- type="button"
- className="button button--large button--outline-green free-gbs__button"
- onClick={resendLink}
- >
- {reactTranslator.getMessage('settings_free_gbs_confirm_email_resend_link_button')}
- </button>
- </>
- );
- }
+ const isCompleted = !confirmBonus.available;
- return (
- <>
- <Title title={reactTranslator.getMessage('confirm_email_done_title')} />
- <div className="free-gbs__info">{reactTranslator.getMessage('confirm_email_done_info')}</div>
- <button
- type="button"
- className="button button--large button--outline-secondary free-gbs__button"
- onClick={goBackHandler}
- >
- {reactTranslator.getMessage('settings_free_gbs_go_back')}
- </button>
- </>
- );
- };
+ const title = isCompleted
+ ? translator.getMessage('confirm_email_done_title')
+ : translator.getMessage('settings_free_gbs_confirm_email_title');
+
+ const description = isCompleted
+ ? translator.getMessage('confirm_email_done_info')
+ : translator.getMessage('settings_free_gbs_confirm_email_info', { your_gb: COMPLETE_TASK_BONUS_GB });
return (
- <div className="free-gbs__content">
- <button
- className="free-gbs__back-button"
- type="button"
- onClick={goBackHandler}
- >
- <svg className="icon icon--button">
- <use xlinkHref="#arrow" />
- </svg>
- </button>
- <div className="free-gbs__picture free-gbs__confirm-email-pic" />
- {getContent()}
+ <div className="free-gbs-task">
+ <Title title="" onClick={goBackHandler} />
+ <img
+ src="../../../assets/images/confirm-email-task.svg"
+ alt={title}
+ className="free-gbs-task__image"
+ />
+ <Title
+ title={title}
+ subtitle={description}
+ className="free-gbs-task__title"
+ />
+ <div className="free-gbs-task__content confirm-email">
+ {!isCompleted ? (
+ <Button
+ size="medium"
+ className="confirm-email__btn"
+ onClick={resendLink}
+ >
+ {translator.getMessage('settings_free_gbs_confirm_email_resend_link_button')}
+ </Button>
+ ) : (
+ <Button
+ variant="outlined"
+ size="medium"
+ onClick={goBackHandler}
+ className="free-gbs-task__go-back-btn"
+ >
+ {translator.getMessage('settings_free_gbs_go_back')}
+ </Button>
+ )}
+ </div>
</div>
);
});
diff --git a/src/options/components/FreeGbs/FreeGbs.tsx b/src/options/components/FreeGbs/FreeGbs.tsx
index ae49d94ab..b0c72b6a1 100644
--- a/src/options/components/FreeGbs/FreeGbs.tsx
+++ b/src/options/components/FreeGbs/FreeGbs.tsx
@@ -2,12 +2,15 @@ import React, { useContext, useEffect } from 'react';
import { observer } from 'mobx-react';
import { useHistory, useLocation } from 'react-router-dom';
-import { rootStore } from '../../stores';
-import { reactTranslator } from '../../../common/reactTranslator';
+import classNames from 'classnames';
+
import { translator } from '../../../common/translator';
-import { Title } from '../ui/Title';
import { DotsLoader } from '../../../common/components/DotsLoader';
+import { rootStore } from '../../stores';
import { RequestStatus, COMPLETE_TASK_BONUS_GB } from '../../stores/consts';
+import { Title } from '../ui/Title';
+import { Controls } from '../ui/Controls';
+import { Icon, IconButton } from '../ui/Icon';
import { InviteFriend } from './InviteFriend';
import { ConfirmEmail } from './ConfirmEmail';
@@ -48,7 +51,8 @@ export const FreeGbs = observer(() => {
const { invitesCount, maxInvitesCount } = invitesBonuses;
const history = useHistory();
- const query = new URLSearchParams(useLocation().search);
+ const { search } = useLocation();
+ const query = new URLSearchParams(search);
const goBackHandler = () => {
history.push(`/${FREE_GBS}`);
@@ -60,25 +64,25 @@ export const FreeGbs = observer(() => {
const inviteFriendTitle = `${translator.getMessage('settings_free_gbs_invite_friend')} (${invitesCount}/${maxInvitesCount})`;
- const itemsData = [
+ const itemsData: RenderItemProps[] = [
{
title: inviteFriendTitle,
- status: reactTranslator.getMessage('settings_free_gbs_invite_friend_get_GB', { num: maxInvitesCount }),
- statusDone: reactTranslator.getMessage('settings_free_gbs_invite_friend_complete', { num: maxInvitesCount }),
+ status: translator.getMessage('settings_free_gbs_invite_friend_get_GB', { num: maxInvitesCount }),
+ statusDone: translator.getMessage('settings_free_gbs_invite_friend_complete', { num: maxInvitesCount }),
query: INVITE_FRIEND,
completed: invitesQuestCompleted,
},
{
title: translator.getMessage('settings_free_gbs_confirm_email_title'),
- status: reactTranslator.getMessage('settings_free_gbs_get_GB', { num: COMPLETE_TASK_BONUS_GB }),
- statusDone: reactTranslator.getMessage('settings_free_gbs_task_complete', { num: COMPLETE_TASK_BONUS_GB }),
+ status: translator.getMessage('settings_free_gbs_get_GB', { num: COMPLETE_TASK_BONUS_GB }),
+ statusDone: translator.getMessage('settings_free_gbs_task_complete', { num: COMPLETE_TASK_BONUS_GB }),
query: CONFIRM_EMAIL,
completed: confirmEmailQuestCompleted,
},
{
title: translator.getMessage('settings_free_gbs_add_device_title'),
- status: reactTranslator.getMessage('settings_free_gbs_get_GB', { num: COMPLETE_TASK_BONUS_GB }),
- statusDone: reactTranslator.getMessage('settings_free_gbs_task_complete', { num: COMPLETE_TASK_BONUS_GB }),
+ status: translator.getMessage('settings_free_gbs_get_GB', { num: COMPLETE_TASK_BONUS_GB }),
+ statusDone: translator.getMessage('settings_free_gbs_task_complete', { num: COMPLETE_TASK_BONUS_GB }),
query: ADD_DEVICE,
completed: addDeviceQuestCompleted,
},
@@ -92,53 +96,41 @@ export const FreeGbs = observer(() => {
completed,
}: RenderItemProps) => {
return (
- <button
- type="button"
- key={title}
- className="free-gbs__item"
+ <Controls
+ key={query}
+ title={title}
+ description={completed ? statusDone : status}
+ className={classNames('free-gbs__button', completed && 'free-gbs__button--done')}
+ beforeAction={<Icon name="checkmark" className="free-gbs__button-check-icon" />}
+ action={<IconButton name="arrow-down" className="free-gbs__button-arrow-icon" />}
onClick={() => clickItemHandler(query)}
- >
- <svg className="icon icon--button free-gbs__item--check-mark">
- {
- completed
- ? <use xlinkHref="#check-mark-done" />
- : <use xlinkHref="#check-mark" />
- }
- </svg>
- <div>
- <div className="free-gbs__item--title">{title}</div>
- <div className="free-gbs__item--status">{completed ? statusDone : status}</div>
- </div>
- <svg className="icon icon--button free-gbs__item--arrow">
- <use xlinkHref="#arrow" />
- </svg>
- </button>
+ />
);
};
- switch (true) {
- case query.has(INVITE_FRIEND): {
- return <InviteFriend goBackHandler={goBackHandler} />;
- }
- case query.has(CONFIRM_EMAIL): {
- return <ConfirmEmail goBackHandler={goBackHandler} />;
- }
- case query.has(ADD_DEVICE): {
- return <AddDevice goBackHandler={goBackHandler} />;
- }
- case bonusesDataRequestStatus !== RequestStatus.Done: {
- return <DotsLoader />;
- }
- default: {
- return (
- <>
- <Title
- title={reactTranslator.getMessage('settings_free_gbs')}
- subtitle={reactTranslator.getMessage('settings_free_gbs_subtitle')}
- />
- {itemsData.map(renderItem)}
- </>
- );
- }
+ if (query.has(INVITE_FRIEND)) {
+ return <InviteFriend goBackHandler={goBackHandler} />;
+ }
+
+ if (query.has(CONFIRM_EMAIL)) {
+ return <ConfirmEmail goBackHandler={goBackHandler} />;
+ }
+
+ if (query.has(ADD_DEVICE)) {
+ return <AddDevice goBackHandler={goBackHandler} />;
}
+
+ if (bonusesDataRequestStatus !== RequestStatus.Done) {
+ return <DotsLoader />;
+ }
+
+ return (
+ <>
+ <Title
+ title={translator.getMessage('settings_free_gbs')}
+ subtitle={translator.getMessage('settings_free_gbs_subtitle')}
+ />
+ {itemsData.map(renderItem)}
+ </>
+ );
});
diff --git a/src/options/components/FreeGbs/InviteFriend.tsx b/src/options/components/FreeGbs/InviteFriend.tsx
index 55a011083..1d798b21c 100644
--- a/src/options/components/FreeGbs/InviteFriend.tsx
+++ b/src/options/components/FreeGbs/InviteFriend.tsx
@@ -1,11 +1,13 @@
import React, { useContext, useEffect } from 'react';
import { observer } from 'mobx-react';
-import { reactTranslator } from '../../../common/reactTranslator';
-import { Title } from '../ui/Title';
-import { rootStore } from '../../stores';
import { DotsLoader } from '../../../common/components/DotsLoader';
+import { translator } from '../../../common/translator';
+import { rootStore } from '../../stores';
import { RequestStatus, COMPLETE_TASK_BONUS_GB } from '../../stores/consts';
+import { Input } from '../ui/Input';
+import { Button } from '../ui/Button';
+import { Title } from '../ui/Title';
export const InviteFriend = observer(({ goBackHandler }: { goBackHandler: () => void }) => {
const { settingsStore, notificationsStore } = useContext(rootStore);
@@ -13,6 +15,18 @@ export const InviteFriend = observer(({ goBackHandler }: { goBackHandler: () =>
const { invitesBonuses, bonusesDataRequestStatus } = settingsStore;
const { invitesCount, maxInvitesCount, inviteUrl } = invitesBonuses;
+ const isCompleted = invitesCount >= maxInvitesCount;
+
+ const title = translator.getMessage('settings_free_gbs_invite_friend');
+
+ const description = isCompleted
+ ? translator.getMessage('settings_free_gbs_invite_friend_completed_thank_you')
+ : translator.getMessage('settings_referral_info', {
+ your_gb: COMPLETE_TASK_BONUS_GB,
+ total_gb: maxInvitesCount,
+ friend_gb: COMPLETE_TASK_BONUS_GB,
+ });
+
useEffect(() => {
(async () => {
await settingsStore.updateBonusesData();
@@ -22,101 +36,62 @@ export const InviteFriend = observer(({ goBackHandler }: { goBackHandler: () =>
const handleCopyLink = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
await navigator.clipboard.writeText(inviteUrl);
- notificationsStore.notifySuccess(reactTranslator.getMessage('settings_referral_link_copied'));
+ notificationsStore.notifySuccess(translator.getMessage('settings_referral_link_copied'));
};
if (bonusesDataRequestStatus !== RequestStatus.Done) {
return <DotsLoader />;
}
- switch (true) {
- case bonusesDataRequestStatus !== RequestStatus.Done: {
- return <DotsLoader />;
- }
- case invitesCount >= maxInvitesCount: {
- return (
- <div className="free-gbs__content">
- <button
- className="free-gbs__back-button"
- type="button"
- onClick={goBackHandler}
- >
- <svg className="icon icon--button">
- <use xlinkHref="#arrow" />
- </svg>
- </button>
- <div className="free-gbs__picture free-gbs__referral-pic" />
- <Title title={reactTranslator.getMessage(
- 'settings_referral_invited_friends',
- {
- count: invitesCount,
- limit: maxInvitesCount,
- },
- )}
- />
- <div className="free-gbs__info">{reactTranslator.getMessage('settings_free_gbs_invite_friend_completed_thank_you')}</div>
- <button
- type="button"
- className="button button--large button--outline-secondary free-gbs__button"
- onClick={goBackHandler}
- >
- {reactTranslator.getMessage('settings_free_gbs_go_back')}
- </button>
- </div>
- );
- }
- default: {
- return (
- <div className="free-gbs__content">
- <button
- className="free-gbs__back-button"
- type="button"
- onClick={goBackHandler}
- >
- <svg className="icon icon--button">
- <use xlinkHref="#arrow" />
- </svg>
- </button>
- <div className="free-gbs__picture free-gbs__referral-pic" />
- <Title title={reactTranslator.getMessage('settings_free_gbs_invite_friend')} />
- <div className="free-gbs__info">
- {reactTranslator.getMessage('settings_referral_info', {
- your_gb: COMPLETE_TASK_BONUS_GB,
- total_gb: maxInvitesCount,
- friend_gb: COMPLETE_TASK_BONUS_GB,
- })}
- </div>
- <div className="free-gbs__referral-status">
- {reactTranslator.getMessage(
- 'settings_referral_invited_friends',
- {
- count: invitesCount,
- limit: maxInvitesCount,
- },
- )}
- </div>
+ return (
+ <div className="free-gbs-task">
+ <Title title="" onClick={goBackHandler} />
+ <img
+ src="../../../assets/images/referral.svg"
+ alt={title}
+ className="free-gbs-task__image"
+ />
+ <Title
+ title={title}
+ subtitle={description}
+ className="free-gbs-task__title"
+ />
+ <div className="free-gbs-task__content invite-friend">
+ {!isCompleted ? (
<form
- className="free-gbs__referral-link"
+ className="invite-friend__content"
onSubmit={handleCopyLink}
>
- <label>
- {reactTranslator.getMessage('settings_referral_invite_link')}
- <input
- type="text"
- id="referral-link"
- value={inviteUrl}
- disabled
- />
- </label>
- <button
+ <Input
+ label={translator.getMessage('settings_referral_invite_link')}
+ value={inviteUrl}
+ readOnly
+ />
+ <Button
type="submit"
- className="button button--large button--primary"
+ size="medium"
+ className="invite-friend__btn"
>
- {reactTranslator.getMessage('settings_referral_copy_link')}
- </button>
+ {translator.getMessage('settings_referral_copy_link')}
+ </Button>
</form>
+ ) : (
+ <Button
+ variant="outlined"
+ size="medium"
+ onClick={goBackHandler}
+ className="free-gbs-task__go-back-btn"
+ >
+ {translator.getMessage('settings_free_gbs_go_back')}
+ </Button>
+ )}
+ <div className="invite-friend__counter">
+ {translator.getMessage('settings_referral_invited_friends', {
+ count: invitesCount,
+ limit: maxInvitesCount,
+ })}
</div>
- );
- }
- }
+ </div>
+ </div>
+ );
});
diff --git a/src/options/components/FreeGbs/free-gbs.pcss b/src/options/components/FreeGbs/free-gbs.pcss
index 5dde892ad..5f67c77a6 100644
--- a/src/options/components/FreeGbs/free-gbs.pcss
+++ b/src/options/components/FreeGbs/free-gbs.pcss
@@ -1,148 +1,119 @@
.free-gbs {
- &__item {
- display: flex;
- padding: 16px;
- padding-right: 48px;
- margin-left: 16px;
- border-radius: 8px;
- width: 100%;
- transform: translateX(-16px);
- align-items: center;
- cursor: pointer;
- transition: var(--t3) background-color;
- text-decoration: none;
- background: none;
- border: none;
- font-weight: 500;
- text-align: left;
-
- &:hover {
- background-color: var(--grayF3);
+ &__button {
+ &-check-icon {
+ color: var(--stroke-icons-gray-icons-default);
+ transition: var(--t3) color;
+
+ .free-gbs__button--done & {
+ color: var(--stroke-icons-product-icon-default);
+ }
}
- &--title {
- font-size: 16px;
- font-weight: 500;
- line-height: 19px;
- color: var(--gray-base);
+ &-arrow-icon {
+ transform: rotate(-90deg);
}
+ }
+}
- &--status {
- font-size: 14px;
- line-height: 18px;
- color: var(--gray88);
- }
+.free-gbs-task {
+ &__image {
+ width: 250px;
+ height: 250px;
+ }
- &--check-mark {
- position: relative;
- top: -10px;
- margin-right: 16px;
- }
+ &__title {
+ @media (--mobile) {
+ .title__text-start {
+ justify-content: center;
+ }
- &--arrow {
- position: absolute;
- right: 20px;
- top: 15px;
+ .title__subtitle {
+ text-align: center;
+ }
}
}
&__content {
padding: 0 16px;
- & .content__title {
- padding-left: 0;
- }
- }
+ .button {
+ flex-shrink: 0;
+ width: 200px;
- &__picture {
- width: 200px;
- height: 200px;
- background-repeat: no-repeat;
- margin: -20px 0 10px;
- }
-
- &__confirm-email-pic {
- background-image: url("../../../assets/images/confirm-email-task.svg");
+ @media (--mobile) {
+ width: 100%;
+ }
+ }
}
- &__add-device-pic {
- background-image: url("../../../assets/images/add-device.svg");
+ &__go-back-btn {
+ margin-top: 16px;
}
+}
- &__referral-pic {
- background-image: url("../../../assets/images/referral.svg");
+.invite-friend {
+ &__content {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ column-gap: 16px;
+
+ @media (--tablet-sm) {
+ flex-direction: column;
+ column-gap: 0;
+ row-gap: 16px;
+ align-items: flex-start;
+ justify-content: flex-start;
+ }
}
- &__info {
- max-width: 430px;
- margin-bottom: 25px;
+ &__counter {
+ margin-top: 24px;
font-size: 16px;
- line-height: 24px;
+ font-weight: 600;
+ line-height: 1.3;
}
- &__back-button {
- cursor: pointer;
- border: 0;
- background: transparent;
- transform: rotate(180deg);
- padding: 0;
- margin-left: -35px;
-
- @media (--tablet) {
- margin-left: 0;
- }
+ &__btn.button {
+ /* We are aligning height of button with input height */
+ padding: 14px 16px;
}
+}
- &__products-pic {
- display: block;
- margin-bottom: 26px;
+.confirm-email {
+ &__btn {
+ margin-top: 16px;
}
+}
- &__referral-status {
- margin-top: 25px;
- font-weight: bold;
- }
+.add-device {
+ &__link {
+ margin-top: 24px;
+ text-decoration: none;
- &__referral-link {
- margin-top: 30px;
- position: relative;
-
- & input {
- width: 100%;
- padding: 16px 23px;
- border: none;
- border-radius: 6px;
- background-color: var(--grayF2);
- color: var(--gray-base);
- margin: 7px 15px 30px 0;
- font-size: 16px;
- display: block;
+ &.button {
+ display: inline-flex;
+ width: auto;
+ min-width: 200px;
+
+ @media (--mobile) {
+ width: 100%;
+ }
}
- & label {
- font-size: 14px;
- color: var(--gray88);
+ &-icon {
+ color: currentColor;
}
}
- &__copy-link-message {
- font-size: 1.2rem;
- margin-left: 25px;
- visibility: hidden;
- position: absolute;
- min-width: 100px;
- top: 13px;
+ &__products {
+ width: 150px;
- &__display {
- visibility: visible;
+ @media (--mobile) {
+ display: block;
+ margin: 0 auto;
}
}
-
- &__external-link {
- margin: 0 7px 0 0;
- position: relative;
- top: -2px;
- }
}
.dots-loader {
diff --git a/src/options/components/General/ContextMenus.tsx b/src/options/components/General/ContextMenus.tsx
new file mode 100644
index 000000000..f0cd87706
--- /dev/null
+++ b/src/options/components/General/ContextMenus.tsx
@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { observer } from 'mobx-react';
+
+import { translator } from '../../../common/translator';
+import { rootStore } from '../../stores';
+import { ControlsSwitch } from '../ui/Controls';
+
+export const ContextMenus = observer(() => {
+ const { settingsStore } = useContext(rootStore);
+ const { contextMenusEnabled } = settingsStore;
+
+ const handleToggle = async (): Promise<void> => {
+ await settingsStore.setContextMenusValue(!contextMenusEnabled);
+ };
+
+ return (
+ <ControlsSwitch
+ title={translator.getMessage('settings_context_menus_title')}
+ description={translator.getMessage('settings_context_menus_description')}
+ isActive={contextMenusEnabled}
+ onToggle={handleToggle}
+ />
+ );
+});
diff --git a/src/options/components/General/DnsSettings/DnsSettings.tsx b/src/options/components/General/DnsSettings/DnsSettings.tsx
new file mode 100644
index 000000000..9bcb11eba
--- /dev/null
+++ b/src/options/components/General/DnsSettings/DnsSettings.tsx
@@ -0,0 +1,104 @@
+import React, { useContext } from 'react';
+import { observer } from 'mobx-react';
+
+import { type DnsServerData } from '../../../../background/schema';
+import { DEFAULT_DNS_SERVER, POPULAR_DNS_SERVERS } from '../../../../background/dns/dnsConstants';
+import { translator } from '../../../../common/translator';
+import { rootStore } from '../../../stores';
+import { Title } from '../../ui/Title';
+import { Button } from '../../ui/Button';
+
+import { DnsSettingsServer } from './DnsSettingsServer';
+import { DnsSettingsServerModalAdd } from './DnsSettingsServerModalAdd';
+import { DnsSettingsServerModalEdit } from './DnsSettingsServerModalEdit';
+
+import './dns-settings.pcss';
+
+export const DnsSettings = observer(() => {
+ const { settingsStore, notificationsStore } = useContext(rootStore);
+
+ const handleGoBack = () => {
+ settingsStore.setShowDnsSettings(false);
+ };
+
+ const handleSelect = (dnsServerId: string) => {
+ settingsStore.setDnsServer(dnsServerId);
+ };
+
+ const handleAddClick = () => {
+ settingsStore.openCustomDnsModal();
+ };
+
+ const handleEditClick = (dnsServer: DnsServerData) => {
+ settingsStore.setDnsServerToEdit(dnsServer);
+ settingsStore.openCustomDnsModal();
+ };
+
+ const handleDeleteClick = (dnsServerId: string) => {
+ settingsStore.removeCustomDnsServer(dnsServerId);
+ notificationsStore.notifySuccess(
+ translator.getMessage('settings_dns_delete_custom_server_notification'),
+ {
+ action: translator.getMessage('settings_exclusions_undo'),
+ handler: () => settingsStore.restoreCustomDnsServersData(),
+ },
+ );
+ };
+
+ const renderDnsServer = (dnsServer: DnsServerData) => (
+ <DnsSettingsServer
+ key={dnsServer.id}
+ name="dns-server"
+ value={dnsServer}
+ isActive={dnsServer.id === settingsStore.dnsServer}
+ onSelect={handleSelect}
+ />
+ );
+
+ const renderCustomDnsServer = (dnsServer: DnsServerData) => (
+ <DnsSettingsServer
+ key={dnsServer.id}
+ name="dns-server"
+ value={dnsServer}
+ isActive={dnsServer.id === settingsStore.dnsServer}
+ onSelect={handleSelect}
+ onEdit={handleEditClick}
+ onDelete={handleDeleteClick}
+ custom
+ />
+ );
+
+ return (
+ <>
+ <Title
+ title={translator.getMessage('settings_dns_label')}
+ onClick={handleGoBack}
+ className="dns-settings__title"
+ />
+
+ {/* DEFAULT SERVER */}
+ {renderDnsServer(DEFAULT_DNS_SERVER)}
+
+ {/* POPULAR SERVERS */}
+ <Title
+ title={translator.getMessage('settings_dns_popular_servers')}
+ size="medium"
+ className="dns-settings__popular-servers"
+ />
+ {POPULAR_DNS_SERVERS.map(renderDnsServer)}
+
+ {/* CUSTOM SERVERS */}
+ <Title
+ title={translator.getMessage('settings_dns_custom_servers')}
+ size="medium"
+ className="dns-settings__custom-servers"
+ />
+ {settingsStore.customDnsServers.map(renderCustomDnsServer)}
+ <Button variant="transparent" beforeIconName="plus" onClick={handleAddClick}>
+ {translator.getMessage('settings_dns_add_custom_server')}
+ </Button>
+ <DnsSettingsServerModalAdd />
+ <DnsSettingsServerModalEdit />
+ </>
+ );
+});
diff --git a/src/options/components/General/DnsSettings/DnsSettingsButton.tsx b/src/options/components/General/DnsSettings/DnsSettingsButton.tsx
new file mode 100644
index 000000000..9953d6320
--- /dev/null
+++ b/src/options/components/General/DnsSettings/DnsSettingsButton.tsx
@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { observer } from 'mobx-react';
+
+import { translator } from '../../../../common/translator';
+import { rootStore } from '../../../stores';
+import { Controls } from '../../ui/Controls';
+import { IconButton } from '../../ui/Icon';
+
+export const DnsSettingsButton = observer(() => {
+ const { settingsStore } = useContext(rootStore);
+ const { currentDnsServerName } = settingsStore;
+
+ const handleClick = () => {
+ settingsStore.setShowDnsSettings(true);
+ };
+
+ return (
+ <Controls
+ title={translator.getMessage('settings_dns_label')}
+ description={(
+ <>
+ {translator.getMessage('settings_dns_description')}
+ <br />
+ <br />
+ {translator.getMessage('settings_dns_description_current', {
+ dnsServerName: currentDnsServerName,
+ })}
+ </>
+ )}
+ action={<IconButton name="arrow-down" className="dns-settings__btn-icon" />}
+ onClick={handleClick}
+ />
+ );
+});
diff --git a/src/options/components/General/DnsSettings/DnsSettingsServer.tsx b/src/options/components/General/DnsSettings/DnsSettingsServer.tsx
new file mode 100644
index 000000000..b1e97ce7b
--- /dev/null
+++ b/src/options/components/General/DnsSettings/DnsSettingsServer.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+
+import { type DnsServerData } from '../../../../background/schema';
+import { Radio } from '../../ui/Radio';
+import { IconButton, type IconButtonProps } from '../../ui/Icon';
+
+interface ModifyButtonProps {
+ icon: string;
+ hoverColor?: IconButtonProps['hoverColor'];
+ onClick: () => void;
+}
+
+function ModifyButton({ icon, hoverColor, onClick }: ModifyButtonProps) {
+ const handleClick = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ onClick();
+ };
+
+ return (
+ <IconButton name={icon} hoverColor={hoverColor} onClick={handleClick} />
+ );
+}
+
+interface DnsSettingsServerBaseProps {
+ name: string;
+ value: DnsServerData;
+ isActive: boolean;
+ onSelect: (dnsServerId: string) => void;
+}
+
+interface DnsSettingsServerDefinedProps extends DnsSettingsServerBaseProps {
+ custom?: false;
+}
+
+interface DnsSettingsServerCustomProps extends DnsSettingsServerBaseProps {
+ custom: true;
+ onEdit: (dnsServer: DnsServerData) => void;
+ onDelete: (dnsServerId: string) => void;
+}
+
+export type DnsSettingsServerProps = DnsSettingsServerDefinedProps | DnsSettingsServerCustomProps;
+
+export function DnsSettingsServer({
+ name,
+ value,
+ isActive,
+ onSelect,
+ ...restProps
+}: DnsSettingsServerProps) {
+ if (restProps.custom) {
+ return (
+ <Radio
+ name={name}
+ value={value.id}
+ isActive={isActive}
+ title={value.title}
+ description={value.address}
+ onSelect={onSelect}
+ className="dns-settings__custom"
+ action={(
+ <span className="dns-settings__custom-actions">
+ <ModifyButton
+ icon="edit"
+ hoverColor="success"
+ onClick={() => restProps.onEdit(value)}
+ />
+ <ModifyButton
+ icon="basket"
+ hoverColor="error"
+ onClick={() => restProps.onDelete(value.id)}
+ />
+ </span>
+ )}
+ />
+ );
+ }
+
+ return (
+ <Radio
+ name={name}
+ value={value.id}
+ isActive={isActive}
+ title={value.title}
+ description={value.desc}
+ onSelect={onSelect}
+ className="dns-settings__custom"
+ />
+ );
+}
diff --git a/src/options/components/General/DnsSettings/DnsSettingsServerModal.tsx b/src/options/components/General/DnsSettings/DnsSettingsServerModal.tsx
new file mode 100644
index 000000000..f30d80121
--- /dev/null
+++ b/src/options/components/General/DnsSettings/DnsSettingsServerModal.tsx
@@ -0,0 +1,116 @@
+import React, { useContext, useId, useState } from 'react';
+import { observer } from 'mobx-react';
+
+import { rootStore } from '../../../stores';
+import { translator } from '../../../../common/translator';
+import { Button } from '../../ui/Button';
+import { Modal } from '../../ui/Modal';
+import { Input } from '../../ui/Input';
+
+export interface DnsSettingsServerModalProps {
+ title: React.ReactNode;
+ description?: React.ReactNode;
+ submitBtnTitle?: React.ReactNode;
+ isOpen: boolean;
+ onSubmit: (dnsServerName: string, dnsServerAddress: string) => Promise<string | null>;
+}
+
+export const DnsSettingsServerModal = observer(({
+ title,
+ description,
+ submitBtnTitle,
+ isOpen,
+ onSubmit,
+}: DnsSettingsServerModalProps) => {
+ const { settingsStore } = useContext(rootStore);
+
+ const {
+ dnsServerName,
+ dnsServerAddress,
+ } = settingsStore;
+
+ const formId = useId();
+
+ const [dnsServerAddressError, setDnsServerAddressError] = useState<string | null>(null);
+
+ const handleCloseModal = () => {
+ settingsStore.closeCustomDnsModal();
+ settingsStore.setDnsServerName('');
+ settingsStore.setDnsServerAddress('');
+ settingsStore.setDnsServerToEdit(null);
+ setDnsServerAddressError(null);
+ };
+
+ const handleDnsServerNameChange = (value: string) => {
+ settingsStore.setDnsServerName(value);
+ };
+
+ const handleDnsServerAddressChange = (value: string) => {
+ settingsStore.setDnsServerAddress(value);
+ if (dnsServerAddressError) {
+ setDnsServerAddressError(null);
+ }
+ };
+
+ const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+ e.preventDefault();
+
+ const dnsServerAddressError = await onSubmit(dnsServerName, dnsServerAddress);
+ if (dnsServerAddressError) {
+ setDnsServerAddressError(dnsServerAddressError);
+ return;
+ }
+ handleCloseModal();
+ };
+
+ const handleReset = (e: React.FormEvent<HTMLFormElement>) => {
+ e.preventDefault();
+ handleCloseModal();
+ };
+
+ return (
+ <Modal
+ title={title}
+ description={description}
+ isOpen={isOpen}
+ actions={(
+ <>
+ <Button type="submit" form={formId}>
+ {submitBtnTitle}
+ </Button>
+ <Button variant="outlined" type="reset" form={formId}>
+ {translator.getMessage('settings_exclusion_modal_cancel')}
+ </Button>
+ </>
+ )}
+ onClose={handleCloseModal}
+ >
+ <form
+ id={formId}
+ className="modal__form"
+ onSubmit={handleSubmit}
+ onReset={handleReset}
+ >
+ <Input
+ id="dns-name"
+ name="dns-name"
+ label={translator.getMessage('settings_dns_add_custom_server_name')}
+ placeholder={translator.getMessage('settings_dns_add_custom_server_name_placeholder')}
+ value={dnsServerName}
+ onChange={handleDnsServerNameChange}
+ required
+ />
+ <Input
+ id="dns-address"
+ name="dns-address"
+ label={translator.getMessage('settings_dns_add_custom_server_address')}
+ placeholder={translator.getMessage('settings_dns_add_custom_server_address_placeholder')}
+ value={dnsServerAddress}
+ onChange={handleDnsServerAddressChange}
+ error={dnsServerAddressError}
+ required
+ />
+ </form>
+ </Modal>
+ );
+});
diff --git a/src/options/components/General/DnsSettings/DnsSettingsServerModalAdd.tsx b/src/options/components/General/DnsSettings/DnsSettingsServerModalAdd.tsx
new file mode 100644
index 000000000..ca13eafd1
--- /dev/null
+++ b/src/options/components/General/DnsSettings/DnsSettingsServerModalAdd.tsx
@@ -0,0 +1,56 @@
+import React, { useContext } from 'react';
+import { observer } from 'mobx-react';
+
+import { rootStore } from '../../../stores';
+import { getForwarderUrl } from '../../../../common/helpers';
+import { translator } from '../../../../common/translator';
+import { FORWARDER_URL_QUERIES } from '../../../../background/config';
+
+import { DnsSettingsServerModal } from './DnsSettingsServerModal';
+import { normalizeDnsServerAddress, validateDnsServerAddress } from './validate';
+
+export const DnsSettingsServerModalAdd = observer(() => {
+ const { settingsStore, notificationsStore } = useContext(rootStore);
+ const {
+ forwarderDomain,
+ isCustomDnsModalOpen,
+ customDnsServers,
+ dnsServerToEdit,
+ } = settingsStore;
+
+ const adguardKnownDnsKbUrl = getForwarderUrl(
+ forwarderDomain,
+ FORWARDER_URL_QUERIES.ADGUARD_DNS_PROVIDERS_KB,
+ );
+
+ const handleSubmit = async (dnsServerName: string, dnsServerAddress: string) => {
+ const dnsServerAddressError = validateDnsServerAddress(customDnsServers, dnsServerAddress);
+ if (dnsServerAddressError) {
+ return dnsServerAddressError;
+ }
+ const normalizedDnsServerAddress = normalizeDnsServerAddress(dnsServerAddress);
+ const dnsServer = await settingsStore.addCustomDnsServer(dnsServerName, normalizedDnsServerAddress);
+ notificationsStore.notifySuccess(
+ translator.getMessage('settings_dns_add_custom_server_notification_success'),
+ {
+ action: translator.getMessage('settings_exclusions_undo'),
+ handler: () => settingsStore.removeCustomDnsServer(dnsServer.id),
+ },
+ );
+ return null;
+ };
+
+ return (
+ <DnsSettingsServerModal
+ title={translator.getMessage('settings_dns_add_custom_server')}
+ description={(
+ <a href={adguardKnownDnsKbUrl} target="_blank" rel="noreferrer">
+ {translator.getMessage('settings_dns_add_custom_server_info')}
+ </a>
+ )}
+ submitBtnTitle={translator.getMessage('settings_dns_add_custom_server_save_and_select')}
+ isOpen={isCustomDnsModalOpen && !dnsServerToEdit}
+ onSubmit={handleSubmit}
+ />
+ );
+});
diff --git a/src/options/components/General/DnsSettings/DnsSettingsServerModalEdit.tsx b/src/options/components/General/DnsSettings/DnsSettingsServerModalEdit.tsx
new file mode 100644
index 000000000..4e07f5292
--- /dev/null
+++ b/src/options/components/General/DnsSettings/DnsSettingsServerModalEdit.tsx
@@ -0,0 +1,62 @@
+import React, { useContext } from 'react';
+import { observer } from 'mobx-react';
+
+import { rootStore } from '../../../stores';
+import { translator } from '../../../../common/translator';
+
+import { DnsSettingsServerModal } from './DnsSettingsServerModal';
+import { normalizeDnsServerAddress, validateDnsServerAddress } from './validate';
+
+export const DnsSettingsServerModalEdit = observer(() => {
+ const { settingsStore, notificationsStore } = useContext(rootStore);
+
+ const {
+ isCustomDnsModalOpen,
+ customDnsServers,
+ dnsServerToEdit,
+ } = settingsStore;
+
+ const handleSubmit = async (dnsServerName: string, dnsServerAddress: string) => {
+ if (!dnsServerToEdit) {
+ return null;
+ }
+ const {
+ id,
+ title: oldDnsServerName,
+ address: oldDnsServerAddress,
+ } = dnsServerToEdit;
+
+ if (oldDnsServerAddress !== dnsServerAddress) {
+ // `oldDnsServerAddress` is dns address before editing,
+ // `dnsServerAddress` is the state of dns address form.
+ // if dns address was edited, it has to be verified.
+ const dnsServerAddressError = validateDnsServerAddress(customDnsServers, dnsServerAddress);
+ if (dnsServerAddressError) {
+ return dnsServerAddressError;
+ }
+ } else if (oldDnsServerName === dnsServerName) {
+ // If nothing changed just return
+ return null;
+ }
+ const normalizedDnsServerAddress = normalizeDnsServerAddress(dnsServerAddress);
+ await settingsStore.editCustomDnsServer(id, dnsServerName, normalizedDnsServerAddress);
+ notificationsStore.notifySuccess(
+ translator.getMessage('settings_dns_edit_custom_server_notification'),
+ {
+ action: translator.getMessage('settings_exclusions_undo'),
+ handler: () => settingsStore.editCustomDnsServer(id, oldDnsServerName, oldDnsServerAddress),
+ },
+ );
+
+ return null;
+ };
+
+ return (
+ <DnsSettingsServerModal
+ title={translator.getMessage('settings_dns_edit_custom_server')}
+ submitBtnTitle={translator.getMessage('settings_dns_add_custom_server_save')}
+ isOpen={isCustomDnsModalOpen && !!dnsServerToEdit}
+ onSubmit={handleSubmit}
+ />
+ );
+});
diff --git a/src/options/components/General/DnsSettings/dns-settings.pcss b/src/options/components/General/DnsSettings/dns-settings.pcss
new file mode 100644
index 000000000..1816981d4
--- /dev/null
+++ b/src/options/components/General/DnsSettings/dns-settings.pcss
@@ -0,0 +1,40 @@
+.dns-settings {
+ &__btn-icon {
+ transform: rotate(-90deg);
+ }
+
+ &__title {
+ margin-bottom: 24px;
+ }
+
+ &__popular-servers {
+ padding-top: 32px;
+ }
+
+ &__custom {
+ &:hover,
+ &:active,
+ &:focus-visible,
+ &:focus-within {
+ .dns-settings__custom-actions {
+ opacity: 1;
+ }
+ }
+
+ &-actions {
+ display: flex;
+ column-gap: 16px;
+ /* Use opacity instead of display to not cause layout shifts */
+ opacity: 0;
+ transition: var(--t3) opacity;
+
+ @media (--touch-screen) {
+ opacity: 1;
+ }
+ }
+
+ &-servers {
+ padding-top: 48px;
+ }
+ }
+}
diff --git a/src/options/components/General/DnsSettings/index.ts b/src/options/components/General/DnsSettings/index.ts
new file mode 100644
index 000000000..a62add4b0
--- /dev/null
+++ b/src/options/components/General/DnsSettings/index.ts
@@ -0,0 +1,2 @@
+export { DnsSettings } from './DnsSettings';
+export { DnsSettingsButton } from './DnsSettingsButton';
diff --git a/src/options/components/General/DnsSettings/validate.ts b/src/options/components/General/DnsSettings/validate.ts
new file mode 100644
index 000000000..faf82b4d5
--- /dev/null
+++ b/src/options/components/General/DnsSettings/validate.ts
@@ -0,0 +1,48 @@
+import { isIP } from 'is-ip';
+
+import { type DnsServerData } from '../../../../background/schema';
+import { translator } from '../../../../common/translator';
+
+const DOH_PREFIX = 'https://';
+const DOT_PREFIX = 'tls://';
+
+const DNS_SERVER_ERROR = {
+ INVALID: translator.getMessage('settings_dns_add_custom_server_invalid_address'),
+ DUPLICATE: translator.getMessage('settings_dns_add_custom_server_duplicate_address'),
+};
+
+/**
+ * Validate custom dns server address.
+ *
+ * @param customDnsServers List of custom dns servers.
+ * @param address Address to validate.
+ * @returns Error message if address is invalid, otherwise null.
+ */
+export const validateDnsServerAddress = (
+ customDnsServers: DnsServerData[],
+ address: string,
+): string | null => {
+ // check existing custom dns addresses
+ if (customDnsServers.some((server) => server.address === address)) {
+ return DNS_SERVER_ERROR.DUPLICATE;
+ }
+
+ // for the moment only plain dns and tls supported
+ if (address.startsWith(DOH_PREFIX) || !address.includes('.')) {
+ return DNS_SERVER_ERROR.INVALID;
+ }
+ return null;
+};
+
+/**
+ * Normalize dns server address.
+ *
+ * @param address Address to normalize.
+ * @returns Normalized address.
+ */
+export const normalizeDnsServerAddress = (address: string) => {
+ if (isIP(address) || address.startsWith(DOT_PREFIX)) {
+ return address;
+ }
+ return `${DOT_PREFIX}${address}`;
+};
diff --git a/src/options/components/General/General.tsx b/src/options/components/General/General.tsx
new file mode 100644
index 000000000..9c1021b3e
--- /dev/null
+++ b/src/options/components/General/General.tsx
@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { observer } from 'mobx-react';
+
+import { translator } from '../../../common/translator';
+import { rootStore } from '../../stores';
+import { Title } from '../ui/Title';
+
+import { QuickConnect } from './QuickConnect';
+import { Theme } from './Theme';
+import { ContextMenus } from './ContextMenus';
+import { HelpUsImprove } from './HelpUsImprove';
+import { WebRTC } from './WebRTC';
+import { DnsSettings, DnsSettingsButton } from './DnsSettings';
+
+export const General = observer(() => {
+ const { settingsStore } = useContext(rootStore);
+ const { showDnsSettings } = settingsStore;
+
+ if (showDnsSettings) {
+ return <DnsSettings />;
+ }
+
+ return (
+ <>
+ <Title title={translator.getMessage('settings_general_title')} />
+ <QuickConnect />
+ <Theme />
+ <ContextMenus />
+ <HelpUsImprove />
+ <WebRTC />
+ <DnsSettingsButton />
+ </>
+ );
+});
diff --git a/src/options/components/General/HelpUsImprove.tsx b/src/options/components/General/HelpUsImprove.tsx
new file mode 100644
index 000000000..18ecbb3b0
--- /dev/null
+++ b/src/options/components/General/HelpUsImprove.tsx
@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { observer } from 'mobx-react';
+
+import { translator } from '../../../common/translator';
+import { rootStore } from '../../stores';
+import { ControlsSwitch } from '../ui/Controls';
+
+export const HelpUsImprove = observer(() => {
+ const { settingsStore } = useContext(rootStore);
+ const { helpUsImprove } = settingsStore;
+
+ const handleToggle = async (): Promise<void> => {
+ await settingsStore.setHelpUsImproveValue(!helpUsImprove);
+ };
+
+ return (
+ <ControlsSwitch
+ title={translator.getMessage('settings_help_us_improve_title')}
+ description={translator.getMessage('settings_help_us_improve_description')}
+ isActive={helpUsImprove}
+ onToggle={handleToggle}
+ />
+ );
+});
diff --git a/src/options/components/General/QuickConnect.tsx b/src/options/components/General/QuickConnect.tsx
new file mode 100644
index 000000000..cd4635c9d
--- /dev/null
+++ b/src/options/components/General/QuickConnect.tsx
@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { observer } from 'mobx-react';
+
+import { QuickConnectSetting } from '../../../common/constants';
+import { translator } from '../../../common/translator';
+import { rootStore } from '../../stores';
+import { ControlsSelect } from '../ui/Controls';
+
+export const QuickConnect = observer(() => {
+ const { settingsStore } = useContext(rootStore);
+
+ const handleChange = async (value: QuickConnectSetting): Promise<void> => {
+ await settingsStore.setQuickConnectSetting(value);
+ };
+
+ return (
+ <ControlsSelect
+ title={translator.getMessage('settings_quick_connect_title')}
+ description={translator.getMessage('settings_quick_connect_subtitle')}
+ value={settingsStore.quickConnect}
+ options={[
+ {
+ value: QuickConnectSetting.LastUsedLocation,
+ title: translator.getMessage('settings_quick_connect_last_used'),
+ },
+ {
+ value: QuickConnectSetting.FastestLocation,
+ title: translator.getMessage('settings_quick_connect_fastest'),
+ },
+ ]}
+ onChange={handleChange}
+ />
+ );
+});
diff --git a/src/options/components/General/Theme.tsx b/src/options/components/General/Theme.tsx
new file mode 100644
index 000000000..bbd852628
--- /dev/null
+++ b/src/options/components/General/Theme.tsx
@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import { observer } from 'mobx-react';
+
+import { AppearanceTheme } from '../../../common/constants';
+import { translator } from '../../../common/translator';
+import { rootStore } from '../../stores';
+import { ControlsSelect } from '../ui/Controls';
+
+export const Theme = observer(() => {
+ const { settingsStore } = useContext(rootStore);
+
+ const handleChange = async (value: AppearanceTheme): Promise<void> => {
+ await settingsStore.setAppearanceTheme(value);
+ };
+
+ return (
+ <ControlsSelect
+ title={translator.getMessage('settings_theme_label')}
+ value={settingsStore.appearanceTheme}
+ options={[
+ {
+ value: AppearanceTheme.System,
+ title: translator.getMessage('settings_theme_system'),
+ },
+ {
+ value: AppearanceTheme.Dark,
+ title: translator.getMessage('settings_theme_dark'),
+ },
+ {
+ value: AppearanceTheme.Light,
+ title: translator.getMessage('settings_theme_light'),
+ },
+ ]}
+ onChange={handleChange}
+ />
+ );
+});
diff --git a/src/options/components/General/WebRTC.tsx b/src/options/components/General/WebRTC.tsx
new file mode 100644
index 000000000..5ad84776b
--- /dev/null
+++ b/src/options/components/General/WebRTC.tsx
@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { observer } from 'mobx-react';
+
+import { rootStore } from '../../stores';
+import { translator } from '../../../common/translator';
+import { ControlsSwitch } from '../ui/Controls';
+
+export const WebRTC = observer(() => {
+ const { settingsStore } = useContext(rootStore);
+ const { webRTCEnabled } = settingsStore;
+
+ const handleToggle = async (): Promise<void> => {
+ await settingsStore.setWebRTCValue(!webRTCEnabled);
+ };
+
+ return (
+ <ControlsSwitch
+ title={translator.getMessage('settings_webrtc_label')}
+ description={translator.getMessage('settings_webrtc_desc')}
+ isActive={webRTCEnabled}
+ onToggle={handleToggle}
+ />
+ );
+});
diff --git a/src/options/components/General/index.ts b/src/options/components/General/index.ts
new file mode 100644
index 000000000..82d723029
--- /dev/null
+++ b/src/options/components/General/index.ts
@@ -0,0 +1 @@
+export { General } from './General';
diff --git a/src/options/components/Preloader/Preloader.tsx b/src/options/components/Preloader/Preloader.tsx
index 6aef6858c..5d2a9c9c5 100644
--- a/src/options/components/Preloader/Preloader.tsx
+++ b/src/options/components/Preloader/Preloader.tsx
@@ -1,6 +1,5 @@
import React, { useContext } from 'react';
import { observer } from 'mobx-react';
-import Modal from 'react-modal';
import { rootStore } from '../../stores';
import { RequestStatus } from '../../stores/consts';
@@ -13,13 +12,13 @@ export const Preloader = observer(() => {
const isOpen = globalStore.status === RequestStatus.Pending
|| authStore.requestProcessState === RequestStatus.Pending;
+ if (!isOpen) {
+ return null;
+ }
+
return (
- <Modal
- isOpen={isOpen}
- className="preloader"
- overlayClassName="preloader__overlay"
- >
+ <div className="preloader">
<div className="preloader__in" />
- </Modal>
+ </div>
);
});
diff --git a/src/options/components/Preloader/preloader.pcss b/src/options/components/Preloader/preloader.pcss
index c2084a88c..2f5fb4161 100644
--- a/src/options/components/Preloader/preloader.pcss
+++ b/src/options/components/Preloader/preloader.pcss
@@ -9,20 +9,17 @@
}
.preloader {
+ z-index: var(--preloader-z);
+ position: fixed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
outline: none;
-
- &__overlay {
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1000;
- width: 100%;
- height: 100%;
- position: fixed;
- top: 0;
- left: 0;
- background-color: rgba(255, 255, 255, 0.8);
- }
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background-color: var(--fills-backgrounds-page-background-default);
&__in {
width: 40px;
diff --git a/src/options/components/Settings/AppearanceTheme/AppearanceTheme.tsx b/src/options/components/Settings/AppearanceTheme/AppearanceTheme.tsx
deleted file mode 100644
index 984f974ec..000000000
--- a/src/options/components/Settings/AppearanceTheme/AppearanceTheme.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { useContext } from 'react';
-import { observer } from 'mobx-react';
-
-import { AppearanceTheme } from '../../../../common/constants';
-import { rootStore } from '../../../stores';
-import { Select } from '../../ui/Select';
-import { reactTranslator } from '../../../../common/reactTranslator';
-
-export const AppearanceThemeSetting = observer(() => {
- const { settingsStore } = useContext(rootStore);
-
- const handleSetAppearanceTheme = async (value: AppearanceTheme): Promise<void> => {
- await settingsStore.setAppearanceTheme(value);
- };
-
- const THEMES = [
- {
- id: AppearanceTheme.System,
- title: reactTranslator.getMessage('settings_theme_system'),
- },
- {
- id: AppearanceTheme.Dark,
- title: reactTranslator.getMessage('settings_theme_dark'),
- },
- {
- id: AppearanceTheme.Light,
- title: reactTranslator.getMessage('settings_theme_light'),
- },
- ];
-
- return (
- <div className="settings__group">
- <div className="settings__item">
- <div className="settings__item-content">
- <div className="settings__item-title">
- {reactTranslator.getMessage('settings_theme_label')}
- </div>
- </div>
- <Select
- options={THEMES}
- currentValue={settingsStore.appearanceTheme}
- optionChange={handleSetAppearanceTheme}
- />
- </div>
- </div>
- );
-});
diff --git a/src/options/components/Settings/AppearanceTheme/index.ts b/src/options/components/Settings/AppearanceTheme/index.ts
deleted file mode 100644
index 07b0d848a..000000000
--- a/src/options/components/Settings/AppearanceTheme/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { AppearanceThemeSetting } from './AppearanceTheme';
diff --git a/src/options/components/Settings/ContextMenus/ContextMenus.tsx b/src/options/components/Settings/ContextMenus/ContextMenus.tsx
deleted file mode 100644
index 05fe2d651..000000000
--- a/src/options/components/Settings/ContextMenus/ContextMenus.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { useContext } from 'react';
-import { observer } from 'mobx-react';
-
-import { rootStore } from '../../../stores';
-import { Switch } from '../../ui/Switch';
-import { reactTranslator } from '../../../../common/reactTranslator';
-
-export const ContextMenus = observer(() => {
- const { settingsStore } = useContext(rootStore);
- const { contextMenusEnabled } = settingsStore;
-
- const handleToggle = async (): Promise<void> => {
- await settingsStore.setContextMenusValue(!contextMenusEnabled);
- };
-
- return (
- <div className="settings__group">
- <Switch
- title={reactTranslator.getMessage('settings_context_menus_title')}
- handleToggle={handleToggle}
- checked={contextMenusEnabled}
- />
- </div>
- );
-});
diff --git a/src/options/components/Settings/ContextMenus/index.ts b/src/options/components/Settings/ContextMenus/index.ts
deleted file mode 100644
index 2011c2b7a..000000000
--- a/src/options/components/Settings/ContextMenus/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ContextMenus } from './ContextMenus';
diff --git a/src/options/components/Settings/DnsMenuItem/DnsMenuItem.tsx b/src/options/components/Settings/DnsMenuItem/DnsMenuItem.tsx
deleted file mode 100644
index bd1258f89..000000000
--- a/src/options/components/Settings/DnsMenuItem/DnsMenuItem.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { useContext } from 'react';
-import { observer } from 'mobx-react';
-
-import { rootStore } from '../../../stores';
-import { reactTranslator } from '../../../../common/reactTranslator';
-
-export const DnsMenuItem = observer(() => {
- const { settingsStore } = useContext(rootStore);
-
- const { currentDnsServerName, setShowDnsSettings } = settingsStore;
-
- const handleClick = () => {
- setShowDnsSettings(true);
- };
-
- return (
- <div className="settings__group">
- <button
- className="settings__item settings__item--dns-server"
- onClick={handleClick}
- type="button"
- >
- <div className="settings__item-content">
- <div className="settings__item-title">
- {reactTranslator.getMessage('settings_dns_label')}
- </div>
- <div className="settings__item-desc">
- {currentDnsServerName}
- </div>
- <svg className="icon icon--button">
- <use xlinkHref="#arrow" />
- </svg>
- </div>
- </button>
- </div>
- );
-});
diff --git a/src/options/components/Settings/DnsMenuItem/index.ts b/src/options/components/Settings/DnsMenuItem/index.ts
deleted file mode 100644
index 907199652..000000000
--- a/src/options/components/Settings/DnsMenuItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DnsMenuItem } from './DnsMenuItem';
diff --git a/src/options/components/Settings/DnsSettings/CustomDnsServerModal.tsx b/src/options/components/Settings/DnsSettings/CustomDnsServerModal.tsx
deleted file mode 100644
index e1cdfea83..000000000
--- a/src/options/components/Settings/DnsSettings/CustomDnsServerModal.tsx
+++ /dev/null
@@ -1,288 +0,0 @@
-import React, {
- useContext,
- useEffect,
- useState,
- type FormEvent,
-} from 'react';
-import Modal from 'react-modal';
-import { observer } from 'mobx-react';
-
-import { isIP } from 'is-ip';
-import classnames from 'classnames';
-
-import { rootStore } from '../../../stores';
-import { getForwarderUrl } from '../../../../common/helpers';
-import { reactTranslator } from '../../../../common/reactTranslator';
-import { translator } from '../../../../common/translator';
-import { FORWARDER_URL_QUERIES } from '../../../../background/config';
-
-const DOH_PREFIX = 'https://';
-const DOT_PREFIX = 'tls://';
-
-enum ModalType {
- AddDnsServer = 'addDnsServer',
- EditDnsServer = 'editDnsServer',
-}
-
-const DNS_SERVER_ERROR = {
- INVALID: translator.getMessage('settings_dns_add_custom_server_invalid_address'),
- DUPLICATE: translator.getMessage('settings_dns_add_custom_server_duplicate_address'),
-};
-
-export const CustomDnsServerModal = observer(() => {
- const { settingsStore, notificationsStore } = useContext(rootStore);
-
- const {
- forwarderDomain,
- dnsServerName,
- dnsServerAddress,
- setDnsServerName,
- setDnsServerAddress,
- } = settingsStore;
-
- const adguardDnsKbUrl = getForwarderUrl(forwarderDomain, FORWARDER_URL_QUERIES.ADGUARD_DNS_KB);
-
- const [dnsServerAddressError, setDnsServerAddressError] = useState<string | null>(null);
-
- const handleAddressChange = (value: string) => {
- setDnsServerAddress(value);
- if (dnsServerAddressError) {
- setDnsServerAddressError(null);
- }
- };
-
- const clearDnsServerAddress = () => {
- setDnsServerAddress('');
- setDnsServerAddressError(null);
- };
-
- const clearInputs = (): void => {
- setDnsServerName('');
- setDnsServerAddress('');
- };
-
- const closeModal = (): void => {
- clearInputs();
- if (settingsStore.dnsServerToEdit) {
- settingsStore.setDnsServerToEdit(null);
- }
- setDnsServerAddressError(null);
- settingsStore.closeCustomDnsModal();
- };
-
- const validateDnsAddress = (address: string): string | null => {
- // check existing custom dns addresses
-
- if (settingsStore.customDnsServers.some((server) => server.address === address)) {
- return DNS_SERVER_ERROR.DUPLICATE;
- }
- // for the moment only plain dns and tls supported
- if (address.startsWith(DOH_PREFIX) || !address.includes('.')) {
- return DNS_SERVER_ERROR.INVALID;
- }
- return null;
- };
-
- const handleDnsAddress = (address: string) => {
- if (isIP(address) || address.startsWith(DOT_PREFIX)) {
- return address;
- }
- return `${DOT_PREFIX}${address}`;
- };
-
- const addDnsServer = async (): Promise<void> => {
- const dnsServerAddressError = validateDnsAddress(dnsServerAddress);
- if (dnsServerAddressError) {
- setDnsServerAddressError(dnsServerAddressError);
- return;
- }
- const dnsAddressToAdd = handleDnsAddress(dnsServerAddress);
- const dnsServer = await settingsStore.addCustomDnsServer(dnsServerName, dnsAddressToAdd);
- notificationsStore.notifySuccess(
- reactTranslator.getMessage('settings_dns_add_custom_server_notification_success'),
- {
- action: reactTranslator.getMessage('settings_exclusions_undo'),
- handler: () => settingsStore.removeCustomDnsServer(dnsServer.id),
- },
- );
- closeModal();
- };
-
- const editDnsServer = async (): Promise<void> => {
- if (!settingsStore.dnsServerToEdit) {
- return;
- }
- const { address } = settingsStore.dnsServerToEdit;
-
- // `address` is dns address before editing,
- // `dnsServerAddress` is the state of dns address form.
- // if dns address was edited, it has to be verified.
- if (address !== dnsServerAddress) {
- const dnsServerAddressError = validateDnsAddress(dnsServerAddress);
- if (dnsServerAddressError) {
- setDnsServerAddressError(dnsServerAddressError);
- return;
- }
- }
- const editedDnsAddress = handleDnsAddress(dnsServerAddress);
- await settingsStore.editCustomDnsServer(dnsServerName, editedDnsAddress);
- closeModal();
- };
-
- const modalType = settingsStore.dnsServerToEdit
- ? ModalType.EditDnsServer
- : ModalType.AddDnsServer;
-
- const modalData = {
- [ModalType.AddDnsServer]: {
- modalTitle: reactTranslator.getMessage('settings_dns_add_custom_server'),
- submitText: reactTranslator.getMessage('settings_dns_add_custom_server_save_and_select'),
- handler: addDnsServer,
- },
- [ModalType.EditDnsServer]: {
- modalTitle: reactTranslator.getMessage('settings_dns_edit_custom_server'),
- submitText: reactTranslator.getMessage('settings_dns_add_custom_server_save'),
- handler: editDnsServer,
- },
- };
-
- useEffect(() => {
- if (settingsStore.dnsServerToEdit) {
- const { title: serverName, address } = settingsStore.dnsServerToEdit;
-
- setDnsServerName(serverName);
- setDnsServerAddress(address);
- }
- }, [settingsStore.isCustomDnsModalOpen]);
-
- const ipAddressInputClasses = classnames(
- 'input__in',
- 'input__in--content',
- { 'input__in--clear': !dnsServerAddressError },
- { 'dns-settings__modal--input--error': dnsServerAddressError },
- );
-
- const handleSubmit = (e: FormEvent) => {
- e.preventDefault();
- modalData[modalType].handler();
- };
-
- return (
- <Modal
- isOpen={settingsStore.isCustomDnsModalOpen}
- className="modal dns-settings__modal"
- overlayClassName="overlay overlay--fullscreen"
- onRequestClose={closeModal}
- >
- <form onSubmit={handleSubmit}>
- <button
- type="button"
- className="button button--icon checkbox__button modal__close-icon"
- onClick={closeModal}
- >
- <svg className="icon icon--button icon--cross">
- <use xlinkHref="#cross" />
- </svg>
- </button>
- <div className="modal__title">{modalData[modalType].modalTitle}</div>
- <div className="dns-settings__modal--content">
- {!settingsStore.dnsServerToEdit && (
- <div className="form__item">
- {
- reactTranslator.getMessage('settings_dns_add_custom_server_info', {
- a: (chunks: string) => {
- return (
- <a
- href={adguardDnsKbUrl}
- target="_blank"
- rel="noreferrer"
- className="dns-settings__modal--link"
- >
- {chunks}
- </a>
- );
- },
- })
- }
- </div>
- )}
- <div className="form__item">
- <label>
- <div className="input__label">
- {reactTranslator.getMessage('settings_dns_add_custom_server_name')}
- </div>
- <input
- id="dns-name"
- className="input__in input__in--content input__in--clear"
- type="text"
- value={dnsServerName}
- onChange={(e) => setDnsServerName(e.target.value)}
- placeholder={translator.getMessage('settings_dns_add_custom_server_name_placeholder')}
- required
- />
- {dnsServerName && (
- <button
- type="button"
- className="button dns-settings__modal--clear-icon"
- onClick={() => setDnsServerName('')}
- >
- <svg className="icon icon--button icon--cross">
- <use xlinkHref="#cross" />
- </svg>
- </button>
- )}
- </label>
- </div>
- <div className="form__item">
- <label>
- <div className="input__label">
- {reactTranslator.getMessage('settings_dns_add_custom_server_address')}
- </div>
- <input
- id="dns-address"
- className={ipAddressInputClasses}
- type="text"
- value={dnsServerAddress}
- onChange={(e) => handleAddressChange(e.target.value)}
- placeholder={translator.getMessage('settings_dns_add_custom_server_address_placeholder')}
- required
- />
- {dnsServerAddressError && (
- <div className="dns-settings__modal--error-message">
- {dnsServerAddressError}
- </div>
- )}
- {dnsServerAddress && (
- <button
- type="button"
- className="button dns-settings__modal--clear-icon"
- onClick={clearDnsServerAddress}
- >
- <svg className="icon icon--button icon--cross">
- <use xlinkHref="#cross" />
- </svg>
- </button>
- )}
- </label>
- </div>
- <div className="form__actions">
- <button
- type="button"
- className="button button--medium button--outline-secondary"
- onClick={closeModal}
- >
- {reactTranslator.getMessage('settings_exclusion_modal_cancel')}
- </button>
- <button
- type="submit"
- className="button button--medium button--primary"
- disabled={!(dnsServerName && dnsServerAddress)}
- >
- {modalData[modalType].submitText}
- </button>
- </div>
- </div>
- </form>
- </Modal>
- );
-});
diff --git a/src/options/components/Settings/DnsSettings/DnsSettings.tsx b/src/options/components/Settings/DnsSettings/DnsSettings.tsx
deleted file mode 100644
index 45129dd65..000000000
--- a/src/options/components/Settings/DnsSettings/DnsSettings.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { useContext } from 'react';
-import { observer } from 'mobx-react';
-
-import classnames from 'classnames';
-
-import { DEFAULT_DNS_SERVER, POPULAR_DNS_SERVERS } from '../../../../background/dns/dnsConstants';
-import { rootStore } from '../../../stores';
-import { Title } from '../../ui/Title';
-import { reactTranslator } from '../../../../common/reactTranslator';
-import type { DnsServerData } from '../../../../background/schema';
-
-import { CustomDnsServerModal } from './CustomDnsServerModal';
-
-import './dns-settings.pcss';
-
-export const DnsSettings = observer(() => {
- const { settingsStore, notificationsStore } = useContext(rootStore);
-
- const handleDnsSelect = async (
- event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>,
- ): Promise<void> => {
- // To prevent multiple handles of one click from radio-button and
- // from parent div container.
- event.stopPropagation();
-
- const dnsServerId = event.currentTarget.id;
- await settingsStore.setDnsServer(dnsServerId);
- };
-
- const goBackHandler = (): void => {
- settingsStore.setShowDnsSettings(false);
- };
-
- const openAddDnsServerModal = () => {
- settingsStore.openCustomDnsModal();
- };
-
- const removeDnsServer = (
- event: React.MouseEvent,
- dnsServerId: string,
- ): void => {
- event.stopPropagation();
- settingsStore.removeCustomDnsServer(dnsServerId);
- notificationsStore.notifySuccess(
- reactTranslator.getMessage('settings_dns_delete_custom_server_notification'),
- {
- action: reactTranslator.getMessage('settings_exclusions_undo'),
- handler: () => settingsStore.restoreCustomDnsServersData(),
- },
- );
- };
-
- const openEditDnsServerModal = (
- event: React.MouseEvent,
- server: DnsServerData,
- ): void => {
- // To not trigger parent dns-button selector.
- event.stopPropagation();
- settingsStore.setDnsServerToEdit(server);
- settingsStore.openCustomDnsModal();
- };
-
- const renderRadioButton = (dnsServerId: string) => {
- const enabled = dnsServerId === settingsStore.dnsServer;
- const xlinkHref = classnames({
- '#bullet_on': enabled,
- '#bullet_off': !enabled,
- });
- // TODO: Dirty hack to support a11y, should use native <input type="radio">.
- return (
- <button
- type="button"
- id={dnsServerId}
- name={dnsServerId}
- onClick={handleDnsSelect}
- className="radio__container"
- >
- <svg className="radio__icon">
- <use xlinkHref={xlinkHref} />
- </svg>
- </button>
- );
- };
-
- const renderActions = (dnsServerData: DnsServerData) => {
- return (
- <div className="dns-settings__item--actions">
- <button
- type="button"
- className="button button--icon dns-settings__item--actions--button"
- onClick={(event) => openEditDnsServerModal(event, dnsServerData)}
- >
- <svg className="icon icon--button">
- <use xlinkHref="#edit" />
- </svg>
- </button>
- <button
- type="button"
- className="button button--icon dns-settings__item--actions--button"
- onClick={(event) => removeDnsServer(event, dnsServerData.id)}
- >
- <svg className="icon icon--button">
- <use xlinkHref="#basket" />
- </svg>
- </button>
- </div>
- );
- };
-
- const renderDnsServer = (dnsServerData: DnsServerData) => {
- if (!dnsServerData) {
- return null;
- }
- const {
- id,
- title,
- address,
- desc,
- } = dnsServerData;
-
- // Custom servers doesn't have description
- const isCustom = !desc;
-
- return (
- <div
- id={id}
- key={id}
- className="dns-settings__item"
- onClick={handleDnsSelect}
- >
- {renderRadioButton(id)}
- <div>
- <div className="dns-settings__item-title">{title}</div>
- <div className="dns-settings__item-desc">{isCustom ? address : desc}</div>
- </div>
- {isCustom && renderActions(dnsServerData)}
- </div>
- );
- };
-
- return (
- <div className="dns-settings">
- <div className="dns-settings__title">
- <button className="back-button" type="button" onClick={goBackHandler}>
- <svg className="icon icon--button">
- <use xlinkHref="#back-arrow" />
- </svg>
- </button>
- <Title
- title={reactTranslator.getMessage('settings_dns_label')}
- onClick={goBackHandler}
- />
- </div>
- <div>
- {renderDnsServer(DEFAULT_DNS_SERVER)}
- </div>
- <div className="dns-settings__items-group">
- <div className="dns-settings__label">
- {reactTranslator.getMessage('settings_dns_popular_servers')}
- </div>
- {POPULAR_DNS_SERVERS.map(renderDnsServer)}
- </div>
- <div className="dns-settings__items-group">
- <div className="dns-settings__label">
- {reactTranslator.getMessage('settings_dns_custom_servers')}
- </div>
- <div>
- {settingsStore.customDnsServers.map(renderDnsServer)}
- </div>
- <button
- type="button"
- className="simple-button dns-settings__add-button"
- onClick={openAddDnsServerModal}
- >
- <svg className="icon icon--button">
- <use xlinkHref="#plus" />
- </svg>
- <div className="dns-settings__add-button__label">
- {reactTranslator.getMessage('settings_dns_add_custom_server')}
- </div>
- </button>
- </div>
- <CustomDnsServerModal />
- </div>
- );
-});
diff --git a/src/options/components/Settings/DnsSettings/dns-settings.pcss b/src/options/components/Settings/DnsSettings/dns-settings.pcss
deleted file mode 100644
index 125dd5e81..000000000
--- a/src/options/components/Settings/DnsSettings/dns-settings.pcss
+++ /dev/null
@@ -1,122 +0,0 @@
-.dns-settings {
- &__title {
- display: flex;
- align-items: flex-start;
- margin: 0 0 16px 16px;
- }
-
- &__items-group {
- padding-top: 32px;
- }
-
- &__item {
- display: flex;
- justify-content: flex-start;
- align-items: flex-start;
- cursor: pointer;
- transition: var(--t3) background-color;
- position: relative;
- background: none;
- border: none;
- border-radius: 8px;
- padding: 16px;
- width: 100%;
- text-align: left;
-
- &-title {
- font-weight: 500;
- font-size: 16px;
- line-height: 19px;
- color: var(--gray-base);
- }
-
- &-desc {
- font-weight: 400;
- font-size: 14px;
- line-height: 18px;
- margin-top: 4px;
- color: var(--gray88);
- }
-
-
- &:hover {
- background-color: var(--grayF3);
- }
-
- &--actions {
- position: absolute;
- right: 15px;
-
- &--button {
- margin-left: 16px;
- max-height: 24px;
- border: none;
-
- &:hover {
- opacity: .7;
- }
- }
- }
- }
-
- &__label {
- color: var(--gray88);
- font-size: 14px;
- line-height: 18px;
- margin-left: 16px;
- margin-bottom: 8px;
- }
-
- &__add-button {
- font-size: 16px;
- line-height: 24px;
- padding: 8px 16px;
- display: flex;
-
- &__label {
- margin-left: 16px;
- }
- }
-
- &__modal {
- width: 500px;
-
- &--content {
- display: block;
-
- & .form__actions .button {
- min-width: 180px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- padding: 12px 20px;
- }
- }
-
- &--link {
- text-decoration: none;
- color: var(--green700);
- cursor: pointer;
-
- &:hover {
- color: var(--green900);
- }
- }
-
- &--clear-icon {
- position: absolute;
- top: 36px;
- right: 15px;
- }
-
- &--input--error {
- box-shadow: inset 0 0 0 1px var(--redDark);
- }
-
- &--error-message {
- color: var(--redDark);
- font-size: 13px;
- margin-top: 8px;
- }
- }
-}
diff --git a/src/options/components/Settings/DnsSettings/index.ts b/src/options/components/Settings/DnsSettings/index.ts
deleted file mode 100644
index 3bee2afe2..000000000
--- a/src/options/components/Settings/DnsSettings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DnsSettings } from './DnsSettings';
diff --git a/src/options/components/Settings/HelpUsImprove/HelpUsImprove.tsx b/src/options/components/Settings/HelpUsImprove/HelpUsImprove.tsx
deleted file mode 100644
index 95d14659f..000000000
--- a/src/options/components/Settings/HelpUsImprove/HelpUsImprove.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { useContext } from 'react';
-import { observer } from 'mobx-react';
-
-import { rootStore } from '../../../stores';
-import { Switch } from '../../ui/Switch';
-import { reactTranslator } from '../../../../common/reactTranslator';
-
-export const HelpUsImprove = observer(() => {
- const { settingsStore } = useContext(rootStore);
- const { helpUsImprove } = settingsStore;
-
- const handleToggle = async (): Promise<void> => {
- await settingsStore.setHelpUsImproveValue(!helpUsImprove);
- };
-
- return (
- <div className="settings__group">
- <Switch
- title={reactTranslator.getMessage('settings_help_us_improve_title')}
- desc={reactTranslator.getMessage('settings_help_us_improve_description')}
- handleToggle={handleToggle}
- checked={helpUsImprove}
- />
- </div>
- );
-});
diff --git a/src/options/components/Settings/HelpUsImprove/index.ts b/src/options/components/Settings/HelpUsImprove/index.ts
deleted file mode 100644
index 29cf22fcf..000000000
--- a/src/options/components/Settings/HelpUsImprove/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { HelpUsImprove } from './HelpUsImprove';
diff --git a/src/options/components/Settings/QuickConnect/QuickConnect.tsx b/src/options/components/Settings/QuickConnect/QuickConnect.tsx
deleted file mode 100644
index 90cf13c0c..000000000
--- a/src/options/components/Settings/QuickConnect/QuickConnect.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { useContext } from 'react';
-import { observer } from 'mobx-react';
-
-import { QuickConnectSetting } from '../../../../common/constants';
-import { rootStore } from '../../../stores';
-import { Select } from '../../ui/Select';
-import { reactTranslator } from '../../../../common/reactTranslator';
-
-export const QuickConnect = observer(() => {
- const { settingsStore } = useContext(rootStore);
-
- const handleChangeSetting = async (value: QuickConnectSetting): Promise<void> => {
- await settingsStore.setQuickConnectSetting(value);
- };
-
- const options = [
- {
- id: QuickConnectSetting.LastUsedLocation,
- title: reactTranslator.getMessage('settings_quick_connect_last_used'),
- },
- {
- id: QuickConnectSetting.FastestLocation,
- title: reactTranslator.getMessage('settings_quick_connect_fastest'),
- },
- ];
-
- return (
- <div className="settings__group">
- <div className="settings__item">
- <div className="settings__item-content">
- <div className="settings__item-title">
- {reactTranslator.getMessage('settings_quick_connect_title')}
- </div>
- <div className="settings__item-subtitle">
- {reactTranslator.getMessage('settings_quick_connect_subtitle')}
- </div>
- </div>
- <Select
- options={options}
- currentValue={settingsStore.quickConnect}
- optionChange={handleChangeSetting}
- />
- </div>
- </div>
- );
-});
diff --git a/src/options/components/Settings/QuickConnect/index.ts b/src/options/components/Settings/QuickConnect/index.ts
deleted file mode 100644
index cafbc1a66..000000000
--- a/src/options/components/Settings/QuickConnect/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { QuickConnect } from './QuickConnect';
diff --git a/src/options/components/Settings/Settings.tsx b/src/options/components/Settings/Settings.tsx
deleted file mode 100644
index 9437bda57..000000000
--- a/src/options/components/Settings/Settings.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { useContext } from 'react';
-import { observer } from 'mobx-react';
-
-import { Title } from '../ui/Title';
-import { reactTranslator } from '../../../common/reactTranslator';
-import { rootStore } from '../../stores';
-
-import { WebRTC } from './WebRTC';
-import { DnsMenuItem } from './DnsMenuItem';
-import { ContextMenus } from './ContextMenus';
-import { HelpUsImprove } from './HelpUsImprove';
-import { AppearanceThemeSetting } from './AppearanceTheme';
-import { QuickConnect } from './QuickConnect';
-import { DnsSettings } from './DnsSettings';
-
-export const Settings = observer(() => {
- const { settingsStore } = useContext(rootStore);
- const { showDnsSettings } = settingsStore;
-
- if (showDnsSettings) {
- return (
- <DnsSettings />
- );
- }
-
- return (
- <>
- <Title title={reactTranslator.getMessage('settings_title')} />
- <div className="general-settings">
- <QuickConnect />
- <AppearanceThemeSetting />
- <ContextMenus />
- <HelpUsImprove />
- <WebRTC />
- <DnsMenuItem />
- </div>
- </>
- );
-});
diff --git a/src/options/components/Settings/WebRTC/WebRTC.tsx b/src/options/components/Settings/WebRTC/WebRTC.tsx
deleted file mode 100644
index 4ee66e57c..000000000
--- a/src/options/components/Settings/WebRTC/WebRTC.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { useContext } from 'react';
-import { observer } from 'mobx-react';
-
-import { rootStore } from '../../../stores';
-import { Switch } from '../../ui/Switch';
-import { reactTranslator } from '../../../../common/reactTranslator';
-
-export const WebRTC = observer(() => {
- const { settingsStore } = useContext(rootStore);
- const { webRTCEnabled } = settingsStore;
-
- const handleCheckboxChange = async (): Promise<void> => {
- await settingsStore.setWebRTCValue(!webRTCEnabled);
- };
-
- return (
- <div className="settings__group">
- <Switch
- title={reactTranslator.getMessage('settings_webrtc_label')}
- desc={reactTranslator.getMessage('settings_webrtc_desc')}
- handleToggle={handleCheckboxChange}
- checked={webRTCEnabled}
- />
- </div>
- );
-});
diff --git a/src/options/components/Settings/WebRTC/index.ts b/src/options/components/Settings/WebRTC/index.ts
deleted file mode 100644
index 8ac1c5d2c..000000000
--- a/src/options/components/Settings/WebRTC/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { WebRTC } from './WebRTC';
diff --git a/src/options/components/Settings/index.ts b/src/options/components/Settings/index.ts
deleted file mode 100644
index ec5d9791b..000000000
--- a/src/options/components/Settings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Settings } from './Settings';
diff --git a/src/options/components/Sidebar/Rate/Rate.tsx b/src/options/components/Sidebar/Rate/Rate.tsx
index ae3e0c4ea..a3ce52a24 100644
--- a/src/options/components/Sidebar/Rate/Rate.tsx
+++ b/src/options/components/Sidebar/Rate/Rate.tsx
@@ -1,10 +1,12 @@
-import React, { Fragment, useContext } from 'react';
+import React, { useContext } from 'react';
import { observer } from 'mobx-react';
import { FORWARDER_URL_QUERIES } from '../../../../background/config';
import { getForwarderUrl } from '../../../../common/helpers';
+import { translator } from '../../../../common/translator';
import { rootStore } from '../../../stores';
-import { reactTranslator } from '../../../../common/reactTranslator';
+
+import { RateStar } from './RateStar';
import './rate.pcss';
@@ -12,22 +14,24 @@ const RATING_STARS = [5, 4, 3, 2, 1];
export const Rate = observer(() => {
const { settingsStore } = useContext(rootStore);
+
const {
- hideRate,
isRateVisible,
forwarderDomain,
} = settingsStore;
- const handleHideRate = async (): Promise<void> => {
- await hideRate();
+ const handleHideRate = async () => {
+ await settingsStore.hideRate();
};
- const handleChange = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
- const { value } = e.target;
+ const handleChange = async (value: number) => {
+ if (value < 0 || value > 5) {
+ return;
+ }
await handleHideRate();
- if (value && parseInt(value, 10) >= 4) {
+ if (value >= 4) {
window.open(getForwarderUrl(forwarderDomain, FORWARDER_URL_QUERIES.OPTIONS_STORE), '_blank');
} else {
window.open(getForwarderUrl(forwarderDomain, FORWARDER_URL_QUERIES.FEEDBACK), '_blank');
@@ -40,33 +44,21 @@ export const Rate = observer(() => {
return (
<div className="rate">
- <div className="rate__text">
- {reactTranslator.getMessage('rate_description')}
- </div>
+ <div className="rate__line" />
<div className="rate__stars">
{RATING_STARS.map((star) => (
- <Fragment key={star}>
- <input
- type="radio"
- value={star}
- name="rating"
- id={`rating-${star}`}
- className="rate__input"
- onChange={handleChange}
- />
- <label
- htmlFor={`rating-${star}`}
- className="rate__star"
- />
- </Fragment>
+ <RateStar key={star} value={star} onChange={handleChange} />
))}
</div>
+ <div className="rate__title">
+ {translator.getMessage('rate_description')}
+ </div>
<button
type="button"
- className="rate__hide"
+ className="rate__hide-btn has-tab-focus"
onClick={handleHideRate}
>
- {reactTranslator.getMessage('rate_hide')}
+ {translator.getMessage('rate_hide')}
</button>
</div>
);
diff --git a/src/options/components/Sidebar/Rate/RateStar.tsx b/src/options/components/Sidebar/Rate/RateStar.tsx
new file mode 100644
index 000000000..7a7555567
--- /dev/null
+++ b/src/options/components/Sidebar/Rate/RateStar.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { Icon } from '../../ui/Icon';
+
+export interface RateStarProps {
+ value: number;
+ onChange: (value: number) => void;
+}
+
+export function RateStar({ value, onChange }: RateStarProps) {
+ const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const { value } = e.target;
+ const numberValue = parseInt(value, 10);
+ if (!Number.isNaN(numberValue) && Number.isFinite(numberValue)) {
+ onChange(numberValue);
+ }
+ };
+
+ return (
+ <>
+ <input
+ type="radio"
+ value={value}
+ name="rating"
+ id={`rating-${value}`}
+ className="rate__input"
+ onChange={handleChange}
+ />
+ <label
+ htmlFor={`rating-${value}`}
+ className="rate__star has-tab-focus"
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+ tabIndex={0}
+ >
+ <Icon name="star" className="rate__star-icon" />
+ </label>
+ </>
+ );
+}
diff --git a/src/options/components/Sidebar/Rate/rate.pcss b/src/options/components/Sidebar/Rate/rate.pcss
index c7d20280d..90e45b2d7 100644
--- a/src/options/components/Sidebar/Rate/rate.pcss
+++ b/src/options/components/Sidebar/Rate/rate.pcss
@@ -1,48 +1,39 @@
.rate {
- padding-top: 25px;
- border-top: 1px solid var(--border-color);
- margin: auto 40px 0;
+ padding: 0 32px;
- &__text {
- margin-bottom: 20px;
- line-height: 22px;
+ &__line {
+ width: 100%;
+ height: 1px;
+ margin-bottom: 24px;
+ background-color: var(--stroke-dividers-item-divider-default);
+ transition: var(--t3) background-color;
}
&__stars {
display: flex;
flex-direction: row-reverse;
- justify-content: space-between;
- margin-bottom: 20px;
+ justify-content: flex-end;
}
&__star {
- flex-shrink: 0;
- display: block;
- width: 35px;
- height: 25px;
- padding-right: 5px;
- font-size: 0;
- background-size: 25px 25px;
- background-position: left;
- background-repeat: no-repeat;
- background-image: url("../../../../assets/images/star.svg");
cursor: pointer;
-
- @media (--min-small) {
- width: 50px;
- height: 40px;
- background-size: 40px 40px;
- }
+ color: var(--stroke-icons-gray-icons-disabled);
+ transition: var(--t3) color;
&:hover,
- &:hover ~ .rate__star,
- &:hover ~ .rating__input:checked ~ .rating__star {
- background-image: url('../../../../assets/images/star-active.svg');
+ &:active,
+ &:focus-visible {
+ &,
+ & ~ .rate__star,
+ & ~ .rating__input:checked ~ .rating__star {
+ color: var(--stroke-icons-attention-icon-default);
+ }
}
- &:first-of-type {
- width: 25px;
- padding-right: 0;
+ &-icon {
+ width: 30px;
+ height: 30px;
+ color: currentColor;
}
}
@@ -50,23 +41,30 @@
display: none;
&:checked ~ .rate__star {
- background-image: url('../../../../assets/images/star-active.svg');
+ color: var(--stroke-icons-attention-icon-default);
}
}
- &__hide {
- padding: 0;
- font-size: 1.2rem;
- color: var(--gray-base);
- background-color: transparent;
- border: 0;
- cursor: pointer;
- opacity: 0.7;
+ &__title {
+ color: var(--text-main-text-main-default);
+ font-size: 16px;
+ line-height: 1.3;
+ margin-top: 16px;
+ margin-bottom: 24px;
+ transition: var(--t3) color;
+ }
+
+ &__hide-btn {
+ text-align: left;
+ color: var(--text-description-description-default);
+ font-size: 14px;
+ line-height: 1.5;
+ transition: var(--t3) color;
&:hover,
- &:focus {
+ &:focus,
+ &:focus-visible {
text-decoration: underline;
- outline: 0;
}
}
-}
+}
\ No newline at end of file
diff --git a/src/options/components/Sidebar/Sidebar.tsx b/src/options/components/Sidebar/Sidebar.tsx
index de05a0ee4..7f204f62f 100644
--- a/src/options/components/Sidebar/Sidebar.tsx
+++ b/src/options/components/Sidebar/Sidebar.tsx
@@ -1,10 +1,16 @@
-import React, { useContext, useEffect } from 'react';
+import React, {
+ useContext,
+ useEffect,
+ useLayoutEffect,
+ useState,
+} from 'react';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import { translator } from '../../../common/translator';
import { rootStore } from '../../stores';
+import { IconButton } from '../ui/Icon';
import { SidebarLink } from './SidebarLink';
import { Rate } from './Rate';
@@ -22,6 +28,7 @@ export const Sidebar = observer(() => {
const {
isSidebarOpen,
+ isAnyModalOpen,
openSidebar,
closeSidebar,
} = uiStore;
@@ -31,7 +38,32 @@ export const Sidebar = observer(() => {
isSidebarOpen && 'sidebar--open',
);
- const isMobileScreen = window.matchMedia('(max-width: 865px)').matches;
+ const smallTabletQuery = '(max-width: 875px)';
+ const [isSmallTabletScreen, setIsSmallTabletScreen] = useState(window.matchMedia(smallTabletQuery).matches);
+
+ useLayoutEffect(() => {
+ const matchMedia = window.matchMedia(smallTabletQuery);
+
+ const handleScreenChange = (e: MediaQueryListEvent) => {
+ setIsSmallTabletScreen(e.matches);
+ };
+
+ // Triggered at the first client-side load and if query changes
+ setIsSmallTabletScreen(matchMedia.matches);
+
+ matchMedia.addEventListener('change', handleScreenChange);
+
+ return () => {
+ matchMedia.removeEventListener('change', handleScreenChange);
+ };
+ }, []);
+
+ /**
+ * Lock sidebar from tab focus in following scenarios:
+ * - Any modal open
+ * - Sidebar closed on mobile screen
+ */
+ const isSidebarLocked = isAnyModalOpen || (!isSidebarOpen && isSmallTabletScreen);
useEffect(() => {
(async () => {
@@ -48,25 +80,20 @@ export const Sidebar = observer(() => {
return (
<div className={classes}>
<div className="sidebar__header" inert={isSidebarOpen ? '' : undefined}>
- {/* TODO: Export icons to component (AG-38059) */}
- <button
- className="sidebar__open-btn has-tab-focus"
- type="button"
+ <IconButton
+ name="sidebar-burger"
onClick={openSidebar}
- >
- <svg className="sidebar__open-btn-icon">
- <use xlinkHref="#sidebar-burger" />
- </svg>
- </button>
+ className="sidebar__open-btn"
+ />
</div>
<div className="sidebar__overlay" onClick={closeSidebar} />
- <div className="sidebar__content" inert={!isSidebarOpen && isMobileScreen ? '' : undefined}>
+ <div className="sidebar__content" inert={isSidebarLocked ? '' : undefined}>
<div className="sidebar__logo">
<div className="logo" />
</div>
<nav className="sidebar__nav" onClick={handleCloseAll}>
<SidebarLink to="/">
- {translator.getMessage('settings_title')}
+ {translator.getMessage('settings_general_title')}
</SidebarLink>
<SidebarLink to="/exclusions">
{translator.getMessage('settings_exclusion_title')}
@@ -89,16 +116,11 @@ export const Sidebar = observer(() => {
</SidebarLink>
)}
</nav>
- {/* TODO: Export icons to component (AG-38059) */}
- <button
- className="sidebar__close-btn has-tab-focus"
- type="button"
+ <IconButton
+ name="cross"
onClick={closeSidebar}
- >
- <svg className="sidebar__close-btn-icon">
- <use xlinkHref="#cross" />
- </svg>
- </button>
+ className="sidebar__close-btn"
+ />
<Rate />
</div>
</div>
diff --git a/src/options/components/Sidebar/sidebar.pcss b/src/options/components/Sidebar/sidebar.pcss
index 740967eda..0042bcaf8 100644
--- a/src/options/components/Sidebar/sidebar.pcss
+++ b/src/options/components/Sidebar/sidebar.pcss
@@ -22,32 +22,6 @@
}
}
- /* TODO: Export icons to component (AG-38059) */
- &__open-btn,
- &__close-btn {
- padding: 0;
- cursor: pointer;
- background-color: transparent;
- border: none;
- color: var(--stroke-icons-gray-icons-default);
- transition: var(--t3) color;
-
- &:hover,
- &:active,
- &:focus-visible {
- color: var(--text-main-text-main-default);
- }
-
- &-icon {
- display: inline-block;
- vertical-align: middle;
- font-size: 0;
- width: 24px;
- height: 24px;
- color: currentColor;
- }
- }
-
&__open-btn {
padding: 12px 8px;
}
@@ -141,13 +115,17 @@
font-size: 16px;
line-height: 1.3;
transition: var(--t3) background-color;
+ outline-offset: -2px;
&:hover,
- &:active,
&:focus-visible {
background-color: var(--fills-backgrounds-page-background-additional-hovered);
}
+ &:active {
+ background-color: var(--fills-backgrounds-page-background-additional-pressed);
+ }
+
&.sidebar__link--active {
font-weight: 600;
background-color: var(--fills-backgrounds-page-background-default);
@@ -163,3 +141,31 @@
}
}
}
+
+.logo {
+ width: 125px;
+ height: 24px;
+ background-image: url('../../../assets/images/logo-vpn.svg');
+ background-repeat: no-repeat;
+ background-size: contain;
+
+ @media (prefers-color-scheme: dark) {
+ background-image: url('../../../assets/images/logo-vpn-dark.svg');
+ }
+}
+
+.light-mode {
+ color-scheme: light;
+
+ .logo {
+ background-image: url('../../../assets/images/logo-vpn.svg');
+ }
+}
+
+.dark-mode {
+ color-scheme: dark;
+
+ .logo {
+ background-image: url('../../../assets/images/logo-vpn-dark.svg');
+ }
+}
diff --git a/src/options/components/SignedOut/SignedOut.tsx b/src/options/components/SignedOut/SignedOut.tsx
index 89a0e8a8f..0d7dc369c 100644
--- a/src/options/components/SignedOut/SignedOut.tsx
+++ b/src/options/components/SignedOut/SignedOut.tsx
@@ -1,19 +1,28 @@
import React from 'react';
-import { reactTranslator } from '../../../common/reactTranslator';
+import { translator } from '../../../common/translator';
import './signedout.pcss';
-export const SignedOut = () => {
+export function SignedOut() {
return (
<div className="signedout">
- <div className="signedout__image" />
- <div className="signedout__title">
- {reactTranslator.getMessage('options_signedout_page_title')}
- </div>
- <div className="signedout__description">
- {reactTranslator.getMessage('options_signedout_page_description')}
+ <div className="signedout__content">
+ <img
+ className="signedout__image"
+ src="../../../assets/images/signed-out.svg"
+ alt="Floating Ninja"
+ />
+ <div className="signedout__title">
+ {translator.getMessage('options_signedout_page_title')}
+ </div>
+ <div className="signedout__description">
+ {translator.getMessage('options_signedout_page_description_not_secure')}
+ <br />
+ <br />
+ {translator.getMessage('options_signedout_page_description')}
+ </div>
</div>
</div>
);
-};
+}
diff --git a/src/options/components/SignedOut/signedout.pcss b/src/options/components/SignedOut/signedout.pcss
index 760181ccf..d7d0ea877 100644
--- a/src/options/components/SignedOut/signedout.pcss
+++ b/src/options/components/SignedOut/signedout.pcss
@@ -1,33 +1,54 @@
.signedout {
- height: calc(100vh - var(--footer-height));
- min-height: 500px;
+ z-index: var(--signed-out-z);
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
display: flex;
flex-direction: column;
- justify-content: center;
align-items: center;
+ justify-content: center;
+ background-color: var(--fills-backgrounds-page-background-default);
text-align: center;
+ color: var(--text-main-text-main-default);
+
+ &__content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ max-width: 800px;
+ padding: 0 16px;
+ }
&__image {
width: 190px;
height: 200px;
- margin-bottom: 16px;
- background-repeat: no-repeat;
- /* TODO not-found.svg no shadow */
- background-image: url("../../../assets/images/not-found.svg");
- background-position: center;
- background-size: contain;
}
&__title {
- font-size: 2.2rem;
+ font-size: 40px;
font-weight: 700;
- max-width: 300px;
+ line-height: 1.2;
+ margin-top: 16px;
+
+ @media (--tablet) {
+ font-size: 24px;
+ padding: 0 16px;
+ }
}
&__description {
- max-width: 330px;
- margin-top: 15px;
- font-size: 1.7rem;
- font-weight: 400;
+ font-size: 18px;
+ line-height: 1.5;
+ padding-top: 16px;
+ margin-top: 24px;
+
+ @media (--tablet) {
+ padding: 0 16px;
+ }
}
}
diff --git a/src/options/components/Support/BugReporter/BugReporter.tsx b/src/options/components/Support/BugReporter/BugReporter.tsx
index e5ff9a261..ce898531c 100644
--- a/src/options/components/Support/BugReporter/BugReporter.tsx
+++ b/src/options/components/Support/BugReporter/BugReporter.tsx
@@ -3,15 +3,15 @@ import { observer } from 'mobx-react';
import { useMachine } from '@xstate/react';
import identity from 'lodash/identity';
-import classnames from 'classnames';
-import { Title } from '../../ui/Title';
-import { Checkbox } from '../../ui/Checkbox';
-import { rootStore } from '../../../stores';
-import { messenger } from '../../../../common/messenger';
import { addMinDurationTime } from '../../../../common/helpers';
-import { reactTranslator } from '../../../../common/reactTranslator';
+import { messenger } from '../../../../common/messenger';
import { translator } from '../../../../common/translator';
+import { rootStore } from '../../../stores';
+import { Title } from '../../ui/Title';
+import { Input, TextArea } from '../../ui/Input';
+import { Checkbox } from '../../ui/Checkbox';
+import { Button } from '../../ui/Button';
import { RequestEvent, RequestState, requestMachine } from './requestMachine';
@@ -94,13 +94,20 @@ export const BugReporter = observer(() => {
},
};
+ const handleNewReport = () => {
+ sendToRequestMachine(RequestEvent.StartAgain);
+ setFormState(DEFAULT_FORM_STATE);
+ setEmailInput(DEFAULT_FORM_STATE[FormField.Email]);
+ setFormErrors(DEFAULT_ERROR_STATE);
+ };
+
const validateFields = (): FormError => {
return Object.keys(formState).reduce((acc: FormError, key) => {
const value = formState[key];
const validator = validators[key];
if (validator) {
if (typeof value === 'string') {
- acc[key] = validator(value);
+ acc[key] = validator(value.trim());
}
} else {
acc[key] = null;
@@ -153,20 +160,10 @@ export const BugReporter = observer(() => {
});
};
- const emailChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {
- const { target: { value } } = e;
- setEmailInput(value);
- };
-
- const emailCleanHandler = (): void => {
- setEmailInput('');
- };
-
- let buttonText = reactTranslator.getMessage('options_bug_report_send_button');
+ let buttonText = translator.getMessage('options_bug_report_send_button');
let isButtonDisabled = !formState[FormField.Email] || !formState[FormField.Message];
-
if (requestState.matches(RequestState.Sending)) {
- buttonText = reactTranslator.getMessage('options_bug_report_sending_button');
+ buttonText = translator.getMessage('options_bug_report_sending_button');
isButtonDisabled = true;
}
@@ -174,139 +171,76 @@ export const BugReporter = observer(() => {
settingsStore.setShowBugReporter(false);
};
- const bugReportTitle = (
- <div className="bug-report__title">
- <button className="back-button" type="button" onClick={closeHandler}>
- <svg className="icon icon--button">
- <use xlinkHref="#back-arrow" />
- </svg>
- </button>
- <div>
- <Title
- title={reactTranslator.getMessage('options_report_bug_title')}
- onClick={closeHandler}
- />
- </div>
- </div>
- );
-
if (requestState.matches(RequestState.Success)) {
- const newReportClickHandler = () => {
- sendToRequestMachine(RequestEvent.StartAgain);
- setFormState(DEFAULT_FORM_STATE);
- setEmailInput(DEFAULT_FORM_STATE[FormField.Email]);
- setFormErrors(DEFAULT_ERROR_STATE);
- };
-
return (
- <>
- {bugReportTitle}
-
- <div className="bug-report">
- <div className="bug-report__done">
- <img
- src="../../../../../assets/images/ninja-like.svg"
- className="bug-report__image"
- alt="slide"
- />
- <div className="bug-report__description">
- {reactTranslator.getMessage('options_bug_report_page_success')}
- </div>
- <button
- type="button"
- onClick={newReportClickHandler}
- className="button button--medium button--primary bug-report__action"
- >
- {reactTranslator.getMessage('options_bug_report_new_report_button')}
- </button>
- </div>
+ <div className="bug-report__success">
+ <img
+ src="../../../../assets/images/ninja-like.svg"
+ className="bug-report__success-image"
+ alt="slide"
+ />
+ <div className="bug-report__success-title">
+ {translator.getMessage('options_bug_report_page_success')}
</div>
- </>
+ <Button
+ size="medium"
+ className="bug-report__success-btn"
+ onClick={handleNewReport}
+ >
+ {translator.getMessage('options_bug_report_new_report_button')}
+ </Button>
+ </div>
);
}
- const emailClassName = classnames('input', { 'input--error': formErrors[FormField.Email] });
- const messageClassName = classnames('input', { 'input--error': formErrors[FormField.Message] });
return (
<>
- <Title title={bugReportTitle} />
-
- <div className="bug-report">
- <form
- className="bug-report__form"
- noValidate
- onSubmit={handleSubmit}
- onChange={formChangeHandler}
- >
- <div className="bug-report__input">
- <label
- className="bug-report__label"
- htmlFor={FormField.Email}
- >
- {reactTranslator.getMessage('options_bug_report_email_label')}
- </label>
- <div className={emailClassName}>
- <input
- className="input__in input__in--content input__in--close"
- id={FormField.Email}
- type="email"
- placeholder="example@mail.com"
- value={emailInput}
- onChange={emailChangeHandler}
- />
- {emailInput && (
- <button
- type="button"
- className="button button--icon input__close"
- onClick={emailCleanHandler}
- >
- <svg className="icon icon--button icon--cross">
- <use xlinkHref="#cross" />
- </svg>
- </button>
- )}
- <div className="input__error">{formErrors[FormField.Email]}</div>
- </div>
- </div>
- <div className="bug-report__input">
- <label
- className="bug-report__label"
- htmlFor={FormField.Message}
- >
- {reactTranslator.getMessage('options_bug_report_textarea_label')}
- </label>
- <div className={messageClassName}>
- {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
- <textarea
- className="input__in input__in--content input__in--textarea"
- id={FormField.Message}
- placeholder={translator.getMessage('options_bug_report_textarea_placeholder')}
- defaultValue={formState[FormField.Message]}
- />
- <div className="input__error">
- <span>{formErrors[FormField.Message]}</span>
- {requestState.matches(RequestState.Error)
- && <span>{reactTranslator.getMessage('options_bug_report_request_error')}</span>}
- </div>
- </div>
- </div>
- <div className="bug-report__checkbox">
- <Checkbox
- id={FormField.IncludeLog}
- value={formState[FormField.IncludeLog]}
- label={reactTranslator.getMessage('options_bug_report_include_log_label')}
- />
+ <Title
+ title={translator.getMessage('options_report_bug_title')}
+ onClick={closeHandler}
+ />
+
+ <form
+ className="bug-report__form"
+ noValidate
+ onSubmit={handleSubmit}
+ onChange={formChangeHandler}
+ >
+ <Input
+ id={FormField.Email}
+ label={translator.getMessage('options_bug_report_email_label')}
+ type="email"
+ placeholder="example@mail.com"
+ value={emailInput}
+ error={formErrors[FormField.Email]}
+ onChange={setEmailInput}
+ />
+ <TextArea
+ id={FormField.Message}
+ label={translator.getMessage('options_bug_report_textarea_label')}
+ placeholder={translator.getMessage('options_bug_report_textarea_placeholder')}
+ value={formState[FormField.Message]}
+ error={formErrors[FormField.Message]}
+ />
+ <Checkbox
+ id={FormField.IncludeLog}
+ label={translator.getMessage('options_bug_report_include_log_label')}
+ value={formState[FormField.IncludeLog]}
+ />
+ {requestState.matches(RequestState.Error) && (
+ <div className="bug-report__form-error">
+ {translator.getMessage('options_bug_report_request_error')}
</div>
- <button
- type="submit"
- tabIndex={0}
- disabled={isButtonDisabled}
- className="button button--medium button--primary bug-report__action"
- >
- {buttonText}
- </button>
- </form>
- </div>
+ )}
+ <Button
+ type="submit"
+ size="medium"
+ className="bug-report__form-btn"
+ disabled={isButtonDisabled}
+ >
+ {buttonText}
+ </Button>
+ </form>
</>
);
});
diff --git a/src/options/components/Support/BugReporter/bug-report.pcss b/src/options/components/Support/BugReporter/bug-report.pcss
index 97085ed7d..4c1f5c361 100644
--- a/src/options/components/Support/BugReporter/bug-report.pcss
+++ b/src/options/components/Support/BugReporter/bug-report.pcss
@@ -1,48 +1,57 @@
.bug-report {
- padding: 0 16px;
- height: 100%;
-
- &__title {
+ &__form {
display: flex;
- align-items: center;
- }
-
- &__description {
- margin-bottom: 24px;
- }
-
- &__input {
- width: 100%;
- padding: 16px 0;
- }
-
- &__label {
- font-size: 14px;
- line-height: 16px;
- color: var(--gray88);
- }
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ row-gap: 16px;
+ padding: 0 16px;
+ margin-top: 16px;
+
+ &-error {
+ color: var(--text-links-error-link-default);
+ font-size: 16px;
+ line-height: 1.5;
+ }
- &__action {
- min-width: 180px;
+ &-btn {
+ width: 260px;
+ margin-top: 16px;
- @media (--mobile) {
- width: 100%;
+ @media (--mobile) {
+ width: 100%;
+ }
}
}
- &__checkbox {
- margin-bottom: 32px;
- }
-
- &__done {
+ &__success {
+ flex: 1 1 auto;
display: flex;
flex-direction: column;
- justify-content: center;
align-items: center;
- height: 100%;
- }
+ justify-content: center;
+ text-align: center;
+ row-gap: 24px;
+ padding: 0 8px;
- &__image {
- margin-bottom: 17px;
+ &-image {
+ width: 160px;
+ }
+
+ &-title {
+ padding: 16px 0;
+ color: var(--text-main-text-main-default);
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 1.2;
+ }
+
+ &-btn {
+ width: 260px;
+
+ @media (--mobile) {
+ width: 100%;
+ }
+ }
}
-}
+}
\ No newline at end of file
diff --git a/src/options/components/Support/Support.tsx b/src/options/components/Support/Support.tsx
index 197864602..56065e20e 100644
--- a/src/options/components/Support/Support.tsx
+++ b/src/options/components/Support/Support.tsx
@@ -1,12 +1,14 @@
-import React, { type ReactNode, useContext } from 'react';
+import React, { useContext } from 'react';
import { observer } from 'mobx-react';
-import { rootStore } from '../../stores';
+import { FORWARDER_URL_QUERIES } from '../../../background/config';
import { getForwarderUrl } from '../../../common/helpers';
import { messenger } from '../../../common/messenger';
-import { FORWARDER_URL_QUERIES } from '../../../background/config';
-import { Title } from '../ui/Title';
import { translator } from '../../../common/translator';
+import { rootStore } from '../../stores';
+import { Title } from '../ui/Title';
+import { Icon, IconButton } from '../ui/Icon';
+import { Controls } from '../ui/Controls';
import { BugReporter } from './BugReporter';
@@ -14,8 +16,8 @@ import './support.pcss';
interface SupportItems {
title: string;
- description: ReactNode;
- iconXlink: string;
+ description: React.ReactNode;
+ icon: string;
clickHandler: () => void;
}
@@ -35,17 +37,17 @@ export const Support = observer(() => {
{
title: translator.getMessage('options_support_faq_title'),
description: translator.getMessage('options_support_faq_description'),
- iconXlink: '#question',
+ icon: 'question',
clickHandler: createOpenUrlHandler(getForwarderUrl(forwarderDomain, FORWARDER_URL_QUERIES.FAQ)),
}, {
title: translator.getMessage('options_support_report_title'),
description: translator.getMessage('options_support_report_description'),
- iconXlink: '#bug',
+ icon: 'bug',
clickHandler: handleReportClick,
}, {
title: translator.getMessage('options_support_feedback_title'),
description: translator.getMessage('options_support_feedback_description'),
- iconXlink: '#send-feedback',
+ icon: 'send-feedback',
clickHandler: createOpenUrlHandler(getForwarderUrl(forwarderDomain, FORWARDER_URL_QUERIES.FEEDBACK)),
},
];
@@ -53,29 +55,18 @@ export const Support = observer(() => {
const renderSupportItem = ({
title,
description,
- iconXlink,
+ icon,
clickHandler,
}: SupportItems) => {
return (
- <button
- type="button"
+ <Controls
key={title}
- className="support-item"
+ title={title}
+ description={description}
+ beforeAction={<Icon name={icon} className="support__icon" />}
+ action={<IconButton name="arrow-down" className="support__btn-icon" />}
onClick={clickHandler}
- >
- <div className="support-item__area">
- <svg className="icon icon--support">
- <use xlinkHref={iconXlink} />
- </svg>
- <div className="support-item__info">
- <div className="support-item__title">{title}</div>
- <div className="support-item__description">{description}</div>
- </div>
- </div>
- <svg className="icon icon--button">
- <use xlinkHref="#arrow" />
- </svg>
- </button>
+ />
);
};
diff --git a/src/options/components/Support/support.pcss b/src/options/components/Support/support.pcss
index d972ecd90..5eb7fa978 100644
--- a/src/options/components/Support/support.pcss
+++ b/src/options/components/Support/support.pcss
@@ -1,62 +1,9 @@
-.support-items {
- .support-item {
- display: flex;
- padding: 16px;
- border: none;
- border-radius: 8px;
- width: 100%;
- align-items: center;
- cursor: pointer;
- transition: var(--t3) background-color;
- background: none;
- text-align: left;
- font-family: inherit;
-
- &:hover {
- background-color: #f3f3f3;
-
- @media (prefers-color-scheme: dark) {
- background-color: #131313;
- }
- }
-
- .support-item__area {
- display: flex;
- width: 100%;
-
- .icon {
- margin-right: 16px;
- transform: translateX(-2px);
- }
- }
-
- &__title {
- font-size: 16px;
- font-weight: 500;
- line-height: 19px;
- }
-
- &__description {
- font-size: 14px;
- line-height: 20px;
- color: var(--gray88);
- }
+.support {
+ &__icon {
+ color: var(--stroke-icons-product-icon-default);
}
-}
-
-
-.dark-mode {
- .support-item {
- &:hover {
- background-color: #131313;
- }
- }
-}
-.light-mode {
- .support-item {
- &:hover {
- background-color: #f3f3f3;
- }
+ &__btn-icon {
+ transform: rotate(-90deg);
}
}
diff --git a/src/options/components/ui/Button/Button.tsx b/src/options/components/ui/Button/Button.tsx
new file mode 100644
index 000000000..582cfa3fd
--- /dev/null
+++ b/src/options/components/ui/Button/Button.tsx
@@ -0,0 +1,100 @@
+import React, { type PropsWithChildren } from 'react';
+
+import classNames from 'classnames';
+
+import { Icon } from '../Icon';
+
+import './button.pcss';
+
+/**
+ * Button component props.
+ */
+export interface ButtonProps extends PropsWithChildren {
+ /**
+ * Button variant. Default is 'filled'.
+ */
+ variant?: 'filled' | 'outlined' | 'transparent';
+
+ /**
+ * Button type. Default is 'button'.
+ */
+ type?: 'button' | 'submit' | 'reset';
+
+ /**
+ * Button color. Default is 'primary'.
+ */
+ color?: 'primary' | 'danger';
+
+ /**
+ * Button size. Default is 'large'.
+ * - 'large' - 16px 24px padding, 18px font size.
+ * - 'medium' - 16px 16px padding, 16px font size.
+ *
+ * Supported only with 'filled' and 'outlined' variant.
+ */
+ size?: 'large' | 'medium';
+
+ /**
+ * Additional class name.
+ */
+ className?: string;
+
+ /**
+ * Is button disabled or not.
+ */
+ disabled?: boolean;
+
+ /**
+ * Form id to associate the button with.
+ */
+ form?: string;
+
+ /**
+ * Icon name to display before the text.
+ */
+ beforeIconName?: string;
+
+ /**
+ * Click event handler.
+ */
+ onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export function Button({
+ variant = 'filled',
+ type = 'button',
+ color = 'primary',
+ size = 'large',
+ className,
+ disabled,
+ form,
+ beforeIconName,
+ children,
+ onClick,
+}: ButtonProps) {
+ const classes = classNames(
+ 'button has-tab-focus',
+ `button--${variant}`,
+ `button--color-${color}`,
+ `button--size-${size}`,
+ className,
+ );
+
+ return (
+ <button
+ // eslint-disable-next-line react/button-has-type
+ type={type}
+ className={classes}
+ disabled={disabled}
+ form={form}
+ onClick={onClick}
+ >
+ {beforeIconName && (
+ <Icon name={beforeIconName} className="button__before-icon" />
+ )}
+ <span className="button__text">
+ {children}
+ </span>
+ </button>
+ );
+}
diff --git a/src/options/components/ui/Button/button.pcss b/src/options/components/ui/Button/button.pcss
new file mode 100644
index 000000000..a04327e91
--- /dev/null
+++ b/src/options/components/ui/Button/button.pcss
@@ -0,0 +1,153 @@
+button {
+ padding: 0;
+ margin: 0;
+ border: none;
+ background-color: transparent;
+ cursor: pointer;
+ font-family: var(--font-stack);
+}
+
+.button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ column-gap: 12px;
+ font-family: var(--font-stack);
+ overflow: hidden;
+ text-align: center;
+ border-radius: 8px;
+ border: 1px solid transparent;
+ transition: var(--t3) color, var(--t3) background-color, var(--t3) border-color;
+
+ &:disabled {
+ cursor: default;
+ pointer-events: none;
+ }
+
+ &--filled,
+ &--outlined {
+ padding: 16px 24px;
+ font-size: 18px;
+ line-height: 1.3;
+
+ &.button--size-medium {
+ padding: 16px;
+ font-size: 16px;
+ line-height: 1.5;
+ }
+ }
+
+ &--filled {
+ color: var(--text-buttons-primary-default);
+ background-color: var(--fills-buttons-main-button-default);
+ border-color: var(--fills-buttons-main-button-default);
+
+ &:hover,
+ &:focus-visible {
+ background-color: var(--fills-buttons-main-button-hovered);
+ border-color: var(--fills-buttons-main-button-hovered);
+ }
+
+ &:active {
+ background-color: var(--fills-buttons-main-button-pressed);
+ border-color: var(--fills-buttons-main-button-pressed);
+ }
+
+ &:disabled {
+ background-color: var(--fills-buttons-main-button-disabled);
+ border-color: var(--fills-buttons-main-button-disabled);
+ }
+
+ &.button--color-danger {
+ background-color: var(--fills-buttons-danger-button-default);
+ border-color: var(--fills-buttons-danger-button-default);
+
+ &:hover,
+ &:focus-visible {
+ background-color: var(--fills-buttons-danger-button-hovered);
+ border-color: var(--fills-buttons-danger-button-hovered);
+ }
+
+ &:active {
+ background-color: var(--fills-buttons-danger-button-pressed);
+ border-color: var(--fills-buttons-danger-button-pressed);
+ }
+
+ &:disabled {
+ background-color: var(--fills-buttons-danger-button-disabled);
+ border-color: var(--fills-buttons-danger-button-disabled);
+ }
+ }
+ }
+
+ &--outlined {
+ color: var(--text-main-text-main-default);
+ border-color: var(--stroke-buttons-secondary-default);
+
+ &:hover,
+ &:focus-visible {
+ background-color: var(--fills-buttons-secondary-hovered);
+ }
+
+ &:active {
+ background-color: var(--fills-buttons-secondary-pressed);
+ }
+
+ &:disabled {
+ color: var(--text-main-text-main-disabled);
+ border-color: var(--stroke-buttons-secondary-disabled);
+ }
+
+ &.button--color-danger {
+ color: var(--text-buttons-secondary-red-default);
+ border-color: var(--stroke-buttons-secondary-red-default);
+
+ &:disabled {
+ color: var(--text-buttons-secondary-red-disabled);
+ border-color: var(--stroke-buttons-secondary-red-disabled);
+ }
+ }
+ }
+
+ &--transparent {
+ width: 100%;
+ padding: 16px;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 1.3;
+ text-align: left;
+ color: var(--text-links-link-default);
+
+ &:hover,
+ &:focus-visible {
+ background-color: var(--fills-backgrounds-page-background-hovered);
+ }
+
+ &:active {
+ background-color: var(--fills-backgrounds-page-background-pressed);
+ }
+
+ &:disabled {
+ color: var(--text-links-link-disabled);
+ }
+
+ &.button--color-danger {
+ color: var(--text-links-error-link-default);
+
+ &:disabled {
+ color: var(--text-links-error-link-disabled);
+ }
+ }
+ }
+
+ &__text {
+ flex: 1 1 auto;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ &__before-icon {
+ color: currentColor;
+ }
+}
\ No newline at end of file
diff --git a/src/options/components/ui/Button/index.ts b/src/options/components/ui/Button/index.ts
new file mode 100644
index 000000000..fe9c53c51
--- /dev/null
+++ b/src/options/components/ui/Button/index.ts
@@ -0,0 +1 @@
+export { Button } from './Button';
diff --git a/src/options/components/ui/Checkbox/Checkbox.tsx b/src/options/components/ui/Checkbox/Checkbox.tsx
index 4de2eb8b3..0b45a4af2 100644
--- a/src/options/components/ui/Checkbox/Checkbox.tsx
+++ b/src/options/components/ui/Checkbox/Checkbox.tsx
@@ -1,30 +1,57 @@
import React, { useState } from 'react';
+import classNames from 'classnames';
+
+import { Icon } from '../Icon';
+
import './checkbox.pcss';
-type CheckboxProps = {
- label: React.ReactNode,
- id: string,
- value: boolean,
-};
+export interface CheckboxProps {
+ id?: string;
+ label: React.ReactNode;
+ value: boolean;
+ onToggle?: () => void;
+}
-export const Checkbox = ({ label, id, value }: CheckboxProps) => {
+export function Checkbox({
+ id,
+ label,
+ value,
+ onToggle,
+}: CheckboxProps) {
const [checkedValue, setCheckedValue] = useState(value);
+ const classes = classNames(
+ 'checkbox has-tab-focus',
+ checkedValue && 'checkbox--active',
+ );
+ const iconName = `checkbox-${checkedValue ? 'enabled' : 'disabled'}`;
+
+ const handleChange = () => {
+ setCheckedValue((prevValue) => !prevValue);
+ if (onToggle) {
+ onToggle();
+ }
+ };
+
return (
- <div className="checkbox">
+ <label
+ htmlFor={id}
+ className={classes}
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+ tabIndex={0}
+ >
+ <Icon name={iconName} className="checkbox__icon" />
<input
id={id}
type="checkbox"
- checked={checkedValue}
- className="checkbox__in"
- onChange={() => setCheckedValue(!checkedValue)}
+ checked={value}
+ className="checkbox__input"
+ tabIndex={-1}
+ onChange={handleChange}
/>
- <label
- htmlFor={id}
- className="checkbox__label"
- >
+ <div className="checkbox__label">
{label}
- </label>
- </div>
+ </div>
+ </label>
);
-};
+}
diff --git a/src/options/components/ui/Checkbox/checkbox.pcss b/src/options/components/ui/Checkbox/checkbox.pcss
index ce84bc944..588810706 100644
--- a/src/options/components/ui/Checkbox/checkbox.pcss
+++ b/src/options/components/ui/Checkbox/checkbox.pcss
@@ -1,25 +1,27 @@
.checkbox {
- cursor: pointer;
- color: var(--gray-base);
display: flex;
- align-items: center;
+ align-items: flex-start;
+ justify-content: flex-start;
+ cursor: pointer;
- & .checkbox__in {
- appearance: none;
- width: 24px;
- height: 24px;
- margin: 0 16px 0 0;
- background-image: url('../../../../assets/images/unchecked.svg');
- background-position: center;
- background-repeat: no-repeat;
- background-size: contain;
+ &__icon {
+ flex-shrink: 0;
- &:checked {
- background-image: url('../../../../assets/images/checked.svg');
+ .checkbox--active & {
+ color: var(--stroke-icons-product-icon-default);
}
}
+ &__input {
+ appearance: none;
+ margin: 0;
+ }
+
&__label {
- cursor: pointer;
+ flex: 1 1 auto;
+ color: var(--text-main-text-main-default);
+ font-size: 16px;
+ line-height: 1.5;
+ margin-left: 16px;
}
-}
+}
\ No newline at end of file
diff --git a/src/options/components/ui/Controls/Controls.tsx b/src/options/components/ui/Controls/Controls.tsx
new file mode 100644
index 000000000..6a688d8b2
--- /dev/null
+++ b/src/options/components/ui/Controls/Controls.tsx
@@ -0,0 +1,128 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+
+import classNames from 'classnames';
+
+import { useOutsideClick } from '../../../../common/components/ui/useOutsideClick';
+import { useOutsideFocus } from '../../../../common/components/ui/useOutsideFocus';
+
+import './controls.pcss';
+
+/**
+ * Controls component props.
+ */
+export interface ControlsProps {
+ /**
+ * Title of the controls.
+ */
+ title: React.ReactNode;
+
+ /**
+ * Description of the controls.
+ */
+ description?: React.ReactNode;
+
+ /**
+ * Action of the controls that goes before the content (will be rendered on left side).
+ */
+ beforeAction?: React.ReactNode;
+
+ /**
+ * Action of the controls that goes after the content (will be rendered on right side).
+ */
+ action?: React.ReactNode;
+
+ /**
+ * Whether the controls are active or not.
+ * If active, the controls will be highlighted with "pressed" background.
+ */
+ isActive?: boolean;
+
+ /**
+ * Additional class name.
+ */
+ className?: string;
+
+ /**
+ * Click event handler.
+ * If provided, controls will be hoverable.
+ */
+ onClick?: () => void;
+
+ /**
+ * Outside click event handler.
+ */
+ onOutsideClick?: () => void;
+
+ /**
+ * Outside focus event handler.
+ */
+ onOutsideFocus?: () => void;
+}
+
+export const Controls = forwardRef<HTMLDivElement, ControlsProps>(
+ (props, forwardedRef) => {
+ const {
+ title,
+ description,
+ beforeAction,
+ action,
+ isActive,
+ className,
+ onClick,
+ onOutsideClick,
+ onOutsideFocus,
+ } = props;
+
+ const ref = useRef<HTMLDivElement>(null);
+
+ const classes = classNames(
+ 'controls',
+ !!onClick && 'controls--hoverable',
+ isActive && 'controls--active',
+ className,
+ );
+
+ const handleOutsideClick = () => {
+ if (onOutsideClick) {
+ onOutsideClick();
+ }
+ };
+
+ const handleOutsideFocus = () => {
+ if (onOutsideFocus) {
+ onOutsideFocus();
+ }
+ };
+
+ useOutsideClick(ref, handleOutsideClick);
+ useOutsideFocus(ref, handleOutsideFocus);
+ useImperativeHandle(forwardedRef, () => ref.current!);
+
+ return (
+ <div
+ ref={ref}
+ className={classes}
+ onClick={onClick}
+ >
+ {beforeAction && (
+ <div className="controls__before-action">
+ {beforeAction}
+ </div>
+ )}
+ <div className="controls__content">
+ <div className="controls__title">{title}</div>
+ {description && (
+ <div className="controls__description">
+ {description}
+ </div>
+ )}
+ </div>
+ {action && (
+ <div className="controls__action">
+ {action}
+ </div>
+ )}
+ </div>
+ );
+ },
+);
diff --git a/src/options/components/ui/Controls/ControlsSelect.tsx b/src/options/components/ui/Controls/ControlsSelect.tsx
new file mode 100644
index 000000000..52038966d
--- /dev/null
+++ b/src/options/components/ui/Controls/ControlsSelect.tsx
@@ -0,0 +1,84 @@
+import React, { useRef, useState } from 'react';
+
+import classNames from 'classnames';
+
+import { Select, type SelectProps } from '../Select';
+
+import { Controls, type ControlsProps } from './Controls';
+
+/**
+ * ControlsSelect component props.
+ */
+export interface ControlsSelectProps<T> {
+ /**
+ * Title of the controls.
+ */
+ title: ControlsProps['title'];
+
+ /**
+ * Description of the controls.
+ */
+ description?: ControlsProps['description'];
+
+ /**
+ * Current selected value of the select.
+ */
+ value: SelectProps<T>['value'];
+
+ /**
+ * Options of the select.
+ */
+ options: SelectProps<T>['options'];
+
+ /**
+ * Change event handler.
+ */
+ onChange: SelectProps<T>['onChange'];
+}
+
+export function ControlsSelect<T extends string>({
+ title,
+ description,
+ value,
+ options,
+ onChange,
+}: ControlsSelectProps<T>) {
+ const ref = useRef<HTMLDivElement>(null);
+ const classes = classNames(
+ 'controls--select',
+ // If description is not provided title and select should be aligned to center.
+ !description && 'controls--select-align-center',
+ );
+
+ const [isActive, setIsActive] = useState(false);
+
+ const handleClick = () => {
+ setIsActive((currentActive) => !currentActive);
+ };
+
+ const handleOutsideClickOrFocus = () => {
+ setIsActive(false);
+ };
+
+ return (
+ <Controls
+ ref={ref}
+ title={title}
+ description={description}
+ action={(
+ <Select
+ value={value}
+ options={options}
+ onChange={onChange}
+ isActive={isActive}
+ onIsActiveChange={setIsActive}
+ />
+ )}
+ isActive={isActive}
+ className={classes}
+ onClick={handleClick}
+ onOutsideClick={handleOutsideClickOrFocus}
+ onOutsideFocus={handleOutsideClickOrFocus}
+ />
+ );
+}
diff --git a/src/options/components/ui/Controls/ControlsSwitch.tsx b/src/options/components/ui/Controls/ControlsSwitch.tsx
new file mode 100644
index 000000000..2eb3651a1
--- /dev/null
+++ b/src/options/components/ui/Controls/ControlsSwitch.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Switch, type SwitchProps } from '../Switch';
+
+import { type ControlsProps, Controls } from './Controls';
+
+/**
+ * ControlsSwitch component props.
+ */
+export interface ControlsSwitchProps {
+ /**
+ * Title of the controls.
+ */
+ title: ControlsProps['title'];
+
+ /**
+ * Description of the controls.
+ */
+ description?: ControlsProps['description'];
+
+ /**
+ * Is the switch active or not.
+ */
+ isActive: SwitchProps['isActive'];
+
+ /**
+ * Toggle event handler.
+ */
+ onToggle: SwitchProps['onToggle'];
+}
+
+export function ControlsSwitch({
+ title,
+ description,
+ isActive,
+ onToggle,
+}: ControlsSwitchProps) {
+ return (
+ <Controls
+ title={title}
+ description={description}
+ action={<Switch isActive={isActive} onToggle={onToggle} />}
+ onClick={onToggle}
+ />
+ );
+}
diff --git a/src/options/components/ui/Controls/controls.pcss b/src/options/components/ui/Controls/controls.pcss
new file mode 100644
index 000000000..cc1bf34bd
--- /dev/null
+++ b/src/options/components/ui/Controls/controls.pcss
@@ -0,0 +1,80 @@
+.controls {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding: 16px;
+ transition: var(--t3) background-color;
+
+ &--select {
+ position: relative;
+
+ .controls__content {
+ flex: 1 1 0;
+ min-width: min-content;
+ }
+
+ .controls__action {
+ flex: 0 1 auto;
+ min-width: 0;
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-end;
+
+ .select,
+ .select__btn {
+ width: 100%;
+ }
+ }
+
+ &-align-center {
+ align-items: center;
+ }
+ }
+
+ &--hoverable,
+ &--active {
+ cursor: pointer;
+ background-color: transparent;
+ border-radius: 8px;
+ }
+
+ &--hoverable:hover {
+ background-color: var(--fills-backgrounds-page-background-hovered);
+ }
+
+ &--hoverable:active,
+ &--active,
+ &--active:hover {
+ background-color: var(--fills-backgrounds-page-background-pressed);
+ }
+
+ &__content {
+ flex: 1 1 auto;
+ }
+
+ &__before-action {
+ margin-right: 12px;
+ flex-shrink: 0;
+ }
+
+ &__action {
+ margin-left: 16px;
+ flex-shrink: 0;
+ }
+
+ &__title {
+ color: var(--text-main-text-main-default);
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 1.3;
+ transition: var(--t3) color;
+ }
+
+ &__description {
+ color: var(--text-description-description-default);
+ font-size: 14px;
+ line-height: 1.3;
+ margin-top: 2px;
+ transition: var(--t3) color;
+ }
+}
diff --git a/src/options/components/ui/Controls/index.ts b/src/options/components/ui/Controls/index.ts
new file mode 100644
index 000000000..aaa9fa9a1
--- /dev/null
+++ b/src/options/components/ui/Controls/index.ts
@@ -0,0 +1,3 @@
+export { Controls } from './Controls';
+export { ControlsSelect } from './ControlsSelect';
+export { ControlsSwitch } from './ControlsSwitch';
diff --git a/src/options/components/ui/Icon/Icon.tsx b/src/options/components/ui/Icon/Icon.tsx
new file mode 100644
index 000000000..764cd9cda
--- /dev/null
+++ b/src/options/components/ui/Icon/Icon.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+/**
+ * Icon component props.
+ */
+export interface IconProps {
+ /**
+ * The name of the icon to display.
+ *
+ * Full list of available icons can be found in the `Icons.tsx` file.
+ */
+ name: string;
+
+ /**
+ * Additional class name.
+ */
+ className?: string;
+}
+
+export function Icon({ name, className }: IconProps) {
+ const classes = classNames(
+ 'icon',
+ className,
+ );
+
+ return (
+ <svg className={classes}>
+ <use xlinkHref={`#${name}`} />
+ </svg>
+ );
+}
diff --git a/src/options/components/ui/Icon/IconButton.tsx b/src/options/components/ui/Icon/IconButton.tsx
new file mode 100644
index 000000000..c0fe87553
--- /dev/null
+++ b/src/options/components/ui/Icon/IconButton.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { Icon } from './Icon';
+
+/**
+ * IconButton component props.
+ */
+export interface IconButtonProps {
+ /**
+ * Button type. Default is 'button'.
+ */
+ type?: 'button' | 'submit' | 'reset';
+
+ /**
+ * Button hover color. Default is 'primary'.
+ */
+ hoverColor?: 'primary' | 'success' | 'error';
+
+ /**
+ * The name of the icon to display.
+ *
+ * Full list of available icons can be found in the `Icons.tsx` file.
+ */
+ name: string;
+
+ /**
+ * Additional class name.
+ */
+ className?: string;
+
+ /**
+ * Additional icon class name.
+ */
+ iconClassName?: string;
+
+ /**
+ * Click event handler.
+ */
+ onClick?: (e: React.MouseEvent) => void;
+}
+
+export function IconButton({
+ type = 'button',
+ hoverColor = 'primary',
+ name,
+ className,
+ iconClassName,
+ onClick,
+}: IconButtonProps) {
+ const classes = classNames(
+ 'icon-button has-tab-focus',
+ `icon-button--hover-${hoverColor}`,
+ className,
+ );
+
+ return (
+ <button
+ // eslint-disable-next-line react/button-has-type
+ type={type}
+ className={classes}
+ onClick={onClick}
+ >
+ <Icon name={name} className={iconClassName} />
+ </button>
+ );
+}
diff --git a/src/options/components/ui/Icon/Icons.tsx b/src/options/components/ui/Icon/Icons.tsx
new file mode 100644
index 000000000..c558ffb9a
--- /dev/null
+++ b/src/options/components/ui/Icon/Icons.tsx
@@ -0,0 +1,194 @@
+/* eslint-disable react/no-unknown-property */
+import React from 'react';
+
+import './icons.pcss';
+
+export const Icons = () => (
+ <svg xmlns="http://www.w3.org/2000/svg" className="hidden">
+ <symbol
+ id="sidebar-burger"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ strokeWidth="1.5"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="M4 12H20" />
+ <path d="M4 7H20" />
+ <path d="M4 17H20" />
+ </symbol>
+
+ <symbol id="cross" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+ <path d="M6.43 6.43 17.6 17.6m-11.17-.03L17.6 6.4" />
+ </symbol>
+
+ <symbol id="star" viewBox="0 0 30 30" fill="currentColor" fillRule="evenodd" clipRule="evenodd">
+ <path d="m15 21-8.8 6.1 3-10.2-8.5-6.5 10.8-.3L15 0l3.5 10.1 10.8.3-8.6 6.5L23.8 27l-8.8-6Z" />
+ </symbol>
+
+ <symbol
+ id="arrow-down"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="1.5"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="M6 10L12 16L18 10" />
+ </symbol>
+
+ <symbol
+ id="tick"
+ viewBox="0 0 24 24"
+ fill="none"
+ fillRule="evenodd"
+ stroke="currentColor"
+ strokeWidth="1.5"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="m5 12 6 6 8-9" />
+ </symbol>
+
+ <symbol id="plus" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+ <path d="M4 12H20" />
+ <path d="M12 4L12 20" />
+ </symbol>
+
+ <symbol
+ id="basket"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="1.5"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="M7 9h10l-.76 10.08a1 1 0 0 1-1 .92H8.76a1 1 0 0 1-1-.92L7 9ZM6 6.5h12M14 6V4h-4v2M13.5 12v5-5Zm-3 0v5-5Z" />
+ </symbol>
+
+ <symbol
+ id="edit"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="1.5"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="M4 20.5h15.983M10.778 16.435l-4.242-4.243 7.07-7.07a3 3 0 0 1 4.243 0 3 3 0 0 1 0 4.242l-7.07 7.071ZM5.121 17.85l1.415-5.658 4.242 4.243-5.657 1.414ZM16.789 9.01 13.96 6.182" />
+ </symbol>
+
+ <symbol id="question" viewBox="0 0 24 24" fill="none">
+ <circle cx="12" cy="12" r="9.25" stroke="currentColor" strokeWidth="1.5" />
+ <path d="M11.01 13.92c0-.63.08-1.13.23-1.5.15-.38.42-.74.83-1.1.4-.36.67-.66.8-.88s.2-.47.2-.72c0-.76-.35-1.13-1.04-1.13-.33 0-.6.1-.79.3-.2.2-.3.49-.3.85H9c0-.86.28-1.53.82-2.01A3.19 3.19 0 0 1 12.03 7c.94 0 1.67.23 2.2.69.51.46.77 1.1.77 1.94 0 .39-.08.74-.25 1.08-.17.34-.47.72-.89 1.13l-.54.52c-.34.32-.53.7-.58 1.15l-.02.4zm-.2 2.06c0-.3.1-.55.31-.74.2-.2.46-.3.78-.3s.57.1.77.3c.2.2.3.44.3.74s-.1.54-.3.73c-.19.2-.45.29-.77.29-.33 0-.59-.1-.79-.29a.98.98 0 0 1-.3-.73z" fill="currentColor" />
+ </symbol>
+
+ <symbol
+ id="bug"
+ viewBox="0 0 24 24"
+ fill="none"
+ fillRule="evenodd"
+ stroke="currentColor"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="1.5"
+ >
+ <path d="M12 5a6 6 0 0 1 6 6v4a6 6 0 1 1-12 0v-4a6 6 0 0 1 6-6zm6 5h3m-6.25-5 1.5-2m-6.5 2-1.5-2M2.5 10h3M18 14h3M2.5 14h3m12 4H21M2.5 18h4m0-6.5h11" />
+ </symbol>
+
+ <symbol
+ id="send-feedback"
+ viewBox="0 0 24 24"
+ fill="none"
+ fillRule="evenodd"
+ stroke="currentColor"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="1.5"
+ >
+ <path d="M13 12H7l-3 8 17-8L4 4l3 8z" />
+ </symbol>
+
+ <symbol
+ id="checkbox-disabled"
+ viewBox="0 0 24 24"
+ fill="none"
+ fillRule="evenodd"
+ clipRule="evenodd"
+ stroke="currentColor"
+ strokeWidth="1.5"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="M21 3H3V21H21V3Z" />
+ </symbol>
+
+ <symbol id="checkbox-enabled" viewBox="0 0 24 24" fill="currentColor" fillRule="evenodd" clipRule="evenodd">
+ <path d="M22 22V2H2v20h20ZM17.57 9.49a.75.75 0 1 0-1.14-.98l-5.48 6.38-3.41-3.49a.75.75 0 0 0-1.08 1.05l4.57 4.66 6.54-7.62Z" />
+ </symbol>
+
+ <symbol id="checkbox-partly-enabled" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+ <path d="M21 3H3V21H21V3Z" fillRule="evenodd" clipRule="evenodd" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+ <rect x="9.5" y="9.5" width="5" height="5" strokeWidth="5" strokeLinejoin="miter" />
+ </symbol>
+
+ <symbol id="checkmark" viewBox="0 0 24 24">
+ <circle cx="12" cy="12" r="10.6" fill="currentColor" />
+ <path d="M17.24 7.84c.37.32.4.87.09 1.23l-6.09 7a.87.87 0 0 1-1.3.03L6.7 12.68a.87.87 0 0 1 1.27-1.2l2.58 2.72 5.46-6.27a.88.88 0 0 1 1.23-.09Z" fill="white" fillRule="evenodd" clipRule="evenodd" />
+ </symbol>
+
+ <symbol
+ id="external-link"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="1.5"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="M18.5 11.83V6h-5.71M18.42 6.04l-6.79 6.93M9.27 7H8.5a2 2 0 0 0-2 2v7c0 1.1.9 2 2 2h7a2 2 0 0 0 2-2v-.7" />
+ </symbol>
+
+ <symbol
+ id="pencil"
+ viewBox="0 0 16 16"
+ fill="none"
+ fillRule="evenodd"
+ clipRule="evenodd"
+ stroke="currentColor"
+ strokeWidth="1.5"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="M7.19 10.96 4.36 8.13 9.07 3.4a2 2 0 0 1 2.83 2.83l-4.71 4.72Z" />
+ <path d="m3.41 11.9.95-3.77 2.83 2.83-3.78.94ZM11.2 6 9.3 4.13" />
+ </symbol>
+
+ <symbol
+ id="globe"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="1.5"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
+ <path d="M14.5 3.5c.27 1.17.5 2.33.65 3.5M19 7c-1.25.36-2.5.62-3.75.78a36.4 36.4 0 0 1 0 8.44c1.25.16 2.5.42 3.75.78M15.15 17a38.06 38.06 0 0 1-.65 3.5M9.5 20.5c-.27-1.17-.5-2.33-.65-3.5M5 17c1.25-.36 2.5-.62 3.75-.78a36.18 36.18 0 0 1 0-8.44C7.5 7.62 6.25 7.36 5 7M8.85 7c.16-1.17.38-2.33.65-3.5M9.5 16.13a24.61 24.61 0 0 1 5 0M14.5 7.87a24.61 24.61 0 0 1-5 0M3 12h18" />
+ </symbol>
+
+ <symbol
+ id="spinner"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ strokeWidth="1.5"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="M6.29 5.04c.11-.1.23-.18.35-.27M8.56 3.68a8.93 8.93 0 0 1 1.24-.4M12 3a9 9 0 1 1-8.32 12.44" />
+ </symbol>
+ </svg>
+);
diff --git a/src/options/components/ui/Icon/icons.pcss b/src/options/components/ui/Icon/icons.pcss
new file mode 100644
index 000000000..f0317abac
--- /dev/null
+++ b/src/options/components/ui/Icon/icons.pcss
@@ -0,0 +1,41 @@
+.icon {
+ display: inline-block;
+ vertical-align: middle;
+ flex-shrink: 0;
+ font-size: 0;
+ width: 24px;
+ height: 24px;
+ color: var(--stroke-icons-gray-icons-default);
+}
+
+.icon-button {
+ flex-shrink: 0;
+ color: var(--stroke-icons-gray-icons-default);
+ transition: var(--t3) color;
+
+ &:hover,
+ &:active,
+ &:focus-visible {
+ color: var(--text-main-text-main-default);
+ }
+
+ &--hover-success {
+ &:hover,
+ &:active,
+ &:focus-visible {
+ color: var(--stroke-icons-product-icon-default);
+ }
+ }
+
+ &--hover-error {
+ &:hover,
+ &:active,
+ &:focus-visible {
+ color: var(--stroke-icons-error-icon-default);
+ }
+ }
+
+ .icon {
+ color: currentColor;
+ }
+}
diff --git a/src/options/components/ui/Icon/index.ts b/src/options/components/ui/Icon/index.ts
new file mode 100644
index 000000000..c08e705d4
--- /dev/null
+++ b/src/options/components/ui/Icon/index.ts
@@ -0,0 +1,3 @@
+export { Icons } from './Icons';
+export { Icon } from './Icon';
+export { IconButton, type IconButtonProps } from './IconButton';
diff --git a/src/options/components/ui/Icons.tsx b/src/options/components/ui/Icons.tsx
deleted file mode 100644
index da0f104ea..000000000
--- a/src/options/components/ui/Icons.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-/* eslint-disable react/no-unknown-property */
-import React from 'react';
-
-import './icon.pcss';
-
-const Icons = () => (
- <svg xmlns="http://www.w3.org/2000/svg" className="hidden">
- {/* New icons */}
- <symbol
- id="sidebar-burger"
- viewBox="0 0 24 24"
- stroke="currentColor"
- strokeWidth="1.5"
- strokeLinecap="round"
- strokeLinejoin="round"
- >
- <path d="M4 12H20" />
- <path d="M4 7H20" />
- <path d="M4 17H20" />
- </symbol>
-
- <symbol id="cross" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
- <path d="M6.42857143 6.42857143L17.604347 17.604347M6.42857143 17.5714286L17.604347 6.39565302" />
- </symbol>
-
- {/* Old icons, TODO: Remove unused icons later when re-design is finished (AG-38059) */}
- <svg id="social_apple" viewBox="0 0 12 14">
- <defs>
- <path id="a" d="M9.71392487,3.4619702 C10.1999732,2.89864476 10.5276008,2.11398907 10.4379414,1.33333333 C9.73751945,1.35999963 8.89013699,1.7806604 8.38790951,2.3433192 C7.93691598,2.84264554 7.54322358,3.64063437 7.64906212,4.40595699 C8.43037976,4.46395618 9.22787654,4.02596231 9.71392487,3.4619702 M11.4659909,8.41656751 C11.4855407,10.4345393 13.3131094,11.1058632 13.3333333,11.1145297 C13.3185025,11.1618624 13.0414347,12.071183 12.3706745,13.0111699 C11.7902478,13.8231585 11.188249,14.6318138 10.2397469,14.6491469 C9.30809811,14.6658134 9.00810988,14.119821 7.94230903,14.119821 C6.87718231,14.119821 6.54416167,14.6318138 5.66239854,14.6658134 C4.74692886,14.6984796 4.04920345,13.787159 3.46473201,12.977837 C2.26882391,11.3225268 1.35537662,8.29990248 2.58229475,6.25993104 C3.19170902,5.24727855 4.28043032,4.60528753 5.46285581,4.58928776 C6.36147222,4.57262132 7.21020294,5.16861298 7.75961957,5.16861298 C8.30903621,5.16861298 9.34045639,4.45195635 10.4244588,4.5572882 C10.8781488,4.57528795 12.1522561,4.73261908 12.9699768,5.87993636 C12.903912,5.91926914 11.4498118,6.72992446 11.4659909,8.41656751" />
- </defs>
- <use fill="#131313" fillRule="evenodd" transform="translate(-2 -1)" xlinkHref="#a" />
- </svg>
-
- <svg id="more-actions" width="2" height="12" viewBox="0 0 2 12" fill="none">
- <path fillRule="evenodd" clipRule="evenodd" d="M1 2C0.447715 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0C1.55228 0 2 0.447715 2 1C2 1.55228 1.55228 2 1 2ZM1 7C0.447715 7 0 6.55228 0 6C0 5.44772 0.447715 5 1 5C1.55228 5 2 5.44772 2 6C2 6.55228 1.55228 7 1 7ZM0 11C0 11.5523 0.447715 12 1 12C1.55228 12 2 11.5523 2 11C2 10.4477 1.55228 10 1 10C0.447715 10 0 10.4477 0 11Z" fill="#4D4D4D" />
- </svg>
-
- <svg id="basket" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path clipRule="evenodd" d="M7 9h10l-.763 10.076a1 1 0 0 1-.997.924H8.76a1 1 0 0 1-.997-.924L7 9Z" stroke="#A4A4A4" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <path d="M6 6.5h12M14 6V4h-4v2" stroke="#A4A4A4" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <path clipRule="evenodd" d="M13.5 12v5-5ZM10.5 12v5-5Z" stroke="#A4A4A4" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- </svg>
-
- <svg id="edit" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M4 20.5h15.983" stroke="#A4A4A4" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <path clipRule="evenodd" d="m10.778 16.435-4.242-4.243 7.07-7.07a3 3 0 0 1 4.243 0v0a3 3 0 0 1 0 4.242l-7.07 7.071ZM5.121 17.85l1.415-5.658 4.242 4.243-5.657 1.414Z" stroke="#A4A4A4" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <path d="M16.789 9.01 13.96 6.182" stroke="#A4A4A4" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- </svg>
-
- <svg id="disabled" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path fillRule="evenodd" clipRule="evenodd" d="M21 3H3V21H21V3Z" stroke="#7F7F7F" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- </svg>
-
- <svg id="enabled" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path fillRule="evenodd" clipRule="evenodd" d="M22 22V2H2V22H22ZM17.5691 9.4885C17.8389 9.1742 17.8028 8.7007 17.4885 8.43091C17.1742 8.16112 16.7007 8.1972 16.4309 8.5115L10.9546 14.8913L7.53551 11.4044C7.24551 11.1087 6.77066 11.104 6.4749 11.394C6.17915 11.684 6.17448 12.1589 6.46449 12.4546L11.028 17.1087L17.5691 9.4885Z" fill="#74A352" />
- </svg>
-
- <svg id="partly-enabled" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path fillRule="evenodd" clipRule="evenodd" d="M21 3H3V21H21V3Z" stroke="#74A352" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <rect x="9.5" y="9.5" width="5" height="5" stroke="#74A352" strokeWidth="5" strokeLinejoin="miter" />
- </svg>
-
- <symbol id="social_facebook" viewBox="0 0 112.196 112.196" fill="currentColor">
- <circle cx="56.098" cy="56.098" r="56.098" fill="#3b5998" />
- <path d="M70.201 58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34c0-5.964 2.833-15.303 15.301-15.303l11.234.047v12.51h-8.151c-1.337 0-3.217.668-3.217 3.513v7.585h11.334l-1.325 12.876z" fill="#fff" />
- </symbol>
-
- <symbol id="social_google" viewBox="0 0 25 25" fill="currentColor">
- <path d="M5.319 14.698l-.835 3.118-3.054.065A11.946 11.946 0 010 12.194c0-1.99.484-3.866 1.342-5.519l2.719.499 1.19 2.702a7.133 7.133 0 00-.383 2.318c0 .88.16 1.725.452 2.504z" fill="#FBBB00" />
- <path d="M23.79 9.952a12.022 12.022 0 01-.053 4.747 11.997 11.997 0 01-4.224 6.853h-.001l-3.424-.175-.485-3.025a7.152 7.152 0 003.078-3.652h-6.417V9.952H23.79z" fill="#518EF8" />
- <path d="M19.512 21.551v.001A11.95 11.95 0 0112 24.194c-4.57 0-8.543-2.554-10.57-6.313l3.889-3.183a7.135 7.135 0 0010.284 3.654l3.909 3.2z" fill="#28B446" />
- <path d="M19.66 2.957l-3.888 3.182a7.137 7.137 0 00-10.52 3.736l-3.91-3.2A11.998 11.998 0 0112 .194a11.95 11.95 0 017.66 2.763z" fill="#F14336" />
- </symbol>
-
- <symbol id="plus" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
- <path d="M4 12H20" />
- <path d="M12 4L12 20" />
- </symbol>
-
- <symbol id="check" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round">
- <polyline points="5 11.767 10.588 17 19 8" />
- </symbol>
-
- <symbol id="unchecked" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round">
- <rect width="18.5" height="18.5" x=".75" y=".75" rx="3" transform="translate(2 2)" />
- </symbol>
-
- <symbol id="checked" viewBox="0 0 24 24" fill="none" strokeLinecap="round">
- <rect width="18.5" height="18.5" x="2.75" y="2.75" stroke="currentColor" strokeWidth="1.5" rx="3" />
- <polyline stroke="currentColor" strokeLinecap="round" strokeWidth="1.5" points="0 2.93 3.991 7 10 0" transform="translate(7 9)" />
- </symbol>
-
- <symbol id="bullet_on" viewBox="0 0 24 24">
- <g fill="none" fillRule="evenodd" transform="translate(2 2)">
- <circle cx="10" cy="10" r="9.25" stroke="currentColor" strokeWidth="1.5" />
- <circle cx="10" cy="10" r="6" fill="currentColor" />
- </g>
- </symbol>
-
- <symbol id="bullet_off" viewBox="0 0 24 24">
- <circle cx="10" cy="10" r="9.25" fill="none" stroke="#909090" strokeWidth="1.5" transform="translate(2 2)" />
- </symbol>
-
- <symbol id="question" viewBox="0 0 24 24" fill="none">
- <circle cx="12" cy="12" r="9.25" stroke="currentColor" strokeWidth="1.5" />
- <path d="m11.0110988 13.9153226c0-.6272433.0754709-1.1267903.2264151-1.4986559.1509441-.3718657.427301-.7381255.8290788-1.0987904.4017778-.3606648.6692557-.6541207.8024417-.8803763s.199778-.46482849.199778-.71572581c0-.75717224-.3462784-1.13575268-1.0388457-1.13575268-.3285255 0-.5915639.1019255-.7891232.30577957-.1975592.20385406-.3007769.48498924-.3096559.84341397h-1.9311876c.00887907-.85573904.28301617-1.52553521.82241953-2.0094086.53940337-.48387339 1.27524507-.72580645 2.20754717-.72580645.9411812 0 1.6714735.2296124 2.190899.68884409.5194255.45923168.7791343 1.1077467.7791343 1.94556451 0 .3808263-.0843499.7403657-.2530522 1.078629-.1687023.3382634-.4639268.7134836-.8856825 1.1256721l-.5394007.5174731c-.3374046.3270626-.5305214.7101232-.5793563 1.1491935l-.026637.4099463zm-.1931188 2.063172c0-.3001807.1009979-.5477141.3029967-.7426075.2019988-.1948935.4605978-.2923387.7758047-.2923387s.5738058.0974452.7758046.2923387c.2019988.1948934.3029967.4424268.3029967.7426075 0 .2957004-.0987782.5398736-.2963374.7325269-.1975593.1926533-.458378.2889785-.7824639.2889785-.324086 0-.5849047-.0963252-.782464-.2889785-.1975592-.1926533-.2963374-.4368265-.2963374-.7325269z" fill="currentColor" />
- </symbol>
-
- <symbol id="cross_bold" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
- <path d="M6.42857143 6.42857143L17.604347 17.604347M6.42857143 17.5714286L17.604347 6.39565302" />
- </symbol>
-
- <symbol id="check_bold" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round">
- <polyline points="5 11.767 10.588 17 19 8" />
- </symbol>
-
- <symbol id="arrow" viewBox="0 0 24 24">
- <path d="M9 18L15 12L9 6" fill="none" stroke="#888888" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- </symbol>
-
- <svg id="small-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M10.9307 15.9645L14.9999 12.0349L11.0703 7.9657" stroke="#A4A4A4" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- </svg>
-
- <symbol id="back-arrow" viewBox="0 0 24 24">
- <path fill="none" fillRule="evenodd" stroke="#888" strokeLinecap="round" strokeWidth="1.5" d="M15 18l-6-6 6-6" />
- </symbol>
-
- <symbol id="bug" viewBox="0 0 24 24">
- <g fill="none" fillRule="evenodd">
- <path fill="#878787" fillOpacity=".01" d="M0 0h24v24H0z" />
- <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M12 5a6 6 0 016 6v4a6 6 0 11-12 0v-4a6 6 0 016-6zm6 5h3m-6.25-5l1.5-2m-6.5 2l-1.5-2M2.5 10h3M18 14h3M2.5 14h3m12 4H21M2.5 18h4m0-6.5h11" />
- </g>
- </symbol>
-
- <symbol id="send-feedback" viewBox="0 0 24 24">
- <g fill="none" fillRule="evenodd">
- <path fill="none" fillOpacity="0" d="M0 0h24v24H0z" />
- <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M13 12H7l-3 8 17-8L4 4l3 8z" />
- </g>
- </symbol>
-
- <symbol id="spinner" fill="none" viewBox="0 0 24 24">
- <path d="M6.2903 5.04276C6.40404 4.94931 6.52011 4.8586 6.63842 4.77072" stroke="#74A352" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <path d="M8.55511 3.68292C8.82001 3.57307 9.0913 3.47551 9.36826 3.39095C9.51032 3.34758 9.65388 3.30762 9.79883 3.27119" stroke="#74A352" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <path d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C9.51472 21 7.26472 19.9926 5.63604 18.364C4.80704 17.535 4.13901 16.545 3.68286 15.4449" stroke="#74A352" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- </symbol>
-
- <svg id="check-mark" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <circle cx="12" cy="12" r="10" stroke="#888888" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <circle cx="12" cy="12" r="5" stroke="#888888" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <circle cx="12" cy="12" r="4" stroke="#888888" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <circle cx="12" cy="12" r="3" stroke="#888888" strokeWidth="13" strokeLinecap="round" strokeLinejoin="round" />
- <circle cx="12" cy="12" r="1" stroke="#888888" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
- <circle cx="12" cy="12" r="3" stroke="#888888" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
- <path fillRule="evenodd" clipRule="evenodd" d="M17.2408 7.83969C17.6055 8.15676 17.6441 8.70944 17.327 9.07412L11.2409 16.0741C11.079 16.2603 10.8461 16.3695 10.5995 16.3748C10.3528 16.3801 10.1154 16.2811 9.94566 16.1021L6.69841 12.6777C6.36589 12.327 6.38059 11.7732 6.73125 11.4407C7.08191 11.1082 7.63574 11.1229 7.96825 11.4735L10.5525 14.1987L16.0063 7.9259C16.3234 7.56122 16.8761 7.52262 17.2408 7.83969Z" fill="white" />
- </svg>
-
- <svg id="check-mark-done" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <circle cx="12" cy="12" r="10" stroke="#74A352" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <circle cx="12" cy="12" r="5" stroke="#74A352" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <circle cx="12" cy="12" r="4" stroke="#74A352" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <circle cx="12" cy="12" r="3" stroke="#74A352" strokeWidth="13" strokeLinecap="round" strokeLinejoin="round" />
- <circle cx="12" cy="12" r="1" stroke="#74A352" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
- <circle cx="12" cy="12" r="3" stroke="#74A352" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
- <path fillRule="evenodd" clipRule="evenodd" d="M17.2408 7.83969C17.6055 8.15676 17.6441 8.70944 17.327 9.07412L11.2409 16.0741C11.079 16.2603 10.8461 16.3695 10.5995 16.3748C10.3528 16.3801 10.1154 16.2811 9.94566 16.1021L6.69841 12.6777C6.36589 12.327 6.38059 11.7732 6.73125 11.4407C7.08191 11.1082 7.63574 11.1229 7.96825 11.4735L10.5525 14.1987L16.0063 7.9259C16.3234 7.56122 16.8761 7.52262 17.2408 7.83969Z" fill="white" />
- </svg>
-
- <svg id="external-link" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M18.5 11.8334V6.00004L12.7857 6.00004" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <path d="M18.421 6.03914L11.632 12.9696" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <path d="M9.26672 7H8.5C7.39543 7 6.5 7.89543 6.5 9V16C6.5 17.1046 7.39543 18 8.5 18H15.5C16.6046 18 17.5 17.1046 17.5 16V15.2961" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- </svg>
-
- <svg id="pencil" width="16" height="16" viewBox="0 0 16 16" fill="none">
- <path fillRule="evenodd" clipRule="evenodd" d="M7.18555 10.9567L4.35712 8.12827L9.07117 3.41422C9.85221 2.63318 11.1185 2.63318 11.8996 3.41422V3.41422C12.6806 4.19527 12.6806 5.4616 11.8996 6.24265L7.18555 10.9567Z" stroke="#74A352" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <path fillRule="evenodd" clipRule="evenodd" d="M3.41416 11.8995L4.35696 8.12827L7.18539 10.9567L3.41416 11.8995Z" stroke="#74A352" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <path d="M11.1925 6.00694L9.30687 4.12132" stroke="#74A352" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- </svg>
-
- <svg id="warning" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <circle cx="9" cy="9" r="9" transform="matrix(1 0 0 -1 3 21)" stroke="#D58500" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <path d="M12 8V14" stroke="#D58500" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- <path d="M11.997 16.4045C12.009 16.4025 11.997 16.5955 11.997 16.5955" stroke="#D58500" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
- </svg>
-
- </svg>
-);
-
-export default Icons;
diff --git a/src/options/components/ui/Input/Input.tsx b/src/options/components/ui/Input/Input.tsx
new file mode 100644
index 000000000..e6ce31624
--- /dev/null
+++ b/src/options/components/ui/Input/Input.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { IconButton } from '../Icon';
+
+import './input.pcss';
+
+/**
+ * Base props for the input component.
+ */
+export interface InputBaseProps {
+ /**
+ * ID of the element.
+ */
+ id?: string;
+
+ /**
+ * Name of the element.
+ */
+ name?: string;
+
+ /**
+ * Label of the element.
+ */
+ label?: React.ReactNode;
+
+ /**
+ * Placeholder of the element.
+ */
+ placeholder?: string;
+
+ /**
+ * Whether the element is required or not.
+ */
+ required?: boolean;
+
+ /**
+ * Current value of the element.
+ */
+ value: string;
+
+ /**
+ * Error message to display.
+ */
+ error?: React.ReactNode;
+
+ /**
+ * Change event handler.
+ */
+ onChange?: (value: string) => void;
+}
+
+/**
+ * Input component props.
+ */
+export interface InputProps extends InputBaseProps {
+ /**
+ * Type of the input. Default is 'text'.
+ */
+ type?: 'text' | 'email';
+
+ /**
+ * Whether the input is read-only or not.
+ */
+ readOnly?: boolean;
+
+ /**
+ * Postfix message to display.
+ */
+ postfix?: string;
+}
+
+export function Input({
+ id,
+ name,
+ type = 'text',
+ label,
+ placeholder,
+ required,
+ value,
+ readOnly,
+ error,
+ postfix,
+ onChange,
+}: InputProps) {
+ const classes = classNames(
+ 'input',
+ !!error && 'input--error',
+ );
+
+ const clearValue = () => {
+ if (onChange) {
+ onChange('');
+ }
+ };
+
+ const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const { value } = e.target;
+ if (onChange) {
+ onChange(value);
+ }
+ };
+
+ return (
+ <label htmlFor={id} className={classes}>
+ {label && (
+ <div className="input__label">
+ {label}
+ </div>
+ )}
+ <div className="input__wrapper">
+ <input
+ id={id}
+ name={name}
+ type={type}
+ placeholder={placeholder}
+ className="input__native"
+ value={value}
+ onChange={handleChange}
+ required={required}
+ readOnly={readOnly}
+ />
+ {value && !readOnly && (
+ <IconButton
+ name="cross"
+ onClick={clearValue}
+ className="input__clear-btn"
+ />
+ )}
+ {postfix && (
+ <div className="input__postfix">
+ {postfix}
+ </div>
+ )}
+ </div>
+ {!!error && (
+ <div className="input__error">
+ {error}
+ </div>
+ )}
+ </label>
+ );
+}
diff --git a/src/options/components/ui/Input/TextArea.tsx b/src/options/components/ui/Input/TextArea.tsx
new file mode 100644
index 000000000..a12873ba4
--- /dev/null
+++ b/src/options/components/ui/Input/TextArea.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { type InputBaseProps } from './Input';
+
+export function TextArea({
+ id,
+ name,
+ label,
+ placeholder,
+ value,
+ required,
+ onChange,
+ error,
+}: InputBaseProps) {
+ const classes = classNames(
+ 'input',
+ 'textarea',
+ !!error && 'input--error',
+ );
+
+ const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+ const { value } = e.target;
+ if (onChange) {
+ onChange(value);
+ }
+ };
+
+ return (
+ <label htmlFor={id} className={classes}>
+ {label && (
+ <div className="input__label">
+ {label}
+ </div>
+ )}
+ <div className="input__wrapper">
+ {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+ <textarea
+ id={id}
+ name={name}
+ placeholder={placeholder}
+ className="input__native"
+ value={value}
+ onChange={handleChange}
+ required={required}
+ />
+ </div>
+ {!!error && (
+ <div className="input__error">
+ {error}
+ </div>
+ )}
+ </label>
+ );
+}
diff --git a/src/options/components/ui/Input/index.ts b/src/options/components/ui/Input/index.ts
new file mode 100644
index 000000000..1c2ac91c3
--- /dev/null
+++ b/src/options/components/ui/Input/index.ts
@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export { TextArea } from './TextArea';
diff --git a/src/options/components/ui/Input/input.pcss b/src/options/components/ui/Input/input.pcss
new file mode 100644
index 000000000..584f8c839
--- /dev/null
+++ b/src/options/components/ui/Input/input.pcss
@@ -0,0 +1,95 @@
+.input {
+ display: block;
+ width: 100%;
+
+ &__label {
+ display: block;
+ margin-bottom: 8px;
+ color: var(--text-labels-labels-default);
+ font-size: 14px;
+ line-height: 1.3;
+ }
+
+ &__wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 8px;
+ color: var(--text-labels-labels-default);
+ background: var(--fills-inputs-input-background-default);
+ border: 1px solid var(--stroke-inputs-inactive-input-stroke-default);
+ transition: var(--t3) border-color;
+ padding-right: 8px;
+
+ .textarea & {
+ padding-right: 0;
+ }
+
+ &:focus-within {
+ border-color: var(--stroke-inputs-active-input-stroke-default);
+ }
+
+ .input--error & {
+ border-color: var(--stroke-inputs-error-input-default);
+ }
+ }
+
+ &__native {
+ flex: 1 1 auto;
+ display: block;
+ width: 100%;
+ padding: 16px 8px 16px 16px;
+ color: var(--text-main-text-main-default);
+ outline: none;
+ text-overflow: ellipsis;
+ border: none;
+ background-color: transparent;
+
+ &--textarea {
+ padding: 16px;
+ }
+
+ .textarea & {
+ padding: 16px;
+ }
+
+ &, &::placeholder {
+ font-size: 16px;
+ line-height: 1.3;
+ font-family: var(--font-stack);
+ }
+
+ &::placeholder {
+ color: var(--text-placeholder-placeholder-default);
+ }
+ }
+
+ textarea.input__native {
+ resize: vertical;
+ min-height: 140px;
+ }
+
+ &__clear-btn {
+ flex-shrink: 0;
+ padding: 6px;
+ }
+
+ &__postfix {
+ flex-shrink: 0;
+ color: var(--text-main-text-main-default);
+ text-align: right;
+ font-size: 16px;
+ line-height: 1.3;
+ letter-spacing: -0.31px;
+ padding-left: 16px;
+ padding-right: 8px;
+ border-left: 1px solid var(--stroke-dividers-item-divider-default);
+ }
+
+ &__error {
+ margin-top: 8px;
+ color: var(--text-links-error-link-default);
+ font-size: 14px;
+ line-height: 1.3;
+ }
+}
diff --git a/src/options/components/ui/Modal/Modal.tsx b/src/options/components/ui/Modal/Modal.tsx
new file mode 100644
index 000000000..c645dd863
--- /dev/null
+++ b/src/options/components/ui/Modal/Modal.tsx
@@ -0,0 +1,119 @@
+import React, { useEffect, type PropsWithChildren } from 'react';
+
+import classNames from 'classnames';
+
+import { ESC_KEY_NAME } from '../../../../common/components/ui/useOutsideClick';
+import { ReactPortal } from '../ReactPortal';
+import { IconButton } from '../Icon';
+
+import './modal.pcss';
+
+/**
+ * Modal component props.
+ */
+export interface ModalProps extends PropsWithChildren {
+ /**
+ * Title of the modal.
+ */
+ title: React.ReactNode;
+
+ /**
+ * Description of the modal.
+ */
+ description?: React.ReactNode;
+
+ /**
+ * Actions of the modal. Also can be considered as footer.
+ */
+ actions?: React.ReactNode;
+
+ /**
+ * Flag that indicates whether the modal is open or not.
+ */
+ isOpen: boolean;
+
+ /**
+ * Size of the modal. Default is `large`.
+ * - 'large' - 720px width
+ * - 'medium' - 600px width
+ */
+ size?: 'large' | 'medium';
+
+ /**
+ * Additional class name.
+ */
+ className?: string;
+
+ /**
+ * Close event handler.
+ */
+ onClose: () => void;
+}
+
+export function Modal({
+ title,
+ description,
+ actions,
+ isOpen,
+ size = 'large',
+ className,
+ children,
+ onClose,
+}: ModalProps) {
+ const classes = classNames(
+ 'modal',
+ `modal--size-${size}`,
+ className,
+ );
+
+ useEffect(() => {
+ const listener = (event: KeyboardEvent) => {
+ if (event.key === ESC_KEY_NAME) {
+ onClose();
+ }
+ };
+
+ document.addEventListener('keydown', listener);
+
+ return () => {
+ document.removeEventListener('keydown', listener);
+ };
+ }, [onClose]);
+
+ if (!isOpen) {
+ return null;
+ }
+
+ return (
+ <ReactPortal>
+ <div className={classes}>
+ <div className="modal__overlay" onClick={onClose} />
+ <div className="modal__content">
+ <IconButton
+ name="cross"
+ className="modal__close-btn"
+ onClick={onClose}
+ />
+ <div className="modal__header">
+ <div className="modal__title">
+ {title}
+ </div>
+ {description && (
+ <div className="modal__description">
+ {description}
+ </div>
+ )}
+ </div>
+ <div className="modal__wrapper">
+ {children}
+ </div>
+ {actions && (
+ <div className="modal__actions">
+ {actions}
+ </div>
+ )}
+ </div>
+ </div>
+ </ReactPortal>
+ );
+}
diff --git a/src/options/components/ui/Modal/index.ts b/src/options/components/ui/Modal/index.ts
new file mode 100644
index 000000000..8deb0a3df
--- /dev/null
+++ b/src/options/components/ui/Modal/index.ts
@@ -0,0 +1 @@
+export { Modal } from './Modal';
diff --git a/src/options/components/ui/Modal/modal.pcss b/src/options/components/ui/Modal/modal.pcss
new file mode 100644
index 000000000..17ac4c7f2
--- /dev/null
+++ b/src/options/components/ui/Modal/modal.pcss
@@ -0,0 +1,117 @@
+.modal {
+ z-index: var(--modal-z);
+ position: fixed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &, &__overlay {
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ &__overlay {
+ position: absolute;
+ background-color: var(--fills-backgrounds-dialog-background-default);
+ opacity: 0.5;
+ }
+
+ &__content {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ max-width: 95%;
+ max-height: 95%;
+ padding: 32px;
+ border-radius: 8px;
+ background: var(--fills-backgrounds-page-background-default);
+ box-shadow: var(--big-light-shadow-br);
+
+ .modal--size-large & {
+ width: 720px;
+ }
+
+ .modal--size-medium & {
+ width: 600px;
+ }
+
+ @media (--tablet-sm) {
+ padding: 24px 16px;
+ }
+ }
+
+ &__header {
+ flex-shrink: 0;
+ padding-bottom: 32px;
+ }
+
+ &__title {
+ flex-shrink: 0;
+ color: var(--text-main-text-main-default);
+ font-size: 32px;
+ font-weight: 700;
+ line-height: 1.2;
+ padding-right: 24px;
+
+ @media (--tablet-sm) {
+ font-size: 24px;
+ padding-right: 64px;
+ }
+ }
+
+ &__description {
+ flex-shrink: 0;
+ font-size: 16px;
+ line-height: 1.5;
+ margin-top: 12px;
+ color: var(--text-description-description-default);
+
+ @media (--tablet-sm) {
+ padding-right: 40px;
+ }
+ }
+
+ &__close-btn {
+ position: absolute;
+ right: 12px;
+ top: 12px;
+ padding: 4px;
+ }
+
+ &__wrapper {
+ overflow-y: auto;
+ scrollbar-width: thin;
+ }
+
+ &__form {
+ display: flex;
+ flex-direction: column;
+ row-gap: 32px;
+ }
+
+ &__actions {
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-start;
+ padding-top: 32px;
+ flex-shrink: 0;
+ display: flex;
+ gap: 16px;
+
+ @media (--tablet-sm) {
+ flex-direction: column;
+ }
+
+ .button {
+ width: 200px;
+
+ @media (--tablet-sm) {
+ width: 100%;
+ }
+ }
+ }
+}
diff --git a/src/options/components/ui/Notifications/NotificationItem.tsx b/src/options/components/ui/Notifications/NotificationItem.tsx
new file mode 100644
index 000000000..162f3c75e
--- /dev/null
+++ b/src/options/components/ui/Notifications/NotificationItem.tsx
@@ -0,0 +1,74 @@
+import React, { useEffect } from 'react';
+
+import classNames from 'classnames';
+
+import { type Notification } from '../../../stores/NotificationsStore/Notification';
+import { IconButton } from '../Icon';
+
+const NOTIFICATION_CLEAR_TIMEOUT_MS = 5 * 1000; // 5s
+
+/**
+ * NotificationItem component props.
+ */
+export interface NotificationItemProps {
+ /**
+ * Notification to display.
+ */
+ value: Notification;
+
+ /**
+ * Close event handler.
+ */
+ onClose: (notificationId: string) => void;
+}
+
+export function NotificationItem({ value, onClose }: NotificationItemProps) {
+ const isSuccess = value.isSuccess();
+ const isError = value.isError();
+
+ const classes = classNames(
+ 'notifications__item',
+ isSuccess && 'notifications__item--success',
+ isError && 'notifications__item--error',
+ );
+
+ const handleClose = () => {
+ onClose(value.id);
+ };
+
+ const handleAction = () => {
+ if (value.action) {
+ value.action.handler();
+ }
+
+ handleClose();
+ };
+
+ useEffect(() => {
+ const timeoutId = setTimeout(handleClose, NOTIFICATION_CLEAR_TIMEOUT_MS);
+
+ return () => {
+ clearTimeout(timeoutId);
+ };
+ }, [handleClose]);
+
+ return (
+ <div className={classes}>
+ <div className="notifications__item-content">
+ <div className="notifications__item-message">
+ {value.message}
+ </div>
+ {value.action && (
+ <button
+ className="notifications__item-action"
+ type="button"
+ onClick={handleAction}
+ >
+ {value.action.action}
+ </button>
+ )}
+ </div>
+ <IconButton name="cross" onClick={handleClose} />
+ </div>
+ );
+}
diff --git a/src/options/components/ui/Notifications/NotificationUi/NotificationUi.tsx b/src/options/components/ui/Notifications/NotificationUi/NotificationUi.tsx
deleted file mode 100644
index 6882c8640..000000000
--- a/src/options/components/ui/Notifications/NotificationUi/NotificationUi.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-
-import cn from 'classnames';
-
-import { rootStore } from '../../../../stores';
-import type { Notification } from '../../../../stores/NotificationsStore/Notification';
-
-const NOTIFICATION_CLEAR_TIMEOUT_MS = 5 * 1000;
-
-interface NotificationProps {
- notification: Notification,
-}
-
-export const NotificationUi = ({ notification }: NotificationProps) => {
- const { notificationsStore } = useContext(rootStore);
-
- useEffect(() => {
- const timeoutId = setTimeout(() => {
- notificationsStore.removeNotification(notification.id);
- }, NOTIFICATION_CLEAR_TIMEOUT_MS);
-
- return () => {
- clearTimeout(timeoutId);
- };
- }, []);
-
- const handleCloseNotification = () => {
- notificationsStore.removeNotification(notification.id);
- };
-
- const isErrorNotification = notification.isError();
-
- const notificationClassnames = cn('notification', {
- danger: isErrorNotification,
- success: notification.isSuccess(),
- });
-
- let actionButton;
- if (notification.action) {
- const { action } = notification;
-
- const handleAction = () => {
- action.handler();
- handleCloseNotification();
- };
-
- actionButton = (
- <div className="notification__action">
- <button
- type="button"
- className="button button--notification notification__message"
- onClick={handleAction}
- >
- {action.action}
- </button>
- </div>
- );
- }
-
- const closeButton = (
- <button
- type="button"
- className="button button--icon"
- onClick={handleCloseNotification}
- >
- <svg className="icon icon--button icon--cross">
- <use xlinkHref="#cross" />
- </svg>
- </button>
- );
-
- const titleIcon = isErrorNotification
- ? (
- <svg className="icon icon--button icon--warning">
- <use xlinkHref="#warning" />
- </svg>
- )
- : null;
-
- return (
- <div className={notificationClassnames}>
- <div className="notification__result">
- <div className="notification__message">
- {titleIcon}
- <div className="notification__message--title">
- {notification.message}
- </div>
- </div>
- {closeButton}
- </div>
- {actionButton}
- </div>
- );
-};
diff --git a/src/options/components/ui/Notifications/NotificationUi/index.ts b/src/options/components/ui/Notifications/NotificationUi/index.ts
deleted file mode 100644
index 4a5aa5f83..000000000
--- a/src/options/components/ui/Notifications/NotificationUi/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { NotificationUi } from './NotificationUi';
diff --git a/src/options/components/ui/Notifications/Notifications.tsx b/src/options/components/ui/Notifications/Notifications.tsx
index 65b676b42..ca9bafafb 100644
--- a/src/options/components/ui/Notifications/Notifications.tsx
+++ b/src/options/components/ui/Notifications/Notifications.tsx
@@ -1,9 +1,9 @@
-import React, { useContext } from 'react';
+import React, { useContext, useRef } from 'react';
import { observer } from 'mobx-react';
import { rootStore } from '../../../stores';
-import { NotificationUi } from './NotificationUi';
+import { NotificationItem } from './NotificationItem';
import './notifications.pcss';
@@ -11,11 +11,23 @@ export const Notifications = observer(() => {
const { notificationsStore } = useContext(rootStore);
const { notifications } = notificationsStore;
+ const ref = useRef<HTMLDivElement>(null);
+
+ const firstThreeNotifications = notifications.slice(0, 3);
+
+ const handleClose = (notificationId: string) => {
+ notificationsStore.removeNotification(notificationId);
+ };
+
return (
- <div className="notifications">
- {notifications.map((notification) => {
- return <NotificationUi key={notification.id} notification={notification} />;
- })}
+ <div ref={ref} className="notifications">
+ {firstThreeNotifications.map((notification) => (
+ <NotificationItem
+ key={notification.id}
+ value={notification}
+ onClose={handleClose}
+ />
+ ))}
</div>
);
});
diff --git a/src/options/components/ui/Notifications/notifications.pcss b/src/options/components/ui/Notifications/notifications.pcss
index ec53fb172..17164ddbd 100644
--- a/src/options/components/ui/Notifications/notifications.pcss
+++ b/src/options/components/ui/Notifications/notifications.pcss
@@ -1,55 +1,57 @@
.notifications {
- position: fixed;
z-index: var(--notifications-z);
+ position: fixed;
display: flex;
- justify-content: center;
- width: 632px;
- left: calc(50% - 190px);
- bottom: 24px;
flex-direction: column;
+ justify-content: center;
align-items: center;
+ row-gap: 16px;
+ bottom: 40px;
+ /* On wide screens we center by content (sidebar is not included) */
+ left: calc(50% + var(--sidebar-width) / 2);
+ transform: translateX(-50%);
+ width: 630px;
+ max-width: 90%;
@media (--tablet) {
- left: 16px;
- right: 16px;
- width: auto;
- }
-}
-
-.notification {
- display: flex;
- flex-direction: column;
- padding: 16px;
- border-radius: 4px;
- width: 100%;
- min-height: 56px;
- background-color: var(--grayF3);
- margin-bottom: 16px;
-
- &:last-child {
- margin-bottom: 0;
+ /* On small screens sidebar is hidden, so we center by screen */
+ left: 50%;
}
- &__result {
- display: inline-flex;
- align-items: center;
+ &__item {
+ display: flex;
+ align-items: flex-start;
justify-content: space-between;
+ column-gap: 8px;
width: 100%;
- }
+ padding: 16px;
+ border-radius: 4px;
+ background: var(--fills-snacks-desktop-snacks-default);
+ box-shadow: var(--small-light-shadow-br);
- &__action {
- margin-top: 16px;
- }
+ &-content {
+ flex: 1 1 auto;
+ }
+
+ &-message {
+ color: var(--text-main-text-main-default);
+ font-size: 16px;
+ line-height: 1.3;
+ }
+
+ &-action {
+ margin-top: 16px;
+ color: var(--text-main-text-main-default);
+ font-size: 16px;
+ line-height: 1.3;
- &__message {
- display: inline-flex;
- font-size: 16px;
- line-height: 21px;
- max-width: 93%;
- color: var(--gray-base);
+ .notifications__item--success & {
+ color: var(--text-links-link-default);
+ }
- &--title {
- line-height: 24px;
+ .notifications__item--error & {
+ color: var(--text-links-error-link-default);
+ }
}
}
}
diff --git a/src/options/components/ui/Popover/Popover.tsx b/src/options/components/ui/Popover/Popover.tsx
deleted file mode 100644
index 094c50226..000000000
--- a/src/options/components/ui/Popover/Popover.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-
-import './popover.pcss';
-
-export const Popover = ({ children }: { children: React.ReactNode }) => (
- <div className="popover-wrap">
- <div className="popover__trigger">
- <svg className="popover__icon">
- <use xlinkHref="#question" />
- </svg>
- </div>
- <div className="popover__body">
- {children}
- </div>
- </div>
-);
diff --git a/src/options/components/ui/Popover/index.ts b/src/options/components/ui/Popover/index.ts
deleted file mode 100644
index 6e5a63648..000000000
--- a/src/options/components/ui/Popover/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Popover } from './Popover';
diff --git a/src/options/components/ui/Popover/popover.pcss b/src/options/components/ui/Popover/popover.pcss
deleted file mode 100644
index 785c15c43..000000000
--- a/src/options/components/ui/Popover/popover.pcss
+++ /dev/null
@@ -1,83 +0,0 @@
-.popover-wrap {
- position: relative;
- display: inline-block;
- vertical-align: middle;
- align-self: flex-start;
-}
-
-.popover__trigger {
- position: relative;
- display: flex;
- margin: 0 8px;
- cursor: pointer;
-}
-
-.popover__trigger:after {
- content: "";
- position: absolute;
- bottom: -10px;
- left: -1px;
- width: 26px;
- height: 28px;
-}
-
-.popover__trigger--address {
- top: 0;
- margin: 0;
- line-height: 1.2;
-}
-
-.popover__trigger--address:after {
- display: none;
-}
-
-.popover__body {
- content: "";
- display: flex;
- flex-direction: column;
- position: absolute;
- top: calc(100% + 15px);
- right: -32px;
- z-index: 1;
- min-width: 295px;
- padding: 15px 15px 20px;
- font-size: 1.3rem;
- line-height: 1.4;
- white-space: normal;
- background-color: var(--white-strong);
- border-radius: 4px;
- transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
- visibility: hidden;
- opacity: 0;
- filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
-}
-
-.popover__body:after {
- content: "";
- position: absolute;
- top: -5px;
- right: 45px;
- width: 0;
- height: 0;
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- border-bottom: 6px solid var(--white-strong);
-}
-
-.popover__trigger:hover + .popover__body,
-.popover__body:hover {
- visibility: visible;
- opacity: 1;
-}
-
-.popover__icon {
- width: 24px;
- height: 24px;
- color: #888;
- opacity: 0.3;
-}
-
-.popover__title {
- margin-bottom: 5px;
- font-size: 1.6rem;
-}
diff --git a/src/options/components/ui/Radio/Radio.tsx b/src/options/components/ui/Radio/Radio.tsx
new file mode 100644
index 000000000..07f17a1d5
--- /dev/null
+++ b/src/options/components/ui/Radio/Radio.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import './radio.pcss';
+
+/**
+ * Radio component props.
+ */
+export interface RadioProps<T extends string> {
+ /**
+ * Radio id.
+ */
+ id?: string;
+
+ /**
+ * Radio name.
+ */
+ name: string;
+
+ /**
+ * Radio value.
+ */
+ value: T;
+
+ /**
+ * Is radio active or not.
+ */
+ isActive: boolean;
+
+ /**
+ * Radio title.
+ */
+ title: React.ReactNode;
+
+ /**
+ * Radio description.
+ */
+ description?: React.ReactNode;
+
+ /**
+ * Radio action. Rendered on the right side of the radio.
+ */
+ action?: React.ReactNode;
+
+ /**
+ * Additional class name.
+ */
+ className?: string;
+
+ /**
+ * Select radio handler.
+ */
+ onSelect: (value: T) => void;
+}
+
+export function Radio<T extends string>({
+ id,
+ name,
+ value,
+ isActive,
+ title,
+ description,
+ action,
+ className,
+ onSelect,
+}: RadioProps<T>) {
+ const classes = classNames(
+ 'radio has-tab-focus',
+ isActive && 'radio--active',
+ className,
+ );
+
+ const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ if (e.target.checked) {
+ onSelect(value);
+ }
+ };
+
+ return (
+ <label
+ htmlFor={id}
+ className={classes}
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+ tabIndex={0}
+ >
+ <input
+ id={id}
+ type="radio"
+ value={value}
+ name={name}
+ checked={isActive}
+ tabIndex={-1}
+ onChange={handleChange}
+ className="radio__input"
+ />
+ <span className="radio__circle-outer">
+ <span className="radio__circle-inner" />
+ </span>
+ <span className="radio__content">
+ <span className="radio__title">
+ {title}
+ </span>
+ {description && (
+ <span className="radio__description">
+ {description}
+ </span>
+ )}
+ </span>
+ {action && (
+ <span className="radio__action">
+ {action}
+ </span>
+ )}
+ </label>
+ );
+}
diff --git a/src/options/components/ui/Radio/index.ts b/src/options/components/ui/Radio/index.ts
new file mode 100644
index 000000000..de3697b1a
--- /dev/null
+++ b/src/options/components/ui/Radio/index.ts
@@ -0,0 +1 @@
+export { Radio } from './Radio';
diff --git a/src/options/components/ui/Radio/radio.pcss b/src/options/components/ui/Radio/radio.pcss
new file mode 100644
index 000000000..7ebb37fe0
--- /dev/null
+++ b/src/options/components/ui/Radio/radio.pcss
@@ -0,0 +1,92 @@
+.radio {
+ width: 100%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-start;
+ padding: 16px;
+ transition: var(--t3) background-color;
+ border-radius: 8px;
+ text-align: left;
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--fills-backgrounds-page-background-hovered);
+ }
+
+ &:active {
+ background-color: var(--fills-backgrounds-page-background-pressed);
+ }
+
+ &__input {
+ appearance: none;
+ margin: 0;
+ }
+
+ &__circle {
+ &-outer {
+ width: 24px;
+ height: 24px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ border: 2px solid var(--stroke-icons-gray-icons-default);
+ padding: 4px;
+ transition: var(--t3) border-color;
+
+ .radio--active & {
+ border-color: var(--stroke-icons-product-icon-default);
+ }
+ }
+
+ &-inner {
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background-color: var(--stroke-icons-gray-icons-default);
+ transition: var(--t3) background-color, var(--t3) transform;
+ transform: scale(0);
+
+ .radio--active & {
+ transform: scale(1);
+ background-color: var(--stroke-icons-product-icon-default);
+ }
+ }
+ }
+
+ &__content {
+ flex: 1 1 auto;
+ display: block;
+ margin-left: 12px;
+ margin-top: 1px;
+ }
+
+ &__title,
+ &__description {
+ display: block;
+ line-height: 1.3;
+ }
+
+ &__title {
+ color: var(--text-main-text-main-default);
+ font-size: 16px;
+ font-weight: 600;
+
+ .radio--thin & {
+ font-weight: 400;
+ }
+ }
+
+ &__description {
+ color: var(--text-description-description-default);
+ font-size: 14px;
+ margin-top: 2px;
+ }
+
+ &__action {
+ flex-shrink: 0;
+ margin-left: 16px;
+ }
+}
diff --git a/src/options/components/ui/ReactPortal.tsx b/src/options/components/ui/ReactPortal.tsx
new file mode 100644
index 000000000..164dbbc0b
--- /dev/null
+++ b/src/options/components/ui/ReactPortal.tsx
@@ -0,0 +1,6 @@
+import { type PropsWithChildren } from 'react';
+import { createPortal } from 'react-dom';
+
+export function ReactPortal({ children }: PropsWithChildren) {
+ return createPortal(children, document.body);
+}
diff --git a/src/options/components/ui/Select/Select.tsx b/src/options/components/ui/Select/Select.tsx
index a9a7d6bcf..fde0dacdf 100644
--- a/src/options/components/ui/Select/Select.tsx
+++ b/src/options/components/ui/Select/Select.tsx
@@ -1,94 +1,183 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useRef, useState } from 'react';
+
+import classNames from 'classnames';
import { useOutsideClick } from '../../../../common/components/ui/useOutsideClick';
import { useOutsideFocus } from '../../../../common/components/ui/useOutsideFocus';
+import { Icon } from '../Icon';
import './select.pcss';
-type SelectProps<T> = {
- currentValue: T,
- options: {
- id: T,
- title: React.ReactNode | string,
- desc?: React.ReactNode | string,
- }[],
- optionChange: (id: T) => void,
-};
-
-export const Select = <T extends string>(props: SelectProps<T>) => {
- const {
- currentValue,
- options,
- optionChange,
- } = props;
-
- const [value, setValue] = useState(currentValue);
- const [hidden, setHidden] = useState(true);
+/**
+ * Select option item.
+ */
+interface SelectOptionItem<T> {
+ /**
+ * Value of the option.
+ */
+ value: T;
+
+ /**
+ * Title of the option.
+ */
+ title: React.ReactNode;
+
+ /**
+ * Should skip rendering of the option.
+ */
+ shouldSkip?: boolean;
+
+ /**
+ * Is the select active or not. Used to control tab index.
+ */
+ isSelectActive?: boolean;
+}
+
+/**
+ * SelectOption component props.
+ */
+interface SelectOptionProps<T> extends SelectOptionItem<T> {
+ /**
+ * Is the option is selected one or not.
+ */
+ isActive?: boolean;
+
+ /**
+ * Click event handler.
+ */
+ onClick: (value: T) => void;
+}
+
+function SelectOption<T extends string>({
+ value,
+ title,
+ isActive,
+ shouldSkip,
+ isSelectActive,
+ onClick,
+}: SelectOptionProps<T>) {
+ const classes = classNames(
+ 'select__item has-tab-focus',
+ isActive && 'select__item--active',
+ );
- const ref = useRef<HTMLDivElement>(null);
+ const handleClick = () => {
+ onClick(value);
+ };
- useOutsideClick(ref, () => setHidden(true));
+ if (shouldSkip) {
+ return null;
+ }
- useOutsideFocus(ref, () => setHidden(true));
+ return (
+ <button
+ className={classes}
+ type="button"
+ onClick={handleClick}
+ tabIndex={!isSelectActive ? -1 : undefined}
+ >
+ {title}
+ <Icon name="tick" className="select__item-icon" />
+ </button>
+ );
+}
+
+/**
+ * Select component props.
+ */
+export interface SelectProps<T> {
+ /**
+ * Current selected value of the select.
+ */
+ value: T;
+
+ /**
+ * Options of the select.
+ */
+ options: SelectOptionItem<T>[];
+
+ /**
+ * Is the select active or not.
+ */
+ isActive?: boolean;
+
+ /**
+ * Change event handler.
+ */
+ onChange: (value: T) => void;
+
+ /**
+ * Is active change event handler.
+ */
+ onIsActiveChange?: (value: boolean | ((oldValue: boolean) => boolean)) => void;
+}
+
+export function Select<T extends string>({
+ value,
+ options,
+ isActive: outsideActive,
+ onChange,
+ onIsActiveChange,
+}: SelectProps<T>) {
+ const activeItem = options.find((option) => option.value === value);
- useEffect(() => {
- setValue(currentValue);
- });
+ const ref = useRef<HTMLDivElement>(null);
- const handleSelectClick = (event: React.MouseEvent): void => {
- event.stopPropagation();
- setHidden(!hidden);
- };
+ const [localActive, setLocalActive] = useState(false);
+ const isActive = outsideActive !== undefined ? outsideActive : localActive;
- const handleOptionClick = (id: T): void => {
- setValue(id);
- optionChange(id);
- setHidden(true);
- };
+ const classes = classNames(
+ 'select',
+ isActive && 'select--active',
+ );
- const isActiveOption = (id: T) => ((id === value) ? ' active' : '');
+ const setActive = (value: boolean | ((oldValue: boolean) => boolean)) => {
+ if (!onIsActiveChange) {
+ setLocalActive(value);
+ }
+ };
- const optionsList: React.RefObject<HTMLDivElement> = useRef(null);
+ const handleClose = () => {
+ setActive(false);
+ };
- useEffect(() => {
- if (optionsList.current) {
- optionsList.current.scrollTop = 0;
- }
- });
+ const handleToggle = () => {
+ setActive((currentActive) => !currentActive);
+ };
- const getTitle = (value: T) => {
- const option = options.find((op) => op.id === value);
- return option?.title;
+ const handleChange = (value: T) => {
+ handleClose();
+ onChange(value);
};
+ useOutsideClick(ref, handleClose);
+ useOutsideFocus(ref, handleClose);
+
return (
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
- <div className="selector" ref={ref}>
+ <div ref={ref} className={classes}>
<button
- className="selector__value"
- onClick={handleSelectClick}
+ className="select__btn has-tab-focus"
type="button"
+ onClick={handleToggle}
>
- <div className="selector__value-title">{getTitle(value)}</div>
+ <span className="select__btn-text text-ellipsis">
+ {activeItem?.title}
+ </span>
+ <Icon name="arrow-down" className="select__btn-icon" />
</button>
- <div
- className="selector__options-list"
- hidden={hidden}
- ref={optionsList}
- >
- {options.map(({ id, title, desc }) => (
- <button
- key={id}
- className={`selector__option-item${isActiveOption(id)}`}
- onClick={() => handleOptionClick(id)}
- type="button"
- >
- <div className="selector__option-item-title">{title}</div>
- {desc && (
- <div className="selector__option-item-desc">{desc}</div>)}
- </button>
+ <div className="select__list">
+ {options.map((option) => (
+ <SelectOption
+ key={option.value}
+ value={option.value}
+ title={option.title}
+ isActive={option.value === value}
+ shouldSkip={option.shouldSkip}
+ isSelectActive={isActive}
+ onClick={handleChange}
+ />
))}
</div>
</div>
);
-};
+}
diff --git a/src/options/components/ui/Select/index.ts b/src/options/components/ui/Select/index.ts
index 205709b20..0b2fb0df7 100644
--- a/src/options/components/ui/Select/index.ts
+++ b/src/options/components/ui/Select/index.ts
@@ -1 +1 @@
-export { Select } from './Select';
+export { Select, type SelectProps } from './Select';
diff --git a/src/options/components/ui/Select/select.pcss b/src/options/components/ui/Select/select.pcss
index 3df41de8c..b96346fae 100644
--- a/src/options/components/ui/Select/select.pcss
+++ b/src/options/components/ui/Select/select.pcss
@@ -1,116 +1,89 @@
-.selector {
- user-select: none;
+.select {
+ position: relative;
- &__value {
- padding: 0 30px 0 10px;
- background-color: var(--white-strong);
- background-image: url('../../../../assets/images/arrow-down.svg');
- background-position: 100% center;
- background-repeat: no-repeat;
- cursor: pointer;
- border: none;
+ .controls & {
+ position: static;
+ }
- &-title {
- color: var(--gray-base);
- font-size: 1.6rem;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- text-align: right;
- }
+ &__btn {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ column-gap: 16px;
+ color: var(--text-main-text-main-default);
+ font-size: 16px;
+ line-height: 1.3;
+ transform: var(--t3) color;
+ text-align: right;
+ overflow: hidden;
+
+ &-icon {
+ transition: var(--t3) transform;
- &-desc {
- color: var(--gray88);
- font-size: 1.3rem;
- line-height: 1.2;
- margin: 3px 20px 0 0;
+ .select--active & {
+ transform: rotate(180deg);
+ }
}
}
- &__options-list {
+ &__list {
+ z-index: var(--select-z);
+ width: 240px;
position: absolute;
- z-index: 10;
+ /* Default space at bottom of container block */
+ top: calc(100% + 16px);
right: 0;
- max-height: 265px;
- min-width: 180px;
- max-width: 512px;
- overflow-y: auto;
- box-shadow: 0 0 7px 3px var(--shadow);
- padding: 0;
- margin: 13px 0 0 0;
- background-color: var(--white-strong);
- scrollbar-width: thin;
-
- &[hidden] {
- display: none;
- }
-
- &::-webkit-scrollbar {
- width: 4px;
- }
+ display: flex;
+ flex-direction: column;
+ border-radius: 8px;
+ box-shadow: var(--big-light-shadow-br);
+ background-color: var(--fills-menus-dropdown-menu-background-default);
+ overflow: hidden;
+ transition: var(--t3) transform, var(--t3) opacity, var(--t3) background-color;
+ transform: translateY(-20%);
+ opacity: 0;
+ pointer-events: none;
- &::-webkit-scrollbar-thumb {
- border-radius: 0px;
- background-color: var(--gray88);
+ .select--active & {
+ transform: translateY(0);
+ opacity: 1;
+ pointer-events: auto;
}
}
- &__option-item {
- width: 100%;
+ &__item {
display: flex;
- padding: 16px 25px;
- cursor: pointer;
- border: none;
- transition: var(--t3) background-color;
- background-color: var(--white);
-
- &:hover,
- &.active {
- background-color: #f3f3f3;
+ align-items: center;
+ justify-content: space-between;
+ column-gap: 16px;
+ padding: 16px 16px 16px 24px;
+ background-color: transparent;
+ color: var(--text-main-text-main-default);
+ outline-offset: -4px;
+ font-size: 16px;
+ line-height: 1.3;
+ transition: var(--t3) background-color, var(--t3) color;
+ text-align: left;
- @media (prefers-color-scheme: dark) {
- background-color: #4d4d4d;
- }
- }
-
- &-title {
- color: var(--text-main);
- font-size: 1.6rem;
- line-height: 1.6rem;
+ &--active {
+ padding: 16px 8px 16px 24px;
}
- &-desc {
- color: var(--gray88);
- font-size: 1.3rem;
- line-height: 1.2;
- margin: 3px 20px 0 0;
+ &:hover,
+ &:focus-visible {
+ background-color: var(--fills-menus-dropdown-menu-background-hovered);
}
- }
- &--gray {
- & .selector__value-title {
- color: var(--gray88);
+ &:active {
+ background-color: var(--fills-menus-dropdown-menu-background-pressed);
}
- }
-}
-.light-mode {
- .selector {
- &__option-item {
- &:hover,
- &.active {
- background-color: #f3f3f3;
- }
- }
- }
-}
+ &-icon {
+ color: var(--stroke-icons-product-icon-default);
+ display: none;
-.dark-mode {
- .selector {
- &__option-item {
- &:hover,
- &.active {
- background-color: #4d4d4d;
+ .select__item--active & {
+ display: inline-block;
}
}
}
diff --git a/src/options/components/ui/Switch/Switch.tsx b/src/options/components/ui/Switch/Switch.tsx
index 1397f8162..978a1ae95 100644
--- a/src/options/components/ui/Switch/Switch.tsx
+++ b/src/options/components/ui/Switch/Switch.tsx
@@ -1,43 +1,44 @@
import React from 'react';
-import classnames from 'classnames';
+import classNames from 'classnames';
import './switch.pcss';
-interface SwitchProps {
- title: string | React.ReactNode;
- desc?: string | React.ReactNode;
- checked: boolean;
- handleToggle: () => void;
+/**
+ * Switch component props.
+ */
+export interface SwitchProps {
+ /**
+ * Is the switch active or not.
+ */
+ isActive: boolean;
+
+ /**
+ * Toggle event handler.
+ */
+ onToggle: () => void;
}
-export const Switch = ({
- title,
- desc,
- checked,
- handleToggle,
-}: SwitchProps) => {
- const togglerClass = classnames('switch__toggler', {
- 'switch__toggler--active': checked,
- });
+export function Switch({ isActive, onToggle }: SwitchProps) {
+ const classes = classNames(
+ 'switch has-tab-focus',
+ isActive && 'switch--active',
+ );
+
+ const handleClick = (e: React.MouseEvent) => {
+ e.preventDefault();
+ onToggle();
+ };
return (
- <div className="switch">
- <div className="switch__info">
- <div className="switch__title">
- {title}
- </div>
- {desc && (
- <div className="switch__desc">
- {desc}
- </div>
- )}
- </div>
- <button
- type="button"
- className={togglerClass}
- onClick={handleToggle}
- />
- </div>
+ <button
+ className={classes}
+ onClick={handleClick}
+ type="button"
+ >
+ <span className="switch__wrapper">
+ <span className="switch__knob" />
+ </span>
+ </button>
);
-};
+}
diff --git a/src/options/components/ui/Switch/index.ts b/src/options/components/ui/Switch/index.ts
index cee89a18b..9e9f77526 100644
--- a/src/options/components/ui/Switch/index.ts
+++ b/src/options/components/ui/Switch/index.ts
@@ -1 +1 @@
-export { Switch } from './Switch';
+export { Switch, type SwitchProps } from './Switch';
diff --git a/src/options/components/ui/Switch/switch.pcss b/src/options/components/ui/Switch/switch.pcss
index 7a3ae5787..6c47b2700 100644
--- a/src/options/components/ui/Switch/switch.pcss
+++ b/src/options/components/ui/Switch/switch.pcss
@@ -1,79 +1,48 @@
.switch {
- position: relative;
- display: flex;
- align-items: center;
- padding-right: 15px;
+ --background: var(--fills-switch-all-off-default);
+ --background-hovered: var(--fills-switch-all-off-hovered);
- &__info {
- width: 100%;
- /* TODO: Hardcoded value (switch width + margin), we should remove after re-design (AG-38059) */
- padding-right: 56px;
- }
+ padding: 2px 0;
- &__title {
- font-size: 1.6rem;
- font-weight: 500;
- color: var(--gray-base);
+ &--active {
+ --background: var(--fills-switch-all-on-default);
+ --background-hovered: var(--fills-switch-all-on-hovered);
}
- &__desc {
- margin: 5px 20px 0 0;
- font-size: 1.4rem;
- line-height: 1.6rem;
- color: var(--gray88);
+ &:hover,
+ &:active,
+ &:focus-visible,
+ .controls:hover &,
+ .controls:active & {
+ .switch__wrapper {
+ background-color: var(--background-hovered);
+ }
}
- &__toggler {
- position: absolute;
- right: 15px;
- display: flex;
+ &__wrapper {
+ position: relative;
+ display: block;
width: 40px;
height: 20px;
- border: none;
+ background-color: var(--background);
border-radius: 10px;
- background-color: var(--gray88);
transition: var(--t3) background-color;
- padding: 0;
- cursor: pointer;
-
- &:before {
- content: "";
- width: 16px;
- height: 16px;
- display: block;
- transform: translate(3px, 2px);
- border-radius: 100%;
- background-color: #fff;
- transition: var(--t3) transform;
- position: relative;
- }
-
- &--active {
- background-color: var(--green700);
-
- &:before {
- transform: translate(21px, 2px);
- }
- }
}
- &__icon {
+ &__knob {
position: absolute;
- flex-shrink: 0;
- top: 3px;
- width: 14px;
- height: 14px;
- color: #fff;
- stroke-width: 2;
-
- &--check {
- left: 5px;
- width: 14px;
- height: 13px;
- }
-
- &--cross {
- right: 4px;
+ top: 2px;
+ left: 2px;
+ display: block;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background-color: var(--fills-switch-all-knob-default);
+ transition: var(--t3) transform;
+ transform: translateX(0);
+
+ .switch--active & {
+ transform: translateX(20px);
}
}
}
diff --git a/src/options/components/ui/Title.tsx b/src/options/components/ui/Title.tsx
deleted file mode 100644
index 3b1bb5f9d..000000000
--- a/src/options/components/ui/Title.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-
-import cn from 'classnames';
-
-interface TitleProps {
- title: React.ReactNode,
- subtitle?: React.ReactNode | string,
- onClick?: () => void;
-}
-
-export const Title = ({ title, subtitle, onClick }: TitleProps) => {
- const renderSubtitle = (subtitle?: React.ReactNode | string) => {
- if (!subtitle) {
- return null;
- }
-
- return (
- <div className="content__subtitle">
- {subtitle}
- </div>
- );
- };
-
- return (
- <div>
- <h2
- className={cn(
- 'content__title',
- { 'content__title--pointer': onClick },
- )}
- onClick={onClick}
- >
- {title}
- </h2>
- {renderSubtitle(subtitle)}
- </div>
- );
-};
diff --git a/src/options/components/ui/Title/Title.tsx b/src/options/components/ui/Title/Title.tsx
new file mode 100644
index 000000000..2b0a1925f
--- /dev/null
+++ b/src/options/components/ui/Title/Title.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { IconButton } from '../Icon';
+
+import './title.pcss';
+
+/**
+ * Title component props.
+ */
+export interface TitleProps {
+ /**
+ * Title text to display.
+ */
+ title: React.ReactNode;
+
+ /**
+ * Subtitle text to display.
+ */
+ subtitle?: React.ReactNode;
+
+ /**
+ * Action to display on the right side of the title.
+ */
+ action?: React.ReactNode;
+
+ /**
+ * Size of the title. Default is `large`.
+ * - 'large' - 24px font size
+ * - 'medium' - 20px font size
+ */
+ size?: 'large' | 'medium';
+
+ /**
+ * Additional class name.
+ */
+ className?: string;
+
+ /**
+ * Click event handler.
+ * If provided, title will be hoverable.
+ */
+ onClick?: () => void;
+}
+
+export function Title({
+ title,
+ subtitle,
+ action,
+ size = 'large',
+ className,
+ onClick,
+}: TitleProps) {
+ const isBackTitle = !!onClick;
+
+ const classes = classNames(
+ 'title',
+ `title--${size}`,
+ isBackTitle && 'title--hoverable',
+ className,
+ );
+
+ return (
+ <div className={classes} onClick={onClick}>
+ <div className="title__text">
+ <div className="title__text-start">
+ {isBackTitle && (
+ <IconButton
+ name="arrow-down"
+ className="title__text-start-icon has-tab-focus"
+ />
+ )}
+ {title}
+ </div>
+ {action && (
+ <div className="title__action">
+ {action}
+ </div>
+ )}
+ </div>
+ {subtitle && (
+ <div className="title__subtitle">
+ {subtitle}
+ </div>
+ )}
+ </div>
+ );
+}
diff --git a/src/options/components/ui/Title/index.ts b/src/options/components/ui/Title/index.ts
new file mode 100644
index 000000000..177576b64
--- /dev/null
+++ b/src/options/components/ui/Title/index.ts
@@ -0,0 +1 @@
+export { Title } from './Title';
diff --git a/src/options/components/ui/Title/title.pcss b/src/options/components/ui/Title/title.pcss
new file mode 100644
index 000000000..eb9f5a896
--- /dev/null
+++ b/src/options/components/ui/Title/title.pcss
@@ -0,0 +1,69 @@
+.title {
+ padding: 16px;
+
+ &--hoverable {
+ cursor: pointer;
+ background-color: transparent;
+ transition: var(--t3) background-color;
+ border-radius: 8px;
+
+ &:hover,
+ &:focus-visible {
+ background-color: var(--fills-backgrounds-page-background-hovered);
+ }
+
+ &:active {
+ background-color: var(--fills-backgrounds-page-background-pressed);
+ }
+ }
+
+ &__text {
+ color: var(--text-main-text-main-default);
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 1.2;
+
+ .title--large & {
+ font-size: 24px;
+ }
+
+ .title--medium & {
+ font-size: 20px;
+ }
+
+ &, &-start {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ column-gap: 16px;
+ }
+
+ &-start {
+ flex: 1 1 auto;
+
+ &-icon {
+ transform: rotate(90deg);
+ }
+ }
+ }
+
+ &__subtitle {
+ color: var(--text-description-description-default);
+ font-size: 16px;
+ line-height: 1.3;
+ margin-top: 12px;
+ padding-right: 24px;
+
+ b {
+ font-weight: 600;
+ }
+
+ .title--hoverable & {
+ padding-left: 28px;
+ }
+ }
+
+ &__action {
+ flex-shrink: 0;
+ }
+}
diff --git a/src/options/components/ui/icon.pcss b/src/options/components/ui/icon.pcss
deleted file mode 100644
index 8f5eac0ed..000000000
--- a/src/options/components/ui/icon.pcss
+++ /dev/null
@@ -1,47 +0,0 @@
-.icon {
- display: inline-block;
- vertical-align: middle;
-
- &--button {
- width: 24px;
- height: 24px;
- flex-shrink: 0;
- }
-
- &--cross,
- &--unchecked {
- color: var(--gray88);
- }
-
- &--check,
- &--checked,
- &--plus {
- color: var(--brand-primary);
- }
-
- &--back {
- position: relative;
- top: 1px;
- margin-right: 3px;
- }
-
- &--flip {
- transform: scaleX(-1);
- }
-
- &--support {
- width: 24px;
- height: 24px;
- color: var(--green700)
- }
-
- &--pencil {
- width: 16px;
- height: 16px;
- margin-left: 3px;
- }
-
- &--warning {
- margin-right: 8px;
- }
-}
diff --git a/src/options/components/ui/radio.pcss b/src/options/components/ui/radio.pcss
deleted file mode 100644
index 2072e0141..000000000
--- a/src/options/components/ui/radio.pcss
+++ /dev/null
@@ -1,44 +0,0 @@
-.radio {
- display: flex;
- align-items: center;
- cursor: pointer;
- margin-bottom: 16px;
- border: none;
- padding: 0;
- background: none;
-
- /* TODO: Delete this hack (needs to to support a11y) */
- &__container {
- width: 24px;
- height: 24px;
- margin: 0;
- padding: 0;
- border: none;
- background: transparent;
- margin: 0 16px 0 0;
-
- .radio__icon {
- margin: 0;
- }
- }
-
- &__icon {
- flex-shrink: 0;
- width: 24px;
- height: 24px;
- margin: 0 16px 0 0;
- color: var(--green700);
- }
-
- &__title {
- font-size: 16px;
- line-height: 19px;
- text-align: left;
- }
-
- &__description {
- font-size: 1.3rem;
- line-height: 1.1;
- color: var(--gray88);
- }
-}
diff --git a/src/options/components/App/useMessageHandler.ts b/src/options/hooks/useMessageHandler.ts
similarity index 90%
rename from src/options/components/App/useMessageHandler.ts
rename to src/options/hooks/useMessageHandler.ts
index 5e5d2c2b4..d0c3b80d0 100644
--- a/src/options/components/App/useMessageHandler.ts
+++ b/src/options/hooks/useMessageHandler.ts
@@ -1,11 +1,11 @@
import { useContext, useEffect, useRef } from 'react';
-import { notifier } from '../../../common/notifier';
-import { messenger } from '../../../common/messenger';
-import { MessageType } from '../../../common/constants';
-import { log } from '../../../common/logger';
-import { rootStore } from '../../stores';
-import { Prefs } from '../../../common/prefs';
+import { notifier } from '../../common/notifier';
+import { messenger } from '../../common/messenger';
+import { MessageType } from '../../common/constants';
+import { log } from '../../common/logger';
+import { Prefs } from '../../common/prefs';
+import { rootStore } from '../stores';
const NOTIFIER_EVENTS = [
notifier.types.AUTHENTICATE_SOCIAL_SUCCESS,
diff --git a/src/options/stores/ExclusionsStore.ts b/src/options/stores/ExclusionsStore.ts
index 58eb1419b..1696e16bb 100644
--- a/src/options/stores/ExclusionsStore.ts
+++ b/src/options/stores/ExclusionsStore.ts
@@ -41,7 +41,7 @@ export enum AddExclusionMode {
Manual = 'Manual',
}
-const DEFAULT_ADD_EXCLUSION_MODE = AddExclusionMode.Manual;
+const DEFAULT_ADD_EXCLUSION_MODE = AddExclusionMode.Service;
const findExclusionById = (
exclusionsTree: ExclusionDtoInterface,
@@ -96,6 +96,8 @@ export class ExclusionsStore {
@observable removeAllModalOpen = false;
+ @observable selectListModalOpen = false;
+
@observable confirmAddModalOpen = false;
@observable urlToConfirm: string | undefined;
@@ -215,7 +217,7 @@ export class ExclusionsStore {
this.setServicesSearchValue('');
this.servicesToToggle = [];
this.unfoldedServiceCategories = [];
- this.setAddExclusionMode(AddExclusionMode.Manual);
+ this.setAddExclusionMode(DEFAULT_ADD_EXCLUSION_MODE);
};
@action setAddExclusionMode = (mode: AddExclusionMode) => {
@@ -238,6 +240,14 @@ export class ExclusionsStore {
this.removeAllModalOpen = false;
};
+ @action openSelectListModal = () => {
+ this.selectListModalOpen = true;
+ };
+
+ @action closeSelectListModal = () => {
+ this.selectListModalOpen = false;
+ };
+
@computed
get preparedServicesData() {
const categories = this.servicesData.reduce((acc: PreparedServiceCategories, serviceData) => {
diff --git a/src/options/stores/SettingsStore.ts b/src/options/stores/SettingsStore.ts
index fdd9695fd..40808aa4a 100644
--- a/src/options/stores/SettingsStore.ts
+++ b/src/options/stores/SettingsStore.ts
@@ -246,15 +246,12 @@ export class SettingsStore {
};
@action editCustomDnsServer = async (
+ dnsServerId: string,
dnsServerName: string,
dnsServerAddress: string,
): Promise<void> => {
- if (!this.dnsServerToEdit) {
- return;
- }
-
const editedDnsServers = await messenger.editCustomDnsServer({
- id: this.dnsServerToEdit.id,
+ id: dnsServerId,
title: dnsServerName,
address: dnsServerAddress,
});
@@ -279,6 +276,11 @@ export class SettingsStore {
};
@action setDnsServerToEdit = (value: DnsServerData | null): void => {
+ if (value) {
+ this.dnsServerName = value.title;
+ this.dnsServerAddress = value.address;
+ }
+
this.dnsServerToEdit = value;
};
diff --git a/src/options/stores/UiStore.ts b/src/options/stores/UiStore.ts
index 5d5eb2e2b..c3730c570 100644
--- a/src/options/stores/UiStore.ts
+++ b/src/options/stores/UiStore.ts
@@ -22,14 +22,25 @@ export class UiStore {
this.isSidebarOpen = false;
};
+ @computed get isAnyModalOpen(): boolean {
+ return (
+ this.rootStore.settingsStore.isCustomDnsModalOpen
+ || this.rootStore.exclusionsStore.modeSelectorModalOpen
+ || this.rootStore.exclusionsStore.removeAllModalOpen
+ || this.rootStore.exclusionsStore.selectListModalOpen
+ || this.rootStore.exclusionsStore.addExclusionModalOpen
+ || this.rootStore.exclusionsStore.confirmAddModalOpen
+ || this.rootStore.exclusionsStore.resetServiceModalOpen
+ || this.rootStore.exclusionsStore.addSubdomainModalOpen
+ );
+ }
+
/**
* This computed state indicates when content is overlapped with modal, sidebar, etc.
* It's used as scroll blocker if any modal, sidebar is open. And also in order to
* trap focus inside of that opened element.
- *
- * TODO: Bring modal states to this computed state (AG-38059).
*/
@computed get isContentLocked(): boolean {
- return this.isSidebarOpen;
+ return this.isSidebarOpen || this.isAnyModalOpen;
}
}
diff --git a/src/options/styles/button.pcss b/src/options/styles/button.pcss
deleted file mode 100644
index de1da2548..000000000
--- a/src/options/styles/button.pcss
+++ /dev/null
@@ -1,215 +0,0 @@
-button,
-.button {
- font-family: var(--font-stack);
-}
-
-.button {
- display: inline-block;
- vertical-align: middle;
- padding: 0;
- font-size: 16px;
- line-height: 24px;
- text-align: center;
- text-decoration: none;
- color: var(--brand-primary);
- background-color: transparent;
- border: 1px solid transparent;
- border-radius: 8px;
- cursor: pointer;
-
- &:focus {
- box-shadow: 0 0 2px 1px var(--shadow);
- }
-
- &:disabled {
- opacity: 0.5;
- cursor: default;
- }
-
- &--medium {
- min-width: 140px;
- padding: 12px 30px;
- }
-
- &--large {
- min-width: 256px;
- padding: 15px;
- font-weight: 600;
- }
-
- &--block {
- display: block;
- width: 100%;
- }
-
- &--primary {
- color: #fff;
- background-color: var(--green700);
- transition: var(--t3) background-color;
-
- &:hover,
- &:focus {
- color: #fff;
- background-color: var(--green900);
- }
-
- &:disabled {
- background-color: var(--graya4);
- }
- }
-
- &--outline-green {
- color: var(--green700);
- border-color: var(--green700);
- transition: var(--t3) background-color;
-
- &:hover,
- &:focus {
- border-color: var(--green900);
- color: var(--green900);
- }
- }
-
- &--outline-gray {
- color: var(--gray-base);
- border-color: var(--gray-base);
- transition: var(--t3) background-color;
-
- &:hover,
- &:focus {
- background-color: var(--grayF3);
-
- @media (prefers-color-scheme: dark) {
- background-color: rgba(243, 243, 243, 0.05);
- }
- }
- }
-
- &--outline-red {
- color: var(--redDark);
- border-color: var(--redDark);
- transition: var(--t3) background-color;
-
- &:hover,
- &:focus {
- background-color: rgba(191, 72, 41, 0.05);
- }
- }
-
- &--outline-secondary {
- border-color: var(--gray88);
- color: var(--gray88);
- transition: var(--t3) background-color;
-
- &:hover,
- &:active,
- &:focus {
- background-color: var(--grayF3);
- }
- }
-
- &--icon {
- font-size: 1.2rem;
- border-radius: 3px;
- border: none;
-
- &:hover {
- background-color: transparent;
- }
-
- &:focus {
- box-shadow: none;
- }
- }
-
- &--link {
- text-decoration: none;
- border: 0;
-
- &:hover,
- &:focus {
- text-decoration: underline;
- background-color: transparent;
- box-shadow: none;
- }
- }
-
- &--back {
- display: inline-flex;
- align-items: center;
- color: var(--gray88);
- margin-bottom: 60px;
- }
-
- &--control {
- font-size: 1.3rem;
- text-transform: uppercase;
- font-weight: bold;
- color: var(--gray88);
- line-height: 18px;
- margin-right: 16px;
- transition: var(--t3) color;
-
- &:hover,
- &:focus {
- color: var(--gray-base);
- background-color: transparent;
- box-shadow: none;
- }
-
- &:last-child {
- margin-right: 0;
- }
- }
-
- &--notification {
- color: var(--green700);
- border: none;
- border-radius: 0;
-
- &:focus {
- box-shadow: none;
- }
- }
-}
-
-.dark-mode {
- .button--outline-gray {
- &:hover,
- &:focus {
- background-color: rgba(243, 243, 243, 0.05);
- }
- }
-}
-
-.light-mode {
- .button--outline-gray {
- &:hover,
- &:focus {
- background-color: var(--grayF3);
- }
- }
-}
-
-.simple-button {
- border: none;
- background: none;
- color: var(--green700);
- transition: var(--t3) color;
- cursor: pointer;
-
- &:hover {
- color: var(--green900);
- }
-}
-
-.back-button {
- cursor: pointer;
- border: 0;
- background: transparent;
- padding: 7px 16px 7px 0;
-
- &:hover {
- filter: brightness(.7);
- }
-}
diff --git a/src/options/styles/common.pcss b/src/options/styles/common.pcss
index 40124d982..b37001d9c 100644
--- a/src/options/styles/common.pcss
+++ b/src/options/styles/common.pcss
@@ -23,61 +23,38 @@ body {
font-family: var(--font-stack);
font-size: 1.6rem;
line-height: 1.4;
- color: var(--gray-base);
- background-color: var(--white-strong);
+ color: var(--text-main-text-main-default);
+ background-color: var(--fills-backgrounds-page-background-default);
+ transition: var(--t3) background-color;
&.locked {
overflow-y: hidden;
}
}
-.hidden {
- display: none;
-}
-
-.logo {
- width: 125px;
- height: 24px;
- background-image: url('../../assets/images/logo-vpn.svg');
- background-repeat: no-repeat;
- background-size: contain;
-
- @media (prefers-color-scheme: dark) {
- background-image: url('../../assets/images/logo-vpn-dark.svg');
- }
-}
-
-.light-mode {
- color-scheme: light;
-
- .logo {
- background-image: url('../../assets/images/logo-vpn.svg');
- }
-}
-
-.dark-mode {
- color-scheme: dark;
+a {
+ color: var(--text-links-link-default);
+ text-decoration-line: underline;
+ outline: 2px solid transparent;
- .logo {
- background-image: url('../../assets/images/logo-vpn-dark.svg');
+ &:focus-visible {
+ outline-color: var(--product-primary-50);
}
}
.body_light,
.body_dark {
- background-color: var(--white-strong);
+ background-color: var(--fills-backgrounds-page-background-default);
+}
+
+.hidden {
+ display: none;
}
.has-tab-focus {
outline: 2px solid transparent;
- outline-offset: -2px;
&:focus-visible {
- outline-color: var(--primary-50);
+ outline-color: var(--product-primary-50);
}
}
-
-.general-settings {
- min-height: 680px;
- margin-left: 16px;
-}
\ No newline at end of file
diff --git a/src/options/styles/form.pcss b/src/options/styles/form.pcss
deleted file mode 100644
index 57dc23109..000000000
--- a/src/options/styles/form.pcss
+++ /dev/null
@@ -1,154 +0,0 @@
-.form {
- &--error {
- & .form__input {
- border: 1px solid var(--red);
- }
- }
-
- &__group {
- position: relative;
- width: 100%;
-
- &--settings {
- display: flex;
- padding: 5px 7px 15px 45px;
- }
- }
-
- &__input {
- width: 100%;
- height: 40px;
- padding: 10px 15px;
- font-family: var(--font-stack);
- font-size: 1.4rem;
- border-radius: 6px;
- border: 1px solid var(--gray88);
- outline: none;
- background-color: var(--white);
- color: var(--gray-base);
-
- :-webkit-autofill:focus,
- &:focus:-webkit-autofill {
- background-color: var(--white);
- }
-
- &::placeholder {
- font-size: 1.4rem;
- color: var(--grayD8);
- }
-
- &:focus,
- &:active {
- border-color: var(--gray-base);
- }
-
- &--transparent {
- width: 100%;
- height: initial;
- padding: 0 0 2px;
- font-size: 1.2rem;
- color: var(--gray-base);
- border: 0;
- border-radius: 0;
- background-color: transparent;
-
- &:focus,
- &:active {
- border-color: transparent;
- }
- }
-
- &:-webkit-autofill,
- &:-webkit-autofill:hover,
- &:-webkit-autofill:focus,
- &:-webkit-autofill:active {
- -webkit-box-shadow: 0 0 0 30px var(--white) inset;
- -webkit-text-fill-color: var(--gray-base)!important;
- }
- }
-
- &__submit {
- &--icon {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 24px;
- height: 24px;
- border: 0;
- border-radius: 0;
- color: var(--brand-primary);
- }
- }
-
- &__label {
- color: var(--gray88);
- font-size: 12px;
- line-height: 16px;
- display: inline-block;
- margin-bottom: 8px;
- }
-
- &__item {
- position: relative;
- margin-bottom: 20px;
-
- &--error {
- & .form__input {
- border: 1px solid var(--red);
- }
- }
- }
-
- &__item-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
-
- &__error {
- width: 100%;
- margin: -10px 0 -26px;
- font-size: 1.2rem;
- text-align: center;
- color: var(--red);
- }
-
- &__text {
- text-align: center;
-
- &--login {
- margin: 35px 0 40px;
- }
-
- &--register {
- margin-top: 35px;
- }
- }
-
- &__link {
- &--login,
- &--register {
- font-size: 1.6rem;
- vertical-align: baseline;
- }
-
- &--recover {
- font-size: 1.2rem;
- color: var(--pink);
- }
- }
-
- &__actions {
- margin-top: 25px;
- display: flex;
- gap: 16px;
-
- @media (--mobile) {
- flex-direction: column-reverse;
-
- .button {
- width: 100%;
- }
- }
- }
-}
diff --git a/src/options/styles/inputs.pcss b/src/options/styles/inputs.pcss
deleted file mode 100644
index e88bb5475..000000000
--- a/src/options/styles/inputs.pcss
+++ /dev/null
@@ -1,120 +0,0 @@
-.input {
- position: relative;
-
- &__label {
- font-size: 14px;
- line-height: 18px;
- color: var(--gray-5b);
- }
-
- &__in {
- border: 0;
- width: 100%;
- font-family: inherit;
- padding: 16px;
- font-size: 1.6rem;
- line-height: 20px;
- border-radius: 8px;
- outline: none;
- color: var(--gray-base);
- background-color: var(--grayF3);
-
- &:focus,
- &:active {
- box-shadow: inset 0 0 0 1px var(--grayD8);
- }
-
- &:disabled {
- opacity: 0.5;
- }
-
- &::placeholder {
- font-size: 1.6rem;
- color: var(--graya4);
- }
-
- &--content {
- margin-top: 8px;
- }
-
- &--clear {
- padding-right: 50px;
- box-shadow: inset 0 0 0 1px var(--grayd2);
- }
-
- &--subdomain {
- padding-right: 160px;
- }
-
- &--close {
- padding-right: 50px;
-
- &:focus,
- &:active {
- + .input__close {
- opacity: 1;
- }
- }
- }
-
- &--textarea {
- resize: none;
- height: 80px;
- overflow-y: auto;
- }
- }
-
- &__close {
- opacity: 0;
- position: absolute;
- top: calc(50% - 8px);
- right: 16px;
-
- &:focus {
- opacity: 1;
- }
- }
-
- &__clear {
- position: absolute;
- right: 10px;
- top: calc(50% - 13px);
- }
-
- &__error {
- display: none;
- line-height: 18px;
- margin-top: 5px;
- font-size: 14px;
- position: absolute;
- top: 100%;
- left: 0;
- color: var(--redDark);
- }
-
- &--error {
- & .input__in {
- box-shadow: inset 0 0 0 1px var(--redDark);
- }
-
- & .input__error {
- display: block;
- }
- }
-}
-
-.light-mode {
- .input {
- &__in {
- background-color: var(--grayF3);
- }
- }
-}
-
-.dark-mode {
- .input {
- &__in {
- background-color: #131313;
- }
- }
-}
diff --git a/src/options/styles/main.pcss b/src/options/styles/main.pcss
index e63358055..d6a7df48f 100644
--- a/src/options/styles/main.pcss
+++ b/src/options/styles/main.pcss
@@ -1,6 +1,3 @@
@import "vars.pcss";
@import "fonts.pcss";
@import "common.pcss";
-@import "form.pcss";
-@import "button.pcss";
-@import "inputs.pcss";
diff --git a/src/options/styles/vars.pcss b/src/options/styles/vars.pcss
index 27a4a0719..063d32870 100644
--- a/src/options/styles/vars.pcss
+++ b/src/options/styles/vars.pcss
@@ -1,48 +1,22 @@
:root {
- --container-width: 960px;
- --content-width: 732px;
- --border-color: #d8d8d8;
- --shadow: rgba(0, 0, 0, 0.1);
- --overlay: rgba(0, 0, 0, 0.5);
- --brand-primary: #79b07e;
- --brand-secondary: #4a8b5a;
- --brand-danger: #f56f23;
- --gray-base: #4d4d4d;
- --text-main: var(--gray-base);
- --green300: rgba(116, 163, 82, 0.05);
- --green700: #74a352;
- --green900: #568040;
- --gray88: #888888;
- --grayF2: #f2f2f2;
- --grayF3: #f3f3f3;
- --grayF6: #f6f6f6;
- --grayF7: #f7f7f7;
- --grayD8: #d8d8d8;
- --grayd2: #d2d2d2;
- --gray97: #979797;
- --graya4: #a4a4a4;
- --red: #df3812;
- --redDark: #bf4829;
- --pink: #ff7b7b;
- --white: #ffffff;
- --white-strong: #fff;
- --white-fog: rgba(255, 255, 255, 0.7);
- --orange: #d58500;
-
/* Common Variables */
--font-stack: "Roboto Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
--t3: 0.3s ease;
/* Shadows */
--small-light-shadow-br: 4px 4px 8px 0px rgba(0, 0, 0, 0.10);
+ --big-light-shadow-br: 8px 8px 24px 0px rgba(0, 0, 0, 0.10);
/* Sizes */
--sidebar-width: 240px;
/* Z-Indices */
- --notifications-z: 3;
- --sidebar-z: 4;
- --modal-z: 5;
+ --select-z: 1;
+ --notifications-z: 2;
+ --sidebar-z: 3;
+ --modal-z: 4;
+ --signed-out-z: 5;
+ --preloader-z: 6;
/* Base Colors */
--gray-0: #FFFFFF;
@@ -56,114 +30,168 @@
--gray-80: #3D3D3D;
--gray-90: #1F1F1F;
--gray-100: #000000;
+ --product-primary-30: #B2CC9E;
+ --product-primary-50: #74A352;
+ --product-primary-60: #68924A;
+ --product-primary-70: #5C8141;
+ --orange-50: #D58500;
+ --red-30: #D9907D;
--red-50: #BF4829;
- --primary-50: #67B279;
+ --red-60: #AF4226;
+ --red-70: #9E3C22;
/* Text */
--text-main-text-main-default: var(--gray-80);
+ --text-main-text-main-disabled: var(--gray-50);
--text-description-description-default: var(--gray-70);
+ --text-buttons-primary-default: var(--gray-0);
+ --text-buttons-secondary-red-default: var(--red-50);
+ --text-buttons-secondary-red-disabled: var(--red-30);
+ --text-links-link-default: var(--product-primary-50);
+ --text-links-link-hovered: var(--product-primary-60);
+ --text-links-link-pressed: var(--product-primary-70);
+ --text-links-link-disabled: var(--product-primary-30);
+ --text-links-error-link-default: var(--red-50);
+ --text-links-error-link-disabled: var(--red-30);
+ --text-links-attention-link-default: var(--orange-50);
+ --text-labels-labels-default: var(--gray-70);
+ --text-placeholder-placeholder-default: var(--gray-50);
/* Fills */
--fills-backgrounds-page-background-default: var(--gray-0);
+ --fills-backgrounds-page-background-hovered: var(--gray-10);
+ --fills-backgrounds-page-background-pressed: var(--gray-20);
--fills-backgrounds-page-background-additional-default: var(--gray-10);
--fills-backgrounds-page-background-additional-hovered: var(--gray-20);
+ --fills-backgrounds-page-background-additional-pressed: var(--gray-30);
--fills-backgrounds-dialog-background-default: var(--gray-100);
+ --fills-menus-dropdown-menu-background-default: var(--gray-0);
+ --fills-menus-dropdown-menu-background-hovered: var(--gray-10);
+ --fills-menus-dropdown-menu-background-pressed: var(--gray-20);
+ --fills-switch-all-on-default: var(--product-primary-50);
+ --fills-switch-all-on-hovered: var(--product-primary-60);
+ --fills-switch-all-off-default: var(--gray-40);
+ --fills-switch-all-off-hovered: var(--gray-50);
+ --fills-switch-all-knob-default: var(--gray-0);
+ --fills-buttons-main-button-default: var(--product-primary-50);
+ --fills-buttons-main-button-hovered: var(--product-primary-60);
+ --fills-buttons-main-button-pressed: var(--product-primary-70);
+ --fills-buttons-main-button-disabled: var(--product-primary-30);
+ --fills-buttons-danger-button-default: var(--red-50);
+ --fills-buttons-danger-button-hovered: var(--red-60);
+ --fills-buttons-danger-button-pressed: var(--red-70);
+ --fills-buttons-danger-button-disabled: var(--red-30);
+ --fills-buttons-secondary-hovered: var(--gray-10);
+ --fills-buttons-secondary-pressed: var(--gray-20);
+ --fills-inputs-input-background-default: var(--gray-10);
+ --fills-snacks-desktop-snacks-default: var(--gray-10);
/* Stroke */
--stroke-dividers-item-divider-default: var(--gray-30);
--stroke-icons-gray-icons-default: var(--gray-60);
+ --stroke-icons-gray-icons-disabled: var(--gray-30);
+ --stroke-icons-product-icon-default: var(--product-primary-50);
+ --stroke-icons-product-icon-disabled: var(--product-primary-30);
+ --stroke-icons-attention-icon-default: var(--orange-50);
--stroke-icons-error-icon-default: var(--red-50);
+ --stroke-buttons-secondary-default: var(--gray-80);
+ --stroke-buttons-secondary-disabled: var(--gray-50);
+ --stroke-buttons-secondary-red-default: var(--red-50);
+ --stroke-buttons-secondary-red-disabled: var(--red-30);
+ --stroke-inputs-inactive-input-stroke-default: var(--gray-30);
+ --stroke-inputs-active-input-stroke-default: var(--gray-50);
+ --stroke-inputs-error-input-default: var(--red-50);
@media (prefers-color-scheme: dark) {
- --white: #131313;
- --white-strong: #000;
- --white-fog: rgba(0, 0, 0, 0.7);
- --gray-base: #d8d8d8;
- --text-main: #e4e4e4;
- --grayF2: #222222;
- --grayF3: #131313;
- --grayF6: #3d3d3d;
- --border-color: #4d4d4d;
- --brand-primary: #74A352;
- --green700: #568040;
- --green900: #3e5c2e;
- --grayD8: #4d4d4d;
- --grayd2: #5b5b5b;
- --overlay: rgba(51, 51, 51, 0.5);
-
/* Text */
--text-main-text-main-default: var(--gray-20);
--text-description-description-default: var(--gray-30);
+ --text-labels-labels-default: var(--gray-30);
/* Fills */
--fills-backgrounds-page-background-default: var(--gray-90);
+ --fills-backgrounds-page-background-hovered: var(--gray-80);
+ --fills-backgrounds-page-background-pressed: var(--gray-70);
--fills-backgrounds-page-background-additional-default: var(--gray-80);
--fills-backgrounds-page-background-additional-hovered: var(--gray-70);
+ --fills-backgrounds-page-background-additional-pressed: var(--gray-60);
+ --fills-menus-dropdown-menu-background-default: var(--gray-80);
+ --fills-menus-dropdown-menu-background-hovered: var(--gray-70);
+ --fills-menus-dropdown-menu-background-pressed: var(--gray-60);
+ --fills-switch-all-off-default: var(--gray-60);
+ --fills-switch-all-off-hovered: var(--gray-70);
+ --fills-buttons-secondary-hovered: var(--gray-80);
+ --fills-buttons-secondary-pressed: var(--gray-70);
+ --fills-inputs-input-background-default: var(--gray-80);
+ --fills-snacks-desktop-snacks-default: var(--gray-90);
/* Stroke */
--stroke-dividers-item-divider-default: var(--gray-70);
--stroke-icons-gray-icons-default: var(--gray-40);
+ --stroke-icons-gray-icons-disabled: var(--gray-70);
+ --stroke-buttons-secondary-default: var(--gray-20);
+ --stroke-inputs-inactive-input-stroke-default: var(--gray-70);
}
}
.dark-mode {
- --white: #131313;
- --white-strong: #000;
- --white-fog: rgba(0, 0, 0, 0.7);
- --gray-base: #d8d8d8;
- --text-main: #e4e4e4;
- --grayF2: #222222;
- --grayF3: #131313;
- --grayF6: #3d3d3d;
- --border-color: #4d4d4d;
- --brand-primary: #74A352;
- --green700: #568040;
- --green900: #3e5c2e;
- --grayD8: #4d4d4d;
- --grayd2: #5b5b5b;
- --overlay: rgba(51, 51, 51, 0.5);
-
/* Text */
--text-main-text-main-default: var(--gray-20);
--text-description-description-default: var(--gray-30);
+ --text-labels-labels-default: var(--gray-30);
/* Fills */
--fills-backgrounds-page-background-default: var(--gray-90);
+ --fills-backgrounds-page-background-hovered: var(--gray-80);
+ --fills-backgrounds-page-background-pressed: var(--gray-70);
--fills-backgrounds-page-background-additional-default: var(--gray-80);
--fills-backgrounds-page-background-additional-hovered: var(--gray-70);
+ --fills-backgrounds-page-background-additional-pressed: var(--gray-60);
+ --fills-menus-dropdown-menu-background-default: var(--gray-80);
+ --fills-menus-dropdown-menu-background-hovered: var(--gray-70);
+ --fills-menus-dropdown-menu-background-pressed: var(--gray-60);
+ --fills-switch-all-off-default: var(--gray-60);
+ --fills-switch-all-off-hovered: var(--gray-70);
+ --fills-buttons-secondary-hovered: var(--gray-80);
+ --fills-buttons-secondary-pressed: var(--gray-70);
+ --fills-inputs-input-background-default: var(--gray-80);
+ --fills-snacks-desktop-snacks-default: var(--gray-90);
/* Stroke */
--stroke-dividers-item-divider-default: var(--gray-70);
--stroke-icons-gray-icons-default: var(--gray-40);
+ --stroke-icons-gray-icons-disabled: var(--gray-70);
+ --stroke-buttons-secondary-default: var(--gray-20);
+ --stroke-inputs-inactive-input-stroke-default: var(--gray-70);
}
.light-mode {
- --white: #ffffff;
- --white-strong: #fff;
- --white-fog: rgba(255, 255, 255, 0.7);
- --gray-base: #4d4d4d;
- --text-main: var(--gray-base);
- --grayF2: #f2f2f2;
- --grayF3: #f3f3f3;
- --grayF6: #f6f6f6;
- --border-color: #d8d8d8;
- --brand-primary: #79b07e;
- --grayD8: #d8d8d8;
- --grayd2: #d2d2d2;
- --overlay: rgba(0, 0, 0, 0.5);
- --green700: #74A352;
- --green900: #568040;
-
/* Text */
--text-main-text-main-default: var(--gray-80);
--text-description-description-default: var(--gray-70);
+ --text-labels-labels-default: var(--gray-70);
/* Fills */
--fills-backgrounds-page-background-default: var(--gray-0);
+ --fills-backgrounds-page-background-hovered: var(--gray-10);
+ --fills-backgrounds-page-background-pressed: var(--gray-20);
--fills-backgrounds-page-background-additional-default: var(--gray-10);
--fills-backgrounds-page-background-additional-hovered: var(--gray-20);
+ --fills-backgrounds-page-background-additional-pressed: var(--gray-30);
+ --fills-menus-dropdown-menu-background-default: var(--gray-0);
+ --fills-menus-dropdown-menu-background-hovered: var(--gray-10);
+ --fills-menus-dropdown-menu-background-pressed: var(--gray-20);
+ --fills-switch-all-off-default: var(--gray-40);
+ --fills-switch-all-off-hovered: var(--gray-50);
+ --fills-buttons-secondary-hovered: var(--gray-10);
+ --fills-buttons-secondary-pressed: var(--gray-20);
+ --fills-inputs-input-background-default: var(--gray-10);
+ --fills-snacks-desktop-snacks-default: var(--gray-10);
/* Stroke */
--stroke-dividers-item-divider-default: var(--gray-30);
--stroke-icons-gray-icons-default: var(--gray-60);
+ --stroke-icons-gray-icons-disabled: var(--gray-30);
+ --stroke-buttons-secondary-default: var(--gray-80);
+ --stroke-inputs-inactive-input-stroke-default: var(--gray-30);
}
diff --git a/src/popup/components/ui/Icons.tsx b/src/popup/components/ui/Icons.tsx
index bf850b109..25d80571b 100644
--- a/src/popup/components/ui/Icons.tsx
+++ b/src/popup/components/ui/Icons.tsx
@@ -126,6 +126,7 @@ export const Icons = () => (
<path d="m21 3h-18v18h18z" />
</symbol>
+ {/* TODO: there is star icon in popup, maybe worth refactoring */}
<svg id="star" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" fill="currentColor" d="M16.1324 24L6.72787 28.9443L8.52398 18.4721L0.915527 11.0557L11.4302 9.52786L16.1324 0L20.8347 9.52786L31.3493 11.0557L23.7409 18.4721L25.537 28.9443L16.1324 24Z" />
</svg>
diff --git a/tasks/appConfig.ts b/tasks/appConfig.ts
index 58e29b32e..965fc446c 100644
--- a/tasks/appConfig.ts
+++ b/tasks/appConfig.ts
@@ -105,6 +105,8 @@ const COMMON_URL_QUERIES = {
UNINSTALL_PAGE: 'action=adguard_uninstal_ext&from=background_page&app=vpn_extension',
// AdGuard DNS Knowledge Base
ADGUARD_DNS_KB: 'action=adguard_dns_kb&from=options_screen&app=vpn_extension',
+ // AdGuard DNS Providers Knowledge Base
+ ADGUARD_DNS_PROVIDERS_KB: 'action=adguard_dns_providers_kb&from=options_screen&app=vpn_extension',
COMPARE_PAGE: 'action=compare&from=popup&app=vpn_extension',
// AG-25941
VPN_BLOCKED_GET_APP: 'action=vpn_blocked_get_app&from=popup&app=vpn_extension',