review

Author: jellizaveta

client_v2/src/__locales/en.json

@@ -438,9 +438,9 @@
     "setup_dns_privacy_ios_2": "<0>AdGuard for iOS</0> supports <1>DNS-over-HTTPS</1> and <1>DNS-over-TLS</1> setup.",
     "setup_dns_privacy_other_title": "Other implementations",
     "setup_dns_privacy_other_1": "AdGuard Home itself can be a secure DNS client on any platform.",
-    "setup_dns_privacy_other_2": "<0>dnsproxy</0> supports all known secure DNS protocols.",
-    "setup_dns_privacy_other_3": "<0>dnscrypt-proxy</0> supports <1>DNS-over-HTTPS</1>.",
-    "setup_dns_privacy_other_4": "<0>Mozilla Firefox</0> supports <1>DNS-over-HTTPS</1>.",
+    "setup_dns_privacy_other_2": "<a>dnsproxy</a> supports all known secure DNS protocols.",
+    "setup_dns_privacy_other_3": "<a>dnscrypt-proxy</a> supports <strong>DNS-over-HTTPS</strong>.",
+    "setup_dns_privacy_other_4": "<a>Mozilla Firefox</a> supports <strong>DNS-over-HTTPS</strong>.",
     "setup_dns_privacy_other_5": "You will find more implementations <0>here</0> and <1>here</1>.",
     "setup_dns_privacy_ioc_mac": "iOS and macOS configuration",
     "setup_dns_notice": "In order to use <1>DNS-over-HTTPS</1> or <1>DNS-over-TLS</1>, you need to <0>configure Encryption</0> in AdGuard Home settings.",
@@ -974,18 +974,20 @@
     "setup_devices_macos_list_1": "Click Apple menu → <i>System Preferences</i> → <i>Network</i>.",
     "setup_devices_macos_list_2": "Select the required connection and click <i>Advanced</i>.",
     "setup_devices_macos_list_3": "Select the <i>DNS</i> tab and enter the addresses of your AdGuard Home server.",
-    "setup_devices_android_list_1": "Open your device’s <i>Settings</i> app and select <i>Wi-Fi</i>.",
-    "setup_devices_android_list_2": "Long press your current network, then select <i>Modify network</i>.<br>It is not possible to set custom DNS for mobile Internet connections.",
-    "setup_devices_android_list_3": "On some devices, you may need to select the <i>Advanced</i> checkbox to see more settings. To customize your Android DNS settings, you need to change IP settings from <i>DHCP</i> to <i>Static</i>.",
+    "setup_devices_android_list_1": "Open your device's <i>Settings</i> app and select <i>Wi-Fi</i>.",
+    "setup_devices_android_list_2": "Long press your current network, then select <i>Modify network</i>. It is not possible to set custom DNS for mobile Internet connections.",
+    "setup_devices_android_list_3": "On some devices, you may need to select the <i>Advanced checkbox</i> to see more settings. To customize your Android DNS settings, you need to change IP settings from <i>DHCP</i> to <i>Static</i>.",
     "setup_devices_android_list_4": "Change the <i>DNS 1</i> and <i>DNS 2</i> values to the addresses of your AdGuard Home server.",
-    "setup_devices_ios_list_1": "Open your device’s <i>Settings</i> app and select <i>Wi-Fi</i>.<br>It is not possible to set custom DNS for mobile Internet connections.",
+    "setup_devices_ios_list_1": "Open your device's <i>Settings</i> app and select <i>Wi-Fi</i>. It is not possible to set custom DNS for mobile Internet connections.",
     "setup_devices_ios_list_2": "Tap the name of the currently active network.",
     "setup_devices_ios_list_3": "Go to <i>DNS</i> → <i>Configure DNS</i> → <i>Manual</i> and add the addresses of your AdGuard Home server.",
     "setup_devices_ios_list_4": "Tap <i>Save</i>.",
     "setup_devices_router_desc_1": "Set up AdGuard Home on your home network router and protect all devices connected to it. No need to manually configure each device.",
