From 9f75725dfa0a6f6208f8e7e156d49642a4248f95 Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Mon, 18 Jan 2021 15:09:04 +0300 Subject: [PATCH] Merge: client: fix mobile layout for install page Squashed commit of the following: commit 5e620f2d8576b08ebfee08e9781cd4927c4dcf2a Merge: d82d5a902 679bbcdc2 Author: Ildar Kamalov Date: Mon Jan 18 14:57:00 2021 +0300 Merge branch 'master' into 2554-mobile-install commit d82d5a9028be0be72e612fc4c375d2be81c6c8c3 Author: Ildar Kamalov Date: Mon Jan 18 14:09:25 2021 +0300 client: fix mobile layout for install page --- client2/src/assets/img/background_min.png | Bin 7187 -> 0 bytes client2/src/assets/img/install.png | Bin 0 -> 24402 bytes .../components/Install/Install.module.pcss | 14 -- client2/src/components/Install/Install.tsx | 9 +- .../AdminInterface/AdminInterface.module.pcss | 17 -- .../AdminInterface/AdminInterface.tsx | 61 ++++--- .../Install/components/Auth/Auth.tsx | 8 +- .../ConfigureDevices.module.pcss | 4 - .../ConfigureDevices/ConfigureDevices.tsx | 90 +++++++---- .../DnsServer/DnsServer.module.pcss | 12 -- .../components/DnsServer/DnsServer.tsx | 57 ++++--- .../StepButtons/StepButtons.module.pcss | 8 - .../components/StepButtons/StepButtons.tsx | 9 +- .../components/Stepper/Stepper.module.pcss | 67 +++++++- .../Install/components/Stepper/Stepper.tsx | 31 ++-- .../components/Welcome/Welcome.module.pcss | 15 -- .../Install/components/Welcome/Welcome.tsx | 32 ++-- .../common/controls/Radio/Radio.module.pcss | 6 +- .../common/controls/Radio/Radio.tsx | 4 +- .../components/common/formating/danger.tsx | 2 +- client2/src/lib/ant/Step.pcss | 65 -------- client2/src/lib/ant/ant-overrides.less | 8 +- client2/src/lib/ant/index.ts | 1 - client2/src/lib/theme/Icons/index.tsx | 40 ++--- client2/src/lib/theme/Install.module.pcss | 153 ++++++++++++++++++ client2/src/lib/theme/Link.module.pcss | 14 ++ client2/src/lib/theme/Text.module.pcss | 29 ++++ client2/src/lib/theme/Typography.module.pcss | 36 ----- client2/src/lib/theme/index.ts | 8 +- client2/src/localization/locales/en.json | 8 +- client2/src/main.pcss | 29 ++-- 31 files changed, 462 insertions(+), 375 deletions(-) delete mode 100644 client2/src/assets/img/background_min.png create mode 100644 client2/src/assets/img/install.png delete mode 100644 client2/src/components/Install/Install.module.pcss delete mode 100644 client2/src/components/Install/components/AdminInterface/AdminInterface.module.pcss delete mode 100644 client2/src/components/Install/components/ConfigureDevices/ConfigureDevices.module.pcss delete mode 100644 client2/src/components/Install/components/DnsServer/DnsServer.module.pcss delete mode 100644 client2/src/components/Install/components/StepButtons/StepButtons.module.pcss delete mode 100644 client2/src/components/Install/components/Welcome/Welcome.module.pcss delete mode 100644 client2/src/lib/ant/Step.pcss create mode 100644 client2/src/lib/theme/Install.module.pcss create mode 100644 client2/src/lib/theme/Link.module.pcss create mode 100644 client2/src/lib/theme/Text.module.pcss delete mode 100644 client2/src/lib/theme/Typography.module.pcss diff --git a/client2/src/assets/img/background_min.png b/client2/src/assets/img/background_min.png deleted file mode 100644 index 528fe2d19087348caa6a65a5448308bd81277e49..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7187 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 Co2}LW diff --git a/client2/src/assets/img/install.png b/client2/src/assets/img/install.png new file mode 100644 index 0000000000000000000000000000000000000000..68dbd78045cbd659be366bf95eb5ecb0c85a2491 GIT binary patch literal 24402 zcmeEtWmHvBx9A2Gkw!r}R8YFR5di_|ZjlB7X=yA(5RmTfmhKV(>CQt)A6mNMt?f6) z`}y7*_x-s)?imi;XRf(suQ}&hd!4V!iZVEuWS9^H;mE#tt_nd|;t+Iu1_KR1{4sC% zAPDtD`K7uP_}V|YI)GRjm|7l0tT*%^h7fB%hZY7AtHU#!4PCR%{WEnv(+%B-f$7zS zs@lQn)tj3eFbW>l(z937b8fC~MrV+nGwWSTTWyGi(LWmllgQCOTZaTWtPCMmPZx>@5Nit+we2HIU}$J|{pRNCKlB$XtNRgaQ&aGi zzRA_o#bWRPD2&c+O#Inx>7VOr92uG2XzHIC1jG@mfacKb#_GU8+wdP4GQIYvvSt9l z5o?1pYeO^O0a@2QH3+!OtPRd>fCn(z(1&OqoNw-*1r&hdgR`r9`^R9YzGu3BdZn>< z20SL5^L1}Fl!uK_N=IRBnuI%!M5K5M{e{fL$N-kGsE z6;p4*)nYwE{Q-_5V=-EdB`t{`Styt!yn;*8K+#EVfu(yHHWx zkeLIfz)S&sKn<}r0-F@5hU}kQ0g?kFFO^pVrJ4t3M`kzS>C>xVO8*R)vewi$vrF$g=9y;_|*pm`>}^0{GiKwy;oDvj`lGKz0nzFI3b32LZ9$hvvaVAbjhUUL0r+BIHG4O8@6SwJ!bKJS#+0CIQz|X_1{PG2T zps)btBWE6#DF+1^vV1vh3G_Kgy$&u0;S{C{-zeQj_3m#JuI7~|pIg6a5O8j(x^B|necl-@ zh6{jyy)`Q$k3hk1S+M!ysFoLWyRymkZEkitD3Fb3|>D#v$&+2K%A4(1}P^xp% zsYHJ4hqy=% zD1{{3%+;^|xHVw_Xoa;8wR4_6!)+kfw1?)+`WABu{M>z@xw0aum}Jg(uvC>Z2Oz@; z=9`Vqmrp$-D$UK$Uhx2}7OJ?ETpzgM=}t`r1k@txn?GIwHToi2i9qX5F}1e&Xf~3yL1NTVNQwF4%Fua!Sl+_ zYZIpm6+rka|2nLeUY$4!rni2*Idsu?l*D#WWd|%RZ_{HDw-%$P($c%{B1FCAQkC>` z3D5JS{GJPmw8LcuM)Kl`v|R-!&m%h85vf~YSS+y*^&->NN#eP&4hFtq$f|wN)vbD~ z5|;LY9jmoZ-w(^>?Sgaz7F(tpp^Hz%(Cvo#0SyW&D%iys!@u-@hC8txQd{`nH~;F^ zCZ8gc?82fLH?=5U1Vs1yJ8Ej)SN5^*yxPBFYIL}-K#(&mj+dMas0iVwUWA_asm>QT z*KMq5P)9QnO@#C6ZT=fd4>2yU8uApB@@`h>M3X3fzSR;%7=I&vZAJvi$t!kNgIZ0@iPxdpuCr_3W} zz?INFiky7TI+cm0RbQQi2*zE(+I2~_`^^dG$PX?VOjcjB6e;VX%20?JeRcvdhe{hc zh-Rtyu2X@^_+|BtOXdf7jC5n>wmMQpMlkulrp)|aG(nidH5aDcq-!#AJXE~v09BM*}; z!19IyfL-o9`Z*Z*gVth{^)3vl5U`1=K;FK@@RZ_z;|^Ot?6^akmdDdK7XxqEtK9G( z$aO-rhx7pT`1RA7h~;_1B4U`ORbG*-KzSw8PgR$3kn*5Mc5`*K?Ll+0E0YdFj{dd^ z04Dy6W%66%lrGW2+^5XdHxC&AjAqe;uiQ#Dn9W-Klav7Yu@sEA+*oNPfYz?Y^s_9{ z*)@V34j{kFXT=KrS0ju+uf8Q(k;C4BM9SSr1%eic7JPL3+x1&vK_HibDKrgXW`Ffh z^$r4!1+E$}Fwv%@P>tx?WVc#d%1VZ4FLcHa7Bb&%#nDC3`Cw=-@a+XnTHx}JB2(CR ze_rI+vLIh9o;eN`OtOTwyU>f+E2+Wj;IF*3h|Q*~hM9-Q;!*xae1-d}#h+eFOEOEF zffRBwee!i=4cFnrn|&{Nr;iZSBK9H}(UHk=#Ps~N`H1M=2Yi0=C%V&LHhvx&`3_Ih z0)lRr0ts^2IlY?um@keStKOtQmp2>sH4C-bt;f+ls6J(GzHADg9Vj}Rh3_nT(s`H^ ztb`V=-z89+&ZLWa%@CJrOMLI~^S9*LIq#j*Xe=|^f*Rib{Dl6V_$tL%?B#M|<+|N* z;>l*{yHnwTn6(QO=u)d9zmtF&dD0*>OB0e1Q9CwD(`Q?Q|JkC1^BOxYRtq zpc%a0$u7@k*in8C{OH$ZQY5{SANK3~&~eRCYm2fV1qJK*VzE`c5HFbBqBQSschHSJ zxoOI7WA}@45fcaU3vCLm`x*MM#Sjf^wWHq-vx)a-ulq7F@3{o*NVQ$c}RJ}2&|4C72%{~Xl_XiT0fit1j`uT}5S z5`2J_T@0E6zi=w-yO2 z(LX44j~k*{=5;BchqkzlQ5#B_gkBDR-1t zImx6;k2PK6!{te-rviX9(xuepMz{R37CSmE2COvOPhb29L~Btx-pQfcpuzrgI>LpI zMxI6-)vL}KCC-(bOUuFanVC>z%b4KqWx09+t^DXiImUHmDonvbf?F<=l1O8TAv*&R z=S`_Y+~Y`9buL74S$)o#x0wCwCShSNwC5_0@7{@nawCh?Hy+E`tK=Al5BV7+wYABj z;ODm9W%;hpY4$azvPHZRNXMb{MYIyrPr1+P{rD#awS0N3Z=)aqg*n>(cD?JTY%qqJ z;hhkDKN>uM((3rqn@Vf)e(4;!9D)!Sa>$yWBZOM5HH|op8N=lYcKrci zQroNJU1L%1cH=g~YiJnJ39m@QYh< zkG%La*xNA3AbgeWfvpAzL%ZH%IGYhSKL;eO0Ke5v-iHvXW(`UbyGB^NI$m=g$Zmgr z$|u}|9@=OQn5oe*3I9TY0+R2K92*pY+1mki9jfMRHbR`FR-n88>FPCYj;4d8A457%cG|HTGL<_$TN6uH?`)1N@IC4#$zq_`;G0Yo0&M(zvw=t8%)RXeZm41U2YTJ=36yI7LnNnl`1OU?i^YIL)=P8m?}tDH8h zd8Af&58TC4-E2$Z(xb=5m_g;*T#Rh=dp*BP{RFvp@gFq4kL- z^LxPO*F?8D9^^g4B>0eCh54YAfINYOx#~x0UDO`5gY4i(Y|;WWGtlVp-59du^fBZ*SU0r) z7bT!YWSjr>^Q_97J4nT@fCnUxZvphbD*IbCsQB;i`%qHUZfhuDG5Uy5Sb%A1q+a2@ ziu4c%$#AjNW1Xto?z$Cko@W%gqd};AyivWl43G+c2_=_w804hX7xFocF zJXhMI)+Ow#{a*W{Tq_ysQOJ?g%m&faq zO(@eA-~XcMeS-YhdCI(vRtFfM(wgl9|F^Rbin2c_lxTfI!-V|sz3j|P4!ST|*+ur~ z@svCWQPBm99m2;*p|UJDy}dbRUfU3s6A~WAo(bx%pYluVPL;lk8Rn|-Z8^_%25!q*j9s*Z49R30Z=$O`J5~6?iKiXp zK?`$fx{Iru9{7|0Tgn`9IzBB?I86mJ$ydu5WdhEid)@7S%mXYRu0QXXG=ISIiSU{J zXa}#uZQ_$+eE}?E^thxNeDehvWQMw+LSrY_M|QjZzn7xzDLqaDSid&HNQiLqT_^^# zmn^Ale#euPz^w~@ffa|G8IF}}!^-Rie~3@K%vNC_$$hv#4;ahUrsi4ZKg8`6m#<&4 zq$N{j{mQWdM*Orzh-}n8ZW!3PR||#Iq1%4t*?_^82KSbd(WCGLagnZ_4v|H;)-A#% zlR&Ff-|{n|%vaeKM89hO&3ZRWY$Mf%>sF74l-7tTF`YUPI4TU{ z*?}p(3;wDxbij&4vlqKLw&L&6tRB<8zgY_R*pGOb#y6c6PdEvV=~Cn5giBJOugqII2BsCh+HR{fOqFgwUnz9ImP& z{8hIEv&-!ZJTed}*x5R-ZXiE;jx*w*f1k;%4Q?$}JZZ*FRq9`$AKx^u%nHwF_PA11 zw|lI?(`rNr1{z#rM%}C{r+tc=v=m17g+iqEW*lKrmUjXz3_N4Ju0|Xhh&S86|C9aX zr7%$=hSTGzzpBYhi~tQO6!WV*o%pp0?NzD%cV9=7e;$~tcqg~%ff8tsNp2;m7Fl)o z4nX~7kIZ_9X|_EpNzlcXx&F*hab->rz*F&Fe%&oQexs&{-JiMs1(h1!{0z$Yo43bI zP}$1%SanLE!2Pz-)~u1d8tB^gO6JjqHR#0#&ziZSa9Xd$B@`Oz>Gv{gCfmO+d^W`z zq5FjWxr^i%GW|C0*Hu&W0V>q1A+_e9ijiu4*{jzhk2q5hyizeCupQIB z4?=tKBRORSDA6k^mhG_xZt%MM)Dn))kaZECQlNwLJ?7?klTs%BAO1u3+8l{R3&jCz zS)8(ZI)(CezU&&MPMFEX?2I){^|(o+L(%(&;PI^b*S#qX01j0pOpU$T`7|ylkkcFMqfwjQ__Qzl;Kjt{f+9Gp#^rn!EXdqLi1V&a$pi>|$W73)giHsK~GleL$` z!&hMN&S`jj1e+4}{8n{k`s4EYhe-|mJgaNT00QwQ1a1V(u*wmC>Fl^v1Vs&cRsK0L zz%z8Q=eaRy&+A z<~|%gRNduo(jWLotfXrt5|{pg_oFKv5uQ~?slPD>LYh`g-`e;u?fv_4s7GJDRK2H0 zoEQB}Sq?8cJLs!CmkTCk-K45j35`?(>QkcUtynz$k9?k*3+xMP?d|WQL8(8T<*`QG!j0$=Niqr`7IF4zN+# z;dLgrH`uj`CwDPtm1_c!&UDEtWhWl&jmUNW4j{$y)C33y@u`rdgMSEt^&uutfqjKD zbmX2&{hK1@0y3@gvptrqDNtnmgoV`L`OAoNkzIa81fXGRHS0ogfihF(cEWh~jxxy? zB?F1K;?@`+0;6;3$S}V&C0gfUeQ$YybteZsCf80}LYcTx?P|W&!8dvHbgv15cm@gTM6eZAc6`g%JJ#s~bfHsH=-eX*NPS=7^;EURFX$-< z=+Fzsn;j2;_|0{rNFn~mZ0@G4yauG3)ES3ESAd)A9tZm;wfJbnnL-Ojnd#;7JV9xR zHxQDxqQOLk1f#NkVAs4t4JVYi^^nH(xcQqV!!Jc;tWw3wq)csl8qEh(osZ)hTPK^{ zLhe93N+V1BSb*U2GV(9~oG>g!-I?{-J1SVb6Q$KJu+mbqV{hM4J6SqofDYC> z*`1}p^{JWlRAr3=Ks5SwU%ik4fHPX?7UvlXAc1v3>khp@ANqAMy%4;ALtqvNL@F(Qy6`wo2%eVDYf@!P4cqVy!cqGjj8u_G)d`ZbU;JlSoE!EOs?Lrj z$WP35+kmH=9<%LlK68|DD{c1IfOL||)3KkDWOwhAOW2g+qmPo(ewSk+_@IC-OZV=% z1beLYEhoz8+C=s^@<}V#$-iJV?d_ow3N}Zbt-|TZjLQ4>n3j{nGv3*G2;w$h=%Sf7 z+?4Weypo-`LI6uyb}wqK?v&)(6#n*FbBM0Io@Nux-O(5W50HCYz~alwo{DbxFjtGSUsBPj4NRSM3qI9!6nl-ir6vYJx>OiHK| z=SndU4f2TO@lJAO9)#KQcYXNmlONCYjP5gA0xM_y*UvdNObNvV1-?rD634&g5U3nh zOc{O+eYsY)XSR!;%T$b6o9cgi%+>HVHN1b#{NQQ?NRfY5i{zgM9Mn~pmsXeF!`!3S z`N!cXU;XoAN_ZF+O{(2;$iW#5{`N8fzlQ6?ez!2VR?6?!l${Ig(c@GWtLI(Pi6uj4{9P0chbLhFE4bch&pXdLl zsrRfNo67(PLm&2E z%{Xik9#-p5qib=8NtU~SK!7A_jSx=rTWS4Y*I1H9J{iXLfw+e-J5x5mfKa1k`I?NT4WgAO3)=rFMo8`KTX$R~ z>>*mg@J}bk>C1DOwPcpxDfQzP*zk$HM4*hO>gqB1#AM@RdpjK!0224(eIskaG}2$$ zv!C_+Hrz(iNb%?m+9zc$#fCkV^!z6_|Lp=P!RRS!Hwt^Uo*)6lKb;db5{AES9md;; zMd1Z`>k$BI__2M-W-i@Bcx!V5zduGAfW0k%<%(9>*!&ov< z=ui>4-$_0_zyIRXLdB+h4J9#}51PfSBX6IBC55BnZjGfw$L0wGtKp6lC>VZqs)aM; zg66^+GY-z1Y?~6INrnU5V@(UO@F~5r7Wx}?4O;a1#Ad#c;>U4b{U_xTmO>fvhtmyU z*spHbBt~81;F&|`p0@AS%4NE~a+$Y0k7ZTxCwSO{)4nnAJM#{|vU}HD2aj4 zmIn^-fZz*Wx|lcW;=8}i+Wd*Ow>m4?;MM~A)fr2-^0qS+6Ir1zU8DdY;#aZNiUM1w zL}jgCr3cGh)&9Ydf^KDgcFWNqOvSeM@}w1C zP{&tjIqostCK{g-2dQGTd52&CF@MrPXh!VuO2n~C`nIz)Ymh4(lL6($X7*-vmhGM_ zqsP?92BU}66jtGq5&srtsVnQ&nyN%-URF`TQe^Y@C);uQoCGLI(LJ{j;Lr0YT~ffaWcClwWs*|Jwm)QgQfJKVnrSaa9A zAL{RdS&6tKVCFc6>S3U`#QOv~?VD>ntRe9?rfAm2sLvTlFH*}BlwxO|R^|?zBq3nF zg=J;>C>;Zf^sWR+T!Z3QIkhhV+;Qq1WkzXOdVSxKzq&v4juU^!=;A-NJ#gK7cipVy zu+r~6PYkt~F`3^+o}EABShK1$e@ayn>D#@US!aEd7WjhzOO5dQ8Ibd>_LlS2Rq5`Q zNMDs@+e%%LU6}n&LSmiG&4W~ggG&sr9_%f*Z82k;^s z%wOqCO$HRyPfA9>rqPcgDc~Ehe>2|f6THd3eKuQ~5Ckn;%gtkzN~J}{N?mHz4ORj3&MS9J1NQb<^w*U- zpa+L)EW2DT)bpw(*1~@Zyq39&ONxG}i006u4=+86NH41(xtDiBzYvZGP@b3vnM@WA z(J=F_WP-sz$&;j>hM(h73#lloP4=J9=}%>##F~u52^*L5xb|MsxYg0}cb1;}RtGPJ z^t3rhK`w0(X*(K9vmI$gIeOxfUS;I-JGT3olwETdJZndGYesLdGd10?D88oZxzF!- zwZQ3+ba+Pq)vVPT6sZ1v*(mfXr3OHdU@NgRpp;VURccJng0t)A(MhzWviI`)%<72X_76 zmf;vU`KCy#%B3cIWZ{0WGGxrwEnX$Uoj{n>$JdMcPXnhdhp3N*=aKa`MM>{=BtIG2 zcAwGTndajK4J5QfT0p$0mK1v)(QMvKdh}3Ym-E1t{t;8}Zx0mcZ&ahFjxA?kI)9V2 z)KjxH?C>g%)#24g+=hd^)>|}{Nb#VUkjxi%W5?wS=^tSbU^52feq^lp5b)uHlaT}x zEtf47?aLzhJ1ktntiJW-p0k_e*X25%Y|s$b;cD@d-LbJOsfp6eIljrNbl#5ZXoLGe zqDQ$~W#@;yc{{XP`kh3#UsV`Cp2irf>Vu_Ksi;wF^P`9GSl|PFNvf&_M@lEmHbWb`n3UFXO?l9B zLSgD|cUG3dH|d$MOVfEU_c`A7M#FEQ#kr5_GrhLl|M+ZZv4_Mf6nN^L7j|5N0L9lS zDfz9`;67KYKzG~pS0R5IYw&ns5?t@nH;!H03zD1jQVGe9+0%+&@)c4%TLW{%2RzE@ zeTi|Im@{l`Rw{hPM$EYg-+^5CeA3VJiLaX`VQkS_Z^+XM#oBn5EZ|f>4Eb7}Gtb3E z%)ZKK9+^emFTEP&oO>2v#IonjZ|G`NgD5dAT*uo&-zGAVLvNb&pXFHAS-Xvz5gE`5 z!u;sILy?4elW|q=5e<-F8K=hQOo&t;{XC}UbJbMFW74bn=jSy#Cdq39K=j5}E18$G z-f80Pj^5_HRo@4je;q`yl&@mX&cdS$*E2%y2|^ifvjSPT3W!F&#$K~?c(Eh6%S+YZ zswU1hdE}y(wQt75DptZuZ+gFW`0+)tyUG4ukG^OW*}!g3@J#pk_Lru<3s^gK-Gf*GhL*~;{m0<~$ z;Io)Y7@;>&>C!>;{>nEh*Cii85NW@E_I72=pPlJNjxwOX7SjOE=Txb$nX$!uKIjmtQ%%^2iJ1O@AfnU2B$lLqeL zO{89t!B%@8+_8U;>z*#UGgPAKK=!zA06yTXb=OWQk@8gx(iAqZ1p8}f*@C0*7y-=| z&*~@&!5pTM1wD2@G@PGigdGEk%G42ZK@J)jv*|~)yd(RsfM&@%#hH8#JR>qvPtomj zH12@*XW7P4$X1_@pxKg0#*?EVF?t!qrK4to!lua{wPaFTy2jTqygXxHuz%}S7_%1% z@y-7>pX-VnbX*XSWbVxf6m@g5u{v_U)L60Q$~s(n$CiH1!-DihhYvC*o8|OSNIDkm z85J3>(DmpUvLvfj$@D)|1ih{&Y;AuiiC-2_A1m7`R+C#pDRIYuFbVq?xx=0#_dT?Y z?_8eA7G5QPR){$&wFx_q-fgc*iEfN;R;Ftw;&#+*om}^U5VM~>v3pQy-cS)Cne^x+ zzLmc^_>NmMke1IrJE6Afh9g;L;AuTq>$}E|775TQq7+m%yN}!1UX!vIIW6lc|8z0= z^91Y;KPmOd=*0;P&FS$MQ`(j|J1+YwKWpZA3o4Piv{O^%umB5Zc`PFKcUrBH#9ggj z>T9Q6NkETBZ6tzV@9`I13DPg+d{+l;U>lbHr20Tb%MVz9bFPxBI=Tt$H>PuBTwca76^a}eE_1`|TMiM1N1J%059VzqCqX+I9IRC$d!WCscSBUj0@CUIns(k}VUT3s7b0N3 z-KwBnkDg#fIMeOSU?JP3NhoUcRBBb>+$q|jb_UDBE~mkA4kXd>9`Slu8oCp>(fJFj=QUg8eX-F*AsJ_m&zAFrIujh%{$!Sxb(u(sk#}6w}ZVo zljZ_va>W~j*V-vyBVOIgF`p{~q!Q*mwcVFey8^lG@2_{9^DL_wC18%6`iKtr?{ihx zF%397v4kN0``{exubhT1Fdt1S3V7G}MIAgUQw&}JL`>UTFiS)xNWu{O`s)gjr2!sM z!9mCQNpv*IQ`a5*>R>1^9r-jgGVZx8cqzU+sdbD8MlhFggOA>YnQiKlP^i~fmkR@+@? z20|f!tPYIUO9O)r8snjOzw7IPr@Gu(+KCqik;Xk4-sUVcvo8$fHkQ9usOHfD5ykkX zD|Fqp#|-$jE!->4TCWVq@2nj@ueKe217d+Ldij7`4;!dY=x&LJl(*Zqe+EIP;#3hO zYHwu6flv>&QLYlT(0~O*Lb|Hgk7D(KWvnS8F4m9255OU(c<_#&C>boDV+uvicuC?e z`k&xNA?dG7e(CI92_r9Ko_vdFCCVgV#>pFQ>i$g_N>hWf@Q~q?RZdmxRb4Qe&pe|K zE-@=~$j^J{P;wtIQqB}ir7n-YA-x0rDG;Fb%^nRk1zY^V^O{~*& zh}n+piL@Q)x3698J3`j^#Dg)gz#Db_11jA^GcYHEO>30KUJ9Twp$1E;=fMmJcJ<0W zYLza|11aDgjds+!>V6Qe;yOW>WS{j-lfgQT)L=^W+|&oCEJqpO#!jmqZYxdN)v(P*e5WsM83$iCA2F=8m#DgRBCeZ?*OVwQuts`&3`PgjB zc>D0tgdte)MP8)N)l(w4f#`=itAPEW^lnA{EYj+4XQr}v$^JBuc(A)?hc#pAm3?>w z{p&ZN1F_7RpWXgwLP3Y-5#a=!ApTfMdKTqrtNjQkib%gc2x438x{qFqlL@O&tS6T* z>A`z}*OQd4Wa?N*zBu4uaq@vW&jzf(+lRDbJ|O)}znh=UpuTjBD#-m~y!sJ@bJyH# zVK#xZ1BqBd`McR#*-PtN@~&A$G|yfln9aBS{$Qg&|1jsrsr~Q+7T-sC;^K0K#(u?u zgj-9$#^TJA=QV^c1sd4is3$J@FNt9x-{by!%?j=bl7*fOf~LRPAzhjUY9&rR|gocvKCY|Zj)jnv(B|Zj}0;L-8v*iX?);B z1UnW|n_wmKTx;dVLTOZQrUd}@kyWA)F4XgCZKn1*c+WMNSI2F@pmFPKlxRR@Z3nz^ zq3FP5c?T9X17hnB*teX!CTan!MYSy}w@dr}68i~`!4EuSQU?pjh<;fiLfeL>b(TRa$WhsFi`=99 zw~geNji9`;68KjXewF@03;Q}PpF_j)r4!npJN_0<)goKD#s{gI2CduRB)_VGU4YwJ zj9z|@`5W5##dokwAe#GjA}4|50_lVyJOpdSX~bkfSsxhZ^TBE{eYQDAslnFmkoB`E z?M_DavP^0i$uw>yyzTn^sUTTsv9k+lC}Q=K`dd}_{rCAKm>SLSDO;KG`0)%@V}54t z%ZUsBruy%~80tZZo9)HFX)nCLM@tzmNv7g0S zg@a(J@7Nq}94&3pXcZQY49xXC$F>Xw~4NN=~)~#L2eD>YV#usqo#WG?UDCT1>f+5 z7V++|gEbB1Mi!>+($3nNKX%eC_~Undx+nvFWHn)L^cfqJ3Mk*)S!kZ`P=SwIizo9J z=KV&z>rNVqab1+bwfm&e=;G_px8$d(M9;!wxWXIvjd5*9{-&U)&!2yymxnP_oUmgbi*-u zQB15Xtsb$y#vt&R%6frK5-(MUPcU7BVL((*e@uROaD@D1xkM|K@J;5OPtYxM*K&^s z7T3Tr5ZhN(L((&8b>C3;*JkJ>buqEy}ohLcjbcx?}p@xykJC~^Kb&j{j1F`27Ic7jl==$Do+w4e{0^O-Wh7?qfQc3Yp z#7#OK7`a^KCa+_EWh9w1>VIl{9C7^DN5h`wKmhatkiKK2JRiBoi^A}u$EiskvlrN% z5uK|RhsH0!pr32nOAjMbPjZRUFL)^1qrOVTl<35Vbb2Aeo~GA1^HYZ~)~nzH|BxWM zGHdbkjo-@$%gZG-y-3$C1`g@*wF<*it zodxfQC%B{s4nI}&?(18N4y&#+yK2(szVw*Z*EcX71FbHUL{^vj?aKMd6D-sP3lC=a?VV(#M#E;6tmyw?x{ zWSn`_MKqIM=jQnz&b(ntDY4!w9{2E=h!2D7!sJu^qFS8BeU(eMEp+FB1NUvg zGp{CV;?gZoE-?H|F#DX`-ON<}E;YG_lE#~!H8sRe{w#liDu;;dwKH1t z^b9boBJR;sS;{-eJ@dz>ZG2D2^!^rwKCNjkZb*C9ySt5HbINT3);v{D$W%ku5A<8a zn!PT)s3G=`rj7HxWOWC4WFGiDfpG(IeD*STuU0M`LCDn8Mm4122^B14KSMwKG(cYd zLhReUbI_gneZ`rb>>@i)rC7}s^c0U-jT)$3qn;N7y$1V~Dw933T!8n`g9V3+)cowy zmSojp3A7k~4CHn3JkCO_t5!_~USK2efqpDsMn`gj?^)|_3(&n=ZKkJr9zEL5_&xxd zB&|H5$)I%0k_na=K-AwV+N4&jw4o zo{X^TkQt2x+2u!H#}2S5q@Y0B%szvT;B zC}gj5H5r-U+IGqXg`V_+1voal7B1Absx};AmcMj-YPXle~gsYB6aCZ}Unx`tS2<*-WKTa{*-O7fA`=tlJS%Nb*fKs9ilVUN*2Zv`of?n-~Zh>-+{?>t9OoT$O40GiFo z0;g7qv11c4uxPaVZg*-RtboI-Bl9i`bo)KQEd8m3Rq|`#=KG&uV!FLYn`Q=ccQODz zE5iN8gKw30V`g8^2Q0GBM{SW!%pp%lW)4fkQmBDxohLiMtGN0I?NiZioF!{xP7GkE z9~acBg8HG^5=kWjMXTllz_M-V_NwRQjrVPd+iVEV9jQ_}lR=;&%jQ-yBB?~#=8L?o zUENbsjzAF<+}i1hOr|_q_ZC`>v5-`6p4T|;VttAcBb$j>ub}9A zck!Rxd2;{zY>fj}VKJ^@ZcOUB@!7d>%-(8WsIT5x__8W+FLd3xzbO-{*G_1kFLM9dI^ZSG7r zzrd71(UgJt4?}pTnewHp$GlJSgyjUx#TgfQVdz_BBicbqMGTNNY>* zNhTddw7M3ot_kXGqe6a91e@IDeTv3}ZJ&_Cb4Tmt?M|%waUCZ>2C*HQC))Km7#N+1uGU z*u!$aJ^2*eHTxCo?cZmViIj-y68Gc+et{l5$nWOosx9YSZmpo4D6mDv{GT&gfz1go zmoK%QvZo;M#zl3ugr0x$HW65bJfP1Mp;GAO7>G@bI+|uqE!d-2MqC?np7G>LC$8Cn zUS*I>cd^c~IDk;N>E1gp_#w$IqHZm>H}XkZO2 z#7c@nIvet$^djsva!`o(_t;5A8?5MDb{*k_8`4<6oGmA~lGpPs$bc6W`WwzN|8!}y zR&)HskP4*h$ib;;CF#nTZ_TETp!rYrJ4?!}He^iNAN@(20McN#-Hu11Fl*I@PtHjl zFks}iA>CD@=KLbR7~u9&<3uvN{KI;rMT1;3GC~A`37 zwyJa-Vh^Zca?80XGsRU?4vB@J2*n0wZJTn^Cn~ykOceHww}7m|Ciqd7Q`fqDMa^*( zbet(dbFv;x?IR2Wll@~`I5>a5G+t=ga$oi-qsOgdhS#?oypY?uDZ5t6>Wt?jEo0sUj9A>Yqh1Y2q*li zC_6{(+Eus@`~aZkjdxT0lM+35mWIRya4DdL*@Z1)L9udpRs|R6W^Qp{6;7NmrW%1A z3eu~2mT%Z$vbs$X9ehFM#;)<^;;LlVe$F+2WADJUVs?XVy8LjuvhNP$J6Z3WoV`f@ zZRyL(S)T!8;{)C6uU5mE3btxI&(a;lXTy*tq1GgF4#c74C2}IulP?5y_ZZ$mf$Q7RPUU$mcdI;1_AqeFxVn_N`y(fYUHjU z1|k;<;Kse({|2Q{K1g{I)MdYmBRWED8y0c&*(PPMN+Cb~&NRQ#sd z>}_-Sceh$!y7fU%Yy&Inu77AoZG~?vEs7q?CgF)pa2(bi8-lyt5I$Yk&u{Oqj+*A9 zoKG9A?O5C@tpHd&ah831*iIuk>BaDx;Z)+Zy4%!0Dvd*<|oqV#Q+k;V-kDS#6>1JIB79xaiV-fxtU%EN8C;G%X?_r+%pSP}==aMP# zq*%$UI^D7x%ZX(9;bToi;`(Mfd}wgmHkVZJi?rRCLR5C|nH+gc?$A&TJHK=+J?kq1 z+nLx~Ojt~c@HL!@BR%-oL|&i%Se$s|{=m7291%Nf6wiUH7t^HSg8?`z_O&tK;De;Bw!koaJEL8-G07Ah)3tn8 zC@ge|m|@dMNt-AK1@zTvlVL^p;k-t2npSulXxbjLmtI~nbsY^m! zW_ZLwuxe4GX%nCk@RHdmnbxXEF-B0KYQG*pkS}j8lb221n))SbvN9hQfCQ^WW$S400tU!i*Xdsf2vGxHNYqFSgayK*kF{M;N(kVy_S^_oF&H>=E_OL?wMR- zNCXsp3ebJ4Ec6TSHFC5yPkBrGyPe`raWSRv;Ir-F$EVF{6E3#~F3ERtxcY2>5ayJJ z{`REjsiQlB8Dqd?3N|UB;on@X2L`tt(1EMs-3BkBX)P{Xi02A=eLzOamAIIY3~$Wm zI+QH~il^fCbXv%A3i}vYABA7PX7&f?TE5!zq;zqKDUpIM5levPk@lRCT=;Hduxduu zOeM%WqnQV0(Wd)$<)drdQ!Jns#*FWb@ONEldZ*m@lRf}U`ll7dx|WV|RAaW6e}Dzz zt&2!WiI}l9hzzXQanb~QZ6+e^>G3oJ&h%uDJ22qqAA5X~_G~d7Gs}A> z;QQ@TcM)06Ivq9~ojB8+7W?C!wXAjikfl?-)4#9h&J7crR}<~*u=)71O~_sZ(_j9t zX0G$0iKdB18dj|m{Jv3?3BT5wkB?vr7?}Xk%k*=WhCcTQ% zr5BO*?)e`)-`@Ljw|jH5GqZEMznR;;5Z|k>Svb{uP02EXv=j^};n6E5FJdn=*dK&A zdyMBc`N^C|a&L(NfE1``>Aa?dtw{9i8nEY=`qvt`8EoF-4*Ak8gxB}yl#dKOo`9N` ztb5oVWt|$MnkFVKR3E4bROG^FztdCdEbi~PeVbvLsk>)`jF~fm8w?9AZ+4%WVb{+3 z1`vpDqA?r6s|y`_)9vFiVDwvw@UG|OotqpK|~;vGi1S2#BKsV)TR9 zSM_YfrujeL5&_O)?Qg3))Ha`eAorl_hSY}{@?RqM0Hw7g^28P^NhJF^NFQk^5`}f} zWi%Fn!PZ;2J_hSiFXJF>5SL57sbHEx%f$oCEUvqt2F&B&So+j3#g z?DiE^hE(`b(t7V{h-|x#2POc(fz@8qH|4|D*n}1vX7UFJA&18)Q_P|O)(O;YpBiKE z<)=1w;mlDE5==A4_|r;E-UU{~Xa1~SCu=+#@kR0E=m+tAODi|pIK%G^n74zwQcMB} z&Xi(FvV)zl~cU``2MihoKbJ;8|I?mDLk6(Uq{MpeskJOuA-@&wY-{XhL=Qo!Ux@ z^+1(%t_i1?u*zo{xl`_*uAhttLww`XRw zO`~5OanVeS^6T9AS0@mHP%zQu4P|AhFv-cz&Y-q3kE)NW0v>UHR}j+xz1y zmFiv=3EU7Sd6Ar~u4fv^rwNMHNg`d`<#UN*e_1+9Sy zWcfJyRT!H)Nn?;A?pl3E4>OCiTOE=lm2>x<;Q!#WWVmvZS>vw&!za@G_KxgjXsetS zs`%WG?mT!2=|bJLg;3M|9pAolpPk+rhtL2B^!)TbTeQTMEYs>s3Fi!lKI5EBmN!LL z_;QM=2JPB$ST_6ri=ak zg$BzB`gps>6vpR(W}EObA9hH! z(LlRDljzP>n$|jw{^-yIPc&8*rC+ym>}FrMSI9&Jen3!{5YN+oH*#@I_t{>JPu@fi z5*^zc8T)UTquvn3dlh2Jf2-d;8-(xaaYZP|X$!4(sNK2}aW&|{K-}f}G(jpkrt1O0 zj<>3v{D(gTaqnyAC9LCp=8p-*#9lbV;X_?a8&oj^h-O+QqyWc>VMXFXkd0a;pE39pqb{X|FgAM;#2Tq;@@HI$Mfoaqz6@snCT zbyvyhE|a2W{l*T5!zX#oE%L&H+c4KhT{Q)4+xnz5dyz9TEBe#fH5^(I>PX3PTcgl+ z4JvAC>OqPwZEN_@+`ABjPq!6;=qS@Y+Ktjc4NG;jDFMT{(n-rh%dcT#QU!7f3JO(w zQcY5?#XqdKF%sy+UpmpT!M5tGEbil+>M^wIykGsE7_qYTTmo#Ve?@ey`BSepZ*~-D zNMnh{4QwhC?@<2vQQ#yg6N<1-aY5WU+G~WQ%`{sSPv#aniSR9ta4p~QFtE+F>kAb4 zMEXrIWgx^V0{SRa8BWuNz_GIC ziTf;A_Knr5x`+oW3x*#EW4@ei*P(novv2$*OYnVDz{#~$M(m2t8T`l8Eoq0Io<2VH zo?VRV{Z(ubGHmW#IZe>KnCP$S(q1hl@`lUvr7F~OE7OjgZjM$YHEvyzNA9k!LWd#` zNYjS6v|iD1Z!yNZ_hO)4(Dr@ylU3bBKJ10K!Q+ZCk{Qbmzvik}n7utk5BjMk1ID=a z@BAN8M)iHRFM&6N4=FvD&kBFfkH3td?vxd_K;2aA(d%5w(ta{2BkGd*Zlko=ayFcuCA^CY4<7VBnD|Cs> zQjv1kCCaZZTisa+haq&wli@k)%lFez3^HqkkTG)_wG|62%VOm5-~U9FkviO9OeA71 zPq)0ru5?05c@QzHIFeCB$XPo#YK;)-=Hc%K(JC@Srj~4XH#~>Ybd2 zXT>L>Ia{7|{W7$G@fo)bOW}5lL2_L|R#pKoX_5#Nsl=l|9FBz_**4Qpu4<@StiuL$ z+fQmdv30tA_43{GCJHy=9SPjEOnoZCi!c)VRvko?4xb%;jE;f_kG=^H#dEYOABnzN z{*8#56?WVe3Nflyx$Me!pXI{*gTLDjm=B{rB<*wBhxzTD*6fi}ge`v*gjsxFND_~R#(&)`^bNk1wK1ZKO0lI`uYAHoMTy*Vb zv_O_1%DbVNPi_pi)D&=oL2X^u9}X;ke@Z;P1GAB6pxX)c14$+Y;_zo7<2p4cu!nEr z$}>0)KHYW!rK*_jdRjOn9pR8MVx*KD$qlaWvwPwa``NP48}*=cYO_V*`aObxhionj zO(ayH&U?k_!>EXex{|QEJUI?-)8^Mq>3vKm|n(QBn0y&*3v~;xx z30QY`DyfEFb*A600Wwu$vWL6o*)=wRQ?xdC)Hn4IU_dg;Zd_R+QX>!NRSSh~sODj7 zYpVy~TZ3k(pK-1j6ztn(m$Y z;wWY)i938@1lah@btJAH3Vf>(1JdlbtoLMR0GfXPej0xe!Vb`~?PktQ>76XT1S!$k z@yTvg0Ri3htYFY#(z{;C%Q9&iy7qq6pj)N=j!K6NV4q!2lLd5EusLI|GKP{ous1T^ z51}Qk_>keTL2qP&litK;u_J4L6C7Qt$Vb+OBmWS{ga@_0;8>z?KHBq%XkQ?nBTAh4 zBGmaUtjJai^r=XfBe#WVnyV~G_7YB6s=J&3pz^Qds$WxC!a>pb6=0Wi1F^J;BAbe6 z7d`+5d-Xha2hBX+4+o5}5yH}2>6@3nlolo>m$*P5q$=sMa=R|}dXsGioPo(iObche znh@pqiUADCTxIB9&|b0!Vjd+lcQ4kZ1cx=AY~36^{=o z_d;SZF0;^{T=Tl7*D;^#j?=91_+h>afooIHQ&YwuL;#1kSK1qJT4RJ3plJ;!40nSP zdh*X-fU17NI`G$eUTQ&iuZ3#w({3AGAtY5|Z&fB9Xi;cWxeXIyxrzvkTFVc4VK?-X znd1oZVOUvlyJIG}vfg?Q?4czBE$4`+9|eJ5{vYT~0E?Hr>OqNT@&ZKlu!jMDpq7U* z4_xb4hC*M$p`)cHwE>*;FNA>G4HiNp!8P(ZOMt>MRiOYCpN65y=Q9Q~R$Q>COVw7tb_$PDEBQ%{9>6@a^O4E!X_D*#N%Q16O@e)9; zYmELtlClSj+fPepW)lgcOQ8`leq7d$h1|X9FYoo%|2kWeV3EQFp9e#ZfY%dSwdw{)?zrS^Bd zLPO?=O~Lg0M3_F7fpKlY$AZDzoBl(lun7pswIx+Z4>-n(br)Cz<$fFpFoOZlv(tE= z3baQ720MirxWgn6?K`gn20Rho)Qj~2Me6P%I}ND3GOG_luJlcz&gx1~KUy!UI0H=y zwyBn>zyrsTUF}VR(8Y@E?z_V~fa{AivAVf6NFS#>!8%P#=mlyyxb5ZJ2pKiquRG&W zGX)GY(IC$RLxD}(!5&u>=q|}I8U>cYP=th`(&Nn9`hy-X8-!-1?mv`B)2cPR3K0eVXLp@u@qgD0>42M(jWUH||9 literal 0 HcmV?d00001 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);