refactor: replace bootstrap Container

Iteam1337 · Nov 17, 2022 · 5322e63 · 5322e63
1 parent caff981
commit 5322e63
Show file tree

Hide file tree

Showing 51 changed files with 97 additions and 69 deletions.
diff --git a/client/src/components/Carousel/Carousel.js b/client/src/components/Carousel/Carousel.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import Image from 'next/image'
 import { useNextSanityImage } from 'next-sanity-image'
 import styled from 'styled-components'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 import Gravatar from 'react-gravatar'
 import Slider from 'react-slick'
 import { rgba } from 'polished'
@@ -11,6 +11,7 @@ import sanityClient from '../../utils/sanity-client'
 import { buildInternalUrl } from '../../utils/helpers'
 import { Box, Typography } from '../../components/Core'
 import { device, breakpoints } from '../../utils'
+import { Container } from '../Layout'
 
 const SliderStyled = styled(Slider)`
   position: relative;
@@ -306,13 +307,7 @@ export const Carousel = ({ content, coworker = false }) => {
     },
   }
   return (
-    <Container
-      data-aos="fade-zoom-in"
-      data-aos-easing="ease-in-back"
-      data-aos-duration="500"
-      data-aos-offset="0"
-      data-aos-once="true"
-    >
+    <Container>
       <Row className="justify-content-center">
         <Col lg="12" xl="11">
           <SliderStyled {...slickSettings} activeSlide={activeSlide}>

diff --git a/client/src/components/Footer/Footer.js b/client/src/components/Footer/Footer.js
@@ -1,9 +1,10 @@
 import React from 'react'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 import clsx from 'clsx'
 
 import { Box, Typography } from '../Core'
 import { Logo } from '../Logo'
+import { Container } from '../Layout'
 
 const FooterList = ({ children, className }) => {
   return (

diff --git a/client/src/components/Header/Header.js b/client/src/components/Header/Header.js
@@ -1,6 +1,5 @@
 import React, { useState, useContext } from 'react'
 import styled from 'styled-components'
-import { Container } from 'react-bootstrap'
 import { useScrollPosition } from '@n8tb1t/use-scroll-position'
 import { useRouter } from 'next/router'
 import clsx from 'clsx'
@@ -11,6 +10,7 @@ import { NestedMenu } from '../NestedMenu'
 import { device } from '../../utils'
 import { Logo } from '../Logo'
 import { menuItems } from './menuItems'
+import { Container } from '../Layout'
 
 const SiteHeader = styled.header`
   padding: 10px 0 10px 3px;

diff --git a/client/src/components/Layout/index.js b/client/src/components/Layout/index.js
@@ -1 +1,2 @@
+export { Container } from './Container'
 export { Layout } from './Layout'
diff --git a/client/src/components/Offcanvas/Offcanvas.js b/client/src/components/Offcanvas/Offcanvas.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import { Container } from 'react-bootstrap'
 import styled from 'styled-components'
 
+import { Container } from '../Layout'
 import { Logo } from '../Logo'
 
 const Overlay = styled.div`

diff --git a/client/src/features/About/CTA.js b/client/src/features/About/CTA.js
@@ -1,12 +1,13 @@
 import React from 'react'
 import Image from 'next/image'
 import styled from 'styled-components'
-import { Container, Row, Col } from 'react-bootstrap'
+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 svgCurve from '../../assets/image/svg/l1-curve-cta.svg'
 import { buildInternalUrl } from '../../utils/helpers'
+import { Container } from '../../components/Layout'
 
 const LeftCard = styled(Box)`
   position: absolute;

diff --git a/client/src/features/About/Content.js b/client/src/features/About/Content.js
@@ -1,10 +1,11 @@
 import React from 'react'
 import Image from 'next/image'
 import styled from 'styled-components'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { Section, Box, Typography } from '../../components/Core'
 import { urlFor } from '../../utils/helpers'