-    "setup_devices_router_list_1": "<strong>Open your router's settings</strong>.<br>You can usually access them from your browser via a URL, such as <0>http://192.168.0.1/</0> or <1>http://192.168.1.1/</1>. You may be asked to enter a password. You can often reset the password by pressing a button on the router itself, but be aware that you could lose your entire router configuration. <br>If your router is to be set up through an app, install the app on your phone or PC and use it to access the router's settings.",
-    "setup_devices_router_list_2": "<strong>In the DHCP/DNS settings, enter the addresses of your AdGuard Home server</strong>.<br>To find the settings, look for DNS next to a field that allows two or three sets of numbers, each divided into four groups of one to three digits.",
-    "setup_devices_router_desc_2": "Some routers do not allow you to set up a custom DNS server. In this case, you can try to set up AdGuard Home as a <0>DHCP server</0>. If this does not work, please refer to your router manual for instructions on how to customize DNS servers for your specific router.",
+    "setup_devices_router_list_1_title": "Open your router's settings.",
+    "setup_devices_router_list_1": "You can usually access them from your browser via a URL, such as <code>http://192.168.0.1</code> or <code2>http://192.168.1.1</code2>. You may be asked to enter a password. You can often reset the password by pressing a button on the router itself, but be aware that you could lose your entire router configuration. If your router is to be set up through an app, install the app on your phone or PC and use it to access the router's settings.",
+    "setup_devices_router_list_2_title": "In the DHCP/DNS settings, enter the addresses of your AdGuard Home server.",
+    "setup_devices_router_list_2": "To find the settings, look for DNS next to a field that allows two or three sets of numbers, each divided into four groups of one to three digits.",
+    "setup_devices_router_desc_2": "Some routers do not allow you to set up a custom DNS server. In this case, you can try to set up AdGuard Home as a <a>DHCP server</a>. If this does not work, please refer to your router manual for instructions on how to customize DNS servers for your specific router.",
     "setup_devices_windows_list_1": "Open <i>Control Panel</i> from the <i>Start menu</i> or <i>Windows Search</i>.",
     "setup_devices_windows_list_2": "Click <i>Network and Internet</i> → <i>Network and Sharing Center</i> → <i>Change adapter settings</i>.",
     "setup_devices_windows_list_3": "Right-click on your active connection and select <i>Properties</i>.",
@@ -997,18 +999,23 @@
     "setup_devices_dns_list_3": "For <strong>DNS-over-QUIC</strong>, use quic://testadguardhome.adtidy.net:853",
     "setup_devices_dns_list_devices": "Here’s a list of software you can use.",
     "setup_devices_dns_android_list_1": "Android 9 natively supports <strong>DNS-over-TLS</strong>. To configure it, go to <i>Settings → Network & Internet → Advanced → Private DNS</i> and enter your domain name.",
-    "setup_devices_dns_android_list_2": "<0>AdGuard for Android</0> supports <strong>DNS-over-HTTPS</strong>, <strong>DNS-over-TLS</strong>, and <strong>DNS-over-QUIC setup</strong>.",
-    "setup_devices_dns_android_list_3": "<0>Intra</0> adds <strong>DNS-over-HTTPS</strong> support to Android.",
-    "setup_devices_dns_ios_list_1": "<0>AdGuard for iOS</0> supports <strong>DNS-over-HTTPS</strong>, <strong>DNS-over-TLS</strong>, and <strong>DNS-over-QUIC</strong> setup.",
-    "setup_devices_dns_ios_list_2": "<0>DNSCloak</0> supports <strong>DNS-over-HTTPS</strong>, but to configure it to use your own server, you'll need to generate a <1>DNS Stamp</1> for it.",
+    "setup_devices_dns_android_list_2": "<a>AdGuard for Android</a> supports <strong>DNS-over-HTTPS</strong>, <strong>DNS-over-TLS</strong>, and <strong>DNS-over-QUIC setup</strong>.",
+    "setup_devices_dns_android_list_3": "<a>Intra</a> adds <strong>DNS-over-HTTPS</strong> support to Android.",
+    "setup_devices_dns_ios_list_1": "<a>AdGuard for iOS</a> supports <strong>DNS-over-HTTPS</strong>, <strong>DNS-over-TLS</strong>, and <strong>DNS-over-QUIC</strong> setup.",
+    "setup_devices_dns_ios_list_2": "<a>DNSCloak</a> supports <strong>DNS-over-HTTPS</strong>, but to configure it to use your own server, you'll need to generate a <b>DNS Stamp</b> for it.",
     "setup_devices_dns_other_list_1": "<0>AdGuard Home</0> itself can be a secure DNS client on any platform.",
     "setup_devices_dns_other_list_2": "<0>dnsproxy</0> supports all known secure DNS protocols.",
     "setup_devices_dns_other_list_3": "<0>dnscrypt-proxy</0> supports <strong>DNS-over-HTTPS</strong>.",
     "setup_devices_dns_other_list_4": "<0>Mozilla Firefox</0> supports <strong>DNS-over-HTTPS</strong>.",
-    "setup_devices_dns_other_list_5": "For more implementations, see <0>DNSCrypt</0> and <1>DNS privacy</1>.",
+    "setup_devices_dns_other_list_5": "For more implementations, see <a>DNSCrypt</a> and <b>DNS privacy</b>.",
     "setup_devices_dns_macos_desc": "On an iOS 14 or macOS Big Sur device, you can download a special mobileconfig file  that adds <strong>DNS-over-HTTPS</strong> or <strong>DNS-over-TLS</strong> servers to the DNS settings.",
     "setup_devices_dns_macos_note": "For a complete iOS and macOS configuration form with all options, please visit the <0>Setup Guide</0> page.",
-    "client_id_faq": "Clients can be identified by their ClientID. To learn more, visit the <0>AdGuard Home GitHub</0>",
+    "client_id_faq": "Clients can be identified by their ClientID. To learn more, visit the <a>AdGuard Home GitHub</a>",
     "device_type": "Device type",
