styles(GiftCards): modernize admin UI (#10944)

opencollective · Jan 30, 2025 · 7c21dea · 7c21dea
1 parent 43e9d7c
commit 7c21dea
Show file tree

Hide file tree

Showing 36 changed files with 525 additions and 380 deletions.
diff --git a/components/CreateGiftCardsForm.js b/components/CreateGiftCardsForm.js
@@ -14,6 +14,7 @@ import { isPrepaid } from '../lib/constants/payment-methods';
 import { gqlV1 } from '../lib/graphql/helpers';
 import { compose, reportValidityHTML5 } from '../lib/utils';
 
+import { Button } from './ui/Button';
 import CollectivePicker from './CollectivePicker';
 import Container from './Container';
 import CreateGiftCardsSuccess from './CreateGiftCardsSuccess';
@@ -23,7 +24,6 @@ import Link from './Link';
 import Loading from './Loading';
 import MessageBox from './MessageBox';
 import PaymentMethodSelect from './PaymentMethodSelect';
-import StyledButton from './StyledButton';
 import StyledCheckbox from './StyledCheckbox';
 import StyledInput from './StyledInput';
 import StyledInputAmount from './StyledInputAmount';
@@ -311,30 +311,22 @@ class CreateGiftCardsForm extends Component {
     const count = this.getGiftCardsCount();
     const enable = this.isSubmitEnabled();
     return (
-      <StyledButton
-        type="submit"
-        buttonSize="large"
-        buttonStyle="primary"
-        minWidth="16em"
-        disabled={!submitting && !enable}
-        loading={submitting}
-        data-cy="submit-new-gift-cards"
-      >
+      <Button type="submit" disabled={!submitting && !enable} loading={submitting} data-cy="submit-new-gift-cards">
         <FormattedMessage id="giftCards.generate" defaultMessage="Create {count} gift cards" values={{ count }} />
-      </StyledButton>
+      </Button>
     );
   }
 
   renderNoPaymentMethodMessage() {
     return (
       <Flex justifyContent="center">
         <Link href={`/dashboard/${this.props.collectiveSlug}/payment-methods`}>
-          <StyledButton buttonSize="large" mt="2em" justifyContent="center">
+          <Button className="mt-8 justify-center">
             <FormattedMessage
               id="giftCards.create.requirePM"
               defaultMessage="Add a payment method to create gift cards"
             />
-          </StyledButton>
+          </Button>
         </Link>
       </Flex>
     );

diff --git a/components/CreateGiftCardsSuccess.js b/components/CreateGiftCardsSuccess.js
@@ -9,9 +9,9 @@ import styled from 'styled-components';
 import { giftCardsDownloadUrl } from '../lib/url-helpers';
 import { getWebsiteUrl } from '../lib/utils';
 
+import { Button } from './ui/Button';
 import FileDownloader from './FileDownloader';
 import { Box, Flex } from './Grid';
-import StyledButton from './StyledButton';
 import StyledInput from './StyledInput';
 import { P } from './Text';
 
@@ -83,17 +83,10 @@ export default class CreateGiftCardsSuccess extends React.Component {
 
         <Flex width={1} flexDirection="column" alignItems="center">
           <Flex my={3} flexWrap="wrap" justifyContent="center">
-            <StyledButton
-              m={2}
-              minWidth={270}
-              buttonSize="large"
-              buttonStyle="primary"
-              onClick={this.copyLinksToClipboard}
-            >
-              <Clipboard size="1em" />
-              &nbsp;
+            <Button className="mx-2 min-w-[270px]" onClick={this.copyLinksToClipboard}>
+              <Clipboard className="mr-2" size="1em" />
               <FormattedMessage id="CreateGiftCardsSuccess.RedeemLinks" defaultMessage="Copy links" />
-            </StyledButton>
+            </Button>
             {this.props.cards.length < 300 && (
               <FileDownloader
                 url={downloadUrl}
@@ -105,18 +98,16 @@ export default class CreateGiftCardsSuccess extends React.Component {
                 })}
               >
                 {({ loading, downloadFile }) => (
-                  <StyledButton
-                    minWidth={270}
-                    m={2}
-                    buttonSize="large"
-                    loading={loading}
+                  <Button
+                    className="mx-2 min-w-[270px]"
+                    disabled={loading}
                     onClick={downloadFile}
                     data-cy="download-gift-cards-btn"
+                    variant="outline"
                   >
-                    <Printer size="1em" />
-                    &nbsp;
+                    <Printer className="mr-2" size="1em" />
                     <FormattedMessage id="CreateGiftCardsSuccess.Download" defaultMessage="Download cards" />
-                  </StyledButton>
+                  </Button>
                 )}
               </FileDownloader>
             )}

diff --git a/components/GiftCard.tsx b/components/GiftCard.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Clock } from 'lucide-react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 
-import type { GraphQLV1Collective } from '../lib/custom_typings/GraphQLV1Collective';
+import type { GraphQLV1Collective } from '../lib/custom_typings/GraphQLV1';
 import type { Currency as GraphQLCurrency } from '../lib/graphql/types/v2/schema';
 
 import CollectiveCard from './gift-cards/CollectiveCard';

diff --git a/components/GiftCardDetails.js b/components/GiftCardDetails.js
@@ -9,11 +9,12 @@ import styled, { withTheme } from 'styled-components';
 import { formatCurrency } from '../lib/currency-utils';
 
 import GiftCard from './icons/GiftCard';
+import { Button } from './ui/Button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/Collapsible';
 import Avatar from './Avatar';
 import Container from './Container';
 import { Box, Flex } from './Grid';
 import Link from './Link';
