Merge: client: fix mobile layout for install page

Squashed commit of the following:

commit 5e620f2d8576b08ebfee08e9781cd4927c4dcf2a
Merge: d82d5a902 679bbcdc2
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Jan 18 14:57:00 2021 +0300

    Merge branch 'master' into 2554-mobile-install

commit d82d5a9028be0be72e612fc4c375d2be81c6c8c3
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Jan 18 14:09:25 2021 +0300

    client: fix mobile layout for install page

client2/src/components/Install/Install.module.pcss

@@ -1,14 +0,0 @@
-.layout {
-    background-image: url('../../assets/img/background_min.png');
-    background-repeat: no-repeat;
-    min-height: 100vh;
-    background-color: #f1f3f7;
-}
-.container {
-    display: flex;
-    justify-content: center;
-    padding: 40px;
-}
-.content {
-    max-width: 404px;
-}

client2/src/components/Install/Install.tsx

@@ -13,6 +13,7 @@ import {
 } from 'Consts/install';
 import { notifyError } from 'Common/ui';
 import InstallStore from 'Store/stores/Install';
+import theme from 'Lib/theme';
 
 import AdminInterface from './components/AdminInterface';
 import Auth from './components/Auth';
@@ -21,8 +22,6 @@ import Stepper from './components/Stepper';
 import Welcome from './components/Welcome';
 import ConfigureDevices from './components/ConfigureDevices';
 
-import s from './Install.module.pcss';
-
 const { Content } = Layout;
 
 export type FormValues = IInitialConfigurationBeta & { step: number };
