diff --git a/client2/src/assets/img/background_min.png b/client2/src/assets/img/background_min.png deleted file mode 100644 index 528fe2d1..00000000 Binary files a/client2/src/assets/img/background_min.png and /dev/null differ diff --git a/client2/src/assets/img/install.png b/client2/src/assets/img/install.png new file mode 100644 index 00000000..68dbd780 Binary files /dev/null and b/client2/src/assets/img/install.png differ diff --git a/client2/src/components/Install/Install.module.pcss b/client2/src/components/Install/Install.module.pcss deleted file mode 100644 index 8beec8bc..00000000 --- a/client2/src/components/Install/Install.module.pcss +++ /dev/null @@ -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; -} diff --git a/client2/src/components/Install/Install.tsx b/client2/src/components/Install/Install.tsx index ce5dda59..701ce626 100644 --- a/client2/src/components/Install/Install.tsx +++ b/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 }) => ( -
+ {values.step === 0 && ( setFieldValue('step', 1)}/> @@ -110,8 +109,8 @@ const InstallForm: FC = observer(() => { const Install: FC = () => { return ( - - + + diff --git a/client2/src/components/Install/components/AdminInterface/AdminInterface.module.pcss b/client2/src/components/Install/components/AdminInterface/AdminInterface.module.pcss deleted file mode 100644 index 815f2470..00000000 --- a/client2/src/components/Install/components/AdminInterface/AdminInterface.module.pcss +++ /dev/null @@ -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; - -} \ No newline at end of file diff --git a/client2/src/components/Install/components/AdminInterface/AdminInterface.tsx b/client2/src/components/Install/components/AdminInterface/AdminInterface.tsx index 711427a9..1a4b3757 100644 --- a/client2/src/components/Install/components/AdminInterface/AdminInterface.tsx +++ b/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 = observer(({ }; const getManualBlock = () => ( -
+
{addresses?.interfaces.map((a) => { let name = ''; const type = chechNetworkType(a.name); @@ -56,29 +55,27 @@ const AdminInterface: FC = observer(({ } return (
-
-
- {name} -
- {a.ipAddresses?.map((addrIp) => ( -
-
- http://{addrIp} -
- { - const temp = new Set(ip); - if (temp.has(addrIp)) { - temp.delete(addrIp); - } else { - temp.add(addrIp); - } - setFieldValue('web.ip', Array.from(temp.values())); - }}/> -
- ))} +
+ {name}
+ {a.ipAddresses?.map((addrIp) => ( +
+
+ http://{addrIp} +
+ { + const temp = new Set(ip); + if (temp.has(addrIp)) { + temp.delete(addrIp); + } else { + temp.add(addrIp); + } + setFieldValue('web.ip', Array.from(temp.values())); + }}/> +
+ ))}
); })} @@ -86,17 +83,17 @@ const AdminInterface: FC = observer(({ ); return ( -
-
+ <> +
{intl.getMessage('install_admin_interface_title')}
-
+
{intl.getMessage('install_admin_interface_title_decs')}
-
+
{intl.getMessage('install_admin_interface_where_interface')}
-
+
{intl.getMessage('install_admin_interface_where_interface_desc')}
= observer(({ ]} /> { radioValue !== NETWORK_OPTIONS.ALL && getManualBlock()} -
+
{intl.getMessage('install_admin_interface_port')}
-
+
{intl.getMessage('install_admin_interface_port_desc')}
= observer(({ currentStep={1} values={values} /> -
+ ); }); diff --git a/client2/src/components/Install/components/Auth/Auth.tsx b/client2/src/components/Install/components/Auth/Auth.tsx index a0f5797f..fe346328 100644 --- a/client2/src/components/Install/components/Auth/Auth.tsx +++ b/client2/src/components/Install/components/Auth/Auth.tsx @@ -22,11 +22,11 @@ const Auth: FC = observer(({ const { ui: { intl } } = useContext(Store); return ( -
-
+ <> +
{intl.getMessage('install_auth_title')}
-
+
{intl.getMessage('install_auth_description')}
= observer(({ currentStep={2} values={values} /> -
+ ); }); diff --git a/client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.module.pcss b/client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.module.pcss deleted file mode 100644 index a3b2e199..00000000 --- a/client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.module.pcss +++ /dev/null @@ -1,4 +0,0 @@ -.tabs { - width: 505px; - margin-left: -131px; -} \ No newline at end of file diff --git a/client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.tsx b/client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.tsx index 57c49cd4..8fbcb933 100644 --- a/client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.tsx +++ b/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 = ({ 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 - {e} + + {e} + ); const allIps = addresses?.interfaces.reduce((all, data) => { @@ -44,76 +52,92 @@ const ConfigureDevices: FC = ({ ? allIps : dnsIp; return ( -
-
+ <> +
{intl.getMessage('install_configure_title')}
-
+
{intl.getMessage('install_configure_danger_notice', { danger })}
-
- {intl.getMessage('install_configure_how_to_title')} -
- - -
+ + + +
+ {intl.getMessage('install_configure_how_to_title', { value: intl.getMessage('router') })} +
+
{intl.getMessage('install_configure_router', { p })}
-
+
+ {intl.getMessage('install_configure_how_to_title', { value: 'Windows' })} +
+
{intl.getMessage('install_configure_windows', { p })}
- -
+ +
+ {intl.getMessage('install_configure_how_to_title', { value: 'macOS' })} +
+
{intl.getMessage('install_configure_macos', { p })}
-
+
+ {intl.getMessage('install_configure_how_to_title', { value: 'Linux' })} +
+
{/* TODO: add linux setup */} {intl.getMessage('install_configure_router', { p })}
-
+
+ {intl.getMessage('install_configure_how_to_title', { value: 'Android' })} +
+
{intl.getMessage('install_configure_android', { p })}
- -
+ +
+ {intl.getMessage('install_configure_how_to_title', { value: 'iOS' })} +
+
{intl.getMessage('install_configure_ios', { p })}
-
+
{intl.getMessage('install_configure_adresses')}
-
-

+

+
{intl.getMessage('install_admin_interface_title')} -

-

+

+
{selectedWebIps?.map((ip) => ( -
+
{ip}{values.web.port !== DEFAULT_IP_PORT && `:${values.web.port}`}
))} -

-

+

+
{intl.getMessage('install_dns_server_title')} -

-
+
+
{selectedDnsIps?.map((ip) => ( -
+
{ip}{values.dns.port !== DEFAULT_DNS_PORT && `:${values.dns.port}`}
))}
-
+
{intl.getMessage('install_configure_dhcp', { dhcp })}
= ({ currentStep={4} values={values} /> -
+ ); }; diff --git a/client2/src/components/Install/components/DnsServer/DnsServer.module.pcss b/client2/src/components/Install/components/DnsServer/DnsServer.module.pcss deleted file mode 100644 index 5a90e4d5..00000000 --- a/client2/src/components/Install/components/DnsServer/DnsServer.module.pcss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/client2/src/components/Install/components/DnsServer/DnsServer.tsx b/client2/src/components/Install/components/DnsServer/DnsServer.tsx index d3e73494..60db1260 100644 --- a/client2/src/components/Install/components/DnsServer/DnsServer.tsx +++ b/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 = observer(({ }; const getManualBlock = () => ( -
+
{addresses?.interfaces.map((a) => { let name = ''; const type = chechNetworkType(a.name); @@ -56,29 +55,27 @@ const DnsServer: FC = observer(({ } return (
-
-
- {name} -
- {a.ipAddresses?.map((addrIp) => ( -
-
- {addrIp} -
- { - const temp = new Set(ip); - if (temp.has(addrIp)) { - temp.delete(addrIp); - } else { - temp.add(addrIp); - } - setFieldValue('dns.ip', Array.from(temp.values())); - }}/> -
- ))} +
+ {name}
+ {a.ipAddresses?.map((addrIp) => ( +
+
+ {addrIp} +
+ { + const temp = new Set(ip); + if (temp.has(addrIp)) { + temp.delete(addrIp); + } else { + temp.add(addrIp); + } + setFieldValue('dns.ip', Array.from(temp.values())); + }}/> +
+ ))}
); })} @@ -87,16 +84,16 @@ const DnsServer: FC = observer(({ return (
-
+
{intl.getMessage('install_dns_server_title')}
-
+
{intl.getMessage('install_dns_server_desc')}
-
+
{intl.getMessage('install_dns_server_network_interfaces')}
-
+
{intl.getMessage('install_dns_server_network_interfaces_desc')}
= observer(({ ]} /> { radioValue !== NETWORK_OPTIONS.ALL && getManualBlock()} -
+
{intl.getMessage('install_dns_server_port')}
-
+
{intl.getMessage('install_dns_server_port_desc')}
['setFieldValue']; @@ -21,11 +20,11 @@ const StepButtons: FC = observer(({ }) => { const { ui: { intl } } = useContext(Store); return ( -
+
diff --git a/client2/src/components/Install/components/Stepper/Stepper.module.pcss b/client2/src/components/Install/components/Stepper/Stepper.module.pcss index c50ba055..3f6f3a0d 100644 --- a/client2/src/components/Install/components/Stepper/Stepper.module.pcss +++ b/client2/src/components/Install/components/Stepper/Stepper.module.pcss @@ -1,3 +1,66 @@ .stepper { - margin-bottom: 48px; -} \ No newline at end of file + 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; +} diff --git a/client2/src/components/Install/components/Stepper/Stepper.tsx b/client2/src/components/Install/components/Stepper/Stepper.tsx index 060aa4e3..29950ca8 100644 --- a/client2/src/components/Install/components/Stepper/Stepper.tsx +++ b/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 = ({ active, current }) => { + return ( +
+
+
+ ); +}; + interface StepperProps { currentStep: number; } -const { Step } = Steps; - const Stepper: FC = ({ currentStep }) => { return ( - - - - - - - +
+ = 0} /> + = 1} /> + = 2} /> + = 3} /> + = 4} /> +
); }; diff --git a/client2/src/components/Install/components/Welcome/Welcome.module.pcss b/client2/src/components/Install/components/Welcome/Welcome.module.pcss deleted file mode 100644 index 37a5824f..00000000 --- a/client2/src/components/Install/components/Welcome/Welcome.module.pcss +++ /dev/null @@ -1,15 +0,0 @@ -.iconContainer{ - margin-bottom: 48px; -} -.icon { - width: 185px; - height: 57px; -} -.button { - margin-top: 48px; - width: 190px; - - &.inGroup { - margin-right: 24px; - } -} \ No newline at end of file diff --git a/client2/src/components/Install/components/Welcome/Welcome.tsx b/client2/src/components/Install/components/Welcome/Welcome.tsx index cd876465..baa81184 100644 --- a/client2/src/components/Install/components/Welcome/Welcome.tsx +++ b/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 = observer(({ onNext }) => { const { ui: { intl } } = useContext(Store); return ( -
-
- -
-
+ <> + +
{intl.getMessage('install_wellcome_title')}
-
+
{intl.getMessage('install_wellcome_desc')}
- -
+
+ +
+ ); }); diff --git a/client2/src/components/common/controls/Radio/Radio.module.pcss b/client2/src/components/common/controls/Radio/Radio.module.pcss index 50c4a8a9..ebbce092 100644 --- a/client2/src/components/common/controls/Radio/Radio.module.pcss +++ b/client2/src/components/common/controls/Radio/Radio.module.pcss @@ -13,4 +13,8 @@ &:last-child { border-bottom: 0; } -} \ No newline at end of file +} + +.desc { + color: var(--gray400); +} diff --git a/client2/src/components/common/controls/Radio/Radio.tsx b/client2/src/components/common/controls/Radio/Radio.tsx index dfb1586b..dc67100a 100644 --- a/client2/src/components/common/controls/Radio/Radio.tsx +++ b/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 = observer(({ {o.label}
{o.desc && ( -
+
{o.desc}
)} diff --git a/client2/src/components/common/formating/danger.tsx b/client2/src/components/common/formating/danger.tsx index 60e9cc7e..a04cce3c 100644 --- a/client2/src/components/common/formating/danger.tsx +++ b/client2/src/components/common/formating/danger.tsx @@ -3,7 +3,7 @@ import theme from 'Lib/theme'; const danger = (e: string) => { return ( - + {e} ); diff --git a/client2/src/lib/ant/Step.pcss b/client2/src/lib/ant/Step.pcss deleted file mode 100644 index 9f6e2044..00000000 --- a/client2/src/lib/ant/Step.pcss +++ /dev/null @@ -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); - } - } - } -} \ No newline at end of file diff --git a/client2/src/lib/ant/ant-overrides.less b/client2/src/lib/ant/ant-overrides.less index a07601d9..1f683335 100644 --- a/client2/src/lib/ant/ant-overrides.less +++ b/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-active-color: #246FFF; +@link-hover-color: #4d995f; +@link-active-color: #4d995f; @font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; -@font-size-base: 14px; \ No newline at end of file +@font-size-base: 14px; diff --git a/client2/src/lib/ant/index.ts b/client2/src/lib/ant/index.ts index 9c8a364d..7eba91c1 100644 --- a/client2/src/lib/ant/index.ts +++ b/client2/src/lib/ant/index.ts @@ -1,4 +1,3 @@ -import './Step.pcss'; import './Radio.pcss'; const insertStyles = true; diff --git a/client2/src/lib/theme/Icons/index.tsx b/client2/src/lib/theme/Icons/index.tsx index 23f0a95d..a94c2c5c 100644 --- a/client2/src/lib/theme/Icons/index.tsx +++ b/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 = () => ( - - ); diff --git a/client2/src/lib/theme/Install.module.pcss b/client2/src/lib/theme/Install.module.pcss new file mode 100644 index 00000000..5e000bbb --- /dev/null +++ b/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; + } +} diff --git a/client2/src/lib/theme/Link.module.pcss b/client2/src/lib/theme/Link.module.pcss new file mode 100644 index 00000000..d3731b42 --- /dev/null +++ b/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); + } +} diff --git a/client2/src/lib/theme/Text.module.pcss b/client2/src/lib/theme/Text.module.pcss new file mode 100644 index 00000000..5ff8bf11 --- /dev/null +++ b/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; +} diff --git a/client2/src/lib/theme/Typography.module.pcss b/client2/src/lib/theme/Typography.module.pcss deleted file mode 100644 index b51e0e56..00000000 --- a/client2/src/lib/theme/Typography.module.pcss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/client2/src/lib/theme/index.ts b/client2/src/lib/theme/index.ts index 43df8b68..d60feaca 100644 --- a/client2/src/lib/theme/index.ts +++ b/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; diff --git a/client2/src/localization/locales/en.json b/client2/src/localization/locales/en.json index 99ae88d4..f6801463 100644 --- a/client2/src/localization/locales/en.json +++ b/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": "IMPORTANT! 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": "

This setup will automatically cover all the devices connected to your home router and you will not need to configure each of them manually.

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.

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.

Enter your AdGuard Home server addresses there.

", "install_configure_windows": "

Open Control Panel through Start menu or Windows search.

Go to Network and Internet category and then to Network and Sharing Center.

On the left side of the screen find Change adapter settings and click on it.

Select your active connection, right-click on it and choose Properties.

Find Internet Protocol Version 4 (TCP/IP) in the list, select it and then click on Properties again.

Choose Use the following DNS server addresses and enter your AdGuard Home server addresses.

", "install_configure_macos": "

Click on Apple icon and go to System Preferences.

Click on Network.

Select the first connection in your list and click Advanced.

Select the DNS tab and enter your AdGuard Home server addresses.

", @@ -45,4 +45,4 @@ "install_configure_ios": "

From the home screen, tap Settings.

Choose Wi-Fi in the left menu (it is impossible to configure DNS for mobile networks).

Tap on the name of the currently active network.

In the DNS field enter your AdGuard Home server addresses.

", "install_configure_adresses": "AdGuard Home addresses:", "install_configure_dhcp": "You can't set a custom DNS server on some types of routers. In this case it may help if you set up AdGuard Home as a DHCP server. Otherwise, you should search for the manual on how to customize DNS servers for your particular router model." -} \ No newline at end of file +} diff --git a/client2/src/main.pcss b/client2/src/main.pcss index 5efd7a6b..852b3e20 100644 --- a/client2/src/main.pcss +++ b/client2/src/main.pcss @@ -1,33 +1,24 @@ :root { - /*GRAYSCALE*/ --white: #ffffff; --gray100: #f3f3f3; --gray300: #d8d8d8; --gray400: #a4a4a4; --gray700: #888888; --gray900: #4d4d4d; - --black: #131313; - /*FEEDBACK*/ - --red400: #c23814; - --orange400: #eb9300; - /*BRAND*/ + --black: #000000; --green400: #67b279; --green700: #4d995f; - /*ADDITIONAL*/ - --purple400: #b267a0; - --purple700: #994d87; - --slateblue400: #677bb2; - --slateblue700: #4d6199; - /*VPN*/ - --vpngreen400: #74a352; - --vpngreen700: #568040; - --vpnslateblue700: #575770; - --vpnslateblue800: #464558; - --vpnseagreen: #5eb0b7; - + --red400: #c23814; + --transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; + --font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace; } body { font-size: 14px; color: var(--gray900); -} \ No newline at end of file +} + +@custom-media --m-viewport (min-width: 768px); +@custom-media --l-viewport (min-width: 992px); +@custom-media --xl-viewport (min-width: 1200px);