♻️ refactor to tailwind #2569 (#2570)

* ♻️ refactor to tailwind #2569 * ✏️ Small adjustment to negative margin #2569
equinor · Oct 28, 2024 · 40f7ce0 · 40f7ce0
1 parent 76108b1
commit 40f7ce0
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 39 deletions.
diff --git a/web/components/src/Accordion/Item.tsx b/web/components/src/Accordion/Item.tsx
@@ -1,18 +1,14 @@
-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
 }
 
 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
@@ -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
@@ -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
@@ -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: