Merge pull request #381 from Organisasjonskollegiet/redesign-frontpage

Redesign frontpage
Organisasjonskollegiet · Aug 29, 2023 · 2aa25ca · 2aa25ca
2 parents 7e8c3a4 + 0f25733
commit 2aa25ca
Show file tree

Hide file tree

Showing 20 changed files with 199 additions and 90 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,8 @@
     "@chakra-ui/react": "^1.8.6",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
+    "@fontsource/lora": "^4.5.13",
+    "@fontsource/open-sans": "^4.5.14",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

diff --git a/src/components/common/LogoGrid.tsx b/src/components/common/LogoGrid.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import LogoLink from './links/LogoLink';
+import WrapStack from './layout/WrapStack';
+import JrcLogo from '../../static/JrC_logo.png';
+import NSOLogo from '../../static/NSO_logo.png';
+import VTLogo from '../../static/VTlogo.png';
+
+const LogoGrid = ()  => {
+    return (
+        <WrapStack breakpoint={950} spacing="0" justifyContent="space-between">
+          <LogoLink
+            href="https://organisasjonskollegiet.no/"
+            src="https://images.squarespace-cdn.com/content/v1/5c38b52f2487fdae852bdc70/1584098071586-CFU6NPF6HTRJEOLQMHC4/logoLarge.png"
+            alt="Organisasjonskollegiet"
+          />
+          <LogoLink href="https://velferdstinget.no/" src={VTLogo} alt="Velferdstinget" />
+          <LogoLink href="https://www.jrc.no" src={JrcLogo} alt="Junior Consulting" />
+          <LogoLink href="https://www.student.no" src={NSOLogo} alt="NSO" height="55px"/>
+        </WrapStack>
+    );
+  };
+
+export default LogoGrid
diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Box, Flex, HStack, IconButton, useDisclosure, Stack, Image, Button, Divider } from '@chakra-ui/react';
 import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons';
-import { darkblue } from '../styles/colors';
+import { hamburgerIconColor,navBar, offwhite, pageBackground} from '../styles/colors';
 import { NavLink } from 'react-router-dom';
 import { useNavigate } from 'react-router';
-import Logo from '../../static/logo.svg';
+import Logo from '../../static/blue_logo.svg';
 import UserMenu from './UserMenu';
 import { useAuth0 } from '@auth0/auth0-react';
 import { useLocation } from 'react-router';
@@ -14,10 +14,9 @@ const Navbar: React.FC = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
-    <Box bg="white" px="2rem" boxShadow="0px 4px 4px rgba(0, 0, 0, 0.05)" position="relative">
+    <Box bg={navBar} px="2rem" boxShadow="0px 4px 4px rgba(0, 0, 0, 0.05)" position="relative">
       <Flex as="nav" h="5.5rem" alignItems="center" justifyContent="space-between">
         <HomeButton />
-
         {!isAuthenticated ? (
           <LogInButton />
         ) : (
@@ -32,7 +31,6 @@ const Navbar: React.FC = () => {
           </>
         )}
       </Flex>
-
       {isOpen && <HamburgerBody onClose={onClose} />}
     </Box>
   );
@@ -56,7 +54,7 @@ const LogInButton = () => {
   };
 
   return (
-    <Button w="200px" size="md" colorScheme="orange" onClick={logIn}>
+    <Button w="200px" size="md" colorScheme="orangeButton" color={offwhite} onClick={logIn}>
       Logg inn
     </Button>
   );
