From 9f04d5f5effd07534c9eb5b9f8886c8f970d0dc6 Mon Sep 17 00:00:00 2001
From: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com>
Date: Sun, 7 Mar 2021 00:46:47 +0300
Subject: Fixes Return Home Button Centering

Fixes the centering of the return home button on closed forms, by
removing the style wrapper.

Signed-off-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com>
---
 src/components/OAuth2Button.tsx | 6 +++---
 src/pages/FormPage.tsx          | 8 +++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/OAuth2Button.tsx b/src/components/OAuth2Button.tsx
index 25c5871..885c080 100644
--- a/src/components/OAuth2Button.tsx
+++ b/src/components/OAuth2Button.tsx
@@ -31,16 +31,16 @@ const errorStyles =  css`
   visibility: hidden;
   width: 100%;
   left: 0;
-  
+
   text-align: center;
   white-space: normal;
   box-sizing: border-box;
-  
+
   padding: 0 15rem;
   @media (max-width: 750px) {
     padding: 0 5rem;
   }
-  
+
   color: red;
   margin-top: 2.5rem;
 `;
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index fa63282..8852ac5 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -96,12 +96,14 @@ class Navigation extends React.Component<NavigationProps> {
         let submit = null;
 
         if (this.props.form_state) {
+            let inner_submit;
             if (this.props.scopes.includes(OAuthScopes.Identify) && !checkScopes(this.props.scopes)) {
                 // Render OAuth button if login is required, and the scopes needed are not available
-                submit = <OAuth2Button scopes={this.props.scopes} rerender={() => this.setState({"logged_in": true})}/>;
+                inner_submit = <OAuth2Button scopes={this.props.scopes} rerender={() => this.setState({"logged_in": true})}/>;
             } else {
-                submit = <button form="form" type="submit">Submit</button>;
+                inner_submit = <button form="form" type="submit">Submit</button>;
             }
+            submit = <div css={submitStyles}>{ inner_submit }</div>;
         }
 
         return (
@@ -110,7 +112,7 @@ class Navigation extends React.Component<NavigationProps> {
                     <Link to="/" css={Navigation.returnStyles}>Return Home</Link>
                 </div>
                 <br css={this.separatorStyles}/>
-                <div css={submitStyles}>{ submit }</div>
+                { submit }
             </div>
         );
     }
-- 
cgit v1.2.3