Skip to content

Commit

Permalink
debt: Remove flex/box components
Browse files Browse the repository at this point in the history
  • Loading branch information
@Betree
Betree committed Jan 20, 2025
1 parent 9a5725f commit e9d7990
Show file tree
Hide file tree
Showing 35 changed files with 280 additions and 347 deletions.
77 changes: 38 additions & 39 deletions components/ApplyToHostModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { useToast } from './ui/useToast';
import Avatar from './Avatar';
import CollectivePicker from './CollectivePicker';
import CollectivePickerAsync from './CollectivePickerAsync';
import { Box, Flex } from './Grid';
import HTMLContent from './HTMLContent';
import { getI18nLink } from './I18nFormatters';
import Link from './Link';
Expand Down Expand Up @@ -180,7 +179,7 @@ const getAccountInput = collective => {

const ConfirmButtons = ({ onClose, onBack, onSubmit, isSubmitting, canSubmit, isOSCHost }) => {
return (
<Flex justifyContent="flex-end" width="100%">
<div className="flex w-full justify-end">
<StyledButton
buttonType="button"
onClick={onBack || onClose}
Expand Down Expand Up @@ -229,7 +228,7 @@ const ConfirmButtons = ({ onClose, onBack, onSubmit, isSubmitting, canSubmit, is
<FormattedMessage id="actions.submitApplication" defaultMessage="Submit application" />
</StyledButton>
)}
</Flex>
</div>
);
};

Expand Down Expand Up @@ -347,38 +346,38 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
{loading ? (
<LoadingPlaceholder width="100%" height={163} />
) : host ? (
<Flex flexDirection="column" alignItems="center" width="100%">
<div className="flex w-full flex-col items-center">
<Avatar collective={host} type={host.type} radius={64} />
<H1 fontSize="20px" lineHeight="28px" color="black.900" mt={3} mb={3}>
{host.name}
</H1>
<Flex justifyContent="center" width="100%" gap="32px" flexWrap="wrap">
<Flex flexDirection="column">
<div className="flex w-full flex-wrap justify-center gap-[32px]">
<div className="flex flex-col">
<P fontWeight="400" fontSize="12px" lineHeight="18px" color="black.600" mb={1}>
<FormattedMessage id="HostSince" defaultMessage="Host since" />
</P>
<P fontSize="16px" fontWeight="500" lineHeight="24px">
<FormattedDate value={host.createdAt} month="short" year="numeric" />
</P>
</Flex>
<Flex flexDirection="column">
</div>
<div className="flex flex-col">
<P fontWeight="400" fontSize="12px" lineHeight="18px" color="black.600" mb={1}>
<FormattedMessage id="Currency" defaultMessage="Currency" />
</P>
<P fontSize="16px" fontWeight="500" lineHeight="24px">
{host.currency}
</P>
</Flex>
<Flex flexDirection="column">
</div>
<div className="flex flex-col">
<P fontWeight="400" fontSize="12px" lineHeight="18px" color="black.600" mb={1}>
<FormattedMessage id="HostFee" defaultMessage="Host fee" />
</P>
<P fontSize="16px" fontWeight="500" lineHeight="24px">
{host.hostFeePercent}%
</P>
</Flex>
</Flex>
<Box my={3}>
</div>
</div>
<div className="my-3">
{useTwoSteps && (
<StepsProgress steps={Object.values(STEPS)} focus={step} onStepSelect={setStep}>
{({ step }) => (
Expand All @@ -388,8 +387,8 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
)}
</StepsProgress>
)}
</Box>
</Flex>
</div>
</div>
) : null}
</ModalHeader>

Expand All @@ -414,7 +413,7 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
)}
{step === STEPS.APPLY && (
<React.Fragment>
<Box>
<div>
<StyledInputFormikField name="collective">
{({ form, field }) => (
<div>
Expand Down Expand Up @@ -443,33 +442,33 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
data-cy="host-apply-new-collective-link"
>
<StyledButton borderRadius="14px" width="100%">
<Flex alignItems="center">
<div className="flex items-center">
<PlusCircle size={24} />
<Box ml="16px" fontSize="11px">
<div className="ml-[16px] text-[11px]">
<FormattedMessage
id="Collective.CreateNew"
defaultMessage="Create new Collective"
/>
</Box>
</Flex>
</div>
</div>
</StyledButton>
</Link>
)}
/>
</div>
)}
</StyledInputFormikField>
</Box>
</div>
{!isOSCHost && (
<React.Fragment>
<StyledHr my="18px" width="100%" borderColor="black.300" />
{host?.policies?.COLLECTIVE_MINIMUM_ADMINS?.numberOfAdmins > 1 && (
<React.Fragment>
<Box>
<div>
<P fontSize="13px" lineHeight="16px" fontWeight="600" color="black.700">
<FormattedMessage defaultMessage="Minimum Administrators Required" id="ceGKEG" />
</P>
<Flex mt={1} width="100%">
<div className="mt-[1] flex w-full">
<P
my={2}
fontSize="9px"
Expand All @@ -485,11 +484,11 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
values.inviteMembers.length
}/${host.policies.COLLECTIVE_MINIMUM_ADMINS.numberOfAdmins})`}
</P>
<Flex flexGrow={1} alignItems="center">
<div className="flex flex-grow items-center">
<StyledHr width="100%" ml={2} borderColor="black.300" />
</Flex>
</Flex>
<Flex width="100%" flexWrap="wrap" data-cy="profile-card">
</div>
</div>
<div className="flex w-full flex-wrap" data-cy="profile-card">
{values.collective?.admins?.nodes.map(admin => (
<OnboardingProfileCard key={admin.account.id} collective={admin.account} />
))}
Expand All @@ -514,8 +513,8 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
}
/>
))}
</Flex>
<Flex mt={1} width="100%">
</div>
<div className="mt-[1] flex w-full">
<P
my={2}
fontSize="9px"
Expand All @@ -528,11 +527,11 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
defaultMessage="Invite Administrators"
/>
</P>
<Flex flexGrow={1} alignItems="center">
<div className="flex flex-grow items-center">
<StyledHr width="100%" ml={2} borderColor="black.300" />
</Flex>
</Flex>
<Box>
</div>
</div>
<div>
<CollectivePickerAsync
inputId="onboarding-admin-picker"
creatable
Expand All @@ -554,7 +553,7 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
]);
}}
/>
</Box>
</div>
{host?.policies?.COLLECTIVE_MINIMUM_ADMINS && (
<MessageBox type="info" mt={3} fontSize="13px">
<FormattedMessage
Expand All @@ -564,7 +563,7 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
/>
</MessageBox>
)}
</Box>
</div>
<StyledHr my="18px" width="100%" borderColor="black.300" />
</React.Fragment>
)}
Expand Down Expand Up @@ -596,7 +595,7 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
{host.termsUrl && (
<StyledInputFormikField name="areTosChecked">
{({ form, field }) => (
<Flex flexDirection="column" mx={1} mt={18}>
<div className="mx-[1] mt-[18] flex flex-col">
<StyledCheckbox
name="tos"
label={
Expand All @@ -618,7 +617,7 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
onChange={({ checked }) => form.setFieldValue('areTosChecked', checked)}
error={field.error}
/>
</Flex>
</div>
)}
</StyledInputFormikField>
)}
Expand All @@ -637,15 +636,15 @@ const ApplyToHostModal = ({ hostSlug, collective, onClose, onSuccess, router, ..
</ModalBody>
<ModalFooter isFullWidth>
{step === STEPS.INFORMATION && (
<Flex justifyContent="flex-end">
<div className="flex justify-end">
<StyledButton
data-cy="host-apply-modal-next"
buttonStyle="primary"
onClick={() => setStep(STEPS.APPLY)}
>
<FormattedMessage id="Pagination.Next" defaultMessage="Next" />
</StyledButton>
</Flex>
</div>
)}
{step === STEPS.APPLY && (
<ConfirmButtons
Expand Down
10 changes: 4 additions & 6 deletions components/Loading.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,14 @@ import React from 'react';

import LoadingGrid from '../components/LoadingGrid';

import { Flex } from './Grid';

const Loading = props => {
return (
<div className="Loading">
<Flex justifyContent={['center', 'center', 'flex-start']} flexWrap="wrap" {...props}>
<Flex py={3} width={1} justifyContent="center">
<div className="flex flex-wrap justify-center lg:justify-start" {...props}>
<div className="flex w-full justify-center py-3">
<LoadingGrid />
</Flex>
</Flex>
</div>
</div>
</div>
);
};
Expand Down
5 changes: 2 additions & 3 deletions components/Location.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import styled from 'styled-components';
import { isURL } from 'validator';

import Container from './Container';
import { Flex } from './Grid';
import Map from './Map';
import StyledLink from './StyledLink';
import { P } from './Text';
Expand Down Expand Up @@ -33,13 +32,13 @@ function Location({ location, showTitle = true }: Readonly<LocationProps>) {
if (name === 'Online') {
if (address && isURL(address)) {
return (
<Flex flexDirection="column" alignItems="center">
<div className="flex flex-col items-center">
<P textAlign="center">
<StyledLink openInNewTabNoFollow href={address}>
{address}
</StyledLink>
</P>
</Flex>
</div>
);
} else {
return (
Expand Down
9 changes: 4 additions & 5 deletions components/MemberInvitationsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';

import { Box, Flex } from './Grid';
import MessageBox from './MessageBox';
import ReplyToMemberInvitationCard from './ReplyToMemberInvitationCard';

Expand Down Expand Up @@ -30,17 +29,17 @@ const MemberInvitationsList = ({ invitations, selectedInvitationId }) => {
}

return (
<Flex flexDirection="column" alignItems="center">
<div className="flex flex-col items-center">
{invitations.map(invitation => (
<Box key={invitation.id} mb={5}>
<div key={invitation.id} className="mb-5">
<ReplyToMemberInvitationCard
invitation={invitation}
isSelected={invitation.id === selectedInvitationId}
redirectOnAccept={invitations.length === 1}
/>
</Box>
</div>
))}
</Flex>
</div>
);
};

Expand Down
13 changes: 6 additions & 7 deletions components/NotFound.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import Router from 'next/router';
import { FormattedMessage } from 'react-intl';

import { ErrorFallbackLinks } from './ErrorFallbackLinks';
import { Box, Flex } from './Grid';
import Image from './Image';
import Link from './Link';
import StyledButton from './StyledButton';
Expand All @@ -16,7 +15,7 @@ type NotFoundProps = {

const NotFound = ({ searchTerm, showAltLinks = true }: NotFoundProps) => {
return (
<Flex data-cy="not-found" flexDirection="column" alignItems="center" p={2}>
<div className="flex flex-col items-center p-2" data-cy="not-found">
<Image src="/static/images/not-found-illustration.png" alt="404" width={302} height={302} />
<H1 textAlign="center" mt={3} fontSize="40px" fontWeight="700">
<FormattedMessage defaultMessage="Oops! Page not found" id="N7DKaT" />
Expand All @@ -26,7 +25,7 @@ const NotFound = ({ searchTerm, showAltLinks = true }: NotFoundProps) => {
</P>

{searchTerm ? (
<Flex flexWrap="wrap" justifyContent="center" mt={4}>
<div className="mt-4 flex flex-wrap justify-center">
<StyledButton m={2} onClick={() => Router.back()}>
&larr; <FormattedMessage id="error.goBack" defaultMessage="Go back to the previous page" />
</StyledButton>
Expand All @@ -39,16 +38,16 @@ const NotFound = ({ searchTerm, showAltLinks = true }: NotFoundProps) => {
/>
</StyledButton>
</Link>
</Flex>
</div>
) : showAltLinks ? (
<Box>
<div>
<P fontSize="16px" fontWeight="500" color="black.800" mb="16px">
<FormattedMessage defaultMessage="Here are some helpful links instead:" id="UTSapC" />
</P>
<ErrorFallbackLinks />
</Box>
</div>
) : null}
</Flex>
</div>
);
};

Expand Down
5 changes: 2 additions & 3 deletions components/NotificationBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { themeGet } from '@styled-system/theme-get';
import styled, { css } from 'styled-components';

import Container from './Container';
import { Flex } from './Grid';
import Link from './Link';
import StyledLinkButton from './StyledLinkButton';
import { H1 } from './Text';
Expand Down Expand Up @@ -110,9 +109,9 @@ const NotificationBar = ({ title, description, type, actions, inline, dismiss, i

{actions && (
<Container display={inline ? 'inline-flex' : 'block'} mx="4px">
<Flex justifyContent="center" gridGap="8px">
<div className="flex justify-center gap-2">
{Array.isArray(actions) ? actions.map(action => action) : actions}
</Flex>
</div>
</Container>
)}
</Container>
Expand Down
Loading

0 comments on commit e9d7990

Please sign in to comment.