Доработанный стиль форм (сидел и вымерял каждый пиксель).

Обновлённый стиль для формы подтверждения прав

src/components/auth/SignIn.jsx

@@ -35,7 +35,7 @@ export default class SignIn extends Component {
                 <div className={styles.signIn}>
                     <Panel title={<Message {...messages.signInTitle} />}>
                         <PanelBody>
-                            <Input icon="envelope" type="email" placeholder="E-mail" />
+                            <Input icon="envelope" type="email" placeholder="E-mail or username" />
                         </PanelBody>
                         <PanelFooter>
                             <button className={buttons.green}>
@@ -47,10 +47,6 @@ export default class SignIn extends Component {
                         <a href="#">
                             <Message {...messages.forgotPassword} />
                         </a>
-                        {' | '}
-                        <a href="#">
-                            <Message {...messages.contactSupport} />
-                        </a>
                     </div>
                 </div>
                 <div className={styles.signIn}>
@@ -73,6 +69,7 @@ export default class SignIn extends Component {
                                     <span className={icons.user} />
                                 </div>
                                 <div className={styles.email}>
+                                    {/* На деле тут может быть и ник, в зависимости от того, что введут в 1 вьюху */}
                                     erickskrauch@yandex.ru
                                 </div>
                             </div>
@@ -90,16 +87,12 @@ export default class SignIn extends Component {
                         <a href="#">
                             <Message {...messages.forgotPassword} />
                         </a>
-                        {' | '}
-                        <a href="#">
-                            <Message {...messages.contactSupport} />
-                        </a>
                     </div>
                 </div>
                 <div className={styles.signIn}>
                     <Panel title={<Message {...messages.permissionsTitle} />}>
-                        <PanelBody>
+                        <PanelBody className={styles.authBody}>
-                            <PanelBodyHeader>
+                            <PanelBodyHeader className={styles.authBodyHeader}>
                                 <div className={styles.authInfo}>
                                     <div className={styles.authInfoAvatar}>
                                         {/*<img src="//lorempixel.com/g/90/90" />*/}
@@ -117,24 +110,13 @@ export default class SignIn extends Component {
                                 <Message {...messages.theAppNeedsAccess} />
                             </div>
                             <ul className={styles.permissionsList}>
-                                <li>
+                                <li>Authorization for Minecraft servers</li>
-                                    one two three
+                                <li>Manage your skins directory and additional rows for multiline</li>
-                                </li>
+                                <li>Change the active skin</li>
-                                <li>
+                                <li>View your E-mail address</li>
-                                    one two three
-                                </li>
-                                <li>
-                                    one two three
-                                </li>
-                                <li>
-                                    one two three
-                                </li>
                             </ul>
                         </PanelBody>
                         <PanelFooter>
-                            <button className={classNames(buttons.black, styles.decline)}>
-                                <Message {...messages.decline} />
-                            </button>
                             <button className={buttons.green}>
                                 <Message {...messages.approve} />
                             </button>
@@ -142,7 +124,7 @@ export default class SignIn extends Component {
                     </Panel>
                     <div className={styles.helpLinks}>
                         <a href="#">
-                            <Message {...messages.contactSupport} />
+                            <Message {...messages.decline} />
                         </a>
                     </div>
                 </div>
@@ -176,7 +158,7 @@ export default class SignIn extends Component {
                     </Panel>
                     <div className={styles.helpLinks}>
                         <a href="#">
-                            <Message {...messages.contactSupport} />
+                            <Message {...messages.didNotReceivedEmail} />
                         </a>
                     </div>
                 </div>
@@ -194,7 +176,7 @@ export default class SignIn extends Component {
                             </div>
                             <div className={styles.formRow}>
                                 {/* TODO: E-mail i18n*/}
-                                <Input type="email" color="blue" placeholder="Enter the code from E-mail here" />
+                                <Input type="email" color="blue" className={styles.activationCodeInput} placeholder="Enter the code from E-mail here" />
                             </div>
                         </PanelBody>
                         <PanelFooter>
@@ -207,10 +189,6 @@ export default class SignIn extends Component {
                         <a href="#">
                             <Message {...messages.didNotReceivedEmail} />
                         </a>
-                        {' | '}
-                        <a href="#">
-                            <Message {...messages.contactSupport} />
-                        </a>
                     </div>
                 </div>
             </div>

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: {

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-family: $font-family-title;
-    font-size: 16px;
+    margin: 5px 0 19px;
-    line-height: 1.2;
+    line-height: 1.4;
+}
+
+.activationCodeInput {
+    composes: blueTextField from './../ui/form.scss';
+
+    text-align: center;
 }
 
 // app permissions
-.authInfo {
+$authBodyLeftRightPadding: 32px;
-    padding: 0 5px;
+$authBodyTopBottomPadding: 30px;
-    overflow: hidden;
+
+.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;
+    height: $size;
-    width: 40px;
+    width: $size;
-    font-size: 40px;
+    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;
+            font-size: 39px; // ~ 9px
-            line-height: 20px;
+            line-height: 9px;
-            display: inline-block;
+            position: absolute;
-            height: 20px;
+            top: 6px;
-            vertical-align: middle;
+            left: 0;
-            margin-right: 5px;
         }
     }
 }

src/components/ui/Panel.jsx

@@ -34,7 +34,7 @@ export function Panel(props) {
 
 export function PanelHeader(props) {
     return (
-        <div className={styles.header}>
+        <div className={styles.header} {...props}>
             {props.children}
         </div>
     );
@@ -42,7 +42,7 @@ export function PanelHeader(props) {
 
 export function PanelBody(props) {
     return (
-        <div className={styles.body}>
+        <div className={styles.body} {...props}>
             {props.children}
         </div>
     );
@@ -50,7 +50,7 @@ export function PanelBody(props) {
 
 export function PanelFooter(props) {
     return (
-        <div className={styles.footer}>
+        <div className={styles.footer} {...props}>
             {props.children}
         </div>
     );
@@ -68,7 +68,7 @@ export function PanelBodyHeader(props) {
     }
 
     return (
-        <div className={styles[`${type}BodyHeader`]}>
+        <div className={styles[`${type}BodyHeader`]} {...props}>
             {close}
             {props.children}
         </div>

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;

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;
+    background: $red;
-    border: 1px #e15457 solid;
+    border: 1px darker($red) solid;
 
     font-size: 14px;
     line-height: 1.3;