-    "setup_guide_v2": "Setup guide"
+    "setup_guide_v2": "Setup guide",
+    "setup_devices_router_title": "Router",
+    "setup_devices_windows_title": "Windows",
+    "setup_devices_macos_title": "macOS",
+    "setup_devices_android_title": "Android",
+    "setup_devices_ios_title": "iOS"
 }

client_v2/src/common/controls/Select/MenuList.module.pcss

@@ -12,7 +12,7 @@
     }
 
     &::-webkit-scrollbar-thumb {
-        background-color: var(--gray-60);
+        background-color: var(--default-gray-icons);
         border-radius: 10px;
     }
 }
@@ -42,28 +42,10 @@
 
     &:hover,
     &.isFocused {
-        background-color: var(--gray-10);
+        background-color: var(--hovered-dropdown-menu-background);
     }
 
     &.isSelected {
-        background-color: var(--gray-20);
+        background-color: var(--pressed-dropdown-menu-background);
     }
-}
-
-/* Dark theme support */
-[data-theme="dark"] .menuList {
-    &::-webkit-scrollbar-thumb {
-        background-color: var(--gray-50);
-    }
-}
-
-[data-theme="dark"] .customOption {
-    &:hover,
-    &.isFocused {
-        background-color: var(--gray-80);
-    }
-
-    &.isSelected {
-        background-color: var(--gray-70);
-    }
-}
+}

client_v2/src/common/ui/CopiedText/CopiedText.module.pcss

@@ -5,8 +5,8 @@
     align-items: center;
     gap: 8px;
     padding: 4px 8px;
-    background: var(--gray-10);
-    border: 1px solid var(--gray-30);
+    background: var(--default-input-background);
+    border: 1px solid var(--default-inactive-input-stroke);
     border-radius: 4px;
     transition: var(--t2) border-color, var(--t2) background-color;
     width: fit-content;
@@ -19,7 +19,7 @@
 
 .text {
     font-size: 14px;
-    color: var(--gray-80);
+    color: var(--default-main-text);
     cursor: pointer;
     user-select: none;
     word-break: break-all;
@@ -33,7 +33,7 @@
 .icon {
     width: 20px;
     height: 20px;
-    color: var(--gray-60);
+    color: var(--default-gray-icons);
     cursor: pointer;
     transition: var(--t2) color, var(--t2) transform;
     flex-shrink: 0;

client_v2/src/common/ui/CopiedText/CopiedText.tsx

@@ -4,7 +4,7 @@ import { Icon } from '../Icon';
 
 import s from './CopiedText.module.pcss';
 
-export interface CopiedTextProps {
+export type CopiedTextProps = {
     text: string;
     className?: string;
     onCopy?: (text: string) => void;

client_v2/src/common/ui/CopiedText/index.ts

@@ -1,2 +1 @@
-export { CopiedText } from './CopiedText';
-export type { CopiedTextProps } from './CopiedText';
+export { CopiedText, type CopiedTextProps } from './CopiedText';

client_v2/src/common/ui/Guide/Guide.module.pcss

@@ -9,7 +9,7 @@
 }
 
 .dhcpLink {
-    color: var(--product-primary-50);
+    color: var(--default-link);
     font-size: 16px;
     font-weight: 400;
 }
@@ -18,21 +18,21 @@
     text-decoration: underline;
 }
 
-.text {
+.guideText {
     line-height: 1.7;
 }
 
-.text li,
-.text p {
+.guideText li,
+.guideText p {
     margin-bottom: 5px;
 }
 
-.text ul,
-.text ol {
+.guideText ul,
+.guideText ol {
     padding-left: 25px;
 }
 
-.paragraph {
+.guideParagraph {
     margin-bottom: 10px;
 }
 
@@ -62,7 +62,7 @@
 }
 
 .dnsLink {
-    color: var(--product-primary-50);
+    color: var(--default-link);
     font-size: 16px;
     font-weight: 400;
 }
@@ -74,13 +74,39 @@
 .selectorDesc {
     margin-bottom: 4px;
     font-size: 14px;
-    color: var(--gray-60);
-}
-
-[data-theme="dark"] .selectorDesc {
-    color: var(--gray-50);
+    color: var(--default-description-text);
 }
 
 .deviceSelector {
     margin-bottom: 32px;
 }
+
+.deviceDnsListItem {
+    margin-top: 8px;
+}
+
+.guideBulletItem {
+    margin-bottom: 16px;
+    list-style: none;
+    position: relative;
+}
+
+.guideBulletItem::before {
+    content: "";
+    width: 8px;
+    height: 8px;
+    background-color: var(--default-description-text);
+    border-radius: 50%;
+    display: inline-block;
+    position: absolute;
+    left: -16px;
+    top: 8px;
+}
+
+.guideItemTitle {
+    display: block;
+}
+
+.guideList {
+    padding-left: 20px;
+}