Updated register page

src/pages/RegisterPage/Register.sass

@@ -0,0 +1,2 @@
+.back-button-text
+  font-size: 1rem

src/pages/RegisterPage/Register.tsx

@@ -1,34 +1,54 @@
-import { Button, Logo, Link, Page, Row, Column, Display, Padding } from '../../components'
+import './Register.sass'
-// import RegistrationForm from '../components/RegistrationForm/RegistrationForm'
+import { Logo, Link, Page, Row, Padding, Form, Combobox, Box } from '../../components'
+import { IoChevronBack } from 'solid-icons/io'
+import { Show, createSignal } from 'solid-js'
 
 export default () => {
+  const assessors = JSON.parse(sessionStorage.getItem('assessors')!)
+  const approvers = JSON.parse(sessionStorage.getItem('approvers')!)
+  const roles = ['ASSESSOR', 'APPROVER']
+
+  const [role, setRole] = createSignal('')
+  const [name, setName] = createSignal('')
+
   return (
     <>
       <Page alignment="column">
         <Padding left={4.75} right={4.75}>
-          <Display desktop tablet>
+          <Row content="split">
-            <Row content="split">
+            <Link to="/">
-              <Link to="/">
+              <Row content="left" gap={2}>
-                <Row content="left" gap={2}>
+                <Logo size={200} />
-                  <Logo size={200} />
+                <h1>OCBO e-Sign</h1>
-                  <h1>OCBO e-Sign</h1>
+              </Row>
-                </Row>
+            </Link>
-              </Link>
 
-              <Button label="Register" edges="curved" to="/main" />
+            <Link to="/">
+              <Row content="right">
+                <IoChevronBack size={45} />
+                <span class="back-button-text">Back</span>
+              </Row>
+            </Link>
+          </Row>
+
+          <Padding top={2} left={0} right={0}>
+            <Row>
+              <Box curved thickness={2} padding={2} color="#2f465cd7">
+                <Form>
+                  <h4>Role</h4>
+                  <Combobox options={roles} placeholder="Select your role" value={role()} onChange={setRole} />
+                  <Show when={role() === 'ASSESSOR'}>
+                    <h4>List of Assessors</h4>
+                    <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={setName} />
+                  </Show>
+                  <Show when={role() === 'APPROVER'}>
+                    <h4>List of Approvers</h4>
+                    <Combobox options={approvers} placeholder="Select your name" value={name()} onChange={setName} />
+                  </Show>
+                </Form>
+              </Box>
             </Row>
-
+          </Padding>
-            <Display mobile>
-              <Column content="center">
-                <Link to="/">
-                  <Logo size={120} />
-                  <h1>OCBO e-Sign</h1>
-                </Link>
-
-                <Button label="Register" edges="curved" to="/main" />
-              </Column>
-            </Display>
-          </Display>
         </Padding>
       </Page>
     </>