Change prettier rules

packages/app/components/auth/finish/Finish.intl.json

@@ -1,7 +1,7 @@
 {
-  "authForAppSuccessful": "Authorization for {appName} was successfully completed",
-  "authForAppFailed": "Authorization for {appName} was failed",
-  "waitAppReaction": "Please, wait till your application response",
-  "passCodeToApp": "To complete authorization process, please, provide the following code to {appName}",
-  "copy": "Copy"
+    "authForAppSuccessful": "Authorization for {appName} was successfully completed",
+    "authForAppFailed": "Authorization for {appName} was failed",
+    "waitAppReaction": "Please, wait till your application response",
+    "passCodeToApp": "To complete authorization process, please, provide the following code to {appName}",
+    "copy": "Copy"
 }

packages/app/components/auth/finish/Finish.tsx

@@ -10,100 +10,95 @@ import messages from './Finish.intl.json';
 import styles from './finish.scss';
 
 interface Props {
-  appName: string;
-  code?: string;
-  state: string;
-  displayCode?: boolean;
-  success?: boolean;
+    appName: string;
+    code?: string;
+    state: string;
+    displayCode?: boolean;
+    success?: boolean;
 }
 
 class Finish extends React.Component<Props> {
-  render() {
-    const { appName, code, state, displayCode, success } = this.props;
-    const authData = JSON.stringify({
-      auth_code: code,
-      state,
-    });
+    render() {
+        const { appName, code, state, displayCode, success } = this.props;
+        const authData = JSON.stringify({
+            auth_code: code,
+            state,
+        });
 
-    history.pushState(null, document.title, `#${authData}`);
+        history.pushState(null, document.title, `#${authData}`);
 
-    return (
-      <div className={styles.finishPage}>
-        <Helmet title={authData} />
+        return (
+            <div className={styles.finishPage}>
+                <Helmet title={authData} />
 
-        {success ? (
-          <div>
-            <div className={styles.successBackground} />
-            <div className={styles.greenTitle}>
-              <Message
-                {...messages.authForAppSuccessful}
-                values={{
-                  appName: <span className={styles.appName}>{appName}</span>,
-                }}
-              />
+                {success ? (
+                    <div>
+                        <div className={styles.successBackground} />
+                        <div className={styles.greenTitle}>
+                            <Message
+                                {...messages.authForAppSuccessful}
+                                values={{
+                                    appName: <span className={styles.appName}>{appName}</span>,
+                                }}
+                            />
+                        </div>
+                        {displayCode ? (
+                            <div data-testid="oauth-code-container">
+                                <div className={styles.description}>
+                                    <Message {...messages.passCodeToApp} values={{ appName }} />
+                                </div>
+                                <div className={styles.codeContainer}>
+                                    <div className={styles.code}>{code}</div>
+                                </div>
+                                <Button color="green" small label={messages.copy} onClick={this.onCopyClick} />
+                            </div>
+                        ) : (
+                            <div className={styles.description}>
+                                <Message {...messages.waitAppReaction} />
+                            </div>
+                        )}
+                    </div>
+                ) : (
+                    <div>
+                        <div className={styles.failBackground} />
+                        <div className={styles.redTitle}>
+                            <Message
+                                {...messages.authForAppFailed}
+                                values={{
+                                    appName: <span className={styles.appName}>{appName}</span>,
+                                }}
+                            />
+                        </div>
+                        <div className={styles.description}>
+                            <Message {...messages.waitAppReaction} />
+                        </div>
+                    </div>
+                )}
             </div>
-            {displayCode ? (
-              <div data-testid="oauth-code-container">
-                <div className={styles.description}>
-                  <Message {...messages.passCodeToApp} values={{ appName }} />
-                </div>
-                <div className={styles.codeContainer}>
-                  <div className={styles.code}>{code}</div>
-                </div>
-                <Button
-                  color="green"
-                  small
-                  label={messages.copy}
-                  onClick={this.onCopyClick}
-                />
-              </div>
-            ) : (
-              <div className={styles.description}>
-                <Message {...messages.waitAppReaction} />
-              </div>
-            )}
-          </div>
-        ) : (
-          <div>
-            <div className={styles.failBackground} />
-            <div className={styles.redTitle}>
-              <Message
-                {...messages.authForAppFailed}
-                values={{
-                  appName: <span className={styles.appName}>{appName}</span>,
-                }}
-              />
-            </div>
-            <div className={styles.description}>
-              <Message {...messages.waitAppReaction} />
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  onCopyClick: MouseEventHandler = (event) => {
-    event.preventDefault();
-
-    const { code } = this.props;
-
-    if (code) {
-      copy(code);
+        );
     }
-  };
+
+    onCopyClick: MouseEventHandler = (event) => {
+        event.preventDefault();
+
+        const { code } = this.props;
+
+        if (code) {
+            copy(code);
+        }
+    };
 }
 
 export default connect(({ auth }: RootState) => {
-  if (!auth || !auth.client || !auth.oauth) {
-    throw new Error('Can not connect Finish component. No auth data in state');
-  }
+    if (!auth || !auth.client || !auth.oauth) {
+        throw new Error('Can not connect Finish component. No auth data in state');
+    }
 
-  return {
-    appName: auth.client.name,
-    code: auth.oauth.code,
-    displayCode: auth.oauth.displayCode,
-    state: auth.oauth.state,
-    success: auth.oauth.success,
-  };
+    return {
+        appName: auth.client.name,
+        code: auth.oauth.code,
+        displayCode: auth.oauth.displayCode,
+        state: auth.oauth.state,
+        success: auth.oauth.success,
+    };
 })(Finish);

packages/app/components/auth/finish/finish.scss

@@ -2,75 +2,75 @@
 @import '~app/components/ui/fonts.scss';
 
 .finishPage {
-  font-family: $font-family-title;
-  position: relative;
-  max-width: 515px;
-  padding-top: 40px;
-  margin: 0 auto;
-  text-align: center;
+    font-family: $font-family-title;
+    position: relative;
+    max-width: 515px;
+    padding-top: 40px;
+    margin: 0 auto;
+    text-align: center;
 }
 
 .iconBackground {
-  position: absolute;
-  top: -15px;
-  transform: translateX(-50%);
-  font-size: 200px;
-  color: #e0d9cf;
-  z-index: -1;
+    position: absolute;
+    top: -15px;
+    transform: translateX(-50%);
+    font-size: 200px;
+    color: #e0d9cf;
+    z-index: -1;
 }
 
 .successBackground {
-  composes: checkmark from '~app/components/ui/icons.scss';
-  @extend .iconBackground;
+    composes: checkmark from '~app/components/ui/icons.scss';
+    @extend .iconBackground;
 }
 
 .failBackground {
-  composes: close from '~app/components/ui/icons.scss';
-  @extend .iconBackground;
+    composes: close from '~app/components/ui/icons.scss';
+    @extend .iconBackground;
 }
 
 .title {
-  font-size: 22px;
-  margin-bottom: 10px;
+    font-size: 22px;
+    margin-bottom: 10px;
 }
 
 .greenTitle {
-  composes: title;
+    composes: title;
 
-  color: $green;
+    color: $green;
 
-  .appName {
-    color: darker($green);
-  }
+    .appName {
+        color: darker($green);
+    }
 }
 
 .redTitle {
-  composes: title;
+    composes: title;
 
-  color: $red;
+    color: $red;
 
-  .appName {
-    color: darker($red);
-  }
+    .appName {
+        color: darker($red);
+    }
 }
 
 .description {
-  font-size: 18px;
-  margin-bottom: 10px;
+    font-size: 18px;
+    margin-bottom: 10px;
 }
 
 .codeContainer {
-  margin-bottom: 5px;
-  margin-top: 35px;
+    margin-bottom: 5px;
+    margin-top: 35px;
 }
 
 .code {
-  $border: 5px solid darker($green);
+    $border: 5px solid darker($green);
 
-  display: inline-block;
-  border-right: $border;
-  border-left: $border;
-  padding: 5px 10px;
-  word-break: break-all;
-  text-align: center;
+    display: inline-block;
+    border-right: $border;
+    border-left: $border;
+    padding: 5px 10px;
+    word-break: break-all;
+    text-align: center;
 }