Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

♻️ refactor to tailwind #2569 #2570

Merged
merged 2 commits into from
Oct 28, 2024
Merged

♻️ refactor to tailwind #2569 #2570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15c3a80
♻️ refactor to tailwind #2569
millianapia Oct 15, 2024
3c51954
✏️ Small adjustment to negative margin #2569
millianapia Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions web/components/src/Accordion/Item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
20 changes: 4 additions & 16 deletions web/pageComponents/topicPages/Form/CareerFairForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
FormSubmitSuccessBox,
FormSubmitFailureBox,
} from '@components'
import styled from 'styled-components'
import { BaseSyntheticEvent, useState } from 'react'
import FriendlyCaptcha from './FriendlyCaptcha'

Expand All @@ -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)
Expand Down Expand Up @@ -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>
)}
</>
)}
Expand Down Expand Up @@ -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:
Expand Down
14 changes: 3 additions & 11 deletions web/pageComponents/topicPages/Form/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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
Expand All @@ -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 />
Expand All @@ -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)}
Expand Down
8 changes: 2 additions & 6 deletions web/pageComponents/topicPages/Form/careersContactForm/CareersContactForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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)
Expand Down Expand Up @@ -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:
Expand Down
Loading