diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9098375dda16584e1f32f330e4c694c74d04c411..6fcbc2661954f35e964ab490d9ee773c949580f4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -31,6 +31,7 @@
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.1",
+ "typeface-roboto": "^1.1.13",
"typescript": "^4.4.2",
"web-vitals": "^1.1.2"
},
@@ -19924,6 +19925,11 @@
"is-typedarray": "^1.0.0"
}
},
+ "node_modules/typeface-roboto": {
+ "version": "1.1.13",
+ "resolved": "https://registry.npmjs.org/typeface-roboto/-/typeface-roboto-1.1.13.tgz",
+ "integrity": "sha512-YXvbd3a1QTREoD+FJoEkl0VQNJoEjewR2H11IjVv4bp6ahuIcw0yyw/3udC4vJkHw3T3cUh85FTg8eWef3pSaw=="
+ },
"node_modules/typescript": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.2.tgz",
@@ -37380,6 +37386,11 @@
"is-typedarray": "^1.0.0"
}
},
+ "typeface-roboto": {
+ "version": "1.1.13",
+ "resolved": "https://registry.npmjs.org/typeface-roboto/-/typeface-roboto-1.1.13.tgz",
+ "integrity": "sha512-YXvbd3a1QTREoD+FJoEkl0VQNJoEjewR2H11IjVv4bp6ahuIcw0yyw/3udC4vJkHw3T3cUh85FTg8eWef3pSaw=="
+ },
"typescript": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 128d25757b61173d229b390995604e000fd54e4f..841ab6456b7f37d7a94ce193ebe588ba1f5ee287 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.1",
+ "typeface-roboto": "^1.1.13",
"typescript": "^4.4.2",
"web-vitals": "^1.1.2"
},
diff --git a/frontend/src/components/button/index.tsx b/frontend/src/components/button/index.tsx
index 7054c37015069fd236de9a1312f0979977135538..3ec8e21776bb70d7c9423bd82c79ffd46c61bb18 100644
--- a/frontend/src/components/button/index.tsx
+++ b/frontend/src/components/button/index.tsx
@@ -3,17 +3,12 @@ import styled from 'styled-components/macro'
export const Button = styled.a`
display: inline-block;
cursor: pointer;
- border-radius: 3px;
- padding: 0.5rem 0;
- margin: 0.5rem 1rem;
- width: 11rem;
- background: black;
+ padding: 0.6rem 0.8rem;
+ background: ${({ theme }) => theme.colors.main};
color: white;
+ border-radius: 0.5rem;
border: 2px solid white;
- :hover {
- background: ${({ theme }) => theme.colors.secondary};
- color: black;
- }
- background: ${({ theme }) => theme.colors.main};
+ font-weight: 500;
+ font-size: 1rem;
`
export default Button
diff --git a/frontend/src/components/form/input.tsx b/frontend/src/components/form/input.tsx
index 94e7332f465c98a0fa1561ffb3756ed4c37c8846..665c1d2025d119ec177f288a5e21b626aa6c701f 100644
--- a/frontend/src/components/form/input.tsx
+++ b/frontend/src/components/form/input.tsx
@@ -20,6 +20,11 @@ export const StyledInput = styled.input`
padding: 0.625rem;
`
+export const StyledLabel = styled.label`
+ display: block;
+ font-size: 1rem;
+ padding: 0.3rem 0 0.3rem 0;
+`
function Input(props: InputProps) {
// eslint-disable-next-line react/jsx-props-no-spreading
const { register, name, errors, type, ...rest } = props
diff --git a/frontend/src/components/page/page.tsx b/frontend/src/components/page/page.tsx
index 2d95a68cc813c3a214ec92d67108016c3c431d13..f6043811aafc92892e62bffaaea9b34f6031011b 100644
--- a/frontend/src/components/page/page.tsx
+++ b/frontend/src/components/page/page.tsx
@@ -8,6 +8,7 @@ const StyledPage = styled.main`
display: block;
justify-content: space-between;
margin: 0 auto;
+ min-width: ${(props) => props.theme.appMinWidth};
max-width: ${(props) => props.theme.appMaxWidth};
padding: ${(props) =>
`0.5rem ${props.theme.horizontalPadding} 1rem ${props.theme.horizontalPadding}`};
diff --git a/frontend/src/globalStyles.ts b/frontend/src/globalStyles.ts
index d158638476ed156b47e87db0e1e30432cd210ae0..d9e2d8f2c47221a4b3f4b425c3374bcccb8a5b91 100644
--- a/frontend/src/globalStyles.ts
+++ b/frontend/src/globalStyles.ts
@@ -1,4 +1,5 @@
import { createGlobalStyle } from 'styled-components/macro'
+import 'typeface-roboto'
const GlobalStyle = createGlobalStyle`
html {
@@ -8,7 +9,7 @@ const GlobalStyle = createGlobalStyle`
body {
margin: 0;
min-height: 100vh;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git a/frontend/src/routes/components/header.tsx b/frontend/src/routes/components/header.tsx
index bb96b6b82cbf60461f09d60366b50d5187da2619..fe2c6f83aaea76af11c1866cd62447f63a9d9a7e 100644
--- a/frontend/src/routes/components/header.tsx
+++ b/frontend/src/routes/components/header.tsx
@@ -8,6 +8,15 @@ import LanguageSelector from '../../components/languageselector'
const MainWrapper = styled.div`
color: ${({ theme }) => theme.page.headerColor};
background-color: ${({ theme }) => theme.page.headerBackgroundColor};
+
+ a {
+ text-decoration: none;
+
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
+ }
`
const Main = styled.div`
@@ -35,7 +44,11 @@ const TitleBox = styled.div`
`
const Title = styled.div`
+ color: white;
+ white-space: nowrap;
+ text-decoration: none;
font-size: 2rem;
+ font-weight: bold;
`
const Description = styled.div`
diff --git a/frontend/src/routes/register/index.tsx b/frontend/src/routes/register/index.tsx
index 7bec75e26a99e9d4478534f68d2d2b80edfe0178..9b2b8134bf121460583a57f228d675206d61a76c 100644
--- a/frontend/src/routes/register/index.tsx
+++ b/frontend/src/routes/register/index.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
-import { StyledInput } from 'components/form/input'
+import { StyledInput, StyledLabel } from 'components/form/input'
import DateInput from 'components/dateinput'
import Button from 'components/button'
import Page from 'components/page'
@@ -25,7 +25,7 @@ export default function Register() {
first_name: data.first_name,
last_name: data.last_name,
date_of_birth: format(data.date_of_birth, 'yyyy-MM-dd'),
- national_id_number: data.national_id_number
+ national_id_number: data.national_id_number,
}
console.log('submitting', JSON.stringify(payload))
fetch('http://localhost:3000/api/ui/v1/register/', postJsonOpts(payload))
@@ -43,46 +43,63 @@ export default function Register() {
control,
handleSubmit,
// setValue,
- formState : {errors}
+ formState: { errors },
} = useForm<RegisterFormData>()
const onSubmit = handleSubmit(submit)
return (
<Page header="Register as a guest">
<form onSubmit={onSubmit}>
+ <StyledLabel htmlFor="firstName">{t('common:firstName')}</StyledLabel>
+ <StyledInput id="firstName" {...register(`first_name`)} />
+ <StyledLabel htmlFor="lastName">{t('common:lastName')}</StyledLabel>
<StyledInput
- {...register(`first_name`)}
- placeholder={t('common:firstName')}
- />
- <StyledInput
+ id="lastName"
{...register(`last_name`, {
- required: t('common:validation.lastNameRequired').toString()
- })}
- placeholder={t('common:lastName')}
- />
- {errors.last_name && <span>{errors.last_name.message}</span>}
- <StyledInput
- {...register("national_id_number", {
- required: t('common:validation.nationalIdNumberRequired').toString(),
- validate: isValidFnr
+ required: t('common:validation.lastNameRequired').toString(),
})}
- placeholder={t('nationalIdNumber')}
/>
- {errors.national_id_number && <StyledValidationError>{errors.national_id_number.message}</StyledValidationError>}
+ {errors.last_name && (
+ <StyledValidationError>
+ {errors.last_name.message}
+ </StyledValidationError>
+ )}
+ <StyledLabel htmlFor="dateOfBirth">
+ {t('common:dateOfBirth')}
+ </StyledLabel>
<Controller
name="date_of_birth"
control={control}
render={({ field }) => (
<DateInput
+ id="dateOfBirth"
customInput={<StyledInput />}
- placeholderText={t('common:dateOfBirth')}
onChange={(date) => field.onChange(date)}
selected={field.value}
/>
)}
/>
+ <StyledLabel htmlFor="nationalIdNumber">
+ {t('nationalIdNumber')}
+ </StyledLabel>
+ <StyledInput
+ id="nationalIdNumber"
+ {...register('national_id_number', {
+ required: t(
+ 'common:validation.nationalIdNumberRequired'
+ ).toString(),
+ validate: isValidFnr,
+ })}
+ />
+ {errors.national_id_number && (
+ <StyledValidationError>
+ {errors.national_id_number.message}
+ </StyledValidationError>
+ )}
+
{/* <Select name="gender" options={['female', 'male', 'other']} />
<Fnr name={t('common:fnr')} /> */}
+ <br />
<Button as="button" type="submit">
Submit
</Button>
diff --git a/frontend/src/styled.d.ts b/frontend/src/styled.d.ts
index 48495b580e0716d6d2d60d2ddc909a28bc6c856d..ec784c0509484cee447a50d34ca8896931236043 100644
--- a/frontend/src/styled.d.ts
+++ b/frontend/src/styled.d.ts
@@ -2,6 +2,7 @@ import 'styled-components/macro'
declare module 'styled-components' {
export interface DefaultTheme {
+ appMinWidth: string
appMaxWidth: string
borderRadius: string
colors: {
diff --git a/frontend/src/themes/main.ts b/frontend/src/themes/main.ts
index a825157f358144b69ff494c1e2d6b26e20490bea..6c2d360143d1640c6c9df70dd60fa396e86b2837 100644
--- a/frontend/src/themes/main.ts
+++ b/frontend/src/themes/main.ts
@@ -1,10 +1,11 @@
import { DefaultTheme } from 'styled-components/macro'
const mainTheme: DefaultTheme = {
+ appMinWidth: '60rem',
appMaxWidth: '110rem',
borderRadius: '9px',
colors: {
- main: 'hotPink',
+ main: 'black',
secondary: 'white',
dropDownMenuBackground: 'grey',
errorMessage: 'red'
diff --git a/frontend/src/themes/uio.ts b/frontend/src/themes/uio.ts
index 8b1543faf7429d98b6bbfd3fabe98f7762c9d1be..b036ca431a74c12420127079e0188f9f3dadbd7d 100644
--- a/frontend/src/themes/uio.ts
+++ b/frontend/src/themes/uio.ts
@@ -1,6 +1,6 @@
const uioTheme = {
colors: {
- main: 'hotPink',
+ main: '#18191C',
secondary: 'white',
dropDownMenuBackground: 'grey',
errorMessage: 'red'