Upgrade to Tailwind v4

opencollective · Jan 30, 2025 · dfcd1a2 · dfcd1a2
1 parent 3e9c66a
commit dfcd1a2
Show file tree

Hide file tree

Showing 228 changed files with 1,289 additions and 1,234 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -4,5 +4,6 @@
   "arrowParens": "avoid",
   "printWidth": 120,
   "plugins": ["prettier-plugin-tailwindcss"],
-  "tailwindFunctions": ["clsx", "cn", "cva"]
+  "tailwindFunctions": ["clsx", "cn", "cva"],
+  "tailwindStylesheet": "./public/static/styles/app.css"
 }
diff --git a/components/AccountHoverCard.tsx b/components/AccountHoverCard.tsx
@@ -259,7 +259,7 @@ type InfoItemProps = {
 const InfoItem = ({ Icon, info }: InfoItemProps) => (
   <div className="flex items-start gap-2 overflow-hidden text-xs text-muted-foreground">
     <Icon size={14} className="shrink-0" />
-    <span className="[&>a:hover]:text-primary [&>a]:text-foreground [&>a]:underline">{info}</span>
+    <span className="[&>a]:text-foreground [&>a]:underline [&>a:hover]:text-primary">{info}</span>
   </div>
 );
 
@@ -346,7 +346,7 @@ export const AccountHoverCard = ({
           </div>
 
           {account.description && (
-            <div className="line-clamp-1 whitespace-pre-wrap text-sm text-foreground">{account.description}</div>
+            <div className="line-clamp-1 text-sm whitespace-pre-wrap text-foreground">{account.description}</div>
           )}
 
           {(infoItems.length > 0 || asyncInfoItems.length > 0 || loading) && (
@@ -372,7 +372,7 @@ export const AccountHoverCard = ({
             </div>
           )}
 
-          {loading && <StyledSpinner className="absolute right-0 top-0 text-muted-foreground" />}
+          {loading && <StyledSpinner className="absolute top-0 right-0 text-muted-foreground" />}
         </div>
       </HoverCardContent>
     </HoverCard>

diff --git a/components/AccountingCategorySelect.tsx b/components/AccountingCategorySelect.tsx
@@ -101,7 +101,7 @@ const getSelectionInfoForLabel = (
   if (rolesHaveSelectedCategory.some(Boolean)) {
     const rolesToDisplay = roles.filter((_, index) => rolesHaveSelectedCategory[index]);
     return (
-      <span className="text-xs font-normal italic text-muted-foreground">
+      <span className="text-xs font-normal text-muted-foreground italic">
         <FormattedMessage
           id="accountingCategory.selectedBy"
           defaultMessage="Selected by {nbRoles, select, 1 {{role1}} 2 {{role1} and {role2}} other {{role1}, {role2} and {role3}}}."
@@ -392,7 +392,7 @@ const AccountingCategorySelect = ({
               disabled={disabled}
             >
               <span
-                className={cn('mr-3 flex-grow truncate text-start text-sm', {
+                className={cn('mr-3 grow truncate text-start text-sm', {
                   'text-gray-400': isUndefined(selectedCategory),
                 })}
               >
@@ -502,7 +502,7 @@ const AccountingCategorySelect = ({
                         role="button"
                         onKeyDown={e => e.key === 'Enter' && triggerChange(option.value)}
                         onClick={() => triggerChange(option.value)}
-                        className="cursor-pointer text-[--primary-color-600] underline hover:opacity-80"
+                        className="cursor-pointer text-(--primary-color-600) underline hover:opacity-80"
                         aria-label={intl.formatMessage(
                           { defaultMessage: 'Select {name}', id: 'G65XME' },
                           { name: option.value.name },

diff --git a/components/Avatar.tsx b/components/Avatar.tsx
@@ -48,7 +48,7 @@ const StyledAvatar = styled(Flex).attrs<StyledAvatarProps>(props => ({
   overflow: hidden;
   width: 64px;
   height: 64px;
-  flex-shrink: 0;
+  shrink: 0;
   ${color}
   ${space}
   ${layout}

diff --git a/components/ComboSelect.tsx b/components/ComboSelect.tsx
@@ -96,7 +96,7 @@ export function ComboSelect(props: ComboSelectProps) {
           <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
+      <PopoverContent className="w-(--radix-popover-trigger-width) p-0">
         <Command>
           <CommandInput placeholder={props.inputPlaceholder || intl.formatMessage(Messages.inputPlaceholder)} />
           <CommandList>

diff --git a/components/CreateCollectiveMiniForm.tsx b/components/CreateCollectiveMiniForm.tsx
@@ -299,7 +299,7 @@ const CreateCollectiveMiniForm = ({
         return (
           <Form data-cy="create-collective-mini-form" className="flex h-full flex-col overflow-y-hidden">
             <H5 fontWeight={600}>{CreateNewMessages[type] ? formatMessage(CreateNewMessages[type]) : null}</H5>
-            <div className="w-full flex-grow overflow-y-auto pb-4">
+            <div className="w-full grow overflow-y-auto pb-4">
               {(isUser || isOrganization) && !noAdminFields && (
                 <StyledInputField
                   name={isOrganization ? 'members[0].member.email' : 'email'}

diff --git a/components/Drawer.tsx b/components/Drawer.tsx
@@ -67,7 +67,7 @@ export function Drawer({
           <div className="relative flex-1 overflow-y-scroll px-4 py-6 sm:px-6">
             {showCloseButton && (
               <StyledRoundButton
-                className="absolute right-5 top-5"
+                className="absolute top-5 right-5"
                 size={36}
                 type="button"
                 isBorderless
@@ -82,7 +82,7 @@ export function Drawer({
           </div>
           {showActionsContainer && (
             <div
-              className="flex flex-shrink-0 flex-wrap justify-between gap-2 border-t p-4"
+              className="flex shrink-0 flex-wrap justify-between gap-2 border-t p-4"
               ref={ref => setDrawerActionsContainer(ref)}
             />
           )}

diff --git a/components/Dropzone.tsx b/components/Dropzone.tsx
@@ -122,7 +122,7 @@ const Dropzone = ({
     <div
       className={cn(
         'group relative flex h-full w-full cursor-pointer place-items-center overflow-hidden rounded-lg border-2 border-dashed border-muted-foreground/25 text-center transition hover:bg-muted/25',
-        'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden',
         '[&>img]:max-h-full [&>img]:max-w-full',
         isDragActive && 'border-muted-foreground/50',
         props.disabled && 'pointer-events-none opacity-60',
@@ -278,7 +278,7 @@ const Dropzone = ({
         </div>
       )}
       {value && showActions && (
-        <div className="absolute right-3 top-3">
+        <div className="absolute top-3 right-3">
           <Button
             variant="outline"
             size="xs"

diff --git a/components/ExchangeRate.tsx b/components/ExchangeRate.tsx
@@ -40,7 +40,7 @@ export const ExchangeRate = ({
   return (
     <Tooltip>
       <TooltipTrigger data-cy={dataCy}>
-        <div className={cn('flex items-center whitespace-nowrap text-xs text-neutral-700', className)}>
+        <div className={cn('flex items-center text-xs whitespace-nowrap text-neutral-700', className)}>
           <InfoIcon
             size={14}
             className={cn({

diff --git a/components/FeedbackModal.tsx b/components/FeedbackModal.tsx
@@ -92,7 +92,7 @@ export function FeedbackModal({
                     />
                     <label
                       htmlFor="okToContact"
-                      className="text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                      className="text-sm leading-none font-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                     >
                       <FormattedMessage defaultMessage="It's OK to contact me for follow up questions." id="OSMRoO" />
                     </label>

diff --git a/components/FilesViewerModal.tsx b/components/FilesViewerModal.tsx
@@ -200,7 +200,7 @@ export default function FilesViewerModal({
       }}
     >
       <DialogPrimitive.Content
-        className="fixed left-0 top-0 z-[3000] flex h-screen w-screen items-center justify-center xl:w-[calc(100vw-var(--drawer-width,0px))]"
+        className="fixed top-0 left-0 z-3000 flex h-screen w-screen items-center justify-center xl:w-[calc(100vw-var(--drawer-width,0px))]"
         onInteractOutside={e => {
           if (allowOutsideInteraction) {
             e.preventDefault();
@@ -212,13 +212,13 @@ export default function FilesViewerModal({
           // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
           <div
             className={clsx(
-              'absolute inset-0 z-[1500] backdrop-blur-sm',
+              'absolute inset-0 z-1500 backdrop-blur-xs',
               open ? 'animate-in fade-in-0' : 'animate-out fade-out-0',
             )}
             onClick={onClose}
           />
         ) : (
-          <DialogOverlay onClick={onClose} className="absolute z-[1500] backdrop-blur-sm" />
+          <DialogOverlay onClick={onClose} className="absolute z-1500 backdrop-blur-xs" />
         )}
 
         <Header>
@@ -300,7 +300,7 @@ export default function FilesViewerModal({
 
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div
-          className="z-[3000] flex max-h-screen w-full justify-center overflow-y-auto px-4 py-16"
+          className="z-3000 flex max-h-screen w-full justify-center overflow-y-auto px-4 py-16"
           onClick={e => {
             if (e.target === e.currentTarget) {
               onClose();

diff --git a/components/GiftCard.tsx b/components/GiftCard.tsx
@@ -83,9 +83,9 @@ const GiftCard = ({
           </p>
         </div>
       )}
-      <div className="absolute bottom-[8px] right-[8px] md:bottom-[12px] md:right-[12px]">
+      <div className="absolute right-[8px] bottom-[8px] md:right-[12px] md:bottom-[12px]">
         <div className="AmountCurrency flex items-start">
-          <span className="text-[2.5rem] font-bold leading-[2.5rem] text-[#313233]">
+          <span className="text-[2.5rem] leading-[2.5rem] font-bold text-[#313233]">
             <Currency value={amount} currency={currency} precision="auto" />
           </span>
           <div className="ml-1">

diff --git a/components/InputAmount.tsx b/components/InputAmount.tsx
@@ -80,10 +80,10 @@ const ConvertedAmountInput = ({ inputId, exchangeRate, onChange, baseAmount, min
   };
 
   return (
-    <div className="flex flex-auto whitespace-nowrap px-2 text-sm text-muted-foreground">
+    <div className="flex flex-auto px-2 text-sm whitespace-nowrap text-muted-foreground">
       <span className="mr-1 align-middle">= {exchangeRate.toCurrency} </span>
       <input
-        className="w-full flex-auto rounded px-[2px] [appearance:textfield] focus:text-foreground [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        className="w-full flex-auto [appearance:textfield] rounded px-[2px] focus:text-foreground [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
         style={{ minWidth }}
         name={inputId}
         id={inputId}
@@ -210,7 +210,7 @@ const InputAmount = ({
       disabled={disabled}
       prepend={
         !hasCurrencyPicker ? (
-          <div className="flex items-center whitespace-nowrap bg-neutral-50 p-2 text-sm text-neutral-800">
+          <div className="flex items-center bg-neutral-50 p-2 text-sm whitespace-nowrap text-neutral-800">
             {formatCurrencyName(currency, currencyDisplay)}
           </div>
         ) : (

diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx
@@ -36,7 +36,7 @@ export function LanguageSwitcher() {
           <TooltipTrigger asChild>
             <SelectTrigger data-cy="language-switcher">
               <div className="flex items-center gap-2 overflow-hidden">
-                <LanguagesIcon className="flex-shrink-0" size={16} />
+                <LanguagesIcon className="shrink-0" size={16} />
                 <span className="truncate">
                   <SelectValue
                     aria-label={defaultLanguage.label}
@@ -50,7 +50,7 @@ export function LanguageSwitcher() {
           <SelectContent className="relative max-h-80 max-w-full">
             {languageOptions.map(option => (
               <SelectItem key={option.value} value={option.value} data-cy="language-option">
-                <div className="flex max-w-[--radix-popper-anchor-width] items-center gap-1">
+                <div className="flex max-w-(--radix-popper-anchor-width) items-center gap-1">
                   <span className="truncate">{option.label}</span>
                   <span>({option.completion})</span>
                 </div>

diff --git a/components/LoginBtn.js b/components/LoginBtn.js
@@ -45,7 +45,7 @@ class LoginBtn extends React.Component {
           this.props.loadingLoggedInUser ? 'h-8 w-8' : 'h-8 px-4',
           this.props.asLink
             ? 'inline'
-            : 'inline-flex items-center justify-center whitespace-nowrap rounded-full border text-sm',
+            : 'inline-flex items-center justify-center rounded-full border text-sm whitespace-nowrap',
         )}
       >
         {this.props.loadingLoggedInUser ? (

diff --git a/components/NewsAndUpdatesModal.js b/components/NewsAndUpdatesModal.js
@@ -57,7 +57,7 @@ const renderStyledCarousel = (data, loading, error, onClose) => {
                 {update.title}
               </P>
             </div>
-            <div className="flex pb-4 pt-2">
+            <div className="flex pt-2 pb-4">
               <StyledLink
                 onClick={onClose}
                 as={Link}
@@ -82,7 +82,7 @@ const renderStyledCarousel = (data, loading, error, onClose) => {
                 />
               </div>
             </div>
-            <div className="flex pb-4 pt-1">
+            <div className="flex pt-1 pb-4">
               <StyledLink
                 onClick={onClose}
                 as={Link}

diff --git a/components/PasswordInput.tsx b/components/PasswordInput.tsx
@@ -27,7 +27,7 @@ export function PasswordInput(inputProps: Omit<React.ComponentProps<typeof Input
         type="button"
         variant="ghost"
         size="icon"
-        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+        className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
         onClick={togglePasswordVisibility}
         aria-label={showPassword ? 'Hide password' : 'Show password'}
       >

diff --git a/components/ProportionalAreaChart.tsx b/components/ProportionalAreaChart.tsx
@@ -32,8 +32,8 @@ const Label = styled.div`
 
 const Area = styled.div<{ percentage: string } & ColorProps>`
   padding: 12px 8px;
-  flex-shrink: 0;
-  flex-grow: 1;
+  shrink: 0;
+  grow: 1;
   flex-basis: ${props => props.percentage};
   ${color}
 `;

diff --git a/components/RichTextEditor.tsx b/components/RichTextEditor.tsx
@@ -714,7 +714,7 @@ export default class RichTextEditor extends React.Component<RichTextEditorProps,
 
         <input id={this.state.id} value={this.state.value} type="hidden" name={inputName} disabled={disabled} />
         <HTMLContent fontSize={fontSize}>
-          <div className="relative focus-visible:[&>_trix-editor]:outline-none">
+          <div className="relative [&>_trix-editor]:focus-visible:outline-hidden">
             {React.createElement('trix-editor', {
               ref: this.editorRef,
               input: this.state.id,

diff --git a/components/SearchTrigger.tsx b/components/SearchTrigger.tsx
@@ -22,11 +22,11 @@ const SearchTrigger = ({ setShowSearchModal }) => {
   const useSearchCommandMenu = LoggedInUser?.hasPreviewFeatureEnabled(PREVIEW_FEATURE_KEYS.SEARCH_COMMAND);
   return (
     <button
-      className="relative flex h-8 w-8 shrink items-center justify-center gap-1.5 rounded-full border text-slate-500 ring-black ring-offset-2 hover:bg-slate-50 focus:outline-none focus-visible:ring-2 lg:w-auto lg:justify-start lg:px-2 lg:pr-4"
+      className="relative flex h-8 w-8 shrink items-center justify-center gap-1.5 rounded-full border text-slate-500 ring-black ring-offset-2 hover:bg-slate-50 focus:outline-hidden focus-visible:ring-2 lg:w-auto lg:justify-start lg:px-2 lg:pr-4"
       onClick={() => setShowSearchModal(true)}
     >
       <Search size={16} />
-      <span className={clsx('hidden whitespace-nowrap text-sm lg:block', useSearchCommandMenu && 'pr-12')}>
+      <span className={clsx('hidden text-sm whitespace-nowrap lg:block', useSearchCommandMenu && 'pr-12')}>
         {useSearchCommandMenu ? (
           <FormattedMessage
             defaultMessage="Type {slash} to search..."

diff --git a/components/SignatureInput.tsx b/components/SignatureInput.tsx
@@ -73,7 +73,7 @@ export const SignatureInput = ({ isSigned, signerName, onChange, values, error }
       ) : (
         <div className={cn(containerClassName, 'p-2')}>
           <SignatureWithCustomFont signerName={signerName} maxSize={Math.min(width, height)} />
-          <div className="absolute right-3 top-3">
+          <div className="absolute top-3 right-3">
             <Button variant="outline" size="sm" onClick={() => onChange(false)}>
               <FormattedMessage defaultMessage="Clear" id="/GCoTA" />
             </Button>

diff --git a/components/StackedAvatars.tsx b/components/StackedAvatars.tsx
@@ -23,7 +23,7 @@ const StackedAvatars = ({
   return (
     <div className="flex items-center">
       {displayed.map(account => (
-        <div key={account.id || account.slug} className="flex items-center first:!ml-0" style={{ marginLeft }}>
+        <div key={account.id || account.slug} className="flex items-center first:ml-0!" style={{ marginLeft }}>
           <LinkCollective
             collective={account}
             withHoverCard={Boolean(withHoverCard)}

diff --git a/components/StepsProgress.js b/components/StepsProgress.js
@@ -121,8 +121,8 @@ const SeparatorLine = styled(props => (
 ))`
   height: 100%;
   z-index: 1;
-  flex-grow: 1;
-  flex-shrink: 1;
+  grow: 1;
+  shrink: 1;
   line {
     stroke-width: 1;
     stroke: #c4c7cc;
@@ -158,7 +158,7 @@ const StepsOuter = styled(Flex)`
 `;
 
 const StepsMobileLeft = styled(Box)`
-  flex-grow: 2;
+  grow: 2;
   flex-direction: column;
 `;
 
@@ -168,7 +168,7 @@ const StepsMobileRight = styled(Flex)`
   height: 56px;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  shrink: 0;
   position: relative;
 `;
 

diff --git a/components/StyledButtonSet.tsx b/components/StyledButtonSet.tsx
@@ -17,7 +17,7 @@ type ButtonItemProps = {
 const ButtonItem = styled(StyledButton)<ButtonItemProps>`
   border-radius: 0;
   line-height: 1.5;
-  flex-grow: 1;
+  grow: 1;
   border-color: ${themeGet('colors.black.300')};
   transition:
     color 0.2s,

diff --git a/components/StyledFilters.tsx b/components/StyledFilters.tsx
@@ -44,7 +44,7 @@ const ButtonContainer = styled.span<{ flexGrow: FlexGrowProps['flexGrow'] }>`
   ${props =>
     props.flexGrow &&
     css`
-      flex-grow: ${props.flexGrow};
+      grow: ${props.flexGrow};
     `}
 `;
 

diff --git a/components/StyledInputAmount.tsx b/components/StyledInputAmount.tsx
@@ -81,10 +81,10 @@ const ConvertedAmountInput = ({ inputId, exchangeRate, onChange, baseAmount, min
   };
 
   return (
-    <div className="flex flex-auto whitespace-nowrap px-2 text-sm text-neutral-500">
+    <div className="flex flex-auto px-2 text-sm whitespace-nowrap text-neutral-500">
       <span className="mr-1 align-middle">= {exchangeRate.toCurrency} </span>
       <input
-        className="w-full flex-auto rounded px-[2px] [appearance:textfield] focus:text-neutral-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        className="w-full flex-auto [appearance:textfield] rounded px-[2px] focus:text-neutral-800 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
         style={{ minWidth }}
         name={inputId}
         id={inputId}
@@ -217,7 +217,7 @@ const StyledInputAmount = ({
     >
       <div className="flex flex-auto basis-1/2">
         {!hasCurrencyPicker ? (
-          <div className="flex items-center whitespace-nowrap bg-neutral-50 p-2 text-sm text-neutral-800">
+          <div className="flex items-center bg-neutral-50 p-2 text-sm whitespace-nowrap text-neutral-800">
             {formatCurrencyName(currency, currencyDisplay)}
           </div>
         ) : (

diff --git a/components/Survey.tsx b/components/Survey.tsx
@@ -126,7 +126,7 @@ export function Survey({
                 />
                 <label
                   htmlFor="okToContact"
-                  className="text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  className="text-sm leading-none font-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                 >
                   <FormattedMessage defaultMessage="It's OK to contact me for follow up questions." id="OSMRoO" />
                 </label>