From 40f7ce0f97b8ab409ba8df9b3d7b4e43df21683b Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Mon, 28 Oct 2024 10:04:48 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20to=20tailwind?=
 =?UTF-8?q?=20#2569=20(#2570)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ♻️ refactor to tailwind #2569

* ✏️  Small adjustment to negative margin #2569
---
 web/components/src/Accordion/Item.tsx         |  8 ++------
 .../topicPages/Form/CareerFairForm.tsx        | 20 ++++---------------
 web/pageComponents/topicPages/Form/Form.tsx   | 14 +++----------
 .../careersContactForm/CareersContactForm.tsx |  8 ++------
 4 files changed, 11 insertions(+), 39 deletions(-)

diff --git a/web/components/src/Accordion/Item.tsx b/web/components/src/Accordion/Item.tsx
index d2a12c27b..54d69b8df 100644
--- a/web/components/src/Accordion/Item.tsx
+++ b/web/components/src/Accordion/Item.tsx
@@ -1,9 +1,5 @@
-import styled from 'styled-components'
 import { AccordionItem } from '@chakra-ui/react'
 
-const StyledItem = styled(AccordionItem)`
-  border-bottom: 1px solid var(--grey-40);
-`
 export type AccordionItemProps = {
   id: number
   children: React.ReactNode
@@ -11,8 +7,8 @@ export type AccordionItemProps = {
 
 export const Item = ({ id, children, ...rest }: AccordionItemProps) => {
   return (
-    <StyledItem {...rest} index={id}>
+    <AccordionItem style={{borderBottom: '1px solid var(--grey-40)'}}{...rest} key={id}>
       {children}
-    </StyledItem>
+    </AccordionItem>
   )
 }
diff --git a/web/pageComponents/topicPages/Form/CareerFairForm.tsx b/web/pageComponents/topicPages/Form/CareerFairForm.tsx
index afa006fac..446a7cf91 100644
--- a/web/pageComponents/topicPages/Form/CareerFairForm.tsx
+++ b/web/pageComponents/topicPages/Form/CareerFairForm.tsx
@@ -11,7 +11,6 @@ import {
   FormSubmitSuccessBox,
   FormSubmitFailureBox,
 } from '@components'
-import styled from 'styled-components'
 import { BaseSyntheticEvent, useState } from 'react'
 import FriendlyCaptcha from './FriendlyCaptcha'
 
@@ -27,15 +26,6 @@ type FormValues = {
   preferredLang: string
 }
 
-const StyledHelper = styled.p`
-  margin-top: calc(var(--space-small) * -1);
-  font-size: var(--typeScale-0);
-`
-
-const StyledCheckBox = styled(Checkbox)`
-  padding-bottom: var(--space-medium);
-`
-
 const CareerFairForm = () => {
   const intl = useIntl()
   const [submitButtonEnabled, setSubmitButtonEnabled] = useState(false)
@@ -264,13 +254,13 @@ const CareerFairForm = () => {
                       id: 'career_fair_form_visit_equinor',
                       defaultMessage: 'Would like to visit Equinor office or facility',
                     }) && (
-                    <StyledHelper id="select-helper-text">
+                    <p className='-mt-2' id="select-helper-text">
                       {intl.formatMessage({
                         id: 'career_fair_form_visit_equinor_helper_text',
                         defaultMessage:
                           'Please be aware that we only offer visits to a few selected locations. Please specify your preferred location and we will revert to you as soon as we can.',
                       })}
-                    </StyledHelper>
+                    </p>
                   )}
                 </>
               )}
@@ -319,10 +309,8 @@ const CareerFairForm = () => {
                 />
               )}
             />
-            <div className="pb-4 text-xs italic">
-              <FormattedMessage id="all_fields_mandatory" defaultMessage="All fields with *  are mandatory" />
-            </div>
-            <StyledCheckBox
+            <Checkbox
+              className='pb-4'
               label={intl.formatMessage({
                 id: 'career_fair_form_supporting_documents',
                 defaultMessage:
diff --git a/web/pageComponents/topicPages/Form/Form.tsx b/web/pageComponents/topicPages/Form/Form.tsx
index 6feea06ff..b39bf9151 100644
--- a/web/pageComponents/topicPages/Form/Form.tsx
+++ b/web/pageComponents/topicPages/Form/Form.tsx
@@ -1,4 +1,3 @@
-import styled from 'styled-components'
 import TitleText from '../../shared/portableText/TitleText'
 import IngressText from '../../shared/portableText/IngressText'
 import ContactEquinorForm from './ContactEquinorForm'
@@ -10,14 +9,7 @@ import type { FormData } from '../../../types/index'
 import { twMerge } from 'tailwind-merge'
 import CallToActions from '@sections/CallToActions'
 
-const StyledHeading = styled(TitleText)`
-  padding: 0 0 var(--space-large) 0;
-`
 
-const ListStyled = styled.div`
-  padding-bottom: var(--space-3xLarge);
-  font-size: var(--typeScale-1);
-`
 
 const Form = ({ data, anchor, className }: { data: FormData; anchor?: string; className?: string }) => {
   const { title, ingress, downloads } = data
@@ -37,9 +29,9 @@ const Form = ({ data, anchor, className }: { data: FormData; anchor?: string; cl
           <>
             <>
               {downloads && (
-                <ListStyled>
+                <div className='pb-10'>
                   {downloads.length > 0 && <CallToActions callToActions={downloads} overrideButtonStyle />}
-                </ListStyled>
+                </div>
               )}
             </>
             <OrderReportsForm />
@@ -50,7 +42,7 @@ const Form = ({ data, anchor, className }: { data: FormData; anchor?: string; cl
 
   return (
     <div className={twMerge(`pb-page-content px-layout-lg max-w-viewport mx-auto`, className)} id={anchor}>
-      {title && <StyledHeading value={title} />}
+      {title && <TitleText className='px-0 pt-0 pr-6' value={title} />}
       {ingress && <IngressText value={ingress}></IngressText>}
 
       {renderForm(variant)}
diff --git a/web/pageComponents/topicPages/Form/careersContactForm/CareersContactForm.tsx b/web/pageComponents/topicPages/Form/careersContactForm/CareersContactForm.tsx
index 3b1bb7d2d..36c3053e6 100644
--- a/web/pageComponents/topicPages/Form/careersContactForm/CareersContactForm.tsx
+++ b/web/pageComponents/topicPages/Form/careersContactForm/CareersContactForm.tsx
@@ -13,7 +13,6 @@ import {
 } from '@components'
 import { BaseSyntheticEvent, useState } from 'react'
 import FriendlyCaptcha from '../FriendlyCaptcha'
-import styled from 'styled-components'
 import getCatalogType from './getRequestType'
 
 type FormValues = {
@@ -28,10 +27,6 @@ type FormValues = {
   supportingDocuments: string
 }
 
-const StyledCheckBox = styled(Checkbox)`
-  padding-bottom: var(--space-medium);
-`
-
 const CareersContactForm = () => {
   const intl = useIntl()
   const [submitButtonEnabled, setSubmitButtonEnabled] = useState(false)
@@ -363,7 +358,8 @@ const CareersContactForm = () => {
             <div className="pb-4 text-xs italic">
               <FormattedMessage id="all_fields_mandatory" defaultMessage="All fields with *  are mandatory" />
             </div>
-            <StyledCheckBox
+            <Checkbox
+              className='pb-4'
               label={intl.formatMessage({
                 id: 'career_fair_form_supporting_documents',
                 defaultMessage: