Merge branch 'GREG-109_uib_theme_updates' into 'master'

GREG-109 Theme updates See merge request !163

Merge branch 'GREG-109_uib_theme_updates' into 'master'
GREG-109 Theme updates See merge request !163
a2e88357 · Tore.Brede · f3eba812 · 5dd2544c · a2e88357 · a2e88357
Commit a2e88357 authored 3 years ago by Tore.Brede
--- a/README.md
+++ b/README.md
@@ -58,6 +58,13 @@ There are two scripts for adding data to the database:

 where the former uses randomized data, and the latter uses specific data useful in combination with the frontend. See the respective files for how to use them.

+## Themes
+
+The application has three different themes: uio, uib and default. The default uses the palette found in Material UI,
+while uio and uib sets a color scheme that matches the institution.
+
+To set the theme used update REACT_APP_THEME in frontend/.env.
+
 ## Static type analysis

 Use [mypy](http://mypy-lang.org/) to run static type checks using type hints.

--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -11,6 +11,9 @@
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <title>Guest Registration</title>
  </head>
  <body>

--- a/frontend/src/components/button/index.tsx
+++ b/frontend/src/components/button/index.tsx
@@ -8,11 +8,7 @@ interface IHrefButton {

 function HrefButton({ to, children }: IHrefButton) {
  return (
-    <Button
-      variant="contained"
-      href={to}
-      sx={{ backgroundColor: 'theme.palette.secondary' }}
-    >
+    <Button variant="contained" href={to} color="secondary">
      {children}
    </Button>
  )

--- a/frontend/src/components/button/linebutton.tsx
+++ b/frontend/src/components/button/linebutton.tsx
@@ -8,7 +8,7 @@ interface IHrefButton {

 function HrefLineButton({ to, children }: IHrefButton) {
  return (
-    <Button href={to} sx={{ color: 'theme.palette.secondary' }}>
+    <Button href={to} color="secondary">
      {children}
    </Button>
  )

--- a/frontend/src/components/logobars/UiO.tsx
+++ b/frontend/src/components/logobars/UiO.tsx
@@ -23,7 +23,7 @@ function UiOLogoBar() {
  return (
    <Box
      sx={{
-        backgroundColor: (theme) => theme.greg.headerBackgroundColor,
+        backgroundColor: (theme) => theme.palette.primary.main,
        display: 'flex',
        justifyContent: 'center',
      }}

--- a/frontend/src/components/page/page.tsx
+++ b/frontend/src/components/page/page.tsx
@@ -6,7 +6,7 @@ import { styled } from '@mui/material/styles'
 import { Container } from '@mui/material'

 const StyledPageHeader = styled('h2')(({ theme }) => ({
-  color: theme.greg.h2TextColor,
+  color: theme.greg.textWhite,
  fontSize: '3rem',
  fontWeight: 'bold',
  margin: '1rem 0 1rem 0',

--- a/frontend/src/components/roleLine/index.tsx
+++ b/frontend/src/components/roleLine/index.tsx
@@ -26,6 +26,7 @@ const RoleLine = ({ role, pid }: RoleLineProps) => {
      <TableCell>
        <Button
          variant="contained"
+          color="secondary"
          component={Link}
          to={`/sponsor/guest/${pid}/roles/${role.id}`}
        >

--- a/frontend/src/hooks/useRoleTypes/index.tsx
+++ b/frontend/src/hooks/useRoleTypes/index.tsx
@@ -19,7 +19,7 @@ function useRoleTypes(): RoleTypeData[] {
        setRoleTypes(JSON.parse(result))
      })
      .catch((error) => {
-        console.error(error)
+        console.debug(error)
      })
  }


--- a/frontend/src/routes/components/footer.tsx
+++ b/frontend/src/routes/components/footer.tsx
@@ -8,29 +8,22 @@ import { reponsibleOrganization, responsibleOrganizationLink } from 'appConfig'
 import { getFooterLogo } from './logos'

 const FooterWrapper = styled('footer')(({ theme }) => ({
-  background: theme.greg.footerBackgroundColor,
+  background: theme.palette.primary.main,
  height: 'fit-content',
  padding: '0rem 3.5rem',
  marginTop: 'auto',
 }))

 const FooterSection = styled('section')({
-  // header: {
-  //  marginBottom: '0.5rem',
-  //  fontSize: '1.5rem',
-  // },
-
  paddingLeft: '1rem',
 })

 const ContentContainer = styled('div')(({ theme }) => ({
-  // width: 'fit-content',
  fontSize: '1.5rem',
-  color: theme.greg.footerTextColor,
+  color: theme.palette.primary.main,
  display: 'flex',
  flexWrap: 'nowrap',
  justifyContent: 'space-between',
-  // margin: '0 1rem',
  padding: '1rem 0rem 1rem 0',
 }))


--- a/frontend/src/routes/components/header.tsx
+++ b/frontend/src/routes/components/header.tsx
@@ -11,8 +11,8 @@ import UserInfo from 'routes/components/userInfo'
 import { getHeaderLogo } from './logos'

 const StyledHeader = styled('header')(({ theme }) => ({
-  color: theme.greg.h1TextColor,
-  backgroundColor: theme.greg.headerBackgroundColor,
+  color: theme.greg.textWhite,
+  backgroundColor: theme.palette.primary.main,

  a: {
    textDecoration: 'none',
@@ -41,7 +41,6 @@ const LogoContainer = styled('div')({

 const Menu = styled('div')({
  display: 'flex',
-  // listStyleType: 'none',
  flexDirection: 'row',
  alignItems: 'flex-end',
  fontSize: '1rem',
@@ -60,7 +59,6 @@ const Header = () => {
            sx={{
              paddingRight: '1.5rem',
              width: '7rem',
-              // minWidth: '10rem',
            }}
          >
            {getHeaderLogo()}

--- a/frontend/src/routes/components/logos/index.tsx
+++ b/frontend/src/routes/components/logos/index.tsx
 import { useTranslation } from 'react-i18next'
 import { appInst } from 'appConfig'
-import { ReactComponent as UiOLogoNo } from './uio-segl-full-neg-no.svg'
-import { ReactComponent as UiOLogoEn } from './uio-segl-full-neg-en.svg'
-import { ReactComponent as UiOAcronym } from './uio-logo-acronym-white.svg'
+import { ReactComponent as UiOLogoNo } from './uio/uio-segl-full-neg-no.svg'
+import { ReactComponent as UiOLogoEn } from './uio/uio-segl-full-neg-en.svg'
+import { ReactComponent as UiOAcronym } from './uio/uio-logo-acronym-white.svg'
+
+import { ReactComponent as UiBLogoNo } from './uib/UiBlogo_hvit_v.svg'
+import { ReactComponent as UiBLogoEn } from './uib/UiBlogo_Eng_white_left.svg'

 function getHeaderLogo() {
  switch (appInst) {
@@ -25,7 +28,10 @@ function getFooterLogo() {
      }
      return <UiOLogoNo />
    case 'uib':
-      return <></>
+      if (i18n.language === 'en') {
+        return <UiBLogoEn />
+      }
+      return <UiBLogoNo />
    default:
      return <></>
  }

--- a/frontend/src/routes/components/logos/uib/UiBlogo_Eng_white_left.svg
+++ b/frontend/src/routes/components/logos/uib/UiBlogo_Eng_white_left.svg
--- a/frontend/src/routes/components/logos/uib/UiBlogo_hvit_v.svg
+++ b/frontend/src/routes/components/logos/uib/UiBlogo_hvit_v.svg
--- a/frontend/src/routes/components/logos/uio-logo-acronym-white.svg
+++ b/frontend/src/routes/components/logos/uio-logo-acronym-white.svg
--- a/frontend/src/routes/components/logos/uio-segl-full-neg-en.svg
+++ b/frontend/src/routes/components/logos/uio-segl-full-neg-en.svg
--- a/frontend/src/routes/components/logos/uio-segl-full-neg-no.svg
+++ b/frontend/src/routes/components/logos/uio-segl-full-neg-no.svg
--- a/frontend/src/routes/components/overviewGuestButton.tsx
+++ b/frontend/src/routes/components/overviewGuestButton.tsx
@@ -49,9 +49,9 @@ export default function OverviewGuestButton(
            sx={{
              borderRadius: '2rem',
              borderStyle: 'solid',
-              borderColor: 'primary.main',
+              borderColor: 'secondary.main',
              fill: 'white',
-              backgroundColor: 'primary.main',
+              backgroundColor: 'secondary.main',
            }}
          />
        </IconButton>

--- a/frontend/src/routes/components/sponsorGuestButtons.tsx
+++ b/frontend/src/routes/components/sponsorGuestButtons.tsx
@@ -43,12 +43,12 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
              borderStyle: 'solid',
              borderColor: (theme: Theme) =>
                yourGuestsActive
-                  ? theme.palette.primary.main
+                  ? theme.palette.secondary.main
                  : theme.greg.deactivatedColor,
              fill: 'white',
              backgroundColor: (theme: Theme) =>
                yourGuestsActive
-                  ? theme.palette.primary.main
+                  ? theme.palette.secondary.main
                  : theme.greg.deactivatedColor,
            }}
          />
@@ -73,12 +73,12 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
              borderStyle: 'solid',
              borderColor: (theme: Theme) =>
                registerNewGuestActive
-                  ? theme.palette.primary.main
+                  ? theme.palette.secondary.main
                  : theme.greg.deactivatedColor,
              fill: 'white',
              backgroundColor: (theme: Theme) =>
                registerNewGuestActive
-                  ? theme.palette.primary.main
+                  ? theme.palette.secondary.main
                  : theme.greg.deactivatedColor,
            }}
          />

--- a/frontend/src/routes/components/sponsorInfoButtons.tsx
+++ b/frontend/src/routes/components/sponsorInfoButtons.tsx
@@ -38,9 +38,9 @@ export default function SponsorInfoButtons({
          sx={{
            borderRadius: '2rem',
            borderStyle: 'solid',
-            borderColor: (theme: Theme) => theme.palette.primary.main,
+            borderColor: (theme: Theme) => theme.palette.secondary.main,
            fill: 'white',
-            backgroundColor: (theme: Theme) => theme.palette.primary.main,
+            backgroundColor: (theme: Theme) => theme.palette.secondary.main,
          }}
        />
        <Box

--- a/frontend/src/routes/guest/register/index.tsx
+++ b/frontend/src/routes/guest/register/index.tsx
@@ -210,7 +210,8 @@ export default function GuestRegister() {
        {activeStep === Step.RegisterStep && (
          <Button
            data-testid="button-next"
-            sx={{ color: 'theme.palette.secondary', mr: 1 }}
+            color="secondary"
+            sx={{ mr: 1 }}
            onClick={handleNext}
          >
            {t('button.next')}
@@ -219,7 +220,9 @@ export default function GuestRegister() {

        {activeStep !== Step.SubmitSuccessStep && (
          <>
-            <Button onClick={handleCancel}>{t('button.cancel')}</Button>
+            <Button color="secondary" onClick={handleCancel}>
+              {t('button.cancel')}
+            </Button>

            {/* TODO This button is only for testing while developing */}
            <Button onClick={handleSave}>{t('button.save')}</Button>