diff --git a/client/src/components/Carousel/Carousel.js b/client/src/components/Carousel/Carousel.js index 8ef1edfc..db8d2249 100644 --- a/client/src/components/Carousel/Carousel.js +++ b/client/src/components/Carousel/Carousel.js @@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react' import Image from 'next/image' import { useNextSanityImage } from 'next-sanity-image' import styled from 'styled-components' -import { Row, Col } from 'react-bootstrap' import Gravatar from 'react-gravatar' import Slider from 'react-slick' import { rgba } from 'polished' @@ -308,20 +307,16 @@ export const Carousel = ({ content, coworker = false }) => { } return ( - - - - {content.map((person, i) => { - const active = activeSlide === i - return coworker ? ( - - ) : ( - - ) - })} - - - + + {content.map((person, i) => { + const active = activeSlide === i + return coworker ? ( + + ) : ( + + ) + })} + ) } diff --git a/client/src/components/ContentCard/ContentCard.js b/client/src/components/ContentCard/ContentCard.js index c10476dd..fc3a0e61 100644 --- a/client/src/components/ContentCard/ContentCard.js +++ b/client/src/components/ContentCard/ContentCard.js @@ -1,7 +1,6 @@ +import clsx from 'clsx' import React from 'react' -import { Col } from 'react-bootstrap' import styled from 'styled-components' -import clsx from 'clsx' import { Box, Typography } from '../Core' @@ -16,10 +15,7 @@ const StyledBox = styled(Box)` ` export const ContentCard = ({ dark = false, className, title, ...rest }) => ( - ( {title} - + ) diff --git a/client/src/components/Footer/Footer.js b/client/src/components/Footer/Footer.js index 7b5e8f0f..a8cb88db 100644 --- a/client/src/components/Footer/Footer.js +++ b/client/src/components/Footer/Footer.js @@ -1,10 +1,9 @@ -import React from 'react' -import { Row, Col } from 'react-bootstrap' import clsx from 'clsx' +import React from 'react' import { Box, Typography } from '../Core' +import { Container, Flex } from '../Layout' import { Logo } from '../Logo' -import { Container } from '../Layout' const FooterList = ({ children, className }) => { return ( @@ -19,221 +18,206 @@ export const Footer = ({ isDark = true, content }) => { diff --git a/client/src/components/Layout/Flex.js b/client/src/components/Layout/Flex.js new file mode 100644 index 00000000..1486588d --- /dev/null +++ b/client/src/components/Layout/Flex.js @@ -0,0 +1,48 @@ +import clsx from 'clsx' +import React, { Children } from 'react' + +export const Flex = ({ distance, className, children }) => { + return ( +
*]:tw-flex-1' + )} + > + {children} +
+ ) +} + +export const FlexRow = ({ distance, className, children }) => { + return ( +
*]:tw-flex-1' + )} + > + {children} +
+ ) +} + +export const FlexFixedCol = ({ distance, className, children }) => { + const colAmount = Children.toArray(children).length + console.log(colAmount) + return ( +
'tw-flex-col lg:tw-flex-row ', + '[&>*]:tw-w-1/3 [&>*]:tw-flex-initial', + 'tw-flex' + )} + > + {children} +
+ ) +} diff --git a/client/src/components/Layout/index.js b/client/src/components/Layout/index.js index c68e344c..82c49d93 100644 --- a/client/src/components/Layout/index.js +++ b/client/src/components/Layout/index.js @@ -1,2 +1,3 @@ export { Container } from './Container' +export { Flex, FlexFixedCol, FlexRow } from './Flex' export { Layout } from './Layout' diff --git a/client/src/features/About/CTA.js b/client/src/features/About/CTA.js index 73eb2a4c..083f3123 100644 --- a/client/src/features/About/CTA.js +++ b/client/src/features/About/CTA.js @@ -1,7 +1,6 @@ import React from 'react' import Image from 'next/image' import styled from 'styled-components' -import { Row, Col } from 'react-bootstrap' import { Section, Box, Typography, CTALink } from '../../components/Core' import imgOval from '../../assets/image/svg/l1-cta-oval.svg' @@ -35,21 +34,19 @@ export const CTA = ({ content }) => ( - - - - - - {content.title} - - - - - + +
+ + + {content.title} + + + +
diff --git a/client/src/features/About/Content.js b/client/src/features/About/Content.js index 4a11c7f8..a53f602a 100644 --- a/client/src/features/About/Content.js +++ b/client/src/features/About/Content.js @@ -1,67 +1,37 @@ -import React from 'react' import Image from 'next/image' -import styled from 'styled-components' -import { Row, Col } from 'react-bootstrap' +import React from 'react' -import { Section, Box, Typography } from '../../components/Core' +import { Section, Typography } from '../../components/Core' +import { Container, Flex } from '../../components/Layout' import { urlFor } from '../../utils/helpers' -import { Container } from '../../components/Layout' - -const ContentImg = styled(Box)` - box-shadow: ${({ theme }) => `0 42px 54px ${theme.colors.shadow}`}; - border-radius: 10px; - overflow: hidden; - height: 100%; -` export const Content = ({ content }) => ( <>
- - - {content.section.title} - - - - - - + + {content.section.title} + + + {content.layoutImages.map((image, index) => { - if (index % 2 == 0) { - return ( - - -
- {image.alt} -
- - - ) - } return ( - - -
- {image.alt} -
- - +
+ {image.alt} +
) })} - +
diff --git a/client/src/features/About/Medarbetare.js b/client/src/features/About/Medarbetare.js index f973d239..7d804a4d 100644 --- a/client/src/features/About/Medarbetare.js +++ b/client/src/features/About/Medarbetare.js @@ -1,27 +1,27 @@ import React from 'react' -import { Row, Col } from 'react-bootstrap' +import { Col } from 'react-bootstrap' import { Section, Typography } from '../../components/Core' -import { Container } from '../../components/Layout' +import { Container, Flex } from '../../components/Layout' import { formatPhoneNumber } from '../../utils/helpers' import { SocialMediaLinks } from './SocialMediaLinks' const InfoSection = ({ text, title }) => ( - + {title} {text} - + ) export const Medarbetare = ({ info }) => (
Info - + Kontakt @@ -48,7 +48,7 @@ export const Medarbetare = ({ info }) => ( )} - + {info.answerTech && ( )} diff --git a/client/src/features/About/TeamList.js b/client/src/features/About/TeamList.js index 5d54f8cc..12166fb7 100644 --- a/client/src/features/About/TeamList.js +++ b/client/src/features/About/TeamList.js @@ -1,5 +1,4 @@ import React from 'react' -import { Row, Col } from 'react-bootstrap' import { Section, Typography } from '../../components/Core' import { Card } from '../../components/Card' @@ -21,15 +20,11 @@ export const TeamList = ({ content, coworkers }) => { <> {/* */}
- - - -
- {content.title} - {content.subtitle} -
- - + +
+ {content.title} + {content.subtitle} +
{sortedTeam.map((coworker) => { const { diff --git a/client/src/features/Case/CTA.js b/client/src/features/Case/CTA.js index 98ad7b4a..b2a629b6 100644 --- a/client/src/features/Case/CTA.js +++ b/client/src/features/Case/CTA.js @@ -1,13 +1,12 @@ -import React from 'react' import Image from 'next/image' +import React from 'react' import styled from 'styled-components' -import { Row, Col } from 'react-bootstrap' -import { Section, Box, Typography, CTALink } from '../../components/Core' import imgOval from '../../assets/image/svg/l1-cta-oval.svg' import svgCurveGray from '../../assets/image/svg/l1-curve-cta-gray.svg' -import { buildInternalUrl } from '../../utils/helpers' +import { Box, CTALink, Section, Typography } from '../../components/Core' import { Container } from '../../components/Layout' +import { buildInternalUrl } from '../../utils/helpers' const LeftCard = styled(Box)` position: absolute; @@ -37,20 +36,16 @@ export const CTA = ({ text }) => { {} - - - - - {text.title} - - - - - +
+ + {text.title} + + +
diff --git a/client/src/features/Case/CaseFooter.js b/client/src/features/Case/CaseFooter.js index 23458f05..e3dc60cb 100644 --- a/client/src/features/Case/CaseFooter.js +++ b/client/src/features/Case/CaseFooter.js @@ -1,10 +1,10 @@ import React from 'react' -import { Row, Col } from 'react-bootstrap' +import { Col } from 'react-bootstrap' import { Section, Typography } from '../../components/Core' -import { CaseFooterSection } from './CaseFooterSection' +import { Container, Flex } from '../../components/Layout' import { urlFor } from '../../utils/helpers' -import { Container } from '../../components/Layout' +import { CaseFooterSection } from './CaseFooterSection' export const CaseFooter = ({ sectionCards }) => { return ( @@ -13,7 +13,7 @@ export const CaseFooter = ({ sectionCards }) => {
Mer information - + {sectionCards.map((card, i) => { return ( @@ -26,7 +26,7 @@ export const CaseFooter = ({ sectionCards }) => { ) })} - +
diff --git a/client/src/features/Case/CaseFooterSection.js b/client/src/features/Case/CaseFooterSection.js index 1450c4c2..b1e9d4b0 100644 --- a/client/src/features/Case/CaseFooterSection.js +++ b/client/src/features/Case/CaseFooterSection.js @@ -1,36 +1,24 @@ -import React from 'react' import Image from 'next/image' -import styled from 'styled-components' - -import { Box, Typography } from '../../components/Core' - -const Card = styled(Box)` - border-radius: 0; - overflow: hidden; -` - -const ImageContainer = styled(Box)` - max-width: 210px; - border-radius: 0px; - overflow: hidden; - position: relative; - width: 100%; -` +import React from 'react' -const CardText = styled(Box)` - padding-left: 30px; -` +import { Typography } from '../../components/Core' -export const CaseFooterSection = ({ img, title, alt, blocks, ...rest }) => { +export const CaseFooterSection = ({ img, title, alt, blocks }) => { return ( - - - {alt} - - +
+
+ {alt} +
+
{title} - - +
+
) } diff --git a/client/src/features/Hero/BaseHero.js b/client/src/features/Hero/BaseHero.js index 7107227d..8fed54ff 100644 --- a/client/src/features/Hero/BaseHero.js +++ b/client/src/features/Hero/BaseHero.js @@ -1,6 +1,6 @@ import clsx from 'clsx' import React from 'react' -import { Row, Col } from 'react-bootstrap' +import { Col } from 'react-bootstrap' import { CTALink, Section, Typography } from '../../components/Core' import { Container } from '../../components/Layout' @@ -69,37 +69,35 @@ export const BaseHero = ({ )} > - - - {children} - {subtitle && mediaType.type === 'color' ? ( - + + {children} + {subtitle && mediaType.type === 'color' ? ( + + {subtitle} + + ) : ( + + {subtitle} - - ) : ( - - - {subtitle} - - - )} - {link && ( -
- -
- )} - - + + + )} + {link && ( +
+ +
+ )} + ) diff --git a/client/src/features/IteamX/Contact.js b/client/src/features/IteamX/Contact.js index af208629..a14bcefa 100644 --- a/client/src/features/IteamX/Contact.js +++ b/client/src/features/IteamX/Contact.js @@ -1,12 +1,11 @@ -import React from 'react' import Image from 'next/image' +import React from 'react' import styled from 'styled-components' -import { Row, Col } from 'react-bootstrap' -import { Box } from '../../components/Core' import imgShape from '../../assets/image/svg/contact-shape.svg' -import { HubspotForm } from '../../features/HubspotForm' +import { Box } from '../../components/Core' import { Container } from '../../components/Layout' +import { HubspotForm } from '../../features/HubspotForm' const BoxStyled = styled(Box)` &::after { @@ -40,11 +39,9 @@ export const Contact = () => ( /> - - - - - +
+ +
diff --git a/client/src/features/IteamX/Content.js b/client/src/features/IteamX/Content.js index 72844432..367e5015 100644 --- a/client/src/features/IteamX/Content.js +++ b/client/src/features/IteamX/Content.js @@ -1,10 +1,9 @@ import React from 'react' import styled from 'styled-components' -import { Row, Col } from 'react-bootstrap' -import { Section, Span, Typography } from '../../components/Core' import { ContentCard } from '../../components/ContentCard' -import { Container } from '../../components/Layout' +import { Section, Span, Typography } from '../../components/Core' +import { Container, FlexFixedCol } from '../../components/Layout' const SectionStyled = styled(Section)`` @@ -27,21 +26,15 @@ export const Content = ({ content }) => { {/* */} - - -
- - {title[0]} - en hypotes. {title[1]} - -
- - - + + {title[0]} + en hypotes. {title[1]} + + {tech.map((item, i) => ( ))} - + diff --git a/client/src/features/IteamX/Content2.js b/client/src/features/IteamX/Content2.js index ebf51e05..074c90fa 100644 --- a/client/src/features/IteamX/Content2.js +++ b/client/src/features/IteamX/Content2.js @@ -1,11 +1,11 @@ +import Image from 'next/image' import React from 'react' +import { Col } from 'react-bootstrap' import styled from 'styled-components' -import { Row, Col } from 'react-bootstrap' -import Image from 'next/image' -import { Section, Box, Typography, CTALink } from '../../components/Core' +import { Box, CTALink, Section, Typography } from '../../components/Core' +import { Container, Flex } from '../../components/Layout' import { urlFor } from '../../utils/helpers' -import { Container } from '../../components/Layout' const ImageRight = styled(Box)` img { @@ -20,23 +20,10 @@ export const Content2 = ({ content }) => { {/* */}
- - -
- - {content.imageWithAlt.alt} - -
- + { /> - + +
+ + {content.imageWithAlt.alt} + +
+ +
diff --git a/client/src/features/IteamX/Fact.js b/client/src/features/IteamX/Fact.js index 80d16140..9ba4acd6 100644 --- a/client/src/features/IteamX/Fact.js +++ b/client/src/features/IteamX/Fact.js @@ -1,10 +1,10 @@ import React from 'react' +import { Col } from 'react-bootstrap' import styled from 'styled-components' -import { Row, Col } from 'react-bootstrap' -import { Section, Box, Typography } from '../../components/Core' +import { Box, Section, Typography } from '../../components/Core' +import { Container, Flex } from '../../components/Layout' import { device } from '../../utils' -import { Container } from '../../components/Layout' const SectionStyled = styled(Section)` border-bottom: 1px solid #2d2d30; @@ -20,7 +20,7 @@ export const Fact = ({ content }) => ( {/* */} - + {content.texts.map((item, index) => ( @@ -33,7 +33,7 @@ export const Fact = ({ content }) => ( ))} - + diff --git a/client/src/pages/book.js b/client/src/pages/book.js index 161d4403..1b22edb5 100644 --- a/client/src/pages/book.js +++ b/client/src/pages/book.js @@ -1,22 +1,21 @@ -import React, { useEffect } from 'react' -import { NextSeo } from 'next-seo' -import { Row, Col } from 'react-bootstrap' import { groq } from 'next-sanity' +import { NextSeo } from 'next-seo' +import React, { useEffect } from 'react' +import { Box, Section, Typography } from '../components/Core' +import { ExitPreviewLink } from '../components/ExitPreviewLink' +import { Container, Flex } from '../components/Layout' +import { PageWrapper } from '../components/PageWrapper' +import { Hero } from '../features/Hero' +import { HubspotForm } from '../features/HubspotForm' +import { usePreviewSubscription } from '../lib/sanity' +import { getClient } from '../lib/sanity.server' import { buildInternalUrl, filterDataToSingleItem, formatPhoneNumber, urlFor, } from '../utils/helpers' -import { Section, Box, Typography } from '../components/Core' -import { PageWrapper } from '../components/PageWrapper' -import { ExitPreviewLink } from '../components/ExitPreviewLink' -import { Hero } from '../features/Hero' -import { usePreviewSubscription } from '../lib/sanity' -import { getClient } from '../lib/sanity.server' -import { HubspotForm } from '../features/HubspotForm' -import { Container } from '../components/Layout' const Book = ({ data, preview = false }) => { const { data: previewData } = usePreviewSubscription(data?.bookPageQuery, { @@ -76,14 +75,14 @@ const Book = ({ data, preview = false }) => { )}
- - + +
- - +
+
{page?.call?.title && page.call.title} @@ -135,8 +134,8 @@ const Book = ({ data, preview = false }) => { /> ))} - - +
+
diff --git a/client/src/pages/open-source-skolan/[slug].js b/client/src/pages/open-source-skolan/[slug].js index 8eb55b67..55f85dd6 100644 --- a/client/src/pages/open-source-skolan/[slug].js +++ b/client/src/pages/open-source-skolan/[slug].js @@ -12,7 +12,7 @@ import { getClient } from '../../lib/sanity.server' import { filterDataToSingleItem } from '../../utils/helpers' import { BlogList } from '../../features/Aktuellt' import { ExitPreviewLink } from '../../components/ExitPreviewLink' -import { Container } from '../../components/Layout' +import { Container, Flex } from '../../components/Layout' const VideoContainer = styled.div` position: relative; @@ -127,13 +127,13 @@ const LessonDetails = ({ data, preview = false }) => {
- - + +
Se fler lektioner i Open Source skolan - - +
+