From 719a986e5a6e9462a657ad56f25a1a49943d0f21 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas.braathen@usit.uio.no>
Date: Mon, 27 Sep 2021 12:40:42 +0200
Subject: [PATCH] Do some minor styling on header and form elements
---
frontend/package-lock.json | 11 +++++
frontend/package.json | 1 +
frontend/src/components/button/index.tsx | 15 +++----
frontend/src/components/form/input.tsx | 5 +++
frontend/src/components/page/page.tsx | 1 +
frontend/src/globalStyles.ts | 3 +-
frontend/src/routes/components/header.tsx | 13 ++++++
frontend/src/routes/register/index.tsx | 55 +++++++++++++++--------
frontend/src/styled.d.ts | 1 +
frontend/src/themes/main.ts | 3 +-
frontend/src/themes/uio.ts | 2 +-
11 files changed, 78 insertions(+), 32 deletions(-)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9098375d..6fcbc266 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 128d2575..841ab645 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 7054c370..3ec8e217 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 94e7332f..665c1d20 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 2d95a68c..f6043811 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 d1586384..d9e2d8f2 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 bb96b6b8..fe2c6f83 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 7bec75e2..9b2b8134 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 48495b58..ec784c05 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 a825157f..6c2d3601 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 8b1543fa..b036ca43 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'
--
GitLab