+import { Container } from '../../components/Layout'
 
 const ContentImg = styled(Box)`
   box-shadow: ${({ theme }) => `0 42px 54px ${theme.colors.shadow}`};

diff --git a/client/src/features/About/Medarbetare.js b/client/src/features/About/Medarbetare.js
@@ -1,7 +1,8 @@
 import React from 'react'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { Section, Typography } from '../../components/Core'
+import { Container } from '../../components/Layout'
 import { formatPhoneNumber } from '../../utils/helpers'
 import { SocialMediaLinks } from './SocialMediaLinks'
 

diff --git a/client/src/features/About/TeamList.js b/client/src/features/About/TeamList.js
@@ -1,9 +1,10 @@
 import React from 'react'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { Section, Typography } from '../../components/Core'
 import { Card } from '../../components/Card'
 import { CardList } from '../../components/CardList'
+import { Container } from '../../components/Layout'
 
 export const TeamList = ({ content, coworkers }) => {
   const sortedTeam = coworkers.sort(function (a, b) {

diff --git a/client/src/features/Aktuellt/BlogList.js b/client/src/features/Aktuellt/BlogList.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Container } from 'react-bootstrap'
 
 import { Card } from '../../components/Card'
 import { CardList } from '../../components/CardList'
 import { Section } from '../../components/Core'
+import { Container } from '../../components/Layout'
 
 export function BlogList({ posts }) {
   const sortedPosts = posts.sort((a, b) => {

diff --git a/client/src/features/Case/CTA.js b/client/src/features/Case/CTA.js
@@ -1,12 +1,13 @@
 import React from 'react'
 import Image from 'next/image'
 import styled from 'styled-components'
-import { Container, Row, Col } from 'react-bootstrap'
+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 { Container } from '../../components/Layout'
 
 const LeftCard = styled(Box)`
   position: absolute;

diff --git a/client/src/features/Case/CaseFooter.js b/client/src/features/Case/CaseFooter.js
@@ -1,9 +1,10 @@
 import React from 'react'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { Section, Typography } from '../../components/Core'
 import { CaseFooterSection } from './CaseFooterSection'
 import { urlFor } from '../../utils/helpers'
