move version number back to settings page, fix vertically overflowing containers

Author: rikukissa

packages/client/src/App.tsx

@@ -76,26 +76,6 @@ const GlobalStyle = createGlobalStyle`
   }
 `
 
-const Version = styled.div`
-  color: ${({ theme }) => theme.colors.disabled};
-  ${({ theme }) => theme.fonts.smallButtonStyle};
-  position: absolute;
-  bottom: 1.5rem;
-  left: 1rem;
-  text-transform: none;
-  span:last-child {
-    display: none;
-  }
-  :hover {
-    span:first-child {
-      display: none;
-    }
-    span:last-child {
-      display: inline;
-    }
-  }
-`
-
 export class App extends React.Component<IAppProps> {
   public render() {
     return (
@@ -307,12 +287,6 @@ export class App extends React.Component<IAppProps> {
                                 }}
                               />
                             </ProtectedPage>
-                            <Version>
-                              <span>OpenCRVS v1.1.0</span>
-                              <span>
-                                {process.env.REACT_APP_VERSION || 'development'}
-                              </span>
-                            </Version>
                           </MainSection>
                         </Page>
                       </NotificationComponent>

packages/client/src/components/Page.tsx

@@ -37,7 +37,8 @@ const languageFromProps = ({ language }: IPageProps) => language
 const StyledPage = styled.div<IPageProps>`
   background: ${({ theme }) => theme.colors.background};
   min-height: 100vh;
-  margin-bottom: 80px;
+  box-sizing: border-box;
+  padding-bottom: 80px;
   justify-content: space-between;
   display: flex;
   flex-direction: column;

packages/client/src/views/PIN/CreatePin.tsx

@@ -26,7 +26,7 @@ const Container = styled.div`
   align-items: center;
   justify-content: center;
   ${({ theme }) => theme.gradients.gradientNightshade};
-  height: calc(100vh + 80px);
+  height: 100vh;
   width: 100%;
   position: absolute;
   overflow-y: hidden;

packages/client/src/views/SecureAccount/SecureAccountView.tsx

@@ -18,7 +18,7 @@ import { CreatePin } from '@client/views/PIN/CreatePin'
 const SecurePageContainer = styled.div`
   ${({ theme }) => theme.fonts.bigBodyStyle};
   ${({ theme }) => theme.gradients.gradientNightshade};
-  height: calc(100vh + 80px);
+  height: 100vh;
   text-align: center;
   width: 100%;
   position: absolute;

packages/client/src/views/SelectVitalEvent/SelectVitalEvent.tsx

@@ -56,7 +56,7 @@ from {
 `
 const StyledContainer = styled.div`
   top: 0;
-  min-height: calc(100vh - 40px);
+  min-height: calc(100vh);
   width: 100%;
   &.${PAGE_TRANSITIONS_CLASSNAME}-enter {
     animation: ${fadeFromBottom} ${PAGE_TRANSITIONS_ENTER_TIME}ms

packages/client/src/views/Settings/SettingsPage.tsx

@@ -98,7 +98,23 @@ const Right = styled.div`
     }
   }
 `
-
+const Version = styled.div`
+  color: ${({ theme }) => theme.colors.disabled};
+  ${({ theme }) => theme.fonts.smallButtonStyle};
+  text-transform: none;
+  margin-top: 2rem;
+  span:last-child {
+    display: none;
+  }
+  :hover {
+    span:first-child {
+      display: none;
+    }
+    span:last-child {
+      display: inline;
+    }
+  }
+`
 const Message = styled.div`
   margin-bottom: 16px;
 `
@@ -310,6 +326,10 @@ class SettingsView extends React.Component<IProps, IState> {
               {sections.map((sec, index: number) => (
                 <DataSection key={index} {...sec} />
               ))}
+              <Version>
+                <span>OpenCRVS v1.1.0</span>
+                <span>{process.env.REACT_APP_VERSION || 'development'}</span>
+              </Version>
             </Left>
             <Right>
               <Avatar className="tablet" />

packages/client/src/views/Unlock/Unlock.tsx

@@ -37,7 +37,7 @@ const PageWrapper = styled.div`
   ${window.config.COUNTRY === 'zmb'
     ? `background: url(${zambiaBackground});`
     : ''}
-  height: calc(100vh + 80px);
+  height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;

packages/components/src/components/interface/SubPage.tsx

@@ -12,22 +12,25 @@
 import * as React from 'react'
 import styled from 'styled-components'
 import { BackArrow } from '../icons'
-import { Button, CircleButton } from '../buttons'
+import { CircleButton } from '../buttons'
 import { Box } from './Box'
 
 const SubPageContainer = styled.div`
   width: 100%;
-  height: 100vh;
+  height: calc(100vh - 80px);
   ${({ theme }) => theme.fonts.bodyStyle};
   background: ${({ theme }) => theme.colors.white};
   color: ${({ theme }) => theme.colors.copy};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 `
 
 const HeaderBlock = styled.div`
   box-shadow: 0px 2px 6px rgba(53, 67, 93, 0.32);
   height: 64px;
+  width: 100%;
   max-width: 940px;
-  margin: auto;
   padding: 20px 10px;
   display: flex;
   flex-flow: row nowrap;
@@ -46,9 +49,9 @@ const EmptyTitle = styled(MenuTitle)`
   color: ${({ theme }) => theme.colors.error};
 `
 const BodyContainer = styled(Box)`
+  width: 100%;
   max-width: 940px;
-  height: inherit;
-  margin: auto;
+  flex-grow: 1;
 `
 interface IProps {
   title?: string
@@ -70,7 +73,7 @@ export class SubPage extends React.Component<IProps> {
             <EmptyTitle>{emptyTitle}</EmptyTitle>
           )}
         </HeaderBlock>
-        <BodyContainer>{this.props.children}</BodyContainer>π{' '}
+        <BodyContainer>{this.props.children}</BodyContainer>
       </SubPageContainer>
     )
   }