Create RootPage component, update theming for PP and ToS pages

Author: catarak

client/components/RootPage.jsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { prop } from '../theme';
+
+const RootPage = styled.div`
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  color: ${prop('primaryTextColor')};
+  background-color: ${prop('backgroundColor')};
+`;
+
+export default RootPage;

client/components/forceProtocol.jsx

@@ -3,6 +3,7 @@ import Helmet from 'react-helmet';
 import axios from 'axios';
 import Nav from '../../../components/Nav';
 import PolicyContainer from '../components/PolicyContainer';
+import RootPage from '../../../components/RootPage';
 
 function PrivacyPolicy() {
   const [privacyPolicy, setPrivacyPolicy] = useState('');
@@ -16,8 +17,10 @@ function PrivacyPolicy() {
       <Helmet>
         <title>Privacy Policy</title>
       </Helmet>
-      <Nav layout="dashboard" />
-      <PolicyContainer policy={privacyPolicy} />
+      <RootPage>
+        <Nav layout="dashboard" />
+        <PolicyContainer policy={privacyPolicy} />
+      </RootPage>
     </>
   );
 }

client/modules/IDE/pages/PrivacyPolicy.jsx

@@ -3,6 +3,7 @@ import Helmet from 'react-helmet';
 import axios from 'axios';
 import Nav from '../../../components/Nav';
 import PolicyContainer from '../components/PolicyContainer';
+import RootPage from '../../../components/RootPage';
 
 function TermsOfUse() {
   const [termsOfUse, setTermsOfUse] = useState('');
@@ -16,8 +17,10 @@ function TermsOfUse() {
       <Helmet>
         <title>Terms of Use</title>
       </Helmet>
-      <Nav layout="dashboard" />
-      <PolicyContainer policy={termsOfUse} />
+      <RootPage>
+        <Nav layout="dashboard" />
+        <PolicyContainer policy={termsOfUse} />
+      </RootPage>
     </>
   );
 }

client/modules/IDE/pages/TermsOfUse.jsx

@@ -27,6 +27,7 @@ const CookieConsentDialog = styled.div`
   width: 100%;
   height: 100%;
   background: ${prop('Modal.background')};
+  color: ${prop('primaryTextColor')};
   border-top: 1px solid ${prop('Separator')};
   padding: ${remSize(40)} ${remSize(60)};
 `;

client/modules/User/components/CookieConsent.jsx

@@ -8,6 +8,7 @@ import get from 'lodash/get';
 import { Helmet } from 'react-helmet';
 import { verifyEmailConfirmation } from '../actions';
 import Nav from '../../../components/Nav';
+import RootPage from '../../../components/RootPage';
 
 class EmailVerificationView extends React.Component {
   static defaultProps = {
@@ -39,7 +40,7 @@ class EmailVerificationView extends React.Component {
     }
 
     return (
-      <div className="email-verification">
+      <RootPage>
         <Nav layout="dashboard" />
         <div className="form-container">
           <Helmet>
@@ -52,7 +53,7 @@ class EmailVerificationView extends React.Component {
             {status}
           </div>
         </div>
-      </div>
+      </RootPage>
     );
   }
 }

client/modules/User/pages/EmailVerificationView.jsx

@@ -5,11 +5,12 @@ import { useTranslation } from 'react-i18next';
 import LoginForm from '../components/LoginForm';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../../components/Nav';
+import RootPage from '../../../components/RootPage';
 
 function LoginView() {
   const { t } = useTranslation();
   return (
-    <div className="login">
+    <RootPage>
       <Nav layout="dashboard" />
       <main className="form-container">
         <Helmet>
@@ -38,7 +39,7 @@ function LoginView() {
           </p>
         </div>
       </main>
-    </div>
+    </RootPage>
   );
 }
 

client/modules/User/pages/LoginView.jsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import NewPasswordForm from '../components/NewPasswordForm';
 import { validateResetPasswordToken } from '../actions';
 import Nav from '../../../components/Nav';
+import RootPage from '../../../components/RootPage';
 
 function NewPasswordView(props) {
   const { t } = useTranslation();
@@ -27,7 +28,7 @@ function NewPasswordView(props) {
     user: true
   });
   return (
-    <div className="new-password-container">
+    <RootPage>
       <Nav layout="dashboard" />
       <div className={newPasswordClass}>
         <Helmet>
@@ -43,7 +44,7 @@ function NewPasswordView(props) {
           </p>
         </div>
       </div>
-    </div>
+    </RootPage>
   );
 }
 

client/modules/User/pages/NewPasswordView.jsx

@@ -6,6 +6,7 @@ import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import ResetPasswordForm from '../components/ResetPasswordForm';
 import Nav from '../../../components/Nav';
+import RootPage from '../../../components/RootPage';
 
 function ResetPasswordView() {
   const { t } = useTranslation();
@@ -19,7 +20,7 @@ function ResetPasswordView() {
     user: true
   });
   return (
-    <div className="reset-password-container">
+    <RootPage>
       <Nav layout="dashboard" />
       <div className={resetPasswordClass}>
         <Helmet>
@@ -44,7 +45,7 @@ function ResetPasswordView() {
           </p>
         </div>
       </div>
-    </div>
+    </RootPage>
   );
 }
 

client/modules/User/pages/ResetPasswordView.jsx

@@ -5,11 +5,12 @@ import { useTranslation } from 'react-i18next';
 import SignupForm from '../components/SignupForm';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../../components/Nav';
+import RootPage from '../../../components/RootPage';
 
 function SignupView() {
   const { t } = useTranslation();
   return (
-    <div className="signup">
+    <RootPage>
       <Nav layout="dashboard" />
       <main className="form-container">
         <Helmet>
@@ -38,7 +39,7 @@ function SignupView() {
           </p>
         </div>
       </main>
-    </div>
+    </RootPage>
   );
 }