@@ -85,7 +84,7 @@ const InstallForm: FC = observer(() => {
             onSubmit={onNext}
         >
             {({ values, handleSubmit, setFieldValue }) => (
-                <form noValidate className={s.content} onSubmit={handleSubmit}>
+                <form noValidate onSubmit={handleSubmit}>
                     <Stepper currentStep={values.step} />
                     {values.step === 0 && (
                         <Welcome onNext={() => setFieldValue('step', 1)}/>
@@ -110,8 +109,8 @@ const InstallForm: FC = observer(() => {
 
 const Install: FC = () => {
     return (
-        <Layout className={s.layout}>
+        <Layout className={theme.install.layout}>
-            <Content className={s.container}>
+            <Content className={theme.install.container}>
                 <InstallForm />
             </Content>
             <Icons/>

client2/src/components/Install/components/AdminInterface/AdminInterface.module.pcss

@@ -1,17 +0,0 @@
-.manualOptions {
-    margin-bottom: 48px;
-}
-
-.name {
-    padding-bottom: 5px;
-    border-bottom: 1px solid var(--gray300);
-    margin-bottom: 16px;
-    margin-top: 20px;
-}
-
-.manualOption {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    
-}

client2/src/components/Install/components/AdminInterface/AdminInterface.tsx

@@ -9,7 +9,6 @@ import { chechNetworkType, NETWORK_TYPE } from 'Helpers/installHelpers';
 import theme from 'Lib/theme';
 import Store from 'Store/installStore';
 
-import s from './AdminInterface.module.pcss';
 import { FormValues } from '../../Install';
 import StepButtons from '../StepButtons';
 
@@ -39,7 +38,7 @@ const AdminInterface: FC<AdminInterfaceProps> = observer(({
     };
 
     const getManualBlock = () => (
-        <div className={s.manualOptions}>
+        <div className={theme.install.options}>
             {addresses?.interfaces.map((a) => {
                 let name = '';
                 const type = chechNetworkType(a.name);
@@ -56,29 +55,27 @@ const AdminInterface: FC<AdminInterfaceProps> = observer(({
                 }
                 return (
                     <div key={a.name}>
-                        <div>
+                        <div className={theme.install.name}>
-                            <div className={s.name}>
+                            {name}
-                                {name}
-                            </div>
-                            {a.ipAddresses?.map((addrIp) => (
-                                <div key={addrIp} className={s.manualOption}>
-                                    <div className={theme.typography.subtext}>
-                                        http://{addrIp}
-                                    </div>
-                                    <Switch
-                                        checked={values.web.ip.includes(addrIp)}
-                                        onChange={() => {
-                                            const temp = new Set(ip);
-                                            if (temp.has(addrIp)) {
-                                                temp.delete(addrIp);
-                                            } else {
-                                                temp.add(addrIp);
-                                            }
-                                            setFieldValue('web.ip', Array.from(temp.values()));
-                                        }}/>
-                                </div>
-                            ))}
                         </div>
+                        {a.ipAddresses?.map((addrIp) => (
+                            <div key={addrIp} className={theme.install.option}>
+                                <div className={theme.install.address}>
+                                    http://{addrIp}
+                                </div>
+                                <Switch
+                                    checked={values.web.ip.includes(addrIp)}
+                                    onChange={() => {
+                                        const temp = new Set(ip);
+                                        if (temp.has(addrIp)) {
+                                            temp.delete(addrIp);
+                                        } else {
+                                            temp.add(addrIp);
+                                        }
+                                        setFieldValue('web.ip', Array.from(temp.values()));
+                                    }}/>
+                            </div>
+                        ))}
                     </div>
                 );
             })}
@@ -86,17 +83,17 @@ const AdminInterface: FC<AdminInterfaceProps> = observer(({
     );
 
     return (
-        <div className={s.content}>
+        <>
-            <div className={theme.typography.title}>
+            <div className={theme.install.title}>
                 {intl.getMessage('install_admin_interface_title')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_block)}>
+            <div className={cn(theme.install.text, theme.install.text_block)}>
                 {intl.getMessage('install_admin_interface_title_decs')}
             </div>
-            <div className={theme.typography.subTitle}>
+            <div className={theme.install.subtitle}>
                 {intl.getMessage('install_admin_interface_where_interface')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_base)}>
+            <div className={cn(theme.install.text, theme.install.text_base)}>
                 {intl.getMessage('install_admin_interface_where_interface_desc')}
             </div>
             <Radio
@@ -116,10 +113,10 @@ const AdminInterface: FC<AdminInterfaceProps> = observer(({
                 ]}
             />
             { radioValue !== NETWORK_OPTIONS.ALL && getManualBlock()}
-            <div className={theme.typography.subTitle}>
+            <div className={theme.install.subtitle}>
                 {intl.getMessage('install_admin_interface_port')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_base)}>
+            <div className={cn(theme.install.text, theme.install.text_base)}>
                 {intl.getMessage('install_admin_interface_port_desc')}
             </div>
             <Input
@@ -138,7 +135,7 @@ const AdminInterface: FC<AdminInterfaceProps> = observer(({
                 currentStep={1}
                 values={values}
             />
-        </div>
+        </>
     );
 });
 

client2/src/components/Install/components/Auth/Auth.tsx

@@ -22,11 +22,11 @@ const Auth: FC<AuthProps> = observer(({
     const { ui: { intl } } = useContext(Store);
 
     return (
-        <div>
+        <>
-            <div className={theme.typography.title}>
+            <div className={theme.install.title}>
                 {intl.getMessage('install_auth_title')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_block)}>
+            <div className={cn(theme.install.text, theme.install.text_block)}>
                 {intl.getMessage('install_auth_description')}
             </div>
             <Input
@@ -48,7 +48,7 @@ const Auth: FC<AuthProps> = observer(({
                 currentStep={2}
                 values={values}
             />
-        </div>
+        </>
     );
 });
 

client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.module.pcss

@@ -1,4 +0,0 @@
-.tabs {
-    width: 505px;
-    margin-left: -131px;
-}

client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useContext } from 'react';
-import { Tabs } from 'antd';
+import { Tabs, Grid } from 'antd';
 import cn from 'classnames';
 import { FormikHelpers } from 'formik';
 
@@ -10,8 +10,8 @@ import { DEFAULT_DNS_PORT, DEFAULT_IP_ADDRESS, DEFAULT_IP_PORT } from 'Consts/in
 
 import { FormValues } from '../../Install';
 import StepButtons from '../StepButtons';
-import s from './ConfigureDevices.module.pcss';
 
+const { useBreakpoint } = Grid;
 const { TabPane } = Tabs;
 
 interface ConfigureDevicesProps {
@@ -23,10 +23,18 @@ const ConfigureDevices: FC<ConfigureDevicesProps> = ({
     values, setFieldValue,
 }) => {
     const { ui: { intl }, install: { addresses } } = useContext(Store);
+    const screens = useBreakpoint();
+    const tabsPosition = screens.md ? 'left' : 'top';
 
     const dhcp = (e: string) => (
-        // TODO: link to dhcp
+        <a
-        <a href="http://" target="_blank" rel="noopener noreferrer">{e}</a>
+            href="https://github.com/AdguardTeam/AdGuardHome/wiki/DHCP"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={theme.link.link}
+        >
+            {e}
+        </a>
     );
 
     const allIps = addresses?.interfaces.reduce<string[]>((all, data) => {
@@ -44,76 +52,92 @@ const ConfigureDevices: FC<ConfigureDevicesProps> = ({
         ? allIps : dnsIp;
 
     return (
-        <div>
+        <>
-            <div className={theme.typography.title}>
+            <div className={theme.install.title}>
                 {intl.getMessage('install_configure_title')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_block)}>
+            <div className={cn(theme.install.text, theme.install.text_block)}>
                 {intl.getMessage('install_configure_danger_notice', { danger })}
             </div>
-            <div className={theme.typography.subTitle}>
+
-                {intl.getMessage('install_configure_how_to_title')}
+            <Tabs defaultActiveKey="1" tabPosition={tabsPosition} className={theme.install.tabs}>
-            </div>
+                <TabPane tab={intl.getMessage('router')} key="1">
-            <Tabs defaultActiveKey="1" tabPosition="left" className={s.tabs}>
+                    <div className={theme.install.subtitle}>
-                <TabPane tab="Router" key="1">
+                        {intl.getMessage('install_configure_how_to_title', { value: intl.getMessage('router') })}
-                    <div className={cn(theme.typography.text, theme.typography.text_base)}>
+                    </div>
+                    <div className={cn(theme.install.text, theme.install.text_base)}>
                         {intl.getMessage('install_configure_router', { p })}
                     </div>
                 </TabPane>
                 <TabPane tab="Windows" key="2">
-                    <div className={cn(theme.typography.text, theme.typography.text_base)}>
+                    <div className={theme.install.subtitle}>
+                        {intl.getMessage('install_configure_how_to_title', { value: 'Windows' })}
+                    </div>
+                    <div className={cn(theme.install.text, theme.install.text_base)}>
                         {intl.getMessage('install_configure_windows', { p })}
                     </div>
                 </TabPane>
-                <TabPane tab="Macos" key="3">
+                <TabPane tab="macOS" key="3">
-                    <div className={cn(theme.typography.text, theme.typography.text_base)}>
+                    <div className={theme.install.subtitle}>
+                        {intl.getMessage('install_configure_how_to_title', { value: 'macOS' })}
+                    </div>
+                    <div className={cn(theme.install.text, theme.install.text_base)}>
                         {intl.getMessage('install_configure_macos', { p })}
                     </div>
                 </TabPane>
                 <TabPane tab="Linux" key="4">
-                    <div className={cn(theme.typography.text, theme.typography.text_base)}>
+                    <div className={theme.install.subtitle}>
+                        {intl.getMessage('install_configure_how_to_title', { value: 'Linux' })}
+                    </div>
+                    <div className={cn(theme.install.text, theme.install.text_base)}>
                         {/* TODO: add linux setup */}
                         {intl.getMessage('install_configure_router', { p })}
                     </div>
                 </TabPane>
                 <TabPane tab="Android" key="5">
-                    <div className={cn(theme.typography.text, theme.typography.text_base)}>
+                    <div className={theme.install.subtitle}>
+                        {intl.getMessage('install_configure_how_to_title', { value: 'Android' })}
+                    </div>
+                    <div className={cn(theme.install.text, theme.install.text_base)}>
                         {intl.getMessage('install_configure_android', { p })}
                     </div>
                 </TabPane>
-                <TabPane tab="iOs" key="6">
+                <TabPane tab="iOS" key="6">
-                    <div className={cn(theme.typography.text, theme.typography.text_base)}>
+                    <div className={theme.install.subtitle}>
+                        {intl.getMessage('install_configure_how_to_title', { value: 'iOS' })}
+                    </div>
+                    <div className={cn(theme.install.text, theme.install.text_base)}>
                         {intl.getMessage('install_configure_ios', { p })}
                     </div>
                 </TabPane>
             </Tabs>
 
-            <div className={theme.typography.subTitle}>
+            <div className={theme.install.subtitle}>
                 {intl.getMessage('install_configure_adresses')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_base)}>
+            <div className={cn(theme.install.text, theme.install.text_block)}>
-                <p>
+                <div className={cn(theme.install.text, theme.install.text_base)}>
                     {intl.getMessage('install_admin_interface_title')}
-                </p>
+                </div>
-                <p>
+                <div className={cn(theme.install.text, theme.install.text_base)}>
                     {selectedWebIps?.map((ip) => (
-                        <div key={ip}>
+                        <div key={ip} className={theme.install.ip}>
                             {ip}{values.web.port !== DEFAULT_IP_PORT && `:${values.web.port}`}
                         </div>
                     ))}
-                </p>
+                </div>
-                <p>
+                <div className={cn(theme.install.text, theme.install.text_base)}>
                     {intl.getMessage('install_dns_server_title')}
-                </p>
+                </div>
-                <div>
+                <div className={cn(theme.install.text, theme.install.text_base)}>
                     {selectedDnsIps?.map((ip) => (
-                        <div key={ip}>
+                        <div key={ip} className={theme.install.ip}>
                             {ip}{values.dns.port !== DEFAULT_DNS_PORT && `:${values.dns.port}`}
                         </div>
                     ))}
                 </div>
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_base)}>
+            <div className={cn(theme.install.text, theme.install.text_base)}>
                 {intl.getMessage('install_configure_dhcp', { dhcp })}
             </div>
             <StepButtons
@@ -121,7 +145,7 @@ const ConfigureDevices: FC<ConfigureDevicesProps> = ({
                 currentStep={4}
                 values={values}
             />
-        </div>
+        </>
     );
 };
 

client2/src/components/Install/components/DnsServer/DnsServer.module.pcss

@@ -1,12 +0,0 @@
-.manualOptions {
-    margin-bottom: 48px;
-}
-
-.manualOption {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    padding-bottom: 16px;
-    border-bottom: 1px solid var(--gray300);
-    margin-bottom: 16px;
-}

client2/src/components/Install/components/DnsServer/DnsServer.tsx

@@ -9,7 +9,6 @@ import { chechNetworkType, NETWORK_TYPE } from 'Helpers/installHelpers';
 import theme from 'Lib/theme';
 import Store from 'Store/installStore';
 
-import s from './DnsServer.module.pcss';
 import { FormValues } from '../../Install';
 import StepButtons from '../StepButtons';
 
@@ -39,7 +38,7 @@ const DnsServer: FC<DnsServerProps> = observer(({
     };
 
     const getManualBlock = () => (
-        <div className={s.manualOptions}>
+        <div className={theme.install.options}>
             {addresses?.interfaces.map((a) => {
                 let name = '';
                 const type = chechNetworkType(a.name);
@@ -56,29 +55,27 @@ const DnsServer: FC<DnsServerProps> = observer(({
                 }
                 return (
                     <div key={a.name}>
-                        <div>
+                        <div className={theme.install.name}>
-                            <div className={s.name}>
+                            {name}
-                                {name}
-                            </div>
-                            {a.ipAddresses?.map((addrIp) => (
-                                <div key={addrIp} className={s.manualOption}>
-                                    <div className={theme.typography.subtext}>
-                                        {addrIp}
-                                    </div>
-                                    <Switch
-                                        checked={values.dns.ip.includes(addrIp)}
-                                        onChange={() => {
-                                            const temp = new Set(ip);
-                                            if (temp.has(addrIp)) {
-                                                temp.delete(addrIp);
-                                            } else {
-                                                temp.add(addrIp);
-                                            }
-                                            setFieldValue('dns.ip', Array.from(temp.values()));
-                                        }}/>
-                                </div>
-                            ))}
                         </div>
+                        {a.ipAddresses?.map((addrIp) => (
+                            <div key={addrIp} className={theme.install.option}>
+                                <div className={theme.install.address}>
+                                    {addrIp}
+                                </div>
+                                <Switch
+                                    checked={values.dns.ip.includes(addrIp)}
+                                    onChange={() => {
+                                        const temp = new Set(ip);
+                                        if (temp.has(addrIp)) {
+                                            temp.delete(addrIp);
+                                        } else {
+                                            temp.add(addrIp);
+                                        }
+                                        setFieldValue('dns.ip', Array.from(temp.values()));
+                                    }}/>
+                            </div>
+                        ))}
                     </div>
                 );
             })}
@@ -87,16 +84,16 @@ const DnsServer: FC<DnsServerProps> = observer(({
 
     return (
         <div>
-            <div className={theme.typography.title}>
+            <div className={theme.install.title}>
                 {intl.getMessage('install_dns_server_title')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_block)}>
+            <div className={cn(theme.install.text, theme.install.text_block)}>
                 {intl.getMessage('install_dns_server_desc')}
             </div>
-            <div className={theme.typography.subTitle}>
+            <div className={theme.install.subtitle}>
                 {intl.getMessage('install_dns_server_network_interfaces')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_base)}>
+            <div className={cn(theme.install.text, theme.install.text_base)}>
                 {intl.getMessage('install_dns_server_network_interfaces_desc')}
             </div>
             <Radio
@@ -116,10 +113,10 @@ const DnsServer: FC<DnsServerProps> = observer(({
                 ]}
             />
             { radioValue !== NETWORK_OPTIONS.ALL && getManualBlock()}
-            <div className={theme.typography.subTitle}>
+            <div className={theme.install.subtitle}>
                 {intl.getMessage('install_dns_server_port')}
             </div>
-            <div className={cn(theme.typography.text, theme.typography.text_base)}>
+            <div className={cn(theme.install.text, theme.install.text_base)}>
                 {intl.getMessage('install_dns_server_port_desc')}
             </div>
             <Input

client2/src/components/Install/components/StepButtons/StepButtons.module.pcss

@@ -1,8 +0,0 @@
-.button {
-    margin-top: 48px;
-    width: 190px;
-
-    &.inGroup {
-        margin-right: 24px;
-    }
-}

client2/src/components/Install/components/StepButtons/StepButtons.tsx

@@ -1,13 +1,12 @@
 import React, { FC, useContext } from 'react';
 import { Button } from 'antd';
-import cn from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { FormikHelpers } from 'formik';
 
 import Store from 'Store/installStore';
+import theme from 'Lib/theme';
 
 import { FormValues } from '../../Install';
-import s from './StepButtons.module.pcss';
 
 interface StepButtonsProps {
     setFieldValue: FormikHelpers<FormValues>['setFieldValue'];
@@ -21,11 +20,11 @@ const StepButtons: FC<StepButtonsProps> = observer(({
 }) => {
     const { ui: { intl } } = useContext(Store);
     return (
-        <div>
+        <div className={theme.install.actions}>
             <Button
                 size="large"
                 type="ghost"
-                className={cn(s.button, s.inGroup)}
+                className={theme.install.button}
                 onClick={() => setFieldValue('step', currentStep - 1)}
             >
                 {intl.getMessage('back')}
@@ -34,7 +33,7 @@ const StepButtons: FC<StepButtonsProps> = observer(({
                 size="large"
                 type="primary"
                 htmlType="submit"
-                className={cn(s.button)}
+                className={theme.install.button}
             >
                 {intl.getMessage('next')}
             </Button>

client2/src/components/Install/components/Stepper/Stepper.module.pcss

@@ -1,3 +1,66 @@
 .stepper {
-    margin-bottom: 48px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 16px;
+    margin-bottom: 32px;
+
+    @media (--m-viewport) {
+        margin-bottom: 48px;
+    }
+}
+
+.wrap {
+    flex: 1;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 16px;
+
+    &:before {
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: 7px;
+        width: 100%;
+        height: 1px;
+        background-color: var(--gray400);
+    }
+
+    &:first-child {
+        flex: 0;
+
+        &:before {
+            display: none;
+        }
+    }
+
+    &.current .circle {
+        transform: scale(2);
+        background-color: var(--green400);
+        border-color: var(--green400);
+    }
+
+    &.active .circle {
+        background-color: var(--green400);
+        border-color: var(--green400);
+    }
+
+    &.current:before,
+    &.active:before {
+        background-color: var(--green400);
+    }
+}
+
+.circle {
+    position: relative;
+    z-index: 1;
+    width: 8px;
+    height: 8px;
+    background-color: var(--white);
+    border-radius: 50%;
+    border: 1px solid var(--gray400);
+    transition: var(--transition) transform, var(--transition) background, var(--transition) border;
 }

client2/src/components/Install/components/Stepper/Stepper.tsx

@@ -1,23 +1,34 @@
 import React, { FC } from 'react';
-import { Steps } from 'antd';
+import cn from 'classnames';
 
 import s from './Stepper.module.pcss';
 
+interface StepProps {
+    active: boolean;
+    current: boolean;
+}
+
+const Step: FC<StepProps> = ({ active, current }) => {
+    return (
+        <div className={cn(s.wrap, { [s.active]: active, [s.current]: current })}>
+            <div className={s.circle} />
+        </div>
+    );
+};
+
 interface StepperProps {
     currentStep: number;
 }
 
-const { Step } = Steps;
-
 const Stepper: FC<StepperProps> = ({ currentStep }) => {
     return (
-        <Steps progressDot current={currentStep} className={s.stepper}>
+        <div className={s.stepper}>
-            <Step/>
+            <Step current={currentStep === 0} active={currentStep >= 0} />
-            <Step/>
+            <Step current={currentStep === 1} active={currentStep >= 1} />
-            <Step/>
+            <Step current={currentStep === 2} active={currentStep >= 2} />
-            <Step/>
+            <Step current={currentStep === 3} active={currentStep >= 3} />
-            <Step/>
+            <Step current={currentStep === 4} active={currentStep >= 4} />
-        </Steps>
+        </div>
     );
 };
 

client2/src/components/Install/components/Welcome/Welcome.module.pcss

@@ -1,15 +0,0 @@
-.iconContainer{
-    margin-bottom: 48px;
-}
-.icon {
-    width: 185px;
-    height: 57px;
-}
-.button {
-    margin-top: 48px;
-    width: 190px;
-
-    &.inGroup {
-        margin-right: 24px;
-    }
-}

client2/src/components/Install/components/Welcome/Welcome.tsx

@@ -6,8 +6,6 @@ import Store from 'Store/installStore';
 import Icon from 'Common/ui/Icon';
 import theme from 'Lib/theme';
 
-import s from './Welcome.module.pcss';
-
 interface WelcomeProps {
     onNext: () => void;
 }
@@ -15,25 +13,25 @@ interface WelcomeProps {
 const Welcome: FC<WelcomeProps> = observer(({ onNext }) => {
     const { ui: { intl } } = useContext(Store);
     return (
-        <div className={s.content}>
+        <>
-            <div className={s.iconContainer}>
+            <Icon icon="logo" className={theme.install.logo} />
-                <Icon icon="mainLogo" className={s.icon} />
+            <div className={theme.install.title}>
-            </div>
-            <div className={theme.typography.title}>
                 {intl.getMessage('install_wellcome_title')}
             </div>
-            <div className={theme.typography.text}>
+            <div className={theme.install.text}>
                 {intl.getMessage('install_wellcome_desc')}
             </div>
-            <Button
+            <div className={theme.install.actions}>
-                size="large"
+                <Button
-                type="primary"
+                    size="large"
-                className={s.button}
+                    type="primary"
-                onClick={onNext}
+                    className={theme.install.button}
-            >
+                    onClick={onNext}
-                {intl.getMessage('install_wellcome_button')}
+                >
-            </Button>
+                    {intl.getMessage('install_wellcome_button')}
-        </div>
+                </Button>
+            </div>
+        </>
     );
 });
 

client2/src/components/common/controls/Radio/Radio.module.pcss

@@ -14,3 +14,7 @@
         border-bottom: 0;
     }
 }
+
+.desc {
+    color: var(--gray400);
+}

client2/src/components/common/controls/Radio/Radio.tsx

@@ -2,8 +2,6 @@ import React, { FC } from 'react';
 import { Radio } from 'antd';
 import { observer } from 'mobx-react-lite';
 
-import theme from 'Lib/theme';
-
 import s from './Radio.module.pcss';
 
 const { Group } = Radio;
@@ -43,7 +41,7 @@ const RadioComponent: FC<AdminInterfaceProps> = observer(({
                         {o.label}
                     </div>
                     {o.desc && (
-                        <div className={theme.typography.subtext}>
+                        <div className={s.desc}>
                             {o.desc}
                         </div>
                     )}

client2/src/components/common/formating/danger.tsx

@@ -3,7 +3,7 @@ import theme from 'Lib/theme';
 
 const danger = (e: string) => {
     return (
-        <span className={theme.typography.danger}>
+        <span className={theme.text.danger}>
             {e}
         </span>
     );

client2/src/lib/ant/Step.pcss

@@ -1,65 +0,0 @@
-.ant-steps {
-    display: flex;
-    margin-left: -67px;
-    .ant-steps-item-process {
-        .ant-steps-item-icon {
-            top: -4px;
-            box-sizing: content-box;
-            width: 16px;
-            height: 16px;
-            .ant-steps-icon {
-                background: var(--green400);
-                .ant-steps-icon-dot {
-                    background: var(--green400);
-                    border: 0;
-                }
-            }
-        }
-    }
-    .ant-steps-item-content {
-        width: 99px;
-    }
-    .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail,
-    .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-tail,
-    .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-tail {
-        top: 2px;
-        width: 100%;
-        margin: 0px 0px 0px 70px;
-        padding: 0;
-        &::after {
-            width: calc(100% - 8px);
-            height: 2px;
-            margin-left: 5px;
-        }
-    }
-    .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-tail::after,
-    .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-tail::after {
-        background-color: var(--gray400);
-    }
-    .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after {
-        background-color: var(--green400);
-    }
-
-    .ant-steps-item-finish {
-        .ant-steps-item-icon {
-            .ant-steps-icon {
-                background: var(--green400);
-                .ant-steps-icon-dot {
-                    background: var(--green400);
-                    border: 0;
-                }
-            }
-        }
-    }
-    .ant-steps-item-icon {
-        width: 8px;
-        height: 8px; 
-        .ant-steps-icon {
-            background: transparent;
-            .ant-steps-icon-dot {
-                background: transparent;
-                border: 2px solid var(--gray400);
-            }
-        }
-    }
-}

client2/src/lib/ant/ant-overrides.less

@@ -1,8 +1,8 @@
 @primary-color: #67b279;
-@success-color: #53d4b1;
+@success-color: #4d995f;
 @text-color: #000;
-@link-hover-color: #1332BB;
+@link-hover-color: #4d995f;
-@link-active-color: #246FFF;
+@link-active-color: #4d995f;
 
 @font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
 @font-size-base: 14px;

client2/src/lib/ant/index.ts

@@ -1,4 +1,3 @@
-import './Step.pcss';
 import './Radio.pcss';
 
 const insertStyles = true;

client2/src/lib/theme/Icons/index.tsx

@@ -2,43 +2,22 @@ import React, { FC } from 'react';
 import './Icon.pcss';
 
 export type IconType =
-    'mainLogo' |
+    'logo' |
     'visibility_disable' |
     'visibility_enable';
 
 const Icons: FC = () => (
     <svg xmlns="http://www.w3.org/2000/svg" className="icons">
-        <symbol id="mainLogo" width="185px" height="57px" viewBox="0 0 185 57">
+        <symbol id="logo" viewBox="0 0 185 57">
-            <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+            <g fill="none" fillRule="evenodd">
-                <g transform="translate(-521.000000, -104.000000)">
+                <path fill="#242424" fillRule="nonzero" d="M0.5,15.7348066 L7.2386844,0.154696133 L10.4283283,0.154696133 L17.1670127,15.7348066 L13.5505855,15.7348066 L12.1129994,12.2651934 L5.46416417,12.2651934 L4.02657817,15.7348066 L0.5,15.7348066 Z M6.69958965,9.25966851 L10.877574,9.25966851 L8.78858181,4.24309392 L6.69958965,9.25966851 Z M18.9722792,15.7348066 L18.9722792,0.26519337 L25.104482,0.26519337 C27.5603704,0.26519337 29.5669808,0.99815105 31.1243734,2.4640884 C32.681766,3.93002575 33.4604507,5.77531116 33.4604507,8 C33.4604507,10.2099558 32.6780224,12.0515654 31.1131423,13.5248619 C29.5482622,14.9981584 27.5453955,15.7348066 25.104482,15.7348066 L18.9722792,15.7348066 Z M22.4314705,12.6629834 L25.104482,12.6629834 C26.5271003,12.6629834 27.6726695,12.2320485 28.5412111,11.3701657 C29.4097569,10.508283 29.8440234,9.38490564 29.8440234,8 C29.8440234,6.6298274 29.4060133,5.51013326 28.5299799,4.64088398 C27.6539466,3.7716347 26.5121254,3.33701657 25.104482,3.33701657 L22.4314705,3.33701657 L22.4314705,12.6629834 Z M43.4869121,16 C41.0459987,16 39.0581066,15.2486263 37.5231764,13.7458564 C35.9882462,12.2430864 35.2207926,10.3278201 35.2207926,8 C35.2207926,5.77531116 36.0069646,3.88582729 37.5793321,2.33149171 C39.1516997,0.777156133 41.113386,0 43.4644498,0 C44.8271684,0 45.9802206,0.173110608 46.9236412,0.519337017 C47.8670617,0.865563425 48.7730313,1.39962807 49.6415772,2.12154696 L47.4627359,4.70718232 C46.803839,4.16205989 46.1674141,3.76427381 45.553442,3.51381215 C44.9394699,3.2633505 44.2057051,3.13812155 43.3521384,3.13812155 C42.0942444,3.13812155 41.0272967,3.61325492 40.1512633,4.56353591 C39.27523,5.51381691 38.8372199,6.65929348 38.8372199,8 C38.8372199,9.41437171 39.2827173,10.5856307 40.1737256,11.5138122 C41.0647339,12.4419936 42.2065551,12.9060773 43.5992235,12.9060773 C44.8870674,12.9060773 45.9727335,12.5966882 46.8562543,11.9779006 L46.8562543,9.7679558 L43.3746007,9.7679558 L43.3746007,6.82872928 L50.2031342,6.82872928 L50.2031342,13.5469613 C48.2414185,15.1823286 46.0027002,16 43.4869121,16 Z M60.086538,15.9779006 C57.9451232,15.9779006 56.2754376,15.392271 55.0774493,14.2209945 C53.8794549,13.0497179 53.2804668,11.3443943 53.2804668,9.10497238 L53.2804668,0.26519337 L56.7396581,0.26519337 L56.7396581,9.01657459 C56.7396581,10.2541498 57.0354085,11.2007334 57.6269182,11.8563536 C58.2184279,12.5119738 59.0532677,12.839779 60.1314626,12.839779 C61.2096575,12.839779 62.0444972,12.5230234 62.6360069,11.8895028 C63.2275166,11.2559821 63.5232671,10.335181 63.5232671,9.12707182 L63.5232671,0.26519337 L66.9824584,0.26519337 L66.9824584,8.99447514 C66.9824584,11.2928292 66.3722392,13.0313017 65.1517825,14.2099448 C63.9313257,15.3885878 62.2429278,15.9779006 60.086538,15.9779006 Z M67.9199798,15.7348066 L74.6586642,0.154696133 L77.8483082,0.154696133 L84.5869926,15.7348066 L80.9705653,15.7348066 L79.5329793,12.2651934 L72.884144,12.2651934 L71.446558,15.7348066 L67.9199798,15.7348066 Z M74.1195695,9.25966851 L78.2975538,9.25966851 L76.2085617,4.24309392 L74.1195695,9.25966851 Z M86.3922591,15.7348066 L86.3922591,0.26519337 L93.5801891,0.26519337 C95.5718547,0.26519337 97.0992745,0.788208398 98.1624945,1.83425414 C99.0609902,2.71823646 99.5102314,3.9115947 99.5102314,5.41436464 C99.5102314,7.78638387 98.3871285,9.38489459 96.1408892,10.2099448 L99.9819393,15.7348066 L95.9387286,15.7348066 L92.5244619,10.7845304 L89.8514504,10.7845304 L89.8514504,15.7348066 L86.3922591,15.7348066 Z M89.8514504,7.77900552 L93.3555663,7.77900552 C94.1941623,7.77900552 94.8455619,7.57642928 95.3097847,7.17127072 C95.7740075,6.76611215 96.0061155,6.2246811 96.0061155,5.54696133 C96.0061155,4.82504243 95.7665202,4.27624497 95.2873225,3.90055249 C94.8081247,3.52486 94.1417504,3.33701657 93.2881794,3.33701657 L89.8514504,3.33701657 L89.8514504,7.77900552 Z M102.011829,15.7348066 L102.011829,0.26519337 L108.144031,0.26519337 C110.59992,0.26519337 112.60653,0.99815105 114.163923,2.4640884 C115.721315,3.93002575 116.5,5.77531116 116.5,8 C116.5,10.2099558 115.717572,12.0515654 114.152692,13.5248619 C112.587812,14.9981584 110.584945,15.7348066 108.144031,15.7348066 L102.011829,15.7348066 Z M105.47102,12.6629834 L108.144031,12.6629834 C109.56665,12.6629834 110.712219,12.2320485 111.58076,11.3701657 C112.449306,10.508283 112.883573,9.38490564 112.883573,8 C112.883573,6.6298274 112.445563,5.51013326 111.569529,4.64088398 C110.693496,3.7716347 109.551675,3.33701657 108.144031,3.33701657 L105.47102,3.33701657 L105.47102,12.6629834 Z" transform="translate(67.5 14)" />
-                    <g transform="translate(521.000000, 104.000000)">
+                <path fill="#68BC71" d="M28.4993695,0 C19.5913422,0 8.84603419,2.043769 8.73987156e-06,6.54224924 C8.73987156e-06,16.2577508 -0.122097033,40.4620061 28.4993695,57 C57.1214688,40.4620061 56.9999957,16.2577508 56.9999957,6.54224924 C48.1533375,2.043769 37.4080296,0 28.4993695,0 L28.4993695,0 Z" />
-                        <g>
+                <path fill="#67B279" d="M28.4993695,0 L28.4993695,57 C0.736546964,40.9581459 0.0185516086,17.7031064 0.000458427595,7.45516583 L8.73987165e-06,6.54224924 C8.84603419,2.043769 19.5913422,0 28.4993695,0 L28.4993695,0 Z" />
-                            <g transform="translate(67.500000, 14.000000)" fill="#242424" fillRule="nonzero">
+                <path fill="#FFF" d="M28.2485704,36.6428571 L44.7857143,14.7312121 C43.573906,13.7763263 42.510977,14.450265 41.9258467,14.9720239 L41.9044958,14.9736962 L28.1158485,29.075123 L22.9206532,22.9288475 C20.4422167,20.113802 17.0728126,22.2610406 16.2857143,22.8285092 L28.2485704,36.6428571" />
-                                <path d="M0.5,15.7348066 L7.2386844,0.154696133 L10.4283283,0.154696133 L17.1670127,15.7348066 L13.5505855,15.7348066 L12.1129994,12.2651934 L5.46416417,12.2651934 L4.02657817,15.7348066 L0.5,15.7348066 Z M6.69958965,9.25966851 L10.877574,9.25966851 L8.78858181,4.24309392 L6.69958965,9.25966851 Z M18.9722792,15.7348066 L18.9722792,0.26519337 L25.104482,0.26519337 C27.5603704,0.26519337 29.5669808,0.99815105 31.1243734,2.4640884 C32.681766,3.93002575 33.4604507,5.77531116 33.4604507,8 C33.4604507,10.2099558 32.6780224,12.0515654 31.1131423,13.5248619 C29.5482622,14.9981584 27.5453955,15.7348066 25.104482,15.7348066 L18.9722792,15.7348066 Z M22.4314705,12.6629834 L25.104482,12.6629834 C26.5271003,12.6629834 27.6726695,12.2320485 28.5412111,11.3701657 C29.4097569,10.508283 29.8440234,9.38490564 29.8440234,8 C29.8440234,6.6298274 29.4060133,5.51013326 28.5299799,4.64088398 C27.6539466,3.7716347 26.5121254,3.33701657 25.104482,3.33701657 L22.4314705,3.33701657 L22.4314705,12.6629834 Z M43.4869121,16 C41.0459987,16 39.0581066,15.2486263 37.5231764,13.7458564 C35.9882462,12.2430864 35.2207926,10.3278201 35.2207926,8 C35.2207926,5.77531116 36.0069646,3.88582729 37.5793321,2.33149171 C39.1516997,0.777156133 41.113386,0 43.4644498,0 C44.8271684,0 45.9802206,0.173110608 46.9236412,0.519337017 C47.8670617,0.865563425 48.7730313,1.39962807 49.6415772,2.12154696 L47.4627359,4.70718232 C46.803839,4.16205989 46.1674141,3.76427381 45.553442,3.51381215 C44.9394699,3.2633505 44.2057051,3.13812155 43.3521384,3.13812155 C42.0942444,3.13812155 41.0272967,3.61325492 40.1512633,4.56353591 C39.27523,5.51381691 38.8372199,6.65929348 38.8372199,8 C38.8372199,9.41437171 39.2827173,10.5856307 40.1737256,11.5138122 C41.0647339,12.4419936 42.2065551,12.9060773 43.5992235,12.9060773 C44.8870674,12.9060773 45.9727335,12.5966882 46.8562543,11.9779006 L46.8562543,9.7679558 L43.3746007,9.7679558 L43.3746007,6.82872928 L50.2031342,6.82872928 L50.2031342,13.5469613 C48.2414185,15.1823286 46.0027002,16 43.4869121,16 Z M60.086538,15.9779006 C57.9451232,15.9779006 56.2754376,15.392271 55.0774493,14.2209945 C53.8794549,13.0497179 53.2804668,11.3443943 53.2804668,9.10497238 L53.2804668,0.26519337 L56.7396581,0.26519337 L56.7396581,9.01657459 C56.7396581,10.2541498 57.0354085,11.2007334 57.6269182,11.8563536 C58.2184279,12.5119738 59.0532677,12.839779 60.1314626,12.839779 C61.2096575,12.839779 62.0444972,12.5230234 62.6360069,11.8895028 C63.2275166,11.2559821 63.5232671,10.335181 63.5232671,9.12707182 L63.5232671,0.26519337 L66.9824584,0.26519337 L66.9824584,8.99447514 C66.9824584,11.2928292 66.3722392,13.0313017 65.1517825,14.2099448 C63.9313257,15.3885878 62.2429278,15.9779006 60.086538,15.9779006 Z M67.9199798,15.7348066 L74.6586642,0.154696133 L77.8483082,0.154696133 L84.5869926,15.7348066 L80.9705653,15.7348066 L79.5329793,12.2651934 L72.884144,12.2651934 L71.446558,15.7348066 L67.9199798,15.7348066 Z M74.1195695,9.25966851 L78.2975538,9.25966851 L76.2085617,4.24309392 L74.1195695,9.25966851 Z M86.3922591,15.7348066 L86.3922591,0.26519337 L93.5801891,0.26519337 C95.5718547,0.26519337 97.0992745,0.788208398 98.1624945,1.83425414 C99.0609902,2.71823646 99.5102314,3.9115947 99.5102314,5.41436464 C99.5102314,7.78638387 98.3871285,9.38489459 96.1408892,10.2099448 L99.9819393,15.7348066 L95.9387286,15.7348066 L92.5244619,10.7845304 L89.8514504,10.7845304 L89.8514504,15.7348066 L86.3922591,15.7348066 Z M89.8514504,7.77900552 L93.3555663,7.77900552 C94.1941623,7.77900552 94.8455619,7.57642928 95.3097847,7.17127072 C95.7740075,6.76611215 96.0061155,6.2246811 96.0061155,5.54696133 C96.0061155,4.82504243 95.7665202,4.27624497 95.2873225,3.90055249 C94.8081247,3.52486 94.1417504,3.33701657 93.2881794,3.33701657 L89.8514504,3.33701657 L89.8514504,7.77900552 Z M102.011829,15.7348066 L102.011829,0.26519337 L108.144031,0.26519337 C110.59992,0.26519337 112.60653,0.99815105 114.163923,2.4640884 C115.721315,3.93002575 116.5,5.77531116 116.5,8 C116.5,10.2099558 115.717572,12.0515654 114.152692,13.5248619 C112.587812,14.9981584 110.584945,15.7348066 108.144031,15.7348066 L102.011829,15.7348066 Z M105.47102,12.6629834 L108.144031,12.6629834 C109.56665,12.6629834 110.712219,12.2320485 111.58076,11.3701657 C112.449306,10.508283 112.883573,9.38490564 112.883573,8 C112.883573,6.6298274 112.445563,5.51013326 111.569529,4.64088398 C110.693496,3.7716347 109.551675,3.33701657 108.144031,3.33701657 L105.47102,3.33701657 L105.47102,12.6629834 Z"></path>
+                <path fill="#4D4D4D" fillRule="nonzero" d="M70.056,49 L70.056,43.768 L76.072,43.768 L76.072,49 L77.592,49 L77.592,37.576 L76.072,37.576 L76.072,42.488 L70.056,42.488 L70.056,37.576 L68.536,37.576 L68.536,49 L70.056,49 Z M85.92,49.256 C86.8266667,49.256 87.6213333,49.0933333 88.304,48.768 C88.9866667,48.4426667 89.5573333,48.0026667 90.016,47.448 C90.4746667,46.8933333 90.8186667,46.256 91.048,45.536 C91.2773333,44.816 91.392,44.0666667 91.392,43.288 C91.392,42.5093333 91.2773333,41.76 91.048,41.04 C90.8186667,40.32 90.4746667,39.6826667 90.016,39.128 C89.5573333,38.5733333 88.9866667,38.1306667 88.304,37.8 C87.6213333,37.4693333 86.8266667,37.304 85.92,37.304 C85.0133333,37.304 84.2186667,37.4693333 83.536,37.8 C82.8533333,38.1306667 82.2826667,38.5733333 81.824,39.128 C81.3653333,39.6826667 81.0213333,40.32 80.792,41.04 C80.5626667,41.76 80.448,42.5093333 80.448,43.288 C80.448,44.0666667 80.5626667,44.816 80.792,45.536 C81.0213333,46.256 81.3653333,46.8933333 81.824,47.448 C82.2826667,48.0026667 82.8533333,48.4426667 83.536,48.768 C84.2186667,49.0933333 85.0133333,49.256 85.92,49.256 Z M85.92,47.992 C85.2266667,47.992 84.6293333,47.856 84.128,47.584 C83.6266667,47.312 83.216,46.952 82.896,46.504 C82.576,46.056 82.3413333,45.552 82.192,44.992 C82.0426667,44.432 81.968,43.864 81.968,43.288 C81.968,42.712 82.0426667,42.144 82.192,41.584 C82.3413333,41.024 82.576,40.52 82.896,40.072 C83.216,39.624 83.6266667,39.264 84.128,38.992 C84.6293333,38.72 85.2266667,38.584 85.92,38.584 C86.6133333,38.584 87.2106667,38.72 87.712,38.992 C88.2133333,39.264 88.624,39.624 88.944,40.072 C89.264,40.52 89.4986667,41.024 89.648,41.584 C89.7973333,42.144 89.872,42.712 89.872,43.288 C89.872,43.864 89.7973333,44.432 89.648,44.992 C89.4986667,45.552 89.264,46.056 88.944,46.504 C88.624,46.952 88.2133333,47.312 87.712,47.584 C87.2106667,47.856 86.6133333,47.992 85.92,47.992 Z M95.72,49 L95.72,39.496 L95.752,39.496 L99.32,49 L100.616,49 L104.184,39.496 L104.216,39.496 L104.216,49 L105.656,49 L105.656,37.576 L103.576,37.576 L99.96,47.176 L96.36,37.576 L94.28,37.576 L94.28,49 L95.72,49 Z M117.12,49 L117.12,47.72 L110.704,47.72 L110.704,43.768 L116.64,43.768 L116.64,42.488 L110.704,42.488 L110.704,38.856 L117.072,38.856 L117.072,37.576 L109.184,37.576 L109.184,49 L117.12,49 Z" />
-                            </g>
-                            <g>
-                                <g id="small/Logo-3">
-                                    <g id="small/Logo-2">
-                                        <g id="small/Logo">
-                                            <g id="Group-4">
-                                                <g id="Group">
-                                                    <path d="M28.4993695,0 C19.5913422,0 8.84603419,2.043769 8.73987156e-06,6.54224924 C8.73987156e-06,16.2577508 -0.122097033,40.4620061 28.4993695,57 C57.1214688,40.4620061 56.9999957,16.2577508 56.9999957,6.54224924 C48.1533375,2.043769 37.4080296,0 28.4993695,0 L28.4993695,0 Z" id="Path" fill="#68BC71"></path>
-                                                    <path d="M28.4993695,0 L28.4993695,57 C0.736546964,40.9581459 0.0185516086,17.7031064 0.000458427595,7.45516583 L8.73987165e-06,6.54224924 C8.84603419,2.043769 19.5913422,0 28.4993695,0 L28.4993695,0 Z" id="Combined-Shape" fill="#67B279"></path>
-                                                </g>
-                                                <path d="M28.2485704,36.6428571 L44.7857143,14.7312121 C43.573906,13.7763263 42.510977,14.450265 41.9258467,14.9720239 L41.9044958,14.9736962 L28.1158485,29.075123 L22.9206532,22.9288475 C20.4422167,20.113802 17.0728126,22.2610406 16.2857143,22.8285092 L28.2485704,36.6428571" id="Fill-11" fill="#FFFFFF"></path>
-                                            </g>
-                                        </g>
-                                    </g>
-                                </g>
-                            </g>
-                        </g>
-                        <text fontFamily="HelveticaNeue, Helvetica Neue" fontSize="16" fontWeight="normal" letterSpacing="1" fill="#4D4D4D">
-                            <tspan x="67.288" y="49">HOME</tspan>
-                        </text>
-                    </g>
-                </g>
             </g>
         </symbol>
+
         <symbol id="visibility_disable" viewBox="0 0 24 24" fill="currentColor" fillRule="evenodd" clipRule="evenodd">
             <path d="M6.07675 11.0186L5.30088 11.4665C4.88614 11.706 4.35582 11.5639 4.11638 11.1491C3.87693 10.7344 4.01903 10.2041 4.43376 9.96464L5.77791 9.1886C5.82632 9.16065 5.87632 9.1379 5.92724 9.12017C5.94 9.11267 5.95302 9.10545 5.96629 9.09852C6.39087 8.877 6.91464 9.04161 7.13616 9.4662C7.63369 10.4198 9.41088 12.43 12.3523 12.4681C15.2937 12.43 17.0709 10.4198 17.5684 9.4662C17.7899 9.04161 18.3137 8.877 18.7383 9.09852C18.7844 9.1226 18.8275 9.15025 18.8674 9.18096C18.8719 9.18347 18.8764 9.18601 18.8809 9.1886L20.225 9.96464C20.6398 10.2041 20.7818 10.7344 20.5424 11.1491C20.303 11.5639 19.7726 11.706 19.3579 11.4665L18.614 11.037C18.188 11.6053 17.575 12.2431 16.7787 12.7966L17.2222 13.5647C17.4616 13.9794 17.3195 14.5097 16.9048 14.7492C16.4901 14.9886 15.9597 14.8465 15.7203 14.4318L15.2549 13.6258C14.6462 13.8742 13.9706 14.0595 13.2289 14.1469V15.1327C13.2289 15.6116 12.8407 15.9998 12.3618 15.9998C11.8829 15.9998 11.4947 15.6116 11.4947 15.1327V14.1492C10.607 14.0466 9.81358 13.804 9.11589 13.4803L8.56656 14.4318C8.32711 14.8465 7.79679 14.9886 7.38206 14.7492C6.96732 14.5097 6.82523 13.9794 7.06467 13.5647L7.63183 12.5823C6.969 12.0763 6.44978 11.5196 6.07675 11.0186Z" />
         </symbol>
@@ -47,7 +26,6 @@ const Icons: FC = () => (
             <path fillRule="evenodd" clipRule="evenodd" d="M4 11.9999C4.02485 11.6762 4.15136 11.3586 4.37852 11.0961L4.37907 11.0955C4.47595 10.9837 5.34608 9.99479 6.66752 9.0233C7.95858 8.07415 9.87032 7 12.0213 7C14.1723 7 16.084 8.07415 17.3751 9.0233C18.6965 9.99479 19.5666 10.9837 19.6635 11.0955L19.6676 11.1003C19.8904 11.3598 20.0171 11.6759 20.0422 11.9999C20.0171 12.324 19.8904 12.6402 19.6676 12.8997L19.6635 12.9045C19.5666 13.0163 18.6965 14.0052 17.3751 14.9767C16.084 15.9259 14.1723 17 12.0213 17C9.87032 17 7.95858 15.9259 6.66752 14.9767C5.34608 14.0052 4.47595 13.0163 4.37907 12.9045L4.37852 12.9039C4.15136 12.6414 4.02485 12.3237 4 11.9999ZM18.6435 11.9425C18.6588 11.9603 18.6715 11.9796 18.6815 11.9999C18.6715 12.0203 18.6588 12.0397 18.6435 12.0575C18.5147 12.2061 15.455 15.6908 12.0213 15.6908C8.58758 15.6908 5.52785 12.2061 5.39911 12.0575C5.38362 12.0397 5.37086 12.0202 5.36082 11.9999C5.37086 11.9797 5.38362 11.9603 5.39911 11.9425C5.52785 11.7939 8.58758 8.30924 12.0213 8.30924C15.455 8.30924 18.5147 11.7939 18.6435 11.9425Z" />
             <circle cx="12" cy="11" r="3" />
         </symbol>
-
     </svg>
 );
 

client2/src/lib/theme/Install.module.pcss

@@ -0,0 +1,153 @@
+.layout {
+    min-height: 100vh;
+    background-color: var(--gray100);
+
+    @media (--m-viewport) {
+        background-image: url('../../assets/img/install.png');
+        background-position: center 20px;
+        background-repeat: no-repeat;
+        background-size: 100%;
+    }
+}
+
+.container {
+    width: 100%;
+    max-width: 432px;
+    margin: 0 auto;
+    padding: 24px 16px 40px;
+
+    @media (--m-viewport) {
+        padding: 40px 16px;
+    }
+}
+
+.title,
+.subtitle,
+.text {
+    color: var(--gray900);
+}
+
+.title {
+    margin-bottom: 20px;
+    font-size: 28px;
+    line-height: 1.1;
+}
+
+.subtitle {
+    margin-bottom: 12px;
+    font-size: 20px;
+    line-height: 1.4;
+}
+
+.text {
+    font-size: 16px;
+    line-height: 1.5;
+
+    &_block {
+        margin-bottom: 35px;
+    }
+
+    &_base {
+        margin-bottom: 12px;
+    }
+}
+
+.danger {
+    text-transform: capitalize;
+    color: var(--red400);
+    font-weight: bold;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column-reverse;
+    margin-top: 48px;
+
+    @media (--m-viewport) {
+        flex-direction: row;
+    }
+}
+
+.button {
+    width: 100%;
+    min-width: 188px;
+
+    &:last-child {
+        margin-bottom: 16px;
+    }
+
+    &:only-child {
+        margin: 0;
+    }
+
+    @media (--m-viewport) {
+        width: auto;
+
+        &:first-child {
+            margin-right: 12px;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+            margin-left: 12px;
+        }
+
+        &:only-child {
+            margin: 0;
+        }
+    }
+}
+
+.logo {
+    width: 130px;
+    height: 40px;
+    margin-bottom: 35px;
+
+    @media (--m-viewport) {
+        width: 185px;
+        height: 57px;
+    }
+}
+
+.ip {
+    font-family: var(--font-family-monospace);
+    font-size: 16px;
+    font-weight: 600;
+    word-break: break-all;
+    color: var(--green400);
+}
+
+.options {
+    margin-bottom: 48px;
+}
+
+.name {
+    padding-bottom: 5px;
+    border-bottom: 1px solid var(--gray300);
+    margin-bottom: 16px;
+    margin-top: 20px;
+}
+
+.option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.address {
+    margin-right: 16px;
+    word-break: break-all;
+    color: var(--gray400);
+}
+
+.tabs {
+    width: 100%;
+
+    @media (--m-viewport) {
+        width: 505px;
+        margin-left: -131px;
+    }
+}

client2/src/lib/theme/Link.module.pcss

@@ -0,0 +1,14 @@
+.link {
+    color: var(--green400);
+    text-decoration: underline;
+
+    &:hover,
+    &:focus {
+        color: var(--green700);
+        text-decoration: none;
+    }
+
+    &:active {
+        color: var(--green400);
+    }
+}

client2/src/lib/theme/Text.module.pcss

@@ -0,0 +1,29 @@
+.f14 {
+    font-size: 14px;
+}
+
+.f16 {
+    font-size: 16px;
+}
+
+.f20 {
+    font-size: 20px;
+}
+
+.bold {
+    font-weight: 700;
+}
+
+.medium {
+    font-weight: 600;
+}
+
+.regular {
+    font-weight: 400;
+}
+
+.danger {
+    text-transform: uppercase;
+    color: var(--red400);
+    font-weight: bold;
+}

client2/src/lib/theme/Typography.module.pcss

@@ -1,36 +0,0 @@
-.title, .subTitle, .text {
-    color: var(--gray900);
-    letter-spacing: 0px;
-}
-
-.title {
-    font-size: 30px;
-    line-height: 36px;
-    margin-bottom: 16px;
-}
-.subTitle {
-    font-size: 20px;
-    line-height: 24px;
-    margin-bottom: 16px;
-}
-.text {
-    font-size: 16px;
-    line-height: 22px;
-
-    &_block {
-        margin-bottom: 48px;
-    }
-
-    &_base {
-        margin-bottom: 32px;
-    }
-}
-.subtext {
-    color: var(--gray400);
-}
-
-.danger {
-    text-transform: capitalize;
-    color: var(--red400);
-    font-weight: bold;   
-}

client2/src/lib/theme/index.ts

@@ -1,9 +1,13 @@
-import typography from './Typography.module.pcss';
 import form from './Form.module.pcss';
+import text from './Text.module.pcss';
+import install from './Install.module.pcss';
+import link from './Link.module.pcss';
 
 const theme = {
-    typography,
     form,
+    text,
+    install,
+    link,
 };
 
 export default theme;

client2/src/localization/locales/en.json

@@ -6,13 +6,13 @@
     "password": "Password",
     "next": "Next",
     "port": "Port",
-
+    "router": "Router",
 
     "install_admin_interface_port_desc": "Now it is working at 3000 port, just in case, but we recomended to use 80 port. Using this ports allow to access to Web interface like to common site",
     "install_admin_interface_port": "Which port will be used",
     "install_admin_interface_title_decs": "Admin web interface is used to control AdGuard Home. You can open it in your browser and it does not require using a client-side program",
     "install_admin_interface_title": "Admin interface settings",
-    "install_admin_interface_where_interface_desc": "Set what kind of networks will be able to access to Admin interface. For example: if you choose a local   interface only, then Admin inteface will be accessed by this local device only",
+    "install_admin_interface_where_interface_desc": "Set what kind of networks will be able to access to Admin interface. For example: if you choose a local interface only, then Admin inteface will be accessed by this local device only",
     "install_admin_interface_where_interface": "Where can I open Admin interface",
 
     "install_all_networks_description": "All available web interfaces",
@@ -37,7 +37,7 @@
 
     "install_configure_title": "Configure your devices",
     "install_configure_danger_notice": "<danger>IMPORTANT!</danger> To start using AdGuard Home, you need to configure your devices manually",
-    "install_configure_how_to_title": "How to configure Router",
+    "install_configure_how_to_title": "How to configure %value%",
     "install_configure_router": "<p>This setup will automatically cover all the devices connected to your home router and you will not need to configure each of them manually.</p> <p>Open the preferences for your router. Usually, you can access it from your browser via a URL (like http://192.168.0.1/ or http://192.168.1.1/). You may be asked to enter the password. If you don't remember it, you can often reset the password by pressing a button on the router itself. Some routers require a specific application, which in that case should be already installed on your computer/phone.</p><p>Find the DHCP/DNS settings. Look for the DNS letters next to a field which allows two or three sets of numbers, each broken into four groups of one to three digits.</p><p>Enter your AdGuard Home server addresses there.</p>",
     "install_configure_windows": "<p>Open Control Panel through Start menu or Windows search.</p><p>Go to Network and Internet category and then to Network and Sharing Center.</p><p>On the left side of the screen find Change adapter settings and click on it.</p><p>Select your active connection, right-click on it and choose Properties.</p><p>Find Internet Protocol Version 4 (TCP/IP) in the list, select it and then click on Properties again.</p><p>Choose Use the following DNS server addresses and enter your AdGuard Home server addresses.</p>",
     "install_configure_macos": "<p>Click on Apple icon and go to System Preferences.</p><p>Click on Network.</p><p>Select the first connection in your list and click Advanced.</p><p>Select the DNS tab and enter your AdGuard Home server addresses.</p>",

client2/src/main.pcss

@@ -1,33 +1,24 @@
 :root {
-     /*GRAYSCALE*/
      --white: #ffffff;
      --gray100: #f3f3f3;
      --gray300: #d8d8d8;
      --gray400: #a4a4a4;
      --gray700: #888888;
      --gray900: #4d4d4d;
-     --black: #131313;
+     --black: #000000;
-     /*FEEDBACK*/
-     --red400: #c23814;
-     --orange400: #eb9300;
-     /*BRAND*/
      --green400: #67b279;
      --green700: #4d995f;
-     /*ADDITIONAL*/
+     --red400: #c23814;
-     --purple400: #b267a0;
+     --transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-     --purple700: #994d87;
+     --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-     --slateblue400: #677bb2;
+     --font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
-     --slateblue700: #4d6199;
-     /*VPN*/
-     --vpngreen400: #74a352;
-     --vpngreen700: #568040;
-     --vpnslateblue700: #575770;
-     --vpnslateblue800: #464558;
-     --vpnseagreen: #5eb0b7;
-
 }
 
 body {
      font-size: 14px;
      color: var(--gray900);
 }
+
+@custom-media --m-viewport (min-width: 768px);
+@custom-media --l-viewport (min-width: 992px);
+@custom-media --xl-viewport (min-width: 1200px);