mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-11-10 10:02:02 +05:30
Коррекция дизайна страницы со списками приложений
This commit is contained in:
ErickSkrauch
SleepWalker
parent
1e41800708
commit
991931eef3
@ -4,7 +4,7 @@
|
||||
|
||||
"mfaIntroduction": "First of all you need to install one of suggested apps on your phone. This app will generate auth codes for you. Please choose your OS to get corresponding installation links.",
|
||||
"installOnOfTheApps": "Install one of the following apps:",
|
||||
"getAlternativeApps": "Get alternative apps",
|
||||
"findAlternativeApps": "Find alternative apps",
|
||||
"theAppIsInstalled": "The app is installed",
|
||||
|
||||
"scanQrCode": "Open your favorite QR scanner app and scan the following QR code:",
|
||||
|
||||
@ -9,24 +9,57 @@ import styles from './instructions.scss';
|
||||
type OS = 'android'|'ios'|'windows';
|
||||
|
||||
const linksByOs: {[key: OS]: Array<{link: string, label: string}>} = {
|
||||
android: [
|
||||
{
|
||||
link: '',
|
||||
label: 'Google Authenticator'
|
||||
},
|
||||
{
|
||||
link: '',
|
||||
label: 'FreeOTP Authenticator'
|
||||
},
|
||||
{
|
||||
link: '',
|
||||
label: 'TOTP Authenticator'
|
||||
}
|
||||
],
|
||||
ios: [
|
||||
],
|
||||
windows: [
|
||||
]
|
||||
android: {
|
||||
storeSearch: 'https://play.google.com/store/search?q=totp%20authenticator',
|
||||
recommendations: [
|
||||
{
|
||||
link: 'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2',
|
||||
label: 'Google Authenticator',
|
||||
},
|
||||
{
|
||||
link: 'https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp',
|
||||
label: 'FreeOTP Authenticator',
|
||||
},
|
||||
{
|
||||
link: 'https://play.google.com/store/apps/details?id=com.authenticator.authservice',
|
||||
label: 'TOTP Authenticator',
|
||||
},
|
||||
],
|
||||
},
|
||||
ios: {
|
||||
storeSearch: 'https://linkmaker.itunes.apple.com/en-us?mediaType=ios_apps&term=authenticator',
|
||||
recommendations: [
|
||||
{
|
||||
link: 'https://itunes.apple.com/ru/app/google-authenticator/id388497605',
|
||||
label: 'Google Authenticator',
|
||||
},
|
||||
{
|
||||
link: 'https://itunes.apple.com/us/app/otp-auth-two-factor-authentication-for-pros/id659877384',
|
||||
label: 'OTP Auth',
|
||||
},
|
||||
{
|
||||
link: 'https://itunes.apple.com/us/app/2stp-authenticator/id954311670',
|
||||
label: '2STP Authenticator',
|
||||
},
|
||||
],
|
||||
},
|
||||
windows: {
|
||||
storeSearch: 'https://www.microsoft.com/be-by/store/search/apps?devicetype=mobile&q=authenticator',
|
||||
recommendations: [
|
||||
{
|
||||
link: 'https://www.microsoft.com/en-us/store/p/microsoft-authenticator/9nblgggzmcj6',
|
||||
label: 'Microsoft Authenticator',
|
||||
},
|
||||
{
|
||||
link: 'https://www.microsoft.com/en-us/store/p/authenticator/9nblggh08h54',
|
||||
label: 'Authenticator+',
|
||||
},
|
||||
{
|
||||
link: 'https://www.microsoft.com/en-us/store/p/authenticator-for-windows/9nblggh4n8mx',
|
||||
label: 'Authenticator for Windows',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default function OsInstruction({
|
||||
@ -41,9 +74,9 @@ export default function OsInstruction({
|
||||
</h3>
|
||||
|
||||
<ul className={styles.appList}>
|
||||
{linksByOs[os].map((item) => (
|
||||
{linksByOs[os].recommendations.map((item) => (
|
||||
<li key={item.label}>
|
||||
<a href={item.link}>
|
||||
<a href={item.link} target="_blank">
|
||||
{item.label}
|
||||
</a>
|
||||
</li>
|
||||
@ -51,8 +84,8 @@ export default function OsInstruction({
|
||||
</ul>
|
||||
|
||||
<div className={styles.otherApps}>
|
||||
<a href="">
|
||||
<Message {...messages.getAlternativeApps} />
|
||||
<a href={linksByOs[os].storeSearch} target="_blank">
|
||||
<Message {...messages.findAlternativeApps} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="2232" height="2500" viewBox="32.163 68.509 203.691 228.155"><path d="M101.885 207.092c7.865 0 14.241 6.376 14.241 14.241v61.09c0 7.865-6.376 14.24-14.241 14.24-7.864 0-14.24-6.375-14.24-14.24v-61.09c0-7.864 6.376-14.24 14.24-14.24z" fill="#369070"/><path d="M69.374 133.645c-.047.54-.088 1.086-.088 1.638v92.557c0 9.954 7.879 17.973 17.66 17.973h94.124c9.782 0 17.661-8.02 17.661-17.973v-92.557c0-.552-.02-1.1-.066-1.638H69.374z" fill="#369070"/><path d="M166.133 207.092c7.865 0 14.241 6.376 14.241 14.241v61.09c0 7.865-6.376 14.24-14.241 14.24-7.864 0-14.24-6.375-14.24-14.24v-61.09c0-7.864 6.376-14.24 14.24-14.24zM46.405 141.882c7.864 0 14.24 6.376 14.24 14.241v61.09c0 7.865-6.376 14.241-14.24 14.241-7.865 0-14.241-6.376-14.241-14.24v-61.09c-.001-7.865 6.375-14.242 14.241-14.242zM221.614 141.882c7.864 0 14.24 6.376 14.24 14.241v61.09c0 7.865-6.376 14.241-14.24 14.241-7.865 0-14.241-6.376-14.241-14.24v-61.09c0-7.865 6.376-14.242 14.241-14.242zM69.79 127.565c.396-28.43 25.21-51.74 57.062-54.812h14.312c31.854 3.073 56.666 26.384 57.062 54.812H69.79z" fill="#369070"/><path d="M74.743 70.009l15.022 26.02M193.276 70.009l-15.023 26.02" fill="none" stroke="#369070" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M114.878 102.087c.012 3.974-3.277 7.205-7.347 7.216-4.068.01-7.376-3.202-7.388-7.176v-.04c-.011-3.975 3.278-7.205 7.347-7.216 4.068-.011 7.376 3.2 7.388 7.176v.04zM169.874 102.087c.012 3.974-3.277 7.205-7.347 7.216-4.068.01-7.376-3.202-7.388-7.176v-.04c-.011-3.975 3.278-7.205 7.347-7.216 4.068-.011 7.376 3.2 7.388 7.176v.04z" fill="#fff"/></svg>
|
||||
<svg viewBox="0 0 70 80" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(-359.000000, -439.000000)" fill="#379070">
|
||||
<g transform="translate(272.000000, 105.000000)">
|
||||
<g transform="translate(87.000000, 334.000000)">
|
||||
<g>
|
||||
<path d="M65,30 C62.25,30 60,32.25 60,35 L60,55 C60,57.75 62.25,60 65,60 C67.75,60 70,57.75 70,55 L70,35 C70,32.25 67.75,30 65,30 L65,30 Z M5,30 C2.25,30 0,32.25 0,35 L0,55 C0,57.75 2.25,60 5,60 C7.75,60 10,57.75 10,55 L10,35 C10,32.25 7.75,30 5,30 L5,30 Z M12.5,57.5 C12.5,61.6425 15.8575,65 20,65 L20,65 L20,75 C20,77.75 22.25,80 25,80 C27.75,80 30,77.75 30,75 L30,65 L40,65 L40,75 C40,77.75 42.25,80 45,80 C47.75,80 50,77.75 50,75 L50,65 C54.1425,65 57.5,61.6425 57.5,57.5 L57.5,30 L12.5,30 L12.5,57.5 L12.5,57.5 Z"/>
|
||||
<path d="M57.36,25 C56.6,18.135 52.75,12.2025 47.2325,8.6225 L49.735,3.62 C50.3525,2.385 49.8525,0.8825 48.6175,0.265 C47.3825,-0.3525 45.88,0.1475 45.2625,1.3825 L42.7525,6.405 L42.1,6.145 C39.8675,5.4025 37.48,5 35,5 C32.52,5 30.1325,5.4025 27.9,6.145 L27.2475,6.405 L24.7375,1.3825 C24.12,0.1475 22.6175,-0.3525 21.3825,0.265 C20.1475,0.8825 19.6475,2.385 20.265,3.62 L22.7675,8.6225 C17.25,12.205 13.4,18.135 12.64,25 L12.64,27.5 L57.5,27.5 L57.5,25 L57.36,25 L57.36,25 Z M27.5,20 C26.12,20 25,18.88 25,17.5 C25,16.12 26.1175,15.0025 27.495,15 L27.5025,15 L27.5075,15 C28.885,15.0025 30.0025,16.12 30.0025,17.5 C30.0025,18.88 28.8825,20 27.5025,20 L27.5,20 Z M42.5,20 C41.12,20 40,18.88 40,17.5 C40,16.12 41.115,15.0025 42.495,15 L42.5,15 L42.5075,15 C43.885,15.0025 45.0025,16.12 45.0025,17.5 C45.0025,18.88 43.8825,20 42.5025,20 L42.5,20 Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.8 KiB |
@ -1 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="2038" height="2500" viewBox="0 0 496.255 608.728"><path d="M273.81 52.973C313.806.257 369.41 0 369.41 0s8.271 49.562-31.463 97.306c-42.426 50.98-90.649 42.638-90.649 42.638s-9.055-40.094 26.512-86.971zM252.385 174.662c20.576 0 58.764-28.284 108.471-28.284 85.562 0 119.222 60.883 119.222 60.883s-65.833 33.659-65.833 115.331c0 92.133 82.01 123.885 82.01 123.885s-57.328 161.357-134.762 161.357c-35.565 0-63.215-23.967-100.688-23.967-38.188 0-76.084 24.861-100.766 24.861C89.33 608.73 0 455.666 0 332.628c0-121.052 75.612-184.554 146.533-184.554 46.105 0 81.883 26.588 105.852 26.588z" fill="#cac8c1"/></svg>
|
||||
<svg viewBox="0 0 66 80" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(-474.000000, -439.000000)" fill="#D8D5CE">
|
||||
<g transform="translate(272.000000, 105.000000)">
|
||||
<g transform="translate(202.000000, 334.000000)">
|
||||
<path d="M54.835,42.5075 C54.735,32.375 63.0975,27.5175 63.47,27.275 C58.77,20.3975 51.45,19.4575 48.8425,19.3475 C42.6125,18.7175 36.6875,23.015 33.525,23.015 C30.3725,23.015 25.4925,19.44 20.325,19.535 C13.535,19.635 7.2725,23.4825 3.7775,29.565 C-3.2775,41.8075 1.97,59.9425 8.8475,69.8725 C12.2075,74.7325 16.215,80.19 21.475,79.995 C26.54,79.7925 28.4575,76.7175 34.58,76.7175 C40.7025,76.7175 42.425,79.995 47.7875,79.895 C53.2375,79.7925 56.6925,74.9425 60.03,70.0675 C63.8875,64.43 65.4775,58.97 65.57,58.69 C65.45,58.635 54.94,54.61 54.835,42.5075 L54.835,42.5075 Z M44.7625,12.775 C47.555,9.3875 49.44,4.6875 48.925,0 C44.9025,0.165 40.0275,2.68 37.1425,6.0575 C34.5525,9.055 32.2875,13.84 32.895,18.435 C37.385,18.785 41.9675,16.1525 44.7625,12.775 L44.7625,12.775 Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 655 B After Width: | Height: | Size: 1.2 KiB |
@ -1 +1,11 @@
|
||||
<svg width="2490" height="2500" viewBox="0 0 256 257" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M0 36.357L104.62 22.11l.045 100.914-104.57.595L0 36.358zm104.57 98.293l.08 101.002L.081 221.275l-.006-87.302 104.494.677zm12.682-114.405L255.968 0v121.74l-138.716 1.1V20.246zM256 135.6l-.033 121.191-138.716-19.578-.194-101.84L256 135.6z" fill="#70a5b1"/></svg>
|
||||
<svg width="70px" height="70px" viewBox="0 0 70 70" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(-585.000000, -444.000000)" fill="#71A6B2">
|
||||
<g transform="translate(272.000000, 105.000000)">
|
||||
<g transform="translate(313.000000, 339.000000)">
|
||||
<path d="M0.0256666667,32.6666667 L0,9.912 L28,6.10866667 L28,32.6666667 L0.0256666667,32.6666667 Z M32.6666667,5.432 L69.9906667,0 L69.9906667,32.6666667 L32.6666667,32.6666667 L32.6666667,5.432 Z M70,37.3333333 L69.9906667,70 L32.6666667,64.75 L32.6666667,37.3333333 L70,37.3333333 Z M28,64.155 L0.0233333333,60.319 L0.021,37.3333333 L28,37.3333333 L28,64.155 Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 390 B After Width: | Height: | Size: 830 B |
@ -1,8 +1,10 @@
|
||||
@import "~components/ui/fonts.scss";
|
||||
|
||||
$boxHeight: 140px;
|
||||
|
||||
.instructionContainer {
|
||||
position: relative;
|
||||
min-height: 160px;
|
||||
min-height: $boxHeight;
|
||||
|
||||
background: #fff;
|
||||
border: 1px #fff solid;
|
||||
@ -20,7 +22,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 15px;
|
||||
height: 130px;
|
||||
height: $boxHeight;
|
||||
}
|
||||
|
||||
.osTile {
|
||||
@ -33,6 +35,10 @@
|
||||
transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
|
||||
font-family: $font-family-title;
|
||||
|
||||
.instructionActive & {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.osLogo {
|
||||
@ -117,28 +123,41 @@
|
||||
}
|
||||
|
||||
.osInstruction {
|
||||
$padding: 15px;
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-left: 100px;
|
||||
padding: 15px;
|
||||
margin-left: 115px - $padding;
|
||||
padding: $padding;
|
||||
}
|
||||
|
||||
.instructionTitle {
|
||||
font-family: $font-family-title;
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.appList {
|
||||
margin: 16px 0;
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
font-size: 11px;
|
||||
|
||||
li {
|
||||
margin: 5px 0;
|
||||
margin: 7px 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
border-bottom-color: #666;
|
||||
border-bottom-style: dashed;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: прижать это к нижней части
|
||||
.otherApps {
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
opacity: 0.7;
|
||||
font-size: 10px;
|
||||
|
||||
a {
|
||||
color: #9E9E9E;
|
||||
border-bottom-color: #9E9E9E;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,20 +44,24 @@
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
background: #aaa;
|
||||
transition: background 0.4s ease;
|
||||
border: 2px solid #aaa;
|
||||
transition: background 0.4s ease,
|
||||
border-color 0.4s cubic-bezier(0.19, 1, 0.22, 1); // easeOutExpo
|
||||
}
|
||||
}
|
||||
|
||||
.activeStep {
|
||||
&:before {
|
||||
right: 0;
|
||||
transition-delay: 0;
|
||||
transition-delay: unset;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $green;
|
||||
border-color: darker($green);
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user