Dev

src/App.tsx

@@ -12,6 +12,7 @@ import {BrowserRouter, Redirect, useHistory} from "react-router-dom";
 import './theme/main.scss'
 import Splash from "./pages/Splash";
 import SignIn from "./pages/SignIn";
+import SignUp from "./pages/SignUp";
 
 
 interface StateProps {
@@ -33,6 +34,7 @@ const ReactApp: React.FC<AppProps> = ({tokenData}) => {
 				<AuthenticatedRoute path="/home*" render={() => <Home/>}/>
 				<Route exact path='/splash'><Splash/></Route>
 				<Route exact path='/sign-in'><SignIn/></Route>
+				<Route exact path='/sign-up'><SignUp/></Route>
 				<Route exact path='/'><Redirect to={'/splash'}/></Route>
 			</main>
 		</BrowserRouter>

src/components/BottomStickySection/index.scss

@@ -8,7 +8,7 @@
     padding: 6px;
     margin: 0;
   }
-  ion-button {
+  button {
     margin: 0;
   }
 }

src/components/Errors/NetworkError/index.scss

@@ -5,7 +5,7 @@
     height: 70%;
     text-align: center;
     padding: 0 10%;
-    ion-icon {
+    img {
         display: block;
         margin: 0 auto;
         font-size: 96px;

src/components/GeneralUIElements/BorderedInput/index.scss

@@ -1,9 +1,7 @@
 .bordered-input {
   margin: 0 0 12px;
-  ion-datetime,
-  ion-textarea,
-  ion-input {
+  input, textarea {
     --padding-start: 12px;
-    border: 2px var(--ion-color-primary) solid;
+    border: 2px var(--color-primary) solid;
   }
 }

src/components/GeneralUIElements/ConfirmationPageContent/index.scss

@@ -9,11 +9,11 @@
     color: black;
   }
   h3 {
-    color: var(--ion-color-medium);
+    color: var(--color-medium);
     font-weight: bold;
   }
   hr {
-    background: var(--ion-color-light-shade);
+    background: var(--color-light-shade);
     height: 1px;
     max-width: 35vw;
     margin: 0 auto;

src/components/GeneralUIElements/GrayInput/index.scss

@@ -1,9 +1,8 @@
 .gray-input {
-  ion-datetime,
-  ion-input {
+  input {
     --padding-start: 3.125vw;
     border: transparent;
-  	background: var(--ion-color-light);
+  	background: var(--color-light);
   	border-radius: 10px;
   }
 }

src/components/GeneralUIElements/GrayInput/responsive.scss

@@ -1,6 +1,5 @@
 .gray-input {
-  ion-datetime,
-  ion-input {
+  input {
     @media screen and (min-width: 576px) {
       --padding-start: 18px;
     }

src/components/GeneralUIElements/UnderlinedInput/index.scss

@@ -1,12 +1,10 @@
 .underlined-input {
-  ion-datetime,
-  ion-textarea,
-  ion-input {
+  input {
     --padding-start: 10px;
     border: transparent;
-    border-bottom: 3px var(--ion-color-medium) solid;
+    border-bottom: 3px var(--color-medium) solid;
   }
-  ion-label {
+  label {
     font-weight: 600;
   }
 }

src/components/InputWrapper/index.scss

@@ -0,0 +1,35 @@
+.input-wrapper {
+  margin: 8vw 0 5vw;
+  &.rounded{
+    input{
+      border-radius: 5px;
+    }
+  }
+  &.dark{
+    input{
+      border-color: var(--color-dark);
+    }
+  }
+  label {
+    padding-left: 5px;
+    padding-bottom: 4px;
+    margin-bottom: 0;
+    display: block;
+  }
+  input {
+    border: 1px var(--color-primary) solid;
+    --padding-start: 3.125vw;
+  }
+  .subtext {
+    padding-top: 5px;
+    padding-left: 5px;
+  }
+}
+.plt-android {
+  .input-wrapper {
+    label {
+      padding-bottom: 3.5vw;
+    }
+  }
+}
+@import "responsive";

src/components/InputWrapper/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Input from './index';
+
+test('renders Input without crashing', () => {
+    const { baseElement } = render(<Input  label={'A Label'}/>);
+    expect(baseElement).toBeDefined();
+});

src/components/InputWrapper/index.tsx

@@ -0,0 +1,23 @@
+import React, {PropsWithChildren} from 'react'
+import './index.scss';
+
+interface Props extends PropsWithChildren<any> {
+	label: string
+	subtext?: string
+	error?: string
+	color?: string
+	rounded?: boolean
+}
+
+const InputWrapper: React.FC<Props> = ({  label, error, color, rounded, subtext, children }) => {
+	const wrapperClasses =  (color ? ' ' + color : '') + (rounded ? ' rounded' : '')
+	return (
+		<div className={'input-wrapper' + wrapperClasses}>
+			<label color={error ? 'danger' : 'dark'}>{error ? error : label}</label>
+			{children}
+			{subtext && <p className={'subtext'}>{subtext}</p>}
+		</div>
+	)
+}
+
+export default InputWrapper

src/components/InputWrapper/responsive.scss

@@ -0,0 +1,19 @@
+.input-wrapper {
+  @media screen and (min-width: 600px) {
+    margin: 48px 0 30px;
+  }
+  input {
+    @media screen and (min-width: 576px) {
+      --padding-start: 18px;
+    }
+  }
+}
+.plt-android {
+  .input-wrapper {
+    label {
+      @media screen and (min-width: 600px) {
+        padding-bottom: 21px;
+      }
+    }
+  }
+}

src/pages/Home/index.scss

@@ -1,25 +1,4 @@
-.home-splitpane {
-  max-width: 1024px;
-  margin: 0 auto;
-  --ion-safe-area-bottom: 15px;
-  .home-tabs-content.ion-page-hidden {
-    display: flex !important;
-  }
-  .home-tabs {
-    --border: 0;
-    padding: 1vw;
-    margin-bottom: var(--ion-safe-area-bottom);
-    .profile-image {
-      width: 8vw;
-      height: 8vw;
-    }
-    ion-icon {
-      font-size: 7.5vw;
-      &.primary-tab{
-        --color: var(--ion-color-primary);
-      }
-    }
-  }
+#home-page {
 }
 
 @import "./responsive";

src/pages/Home/index.tsx

@@ -8,9 +8,9 @@ interface HomeProps {
 const Home: React.FC<HomeProps> = (props) => {
 
     return (
-        <div>
+        <section id={"home-page"}>
             <h1>Home Page</h1>
-        </div>
+        </section>
     )
 }
 

src/pages/Home/responsive.scss

@@ -9,7 +9,7 @@
         height: 40px;
       }
 
-      ion-icon {
+      .icon {
         font-size: 38px;
       }
     }