-import StyledButton from './StyledButton';
 import { Span } from './Text';
 
 const DetailsColumnHeader = styled.span`
@@ -184,43 +185,40 @@ class GiftCardDetails extends React.Component {
           )}
         </Box>
         {/* Infos + details column */}
-        <Flex flexDirection="column" p="0.1em">
-          <Box>
-            <strong>{this.renderValue()}</strong>{' '}
-            <GiftCardStatus isConfirmed={isConfirmed} collective={collective} data={data} />
-          </Box>
-          <Box color={this.props.theme.colors.black[500]} fontSize="0.9em">
-            <Flex alignItems="center">
-              <FormattedMessage
-                id="giftCards.balance"
-                defaultMessage="Balance: {balance}"
-                values={{ balance: formatCurrency(balance, currency, { locale }) }}
-              />
-              {isExpired && (
-                <React.Fragment>
-                  <Box mx={1}>|</Box>
-                  <FormattedMessage id="GiftCard.Expired" defaultMessage="Expired" />
-                </React.Fragment>
-              )}
-              <Box mx={1}>|</Box>
-              <StyledButton
-                isBorderless
-                buttonSize="tiny"
-                buttonStyle="secondary"
-                fontSize="11px"
-                onClick={() => this.toggleExpended()}
-                px={1}
-              >
-                {this.state.expended ? (
-                  <FormattedMessage id="closeDetails" defaultMessage="Close Details" />
-                ) : (
-                  <FormattedMessage id="viewDetails" defaultMessage="View Details" />
+        <Collapsible>
+          <Flex flexDirection="column" p="0.1em">
+            <Box>
+              <strong>{this.renderValue()}</strong>{' '}
+              <GiftCardStatus isConfirmed={isConfirmed} collective={collective} data={data} />
+            </Box>
+            <Box color={this.props.theme.colors.black[500]} fontSize="0.9em">
+              <Flex alignItems="center">
+                <FormattedMessage
+                  id="giftCards.balance"
+                  defaultMessage="Balance: {balance}"
+                  values={{ balance: formatCurrency(balance, currency, { locale }) }}
+                />
+                {isExpired && (
+                  <React.Fragment>
+                    <Box mx={1}>|</Box>
+                    <FormattedMessage id="GiftCard.Expired" defaultMessage="Expired" />
+                  </React.Fragment>
                 )}
-              </StyledButton>
-            </Flex>
-          </Box>
-          {this.state.expended && this.renderDetails()}
-        </Flex>
+                <Box mx={1}>|</Box>
+                <CollapsibleTrigger asChild>
+                  <Button variant="link" className="font-normal" size="xs">
+                    {this.state.expended ? (
+                      <FormattedMessage id="closeDetails" defaultMessage="Close Details" />
+                    ) : (
+                      <FormattedMessage id="viewDetails" defaultMessage="View Details" />
+                    )}
+                  </Button>
+                </CollapsibleTrigger>
+              </Flex>
+            </Box>
+            <CollapsibleContent className="mt-4 w-full">{this.renderDetails()}</CollapsibleContent>
+          </Flex>
+        </Collapsible>
       </Flex>
     );
   }

diff --git a/components/dashboard/DashboardSection.tsx b/components/dashboard/DashboardSection.tsx
@@ -163,7 +163,9 @@ const DashboardSection = ({ account, isLoading, section, subpath }) => {
     return (
       <div className="w-full max-w-screen-lg pb-6">
         <OCFBannerWithData isDashboard collective={account} hideNextSteps={section === 'host'} />
-        {SECTION_LABELS[section] && <DashboardHeader className="mb-2" title={formatMessage(SECTION_LABELS[section])} />}
+        {SECTION_LABELS[section] && section !== ALL_SECTIONS.GIFT_CARDS && (
+          <DashboardHeader className="mb-2" title={formatMessage(SECTION_LABELS[section])} />
+        )}
 
         <AccountSettings account={account} section={section} />
       </div>
@@ -187,7 +189,9 @@ const DashboardSection = ({ account, isLoading, section, subpath }) => {
       // <div className="flex max-w-screen-lg justify-center">
       <div className="max-w-screen-md flex-1 pb-6">
         <OCFBannerWithData isDashboard collective={account} hideNextSteps={section === 'host'} />
-        {SECTION_LABELS[section] && <DashboardHeader className="mb-2" title={formatMessage(SECTION_LABELS[section])} />}
+        {SECTION_LABELS[section] && section !== ALL_SECTIONS.GIFT_CARDS && (
+          <DashboardHeader className="mb-2" title={formatMessage(SECTION_LABELS[section])} />
+        )}
 
         <AccountSettings account={account} section={section} />
       </div>

diff --git a/components/edit-collective/Form.js b/components/edit-collective/Form.js
@@ -26,6 +26,7 @@ import InputField from '../InputField';
 import Link from '../Link';
 import StyledButton from '../StyledButton';
 import StyledLink from '../StyledLink';
+import { Button } from '../ui/Button';
 
 // Actions
 import Archive from './actions/Archive';
@@ -445,10 +446,10 @@ class EditCollectiveForm extends React.Component {
               flexWrap="wrap"
             >
               <Link href={`/dashboard/${collective.slug}/gift-cards`} data-cy="back-to-giftcards-list">
-                <StyledButton>
+                <Button variant="outline">
                   <ArrowBack size="1em" />{' '}
                   <FormattedMessage id="giftCards.returnToEdit" defaultMessage="Back to Gift Cards list" />
-                </StyledButton>
+                </Button>
               </Link>
 
               <StyledLink