Форма с правами приложения

src/components/auth/SignIn.jsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import buttons from 'components/ui/buttons.scss';
 import icons from 'components/ui/icons.scss';
-import { Panel, PanelBody, PanelFooter, PanelError } from 'components/ui/Panel';
+import { Panel, PanelBody, PanelFooter, PanelBodyHeader } from 'components/ui/Panel';
 import { Input, Checkbox } from 'components/ui/Form';
 
 import styles from './signIn.scss';
@@ -56,8 +56,7 @@ export default class SignIn extends Component {
                 <div className={styles.signIn}>
                     <Panel icon="arrowLeft" title={<Message {...messages.enterPassword} />}>
                         <PanelBody>
-                            <PanelError message={
+                            <PanelBodyHeader type="error">
-                                <span>
                                 <Message {...messages.invalidPassword} />
                                 <br/>
                                 <Message {...messages.suggestResetPassword} values={{
@@ -67,8 +66,7 @@ export default class SignIn extends Component {
                                         </a>
                                     )
                                 }} />
-                                </span>
+                            </PanelBodyHeader>
-                            } />
                             <div className={styles.miniProfile}>
                                 <div className={styles.avatar}>
                                     {/*<img src="//lorempixel.com/g/90/90" />*/}
@@ -101,17 +99,20 @@ export default class SignIn extends Component {
                 <div className={styles.signIn}>
                     <Panel title={<Message {...messages.permissionsTitle} />}>
                         <PanelBody>
+                            <PanelBodyHeader>
                                 <div className={styles.authInfo}>
-                                <div className={styles.avatar}>
+                                    <div className={styles.authInfoAvatar}>
-                                    <img src="//lorempixel.com/g/90/90" />
+                                        {/*<img src="//lorempixel.com/g/90/90" />*/}
+                                        <span className={icons.user} />
                                     </div>
-                                <div className={styles.email}>
+                                    <div className={styles.authInfoTitle}>
                                         <Message {...messages.youAuthorizedAs} />
                                     </div>
-                                <div className={styles.email}>
+                                    <div className={styles.authInfoEmail}>
                                         erickskrauch@yandex.ru
                                     </div>
                                 </div>
+                            </PanelBodyHeader>
                             <div className={styles.disclaimer}>
                                 <Message {...messages.theAppNeedsAccess} />
                             </div>

src/components/auth/signIn.scss

@@ -37,7 +37,7 @@
     width: 90px;
     height: 90px;
     font-size: 90px;
-    line-height: 90px;
+    line-height: 1;
     margin: 0 auto;
 
     img {
@@ -70,3 +70,62 @@
     font-size: 16px;
     line-height: 1.2;
 }
+
+// app permissions
+.authInfo {
+    padding: 0 5px;
+    overflow: hidden;
+    text-align: left;
+}
+
+.authInfoAvatar {
+    float: left;
+    height: 40px;
+    width: 40px;
+    font-size: 40px;
+    line-height: 1;
+    margin-right: 10px;
+    color: #aaa;
+
+    img {
+        width: 100%;
+    }
+}
+
+.authInfoTitle {
+    font-size: 14px;
+    color: #666;
+}
+
+.authInfoEmail {
+    font-family: $font-family-title;
+    font-size: 20px;
+    color: #fff;
+}
+
+.disclaimer {
+    font-family: $font-family-title;
+    font-size: 18px;
+    color: #dd8650;
+}
+
+.permissionsList {
+    text-align: left;
+    list-style: none;
+    margin: 10px 0;
+
+    li {
+        color: #a9a9a9;
+
+        &:before {
+            content: "• ";
+            color: lighter($light_violet);
+            font-size: 30px;
+            line-height: 20px;
+            display: inline-block;
+            height: 20px;
+            vertical-align: middle;
+            margin-right: 5px;
+        }
+    }
+}

src/components/ui/Panel.jsx

@@ -56,13 +56,21 @@ export function PanelFooter(props) {
     );
 }
 
-export function PanelError(props) {
+export function PanelBodyHeader(props) {
-    var { message } = props;
+    var { type = 'default' } = props;
+
+    var close;
+
+    if (type === 'error') {
+        close = (
+            <span className={styles.close} />
+        );
+    }
 
     return (
-        <div className={styles.error}>
+        <div className={styles[`${type}BodyHeader`]}>
-            <span className={styles.close} />
+            {close}
-            {message}
+            {props.children}
         </div>
     );
 }

src/components/ui/panel.scss

@@ -61,11 +61,15 @@
     }
 }
 
-.error {
+.bodyHeader {
     position: relative;
     padding: 10px;
     margin: -15px;
     margin-bottom: 15px;
+}
+
+.errorBodyHeader {
+    composes: bodyHeader;
 
     background: #e66c69;
     border: 1px #e15457 solid;
@@ -75,6 +79,19 @@
     color: #fff;
 }
 
+.defaultBodyHeader {
+    composes: bodyHeader;
+
+    background: darker($black);
+    border: lighter($black) solid;
+    border-bottom-width: 5px;
+    border-top-width: 4px;
+
+    font-size: 14px;
+    line-height: 1.3;
+    color: #fff;
+}
+
 .close {
     composes: close from './icons.scss';
 

src/index.scss

@@ -18,6 +18,8 @@ a {
     text-decoration: none;
 }
 
+ul,
+li,
 
 h1,
 h2,