diff --git a/src/components/auth/SignIn.jsx b/src/components/auth/SignIn.jsx index df27222..54a61aa 100644 --- a/src/components/auth/SignIn.jsx +++ b/src/components/auth/SignIn.jsx @@ -35,7 +35,7 @@ export default class SignIn extends Component {
}> - +
@@ -73,6 +69,7 @@ export default class SignIn extends Component {
+ {/* На деле тут может быть и ник, в зависимости от того, что введут в 1 вьюху */} erickskrauch@yandex.ru
@@ -90,16 +87,12 @@ export default class SignIn extends Component { - {' | '} - - -
}> - - + +
{/**/} @@ -117,24 +110,13 @@ export default class SignIn extends Component {
    -
  • - one two three -
  • -
  • - one two three -
  • -
  • - one two three -
  • -
  • - one two three -
  • +
  • Authorization for Minecraft servers
  • +
  • Manage your skins directory and additional rows for multiline
  • +
  • Change the active skin
  • +
  • View your E-mail address
- @@ -142,7 +124,7 @@ export default class SignIn extends Component {
@@ -176,7 +158,7 @@ export default class SignIn extends Component {
- +
@@ -194,7 +176,7 @@ export default class SignIn extends Component {
{/* TODO: E-mail i18n*/} - +
@@ -207,10 +189,6 @@ export default class SignIn extends Component { - {' | '} - - - diff --git a/src/components/auth/SignIn.messages.js b/src/components/auth/SignIn.messages.js index 6fe44d3..eda1be8 100644 --- a/src/components/auth/SignIn.messages.js +++ b/src/components/auth/SignIn.messages.js @@ -65,7 +65,8 @@ export default defineMessages({ theAppNeedsAccess: { id: 'theAppNeedsAccess', - defaultMessage: 'This applications needs access to your data' + // Мне нельзя html? Получите неразрывный пробел! ˅˅˅˅˅˅˅˅˅˅˅ + defaultMessage: 'This applications needs access              to your data' }, decline: { diff --git a/src/components/auth/signIn.scss b/src/components/auth/signIn.scss index aa8863d..7617df2 100644 --- a/src/components/auth/signIn.scss +++ b/src/components/auth/signIn.scss @@ -5,12 +5,6 @@ text-align: center; } -.decline { - border-top: 1px solid lighter($black); - width: 42%; - flex-grow: 0; -} - .helpLinks { margin: 8px 0; @@ -55,6 +49,7 @@ } // account activation +@import '~components/ui/fonts.scss'; .description { } @@ -66,25 +61,49 @@ } .descriptionText { - margin-bottom: 25px; - font-size: 16px; - line-height: 1.2; + font-family: $font-family-title; + margin: 5px 0 19px; + line-height: 1.4; +} + +.activationCodeInput { + composes: blueTextField from './../ui/form.scss'; + + text-align: center; } // app permissions -.authInfo { - padding: 0 5px; - overflow: hidden; +$authBodyLeftRightPadding: 32px; +$authBodyTopBottomPadding: 30px; + +.authBody { + composes: body from './../ui/panel.scss'; + + padding: $authBodyTopBottomPadding $authBodyLeftRightPadding; text-align: left; } +.authBodyHeader { + composes: defaultBodyHeader from './../ui/panel.scss'; + + // Отступы сверху и снизу разные т.к. мы ужимаем высоту линии строки с логином на 2 пикселя и из-за этого теряем отступ снизу + padding: 15px $authBodyLeftRightPadding 17px; + margin: (-$authBodyTopBottomPadding) (-$authBodyLeftRightPadding) $authBodyTopBottomPadding; +} + +.authInfo { +} + .authInfoAvatar { + $size: 30px; + float: left; - height: 40px; - width: 40px; - font-size: 40px; + height: $size; + width: $size; + font-size: $size; line-height: 1; margin-right: 10px; + margin-top: 2px; color: #aaa; img { @@ -100,6 +119,7 @@ .authInfoEmail { font-family: $font-family-title; font-size: 20px; + line-height: 16px; color: #fff; } @@ -107,25 +127,33 @@ font-family: $font-family-title; font-size: 18px; color: #dd8650; + padding-bottom: 6px; } .permissionsList { - text-align: left; list-style: none; - margin: 10px 0; + margin-top: 10px; li { color: #a9a9a9; + font-size: 14px; + line-height: 1.4; + padding-bottom: 4px; + padding-left: 17px; + position: relative; + + &:last-of-type { + padding-bottom: 0; + } &:before { content: "• "; color: lighter($light_violet); - font-size: 30px; - line-height: 20px; - display: inline-block; - height: 20px; - vertical-align: middle; - margin-right: 5px; + font-size: 39px; // ~ 9px + line-height: 9px; + position: absolute; + top: 6px; + left: 0; } } } diff --git a/src/components/ui/Panel.jsx b/src/components/ui/Panel.jsx index 211c420..eab1668 100644 --- a/src/components/ui/Panel.jsx +++ b/src/components/ui/Panel.jsx @@ -34,7 +34,7 @@ export function Panel(props) { export function PanelHeader(props) { return ( -
+
{props.children}
); @@ -42,7 +42,7 @@ export function PanelHeader(props) { export function PanelBody(props) { return ( -
+
{props.children}
); @@ -50,7 +50,7 @@ export function PanelBody(props) { export function PanelFooter(props) { return ( -
+
{props.children}
); @@ -68,7 +68,7 @@ export function PanelBodyHeader(props) { } return ( -
+
{close} {props.children}
diff --git a/src/components/ui/form.scss b/src/components/ui/form.scss index 7062dec..7ff5b3f 100644 --- a/src/components/ui/form.scss +++ b/src/components/ui/form.scss @@ -175,7 +175,7 @@ composes: checkboxPosition; composes: checkmark from './icons.scss'; - border: 2px #fff solid; + border: 2px #dcd8cd solid; font-size: 10px; line-height: 18px; diff --git a/src/components/ui/panel.scss b/src/components/ui/panel.scss index c0cfe56..898f726 100644 --- a/src/components/ui/panel.scss +++ b/src/components/ui/panel.scss @@ -5,14 +5,16 @@ background: $black; } +$headerHeight: 60px; + .header { box-sizing: border-box; - height: 50px; + height: $headerHeight; border-bottom: 1px solid lighter($black); font-family: $font-family-title; text-align: center; - line-height: 50px; + line-height: $headerHeight + 2px; // Шрифт Roboto Condensed имеет странную высоту линии, так что компенсируем это font-size: 20px; color: #fff; } @@ -22,7 +24,7 @@ float: left; overflow: hidden; - height: 49px; + height: $headerHeight - 1px; width: 49px; padding: 0; border-right: 1px solid lighter($black); @@ -31,12 +33,16 @@ text-align: center; } +$bodyLeftRightPadding: 20px; +$bodyTopBottomPadding: 15px; + .body { - padding: 15px; + padding: $bodyTopBottomPadding $bodyLeftRightPadding; color: #ccc; font-size: 18px; b { + font-weight: normal; color: #fff; } @@ -64,15 +70,15 @@ .bodyHeader { position: relative; padding: 10px; - margin: -15px; + margin: (-$bodyTopBottomPadding) (-$bodyLeftRightPadding); margin-bottom: 15px; } .errorBodyHeader { composes: bodyHeader; - background: #e66c69; - border: 1px #e15457 solid; + background: $red; + border: 1px darker($red) solid; font-size: 14px; line-height: 1.3;