+import { Container } from '../../components/Layout'
 
 export const CaseFooter = ({ sectionCards }) => {
   return (

diff --git a/client/src/features/Case/CaseList.js b/client/src/features/Case/CaseList.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Container } from 'react-bootstrap'
 
 import { Card } from '../../components/Card'
 import { CardList } from '../../components/CardList'
 import { Section, Typography } from '../../components/Core'
+import { Container } from '../../components/Layout'
 
 export const CaseList = ({ posts }) => {
   return (

diff --git a/client/src/features/Hero/BaseHero.js b/client/src/features/Hero/BaseHero.js
@@ -1,8 +1,9 @@
 import clsx from 'clsx'
 import React from 'react'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { CTALink, Section, Typography } from '../../components/Core'
+import { Container } from '../../components/Layout'
 import { getExternalOrInternalLink, urlFor } from '../../utils/helpers'
 
 const SectionWithBackground = ({ mediaType, children, className }) => {

diff --git a/client/src/features/IteamX/CaseStudies.js b/client/src/features/IteamX/CaseStudies.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Container } from 'react-bootstrap'
 
 import { Box } from '../../components/Core'
 import { Card } from '../../components/Card'
 import { CardList } from '../../components/CardList'
+import { Container } from '../../components/Layout'
 
 export const CaseStudies = ({ cases }) => {
   const formatPreviewDescription = (description) => {

diff --git a/client/src/features/IteamX/Contact.js b/client/src/features/IteamX/Contact.js
@@ -1,11 +1,12 @@
 import React from 'react'
 import Image from 'next/image'
 import styled from 'styled-components'
-import { Container, Row, Col } from 'react-bootstrap'
+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 { Container } from '../../components/Layout'
 
 const BoxStyled = styled(Box)`
   &::after {
@@ -38,12 +39,7 @@ export const Contact = () => (
           layout="responsive"
         />
       </div>
-      <Container
-        css={`
-          position: relative;
-          z-index: 10;
-        `}
-      >
+      <Container className="tw-relative tw-z-10">
         <Row className="justify-content-center">
           <Col lg="10" id="sprintMeeting">
             <HubspotForm value="iteamX" title="Boka gratis rådgivningsmöte" />

diff --git a/client/src/features/IteamX/Content.js b/client/src/features/IteamX/Content.js
@@ -1,9 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { Section, Span, Typography } from '../../components/Core'
 import { ContentCard } from '../../components/ContentCard'
+import { Container } from '../../components/Layout'
 
 const SectionStyled = styled(Section)``
 

diff --git a/client/src/features/IteamX/Content2.js b/client/src/features/IteamX/Content2.js
@@ -1,10 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 import Image from 'next/image'
 
 import { Section, Box, Typography, CTALink } from '../../components/Core'
 import { urlFor } from '../../utils/helpers'
+import { Container } from '../../components/Layout'
 
 const ImageRight = styled(Box)`
   img {

diff --git a/client/src/features/IteamX/Fact.js b/client/src/features/IteamX/Fact.js
@@ -1,9 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { Section, Box, Typography } from '../../components/Core'
 import { device } from '../../utils'
+import { Container } from '../../components/Layout'
 
 const SectionStyled = styled(Section)`
   border-bottom: 1px solid #2d2d30;

diff --git a/client/src/features/IteamX/Reviews.js b/client/src/features/IteamX/Reviews.js
@@ -1,8 +1,9 @@
 import Image from 'next/image'
 import React from 'react'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { Section, Box, Typography } from '../../components/Core'
+import { Container } from '../../components/Layout'
 import { urlFor } from '../../utils/helpers'
 
 const ContentCard = ({

diff --git a/client/src/features/Karriar/Feature.js b/client/src/features/Karriar/Feature.js
@@ -1,7 +1,8 @@
 import React from 'react'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { Section, Box, Typography } from '../../components/Core'
+import { Container } from '../../components/Layout'
 
 export const Feature = ({ content }) => {
   return (

diff --git a/client/src/features/Karriar/Roles.js b/client/src/features/Karriar/Roles.js
@@ -1,9 +1,10 @@
 import React from 'react'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { Section, Typography } from '../../components/Core'
 import { Card } from '../../components/Card'
 import { CardList } from '../../components/CardList'
+import { Container } from '../../components/Layout'
 
 export const Roles = ({ content, openPositions }) => (
   <>

diff --git a/client/src/features/Mvp/CTA.js b/client/src/features/Mvp/CTA.js
@@ -1,10 +1,11 @@
 import React from 'react'
 import Image from 'next/image'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { Section } from '../../components/Core'
 import { HubspotForm } from '../../features/HubspotForm'
 import imgCtaBG from '../../assets/image/jpeg/Fanny-Flowers-Lowres.jpg'
+import { Container } from '../../components/Layout'
 
 export const CTA = () => (
   <>

diff --git a/client/src/features/Mvp/Content1.js b/client/src/features/Mvp/Content1.js
@@ -1,9 +1,10 @@
 import React from 'react'
 import Image from 'next/image'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { CTALink, Section, Typography } from '../../components/Core'
 import { urlFor } from '../../utils/helpers'
+import { Container } from '../../components/Layout'
 
 export const Content1 = ({ content }) => {
   return (

diff --git a/client/src/features/Pricing/Pricing.js b/client/src/features/Pricing/Pricing.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 import { rgba } from 'polished'
 
 import { buildInternalUrl } from '../../utils/helpers'
@@ -13,6 +13,7 @@ import {
   CTALink,
 } from '../../components/Core'
 import { device } from '../../utils'
+import { Container } from '../../components/Layout'
 
 const SectionStyled = styled(Section)`
   position: relative;
@@ -103,12 +104,7 @@ export const Pricing = ({ content }) => {
   return (
     <>
       <SectionStyled bg="#F7F7FB" pt="90px !important" pb="0 !important">
-        <Container
-          className="position-relative"
-          css={`
-            z-index: 1;
-          `}
-        >
+        <Container className="tw-relative tw-z-10">
           <Row className="justify-content-center">
             <Col md="8" lg="9">
               <div className=" text-center" id="pricing">

diff --git a/client/src/features/Scaleup/CTA.js b/client/src/features/Scaleup/CTA.js
@@ -1,10 +1,11 @@
 import React from 'react'
 import Image from 'next/image'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { Section } from '../../components/Core'
 import { HubspotForm } from '../../features/HubspotForm'
 import imgCtaBG from '../../assets/image/jpeg/Fanny-Flowers-Lowres.jpg'
+import { Container } from '../../components/Layout'
 
 export const CTA = () => (
   <>

diff --git a/client/src/features/Scaleup/Case.js b/client/src/features/Scaleup/Case.js
@@ -1,9 +1,10 @@
 import React from 'react'
 import Image from 'next/image'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { Section, Typography, CTALink } from '../../components/Core'
 import { urlFor } from '../../utils/helpers'
+import { Container } from '../../components/Layout'
 
 export const Case = ({ content }) => {
   return (

diff --git a/client/src/features/Scaleup/Role.js b/client/src/features/Scaleup/Role.js
@@ -1,8 +1,9 @@
 import React from 'react'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { Section, Box, Typography } from '../../components/Core'
 import { ContentCard } from '../../components/ContentCard'
+import { Container } from '../../components/Layout'
 
 export const Role = ({ content }) => {
   return (

diff --git a/client/src/features/Scaleup/SectionWithImageAndButton.js b/client/src/features/Scaleup/SectionWithImageAndButton.js
@@ -1,9 +1,10 @@
 import React from 'react'
 import Image from 'next/image'
-import { Container, Row, Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 import { CTALink, Section, Typography } from '../../components/Core'
 import { urlFor } from '../../utils/helpers'
+import { Container } from '../../components/Layout'
 
 export const SectionWithImageAndButton = ({ content }) => {
   const { title, blockText, button, imageWithAlt } = content