@@ -88,8 +86,15 @@ const Links = ({ onClose }: { onClose?: () => void }) => {
   return (
     <>
       {links.map((page) => (
-        <NavLink style={{ fontWeight: 'bold' }} to={page.link} key={page.text}>
-          <Button w="100%" justifyContent="left" variant="link" onClick={onClose}>
+        <NavLink to={page.link} key={page.text} style={({isActive}) =>{
+          return {
+            borderRadius: "1em",
+            fontWeight: isActive ? 'bold' : 'semibold',
+            backgroundColor : isActive ? pageBackground : navBar, 
+            };
+          }}
+        >
+          <Button w="100%" h="20%" borderRadius="1em" justifyContent="left" variant="link" onClick={onClose}>
             {page.text}
           </Button>
         </NavLink>
@@ -109,9 +114,9 @@ const HamburgerTrigger = ({
 }) => {
   return (
     <IconButton
-      bg="white"
+      bg={navBar}
       size={'md'}
-      icon={isOpen ? <CloseIcon color={darkblue} boxSize="1em" /> : <HamburgerIcon color={darkblue} boxSize="1.5em" />}
+      icon={isOpen ? <CloseIcon color={hamburgerIconColor} boxSize="1em" /> : <HamburgerIcon color={hamburgerIconColor} boxSize="1.5em" />}
       aria-label={'Open Menu'}
       display={{ md: 'none' }}
       onClick={isOpen ? onClose : onOpen}

diff --git a/src/components/common/layout/PageContainer.tsx b/src/components/common/layout/PageContainer.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { Box } from '@chakra-ui/layout';
-import { offwhite } from '../../styles/colors';
+import { pageBackground } from '../../styles/colors';
 
 interface PageContainerProps {
   color?: string;
 }
 
 const PageContainer: React.FC<PageContainerProps> = ({ children, color }) => {
   return (
-    <Box w="100%" minH="calc(100vh - 5.5rem)" background={color || offwhite}>
+    <Box w="100%" minH="calc(100vh - 5.5rem)" background={color || pageBackground}>
       {children}
     </Box>
   );

diff --git a/src/components/common/links/DownloadFileLink.tsx b/src/components/common/links/DownloadFileLink.tsx
@@ -3,11 +3,12 @@ import { Link } from '@chakra-ui/react';
 
 interface DownloadFileLinkProps {
   href: string;
+  color: string;
 }
 
-const DownloadFileLink: React.FC<DownloadFileLinkProps> = ({ href, children }) => {
+const DownloadFileLink: React.FC<DownloadFileLinkProps> = ({ href,color, children }) => {
   return (
-    <Link href={href} textDecoration="underline" fontStyle="italic" download>
+    <Link href={href} textDecoration="underline" color={color} download>
       {children}
     </Link>
   );

diff --git a/src/components/common/links/ExternalLink.tsx b/src/components/common/links/ExternalLink.tsx
@@ -7,7 +7,7 @@ export interface ExternalLinkProps {
 
 const ExternalLink: React.FC<ExternalLinkProps> = ({ href, children }) => {
   return (
-    <Link href={href} textDecoration="underline" fontStyle="italic" isExternal>
+    <Link href={href} textDecoration="underline" fontWeight="bold" isExternal>
       {children}
     </Link>
   );

diff --git a/src/components/common/links/LogoLink.tsx b/src/components/common/links/LogoLink.tsx
@@ -2,18 +2,18 @@ import React from 'react';
 import ExternalLink, { ExternalLinkProps } from './ExternalLink';
 import { Image, ImageProps} from '@chakra-ui/react';
 
-const LogoLink = ({ href, src, alt, ...options }: ImageProps & ExternalLinkProps) => {
+const LogoLink = ({ href, src, alt, height="115px", ...options }: ImageProps & ExternalLinkProps) => {
     return (
       <ExternalLink href={href}>
         <Image
           src={src}
           alt={alt}
-          w="200px"
-          h="115px"
           objectFit="contain"
+          w="240px"
+          h={height}
           _hover={{ transform: 'scale(1.1)' }}
           {...options}
-        />
+        /> 
       </ExternalLink>
     );
   };

diff --git a/src/components/common/links/ModalLink.tsx b/src/components/common/links/ModalLink.tsx
@@ -1,7 +1,7 @@
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody } from '@chakra-ui/modal';
 import { useDisclosure, Link } from '@chakra-ui/react';
 import React from 'react';
-import { offwhite, darkblue } from '../../styles/colors';
+import { offwhite, darkblue, textOrange } from '../../styles/colors';
 
 interface ModalLinkProps {
   label: string;
@@ -13,7 +13,7 @@ const ModalLink: React.FC<ModalLinkProps> = ({ children, label, title, }) => {
 
   return (
     <>
-        <Link textDecoration="underline" fontStyle="italic" onClick={onOpen}>{label}</Link>
+        <Link color={textOrange} onClick={onOpen}>{label}</Link>
 
         <Modal isOpen={isOpen} onClose={onClose} size="xl">
         <ModalOverlay />

diff --git a/src/components/styles/colors.ts b/src/components/styles/colors.ts
@@ -5,3 +5,12 @@ export const offwhite = '#F9F9F9';
 export const green: (opacity?: number) => string = (opacity) => `rgba(30, 155, 80, ${opacity ?? 1})`;
 export const lightGray = '#C4C4C4';
 export const orgBlue = '#035e7b';
+
+export const textBlue = '#204F65';
+export const textGray = '#38464D';
+export const textOrange = '#D5673D';
+export const navBar = '#DEE9EE';
+// export const pageBackground = 'rgba(222, 233, 238, 0.5)';
+export const pageBackground = '#eef4f6';
+export const logInButtonOrange = '#D25B2D';
+export const hamburgerIconColor = '#265E78'
diff --git a/src/components/styles/theme.ts b/src/components/styles/theme.ts
@@ -1,7 +1,9 @@
 import { extendTheme } from '@chakra-ui/react';
 import { AlternativeConfig } from '../activeVotation/alternative/Alternative';
 import { MeetingInformationFormConfig } from '../manageMeeting/atoms/MeetingInformationForm';
-import { darkblue, lightblue, green } from './colors';
+import { darkblue, lightblue, green, logInButtonOrange, textBlue, textGray } from './colors';
+import "@fontsource/lora";
+import "@fontsource/open-sans"
 
 const theme = extendTheme({
   colors: {
@@ -10,9 +12,13 @@ const theme = extendTheme({
       300: '#8d99ab',
       400: '#718096',
     },
+    orangeButton : {
+      500 : logInButtonOrange
+    }
   },
   fonts: {
-    body: 'Helvetica',
+    heading : "'Lora', sans-serif",
+    body: "'Open Sans', sans-serif",
   },
   config: {
     initialColorMode: 'light',
@@ -31,6 +37,9 @@ const theme = extendTheme({
         },
         link: {
           py: '1rem',
+          fontSize : '22px', 
+          fontWeight: 'semibold', 
+          color: textGray
         },
         dark: {
           bg: 'gray.500',
@@ -58,20 +67,33 @@ const theme = extendTheme({
     },
     Text: {
       baseStyle: {
-        color: darkblue,
+        color: textGray,
+        fontSize: "18px",
+        fontWeight : "semibold",
+      },
+      variants: {
+        bodyHeader: {
+          fontSize: '24px',
+          fontWeight : "bold",
+          color: textBlue,
+         },
       },
     },
     Heading: {
       baseStyle: {
-        color: darkblue,
+        color: textBlue,
+        fontWeight : "bold",
       },
       variants: {
         h1: {
-          fontSize: '1.5rem',
+          fontSize: '3.0rem',
         },
+        mobile :{
+          fontSize: '2.0rem',
+        }
       },
     },
   },
 });
 
-export default theme;
+export default theme;
diff --git a/src/pages/AboutUs.tsx b/src/pages/AboutUs.tsx
@@ -1,61 +1,72 @@
-import { Heading, Text, VStack } from '@chakra-ui/react';
+import { ExternalLinkIcon } from '@chakra-ui/icons';
+import { Heading, Text, VStack,Box } from '@chakra-ui/react';
 import React from 'react';
 import PageContainer from '../components/common/layout/PageContainer';
-import WrapStack from '../components/common/layout/WrapStack';
 import DownloadFileLink from '../components/common/links/DownloadFileLink';
 import ExternalLink from '../components/common/links/ExternalLink';
-import LogoLink from '../components/common/links/LogoLink';
+import LogoGrid from '../components/common/LogoGrid';
 import ModalLink from '../components/common/links/ModalLink';
-import JrcLogo from '../static/JrC.png';
-import { ExternalLinkIcon } from '@chakra-ui/icons';
+import { textOrange } from '../components/styles/colors';
 
 const AboutUs: React.FC = () => {
   return (
     <PageContainer>
       <VStack py="10vh" alignItems="left" w="min(90%, 800px)" mx="auto" spacing={5}>
-        <Heading>Om Vedtatt.no</Heading>
+        <Heading variant="h1">
+          Om vedtatt.no
+        </Heading>
         <Text>
           Vedtatt.no er et digitalt stemmesystem utviklet av Organisasjonskollegiet og Junior Consulting med støtte fra
           Velferdstinget i Gjøvik, Ålesund og Trondheim. Målet er at frivillige organisasjoner skal kunne gjennomføre
           effektive og gode demokratiske prosesser. Informasjon om hvordan vi håndterer brukeren din, anonymitet og selvregistrering kan 
-          finnes <DownloadFileLink href={process.env.PUBLIC_URL + "/privacy-and-safety.pdf" }>her</DownloadFileLink>.
+          finnes <DownloadFileLink color={textOrange} href={process.env.PUBLIC_URL + "/privacy-and-safety.pdf" }>her</DownloadFileLink>.
+        </Text>
+        <Text>
+          Vi bruker <VotationInformation label={"følgende"}/> flertallsformer.
         </Text>
+
         <Text>
-          <ExternalLink href="https://organisasjonskollegiet.no/">Organisasjonskollegiet</ExternalLink> er en gjeng med
-          lang erfaring fra frivilligheten og studentpolitikken ved NTNU som hjelper organisasjoner i Trondheim med
+          <Text variant='bodyHeader'>
+            <ExternalLink href="https://organisasjonskollegiet.no/">Organisasjonskollegiet</ExternalLink>
+          </Text>
+          Organisasjonskollegiet er en gjeng med lang erfaring fra frivilligheten og studentpolitikken ved NTNU som hjelper organisasjoner i Trondheim med
           utfordringer som ordstyring, utforming av vedtekter, sakspapirer, og lignende. Etter å ha ordstyrt en lang
           rekke årsmøter, generalforsamlinger og andre møter merket vi et stort behov for et godt, gratis digitalt
           stemmeverktøy som kunne dekke behovene til organisasjonene vi støttet.
         </Text>
+
         <Text>
-          <ExternalLink href="https://velferdstinget.no/">Velferdstinget i Gjøvik, Ålesund og Trondheim</ExternalLink>{' '}
-          er et studentpolitisk organ som har som oppgave å ivareta og bedre velferdstilbud for studentene ved deres
+          <Text variant='bodyHeader'>
+            <ExternalLink href="https://velferdstinget.no/">Velferdstinget i Gjøvik, Ålesund og Trondheim</ExternalLink>
+          </Text>
+          Velferdstinget i Gjøvik, Ålesund og Trondheim er et studentpolitisk organ som har som oppgave å ivareta og bedre velferdstilbud for studentene ved deres
           studiesteder. Velferdstinget valgte å støtte prosjektet økonomisk slik at vi hadde muligheten til å utvikle et
           profesjonelt verktøy som kunne sørge for at organisasjoner tilknyttet deres studiesteder skal kunne
           gjennomføre effektive, gode valg i deres demokratiske møter.
         </Text>
+
         <Text>
-          <ExternalLink href="https://www.jrc.no">Junior Consulting</ExternalLink> er et studentkonsulenthus bestående
+          <Text variant='bodyHeader'>
+            <ExternalLink href="https://www.jrc.no">Junior Consulting</ExternalLink>
+          </Text>
+          Junior Consulting er et studentkonsulenthus bestående
           av studenter fra mange forskjellige studieprogram ved NTNU. De har stått for design og utvikling av løsningen
           og har hjulpet oss i Organisasjonskollegiet med å omforme vår organisasjonskunnskap til produktutvikling.
         </Text>
         <Text>
-          Vi bruker <VotationInformation label={"følgende"}/> flertallsformer.
+          <Text variant="bodyHeader">
+            <ExternalLink href="https://www.student.no">Norsk Studentorganisasjon</ExternalLink>
+          </Text>
+          Norsk studentorganisasjon er en nasjonal interesseorganisasjon 
+          for mange av studentdemokratiene ved norske universiteter og høyskoler. 
+          Norsk studentorganisasjon har til oppgave å ivareta og fremme studentenes interesser og rettigheter, 
+          fremme engasjement for nasjonale og internasjonale utdanningssaker blant studentene samt å representere sine medlemslag. 
+          Norsk studentorganisasjon er partipolitisk uavhengig.
         </Text>
-        <WrapStack breakpoint={800} spacing="0" justifyContent="space-between">
-          <LogoLink
-            href="https://organisasjonskollegiet.no/"
-            src="https://images.squarespace-cdn.com/content/v1/5c38b52f2487fdae852bdc70/1584098071586-CFU6NPF6HTRJEOLQMHC4/logoLarge.png"
-            alt="Organisasjonskollegiet"
-          />
-          <LogoLink
-            href="https://velferdstinget.no/"
-            src="https://velferdstinget.no/static/VTlogo.svg"
-            alt="Velferdstinget"
-          />
-          <LogoLink href="https://www.jrc.no" src={JrcLogo} alt="Junior Consulting" />
-        </WrapStack>
       </VStack>
+      <Box mx="100" pb="50">
+        <LogoGrid/>
+      </Box>
     </PageContainer>
   );
 };