From ca0789756bb87a21ac2e870ec61ecf485a9dc348 Mon Sep 17 00:00:00 2001
From: Kamile Vainiute <kamile@igem.org>
Date: Sat, 24 Jul 2021 17:21:32 +0300
Subject: [PATCH] text insertion refactoring and style updates
---
src/assets/text/landing.ts | 29 +++++
src/assets/text/modules.ts | 61 ++++++++++
.../Navbar/links.ts => assets/text/navbar.ts} | 0
src/components/Button/Button.tsx | 8 +-
src/components/Carousel/Carousel.styles.css | 6 +
src/components/Carousel/Carousel.tsx | 10 +-
src/components/Carousel/components/Arrow.tsx | 64 +++++++++++
src/components/Carousel/components/index.ts | 1 +
.../App/components/Footer/Footer.tsx | 2 +-
.../App/components/Navbar/Navbar.tsx | 15 ++-
src/containers/Landing/Landing.tsx | 36 +++---
src/containers/Landing/Quotes/Quotes.tsx | 105 ++++++++++--------
tailwind.config.js | 3 +-
13 files changed, 265 insertions(+), 75 deletions(-)
create mode 100644 src/assets/text/landing.ts
create mode 100644 src/assets/text/modules.ts
rename src/{containers/App/components/Navbar/links.ts => assets/text/navbar.ts} (100%)
create mode 100644 src/components/Carousel/Carousel.styles.css
create mode 100644 src/components/Carousel/components/Arrow.tsx
create mode 100644 src/components/Carousel/components/index.ts
diff --git a/src/assets/text/landing.ts b/src/assets/text/landing.ts
new file mode 100644
index 0000000..b3ad212
--- /dev/null
+++ b/src/assets/text/landing.ts
@@ -0,0 +1,29 @@
+import { Module } from './modules'
+
+export const about = {
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+}
+
+export const quotes = [
+ {
+ img: 'https://static.igem.io/academy/speakers pictures/pamela-silver.png',
+ modules: [Module.SYNBIO],
+ quote: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.',
+ name: 'Pamela Silver',
+ jobTitle: 'Title, profession'
+ },
+ {
+ img: 'https://static.igem.io/academy/speakers pictures/pamela-silver.png',
+ modules: [Module.SYNBIO, Module.ENTREPRENEURSHIP, Module.HP, Module.BIOSAFETY, Module.FRAMEWORK],
+ quote: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.',
+ name: 'Pamela Silver',
+ jobTitle: 'Title, profession'
+ },
+ {
+ img: 'https://static.igem.io/academy/speakers pictures/pamela-silver.png',
+ modules: [Module.BIOSAFETY],
+ quote: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.',
+ name: 'Pamela Silver',
+ jobTitle: 'Title, profession'
+ }
+]
diff --git a/src/assets/text/modules.ts b/src/assets/text/modules.ts
new file mode 100644
index 0000000..f130e8b
--- /dev/null
+++ b/src/assets/text/modules.ts
@@ -0,0 +1,61 @@
+export enum Module {
+ FRAMEWORK, SYNBIO, HP, BIOSAFETY, ENTREPRENEURSHIP
+}
+
+interface ModuleProps {
+ module: Module
+ color: string
+ title: string
+ img: string
+ url: string
+}
+
+// colors: {
+// white: '#FEFEFE',
+// blue: '#415CA7',
+// green: '#41B28C',
+// black: '#2D2D2D',
+// gray: '#2D2D2D',
+// pink: '#E8486C',
+// violet: '#785FA6'
+// }
+
+export const modules: ModuleProps[] = [
+ {
+ module: Module.FRAMEWORK,
+ color: 'pink',
+ title: 'Design as a framework',
+ img: '',
+ url: 'design-framework'
+ },
+ {
+ module: Module.SYNBIO,
+ color: 'violet',
+ title: 'Synthetic biology by design',
+ img: '',
+ url: 'synthetic-biology-design'
+ },
+ {
+ module: Module.HP,
+ color: 'blue',
+ title: 'Human practices & social impact',
+ img: '',
+ url: 'human-practices'
+ },
+ {
+ module: Module.BIOSAFETY,
+ color: 'babyBlue',
+ title: 'Biosafety & biosecurity',
+ img: '',
+ url: 'biosafety'
+ },
+ {
+ module: Module.ENTREPRENEURSHIP,
+ color: 'green',
+ title: 'Entrepreneurship & innovation',
+ img: '',
+ url: 'entrepreneurship'
+ }
+]
+
+export const getModuleInfoByType = (moduleType: Module): ModuleProps | undefined => modules.find((module) => module.module === moduleType)
diff --git a/src/containers/App/components/Navbar/links.ts b/src/assets/text/navbar.ts
similarity index 100%
rename from src/containers/App/components/Navbar/links.ts
rename to src/assets/text/navbar.ts
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index dc6d1a5..5279183 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -18,20 +18,20 @@ interface ButtonProps {
variant: ButtonVariant
type: ButtonType
classes?: string
- value: string
+ value: string | JSX.Element
onClick?: () => void
link?: string
}
-const mainClasses = clsx('font-medium text-lg py-2 px-10 my-2')
+const mainClasses = clsx('font-medium text-lg my-2')
const colourful = clsx(
- 'bg-gradient-to-r from-pink via-violet to-green border-2'
+ 'bg-gradient-to-r from-pink via-violet to-green border-2 py-2 px-10'
)
const getVariantClass = (variant: ButtonVariant): string => {
switch (variant) {
case ButtonVariant.COLOURFUL:
- return clsx(colourful, 'rounded-xl')
+ return clsx(colourful, 'rounded-2xl')
case ButtonVariant.COLOURFUL_ROUND:
return clsx(colourful, 'rounded-full')
case ButtonVariant.SIMPLE:
diff --git a/src/components/Carousel/Carousel.styles.css b/src/components/Carousel/Carousel.styles.css
new file mode 100644
index 0000000..bd4c8ff
--- /dev/null
+++ b/src/components/Carousel/Carousel.styles.css
@@ -0,0 +1,6 @@
+.slider-wrapper {
+ width: calc(100% - 10rem) !important;
+}
+.carousel .slide img[alt='quote-icon'] {
+ width: 2rem !important;
+}
\ No newline at end of file
diff --git a/src/components/Carousel/Carousel.tsx b/src/components/Carousel/Carousel.tsx
index 93a0884..a444c26 100644
--- a/src/components/Carousel/Carousel.tsx
+++ b/src/components/Carousel/Carousel.tsx
@@ -1,6 +1,9 @@
import React, { ReactChild } from 'react'
import 'react-responsive-carousel/lib/styles/carousel.min.css' // requires a loader
import { Carousel as CarouselComponent } from 'react-responsive-carousel'
+import Arrow from './components'
+import { ArrowSide } from './components/Arrow'
+import './Carousel.styles.css'
interface CarouselProps {
children: ReactChild[]
@@ -10,13 +13,18 @@ const Carousel = (props: CarouselProps): JSX.Element => {
const { children } = props
return (
<CarouselComponent
- autoPlay
infiniteLoop
showIndicators={false}
showStatus={false}
interval={8000}
transitionTime={1000}
showThumbs={false}
+ renderArrowNext={(clickHandler) => (
+ <Arrow onClick={clickHandler} side={ArrowSide.RIGHT} />
+ )}
+ renderArrowPrev={(clickHandler) => (
+ <Arrow onClick={clickHandler} side={ArrowSide.LEFT} />
+ )}
>
{children}
</CarouselComponent>
diff --git a/src/components/Carousel/components/Arrow.tsx b/src/components/Carousel/components/Arrow.tsx
new file mode 100644
index 0000000..e6ea78b
--- /dev/null
+++ b/src/components/Carousel/components/Arrow.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import Button from '../../Button'
+import { ButtonType, ButtonVariant } from '../../Button/Button'
+import clsx from 'clsx'
+
+interface ArrowProps {
+ onClick: () => void
+ side: ArrowSide
+}
+
+export enum ArrowSide {
+ LEFT,
+ RIGHT
+}
+
+const Arrow = (props: ArrowProps): JSX.Element => {
+ const { onClick, side } = props
+ return (
+ <Button
+ classes={clsx(
+ 'absolute z-2 min-h-100 inset-y-0',
+ side === ArrowSide.LEFT ? 'left-0' : 'right-0'
+ )}
+ type={ButtonType.BUTTON}
+ variant={ButtonVariant.SIMPLE}
+ onClick={onClick}
+ value={
+ side === ArrowSide.LEFT ? (
+ <svg
+ xmlns='http://www.w3.org/2000/svg'
+ className='h-12 w-12'
+ fill='none'
+ viewBox='0 0 24 24'
+ stroke='currentColor'
+ >
+ <path
+ strokeLinecap='round'
+ strokeLinejoin='round'
+ strokeWidth={2}
+ d='M15 19l-7-7 7-7'
+ />
+ </svg>
+ ) : (
+ <svg
+ xmlns='http://www.w3.org/2000/svg'
+ className='h-12 w-12'
+ fill='none'
+ viewBox='0 0 24 24'
+ stroke='currentColor'
+ >
+ <path
+ strokeLinecap='round'
+ strokeLinejoin='round'
+ strokeWidth={2}
+ d='M9 5l7 7-7 7'
+ />
+ </svg>
+ )
+ }
+ />
+ )
+}
+
+export default Arrow
diff --git a/src/components/Carousel/components/index.ts b/src/components/Carousel/components/index.ts
new file mode 100644
index 0000000..4d50cb3
--- /dev/null
+++ b/src/components/Carousel/components/index.ts
@@ -0,0 +1 @@
+export { default } from './Arrow'
diff --git a/src/containers/App/components/Footer/Footer.tsx b/src/containers/App/components/Footer/Footer.tsx
index 9a196c2..382e0fa 100644
--- a/src/containers/App/components/Footer/Footer.tsx
+++ b/src/containers/App/components/Footer/Footer.tsx
@@ -4,7 +4,7 @@ import { ButtonType, ButtonVariant } from '../../../../components/Button/Button'
const Footer = (): JSX.Element => {
return (
- <div className='flex justify-between'>
+ <div className='flex justify-between px-5'>
<Button
variant={ButtonVariant.SIMPLE}
type={ButtonType.EXTERNAL_LINK}
diff --git a/src/containers/App/components/Navbar/Navbar.tsx b/src/containers/App/components/Navbar/Navbar.tsx
index ea9fa38..647fc14 100644
--- a/src/containers/App/components/Navbar/Navbar.tsx
+++ b/src/containers/App/components/Navbar/Navbar.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import { Link } from 'react-router-dom'
-import { links } from './links'
+import { links } from '../../../../assets/text/navbar'
import Button from '../../../../components/Button'
import { ButtonType, ButtonVariant } from '../../../../components/Button/Button'
@@ -8,7 +8,7 @@ const NavLink = (props: { link: string, name: string }): JSX.Element => {
const { name, link } = props
return (
<li>
- <Link to={link} className='text-lg font-light'>
+ <Link to={link} className='text-lg lg:text-2xl font-light px-3'>
{name}
</Link>
</li>
@@ -19,13 +19,18 @@ const Navbar = (): JSX.Element => {
return (
<div className='absolute w-full flex justify-between py-5 px-16 items-center'>
<Button
- classes='h-24 w-1/3 bg-white bg-opacity-10 rounded-lg'
+ classes='md:w-1/5 w-1/3'
variant={ButtonVariant.SIMPLE}
type={ButtonType.LINK}
link='/'
- value=''
+ value={
+ <img
+ src='https://static.igem.io/academy/main-logo-white.svg'
+ alt='igem-academy-logo'
+ />
+ }
/>
- <ul className='flex justify-between text-white w-1/2'>
+ <ul className='flex justify-between text-white w-2/3 md:w-1/2'>
{links.map((link) => (
<NavLink key={link.name} {...link} />
))}
diff --git a/src/containers/Landing/Landing.tsx b/src/containers/Landing/Landing.tsx
index 8e2e35c..d427efd 100644
--- a/src/containers/Landing/Landing.tsx
+++ b/src/containers/Landing/Landing.tsx
@@ -1,12 +1,20 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
import Button from '../../components/Button'
import { ButtonType, ButtonVariant } from '../../components/Button/Button'
import Quotes from './Quotes'
+import { about } from '../../assets/text/landing'
const Landing = (): JSX.Element => {
+ const infoDivRef = useRef<HTMLDivElement>(null)
+ const [infoDivImgHeight, setInfoDivImgHeight] = useState<string | undefined>()
+ useEffect(() => {
+ if (infoDivRef.current != null) {
+ setInfoDivImgHeight(`${infoDivRef.current.clientHeight}px`)
+ }
+ }, [])
return (
<div>
- <div className='w-screen h-screen flex items-center justify-center flex-col text-6xl bg-speakers bg-center bg-no-repeat bg-cover'>
+ <div className='w-screen h-screen flex items-center justify-center flex-col text-6xl bg-speakers bg-center bg-repeat bg-contain'>
<div className='text-center pb-20'>
<h2 className='font-light my-3'>Your journey to</h2>
<h1>#DesignWithBiology</h1>
@@ -22,20 +30,12 @@ const Landing = (): JSX.Element => {
classes='text-2xl'
/>
</div>
- <div className='flex py-24 px-20 max-w-screen-xl mx-auto justify-between'>
- <div className='w-1/2'>
+ <div className='flex py-24 px-20 max-w-screen-xl mx-auto justify-between items-center'>
+ <div className='w-1/2' ref={infoDivRef}>
<h3 className='font-light text-2xl'>
About <span className='font-bold'>iGEM Academy</span>
</h3>
- <p className='font-sourceSansPro text-sm my-5'>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
- culpa qui officia deserunt mollit anim id est laborum.
- </p>
+ <p className='font-sourceSansPro text-sm my-5'>{about.description}</p>
<Button
variant={ButtonVariant.COLOURFUL_ROUND}
type={ButtonType.LINK}
@@ -43,7 +43,15 @@ const Landing = (): JSX.Element => {
link='/about'
/>
</div>
- <div className='h-52 w-1/3 bg-white bg-opacity-10 rounded-lg ml-10' />
+ <img
+ src='https://static.igem.io/academy/academy monogram.png'
+ alt='academy'
+ style={{
+ height: infoDivImgHeight,
+ minHeight: '150px',
+ maxHeight: '250px'
+ }}
+ />
</div>
<div className='bg-gradient bg-center bg-no-repeat bg-cover py-10'>
<h2 className='font-light text-center text-2xl '>
diff --git a/src/containers/Landing/Quotes/Quotes.tsx b/src/containers/Landing/Quotes/Quotes.tsx
index fc052f5..fba28c8 100644
--- a/src/containers/Landing/Quotes/Quotes.tsx
+++ b/src/containers/Landing/Quotes/Quotes.tsx
@@ -1,26 +1,65 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
import Carousel from '../../../components/Carousel'
+import { quotes } from '../../../assets/text/landing'
+import clsx from 'clsx'
+import { getModuleInfoByType, Module } from '../../../assets/text/modules'
interface QuoteProps {
- photoUrl: string
+ img: string
quote: string
name: string
- title: string
- tag: string
+ jobTitle: string
+ modules: Module[]
}
const Quote = (props: QuoteProps): JSX.Element => {
- const { quote, name, tag, title } = props
+ const { quote, name, jobTitle, img, modules } = props
+ const quoteRef = useRef<HTMLDivElement>(null)
+ const [quoteImgHeight, setQuoteImgHeight] = useState<string | undefined>()
+ useEffect(() => {
+ if (quoteRef.current != null) {
+ setQuoteImgHeight(`${quoteRef.current.clientHeight + 100}px`)
+ }
+ }, [])
+ const modulesInfo = modules
+ .map((module) => getModuleInfoByType(module))
+ .map((module) => ({ color: module?.color, value: module?.title }))
return (
- <div className='flex items-center'>
- <div className='h-64 w-1/2 bg-white bg-opacity-10 rounded-lg mx-24' />
- <div className='w-1/2 text-left'>
- <p className='font-normal text-xs bg-violet rounded-full w-max px-5 py-1'>
- {tag}
- </p>
- <p className='font-raleway font-extralight text-lg my-3'>{quote}</p>
- <h3 className='font-bold text-xl'>{name}</h3>
- <p className='font-raleway font-extralight text-sm'>{title}</p>
+ <div className='flex items-center justify-around'>
+ <img
+ src={img}
+ alt={`quote-${name}`}
+ style={{
+ height: quoteImgHeight,
+ minHeight: '150px',
+ maxHeight: '400px',
+ width: 'auto'
+ }}
+ />
+ <div className='w-1/2 text-left' ref={quoteRef}>
+ <div className='ml-12 flex flex-wrap'>
+ {modulesInfo.map((module, index) => (
+ <p
+ key={`${name}-${module.value ?? index}`}
+ className={clsx(
+ 'font-normal text-xs rounded-full w-max px-5 py-1 mr-2 mb-2',
+ `bg-${module.color ?? 'black'}`
+ )}
+ >
+ {module.value}
+ </p>
+ ))}
+ </div>
+ <div className='flex items-start my-3'>
+ <img
+ src='https://static.igem.io/academy/quote.svg'
+ alt='quote-icon'
+ className='w-8 mr-4'
+ />
+ <p className='font-raleway font-extralight text-lg'>{quote}</p>
+ </div>
+ <h3 className='font-bold text-xl ml-12'>{name}</h3>
+ <p className='font-raleway font-extralight text-sm ml-12'>{jobTitle}</p>
</div>
</div>
)
@@ -29,41 +68,9 @@ const Quote = (props: QuoteProps): JSX.Element => {
const Quotes = (): JSX.Element => {
return (
<Carousel>
- <Quote
- name='John Doe'
- photoUrl=''
- quote='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.'
- tag='Synthetic biology by design'
- title='Title, profession'
- />
- <Quote
- name='John Doe'
- photoUrl=''
- quote='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.'
- tag='Synthetic biology by design'
- title='Title, profession'
- />
- <Quote
- name='John Doe'
- photoUrl=''
- quote='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.'
- tag='Synthetic biology by design'
- title='Title, profession'
- />
- <Quote
- name='John Doe'
- photoUrl=''
- quote='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.'
- tag='Synthetic biology by design'
- title='Title, profession'
- />
- <Quote
- name='John Doe'
- photoUrl=''
- quote='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.'
- tag='Synthetic biology by design'
- title='Title, profession'
- />
+ {quotes.map((quote) => (
+ <Quote key={`quote-${quote.name}`} {...quote} />
+ ))}
</Carousel>
)
}
diff --git a/tailwind.config.js b/tailwind.config.js
index 6df9543..d6b8b5f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,7 +16,8 @@ module.exports = {
black: '#2D2D2D',
gray: '#2D2D2D',
pink: '#E8486C',
- violet: '#785FA6'
+ violet: '#785FA6',
+ babyBlue: '#ACB4DC'
},
},
fontFamily: {
--
GitLab