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;