Update to new design theme (#1631)

* Update macaw to 0.3.0 (#1623) * Update macaw to 0.3 * Use proper pagination component * Fix type errors * Remove leftover import * Remove variant and color from confirm button * Remove alias * Update macaw * Fix button type * Random fixes (#1633) * Improve layout components * Use colored svgs * Minor fixes * Fix autocomplete loaders * Fix padding * Fix button variant * Remove codegen file * Fixes after bumping macaw to 0.3 part 2 (#1638) * Fix various visual bugs * Fix type errors * Bump macaw * Random fixes part 3 (#1647) * wip * Fix mismatched paddings * Fix actions container padding * Put story in the right directory * Fix shipping zone picker * Fix minor visual bugs * Remove unused imports * Move styles to separate file * Random fixes part 4 (#1641) * Fix various visual bugs * Fix type errors * Fix last table item padding * Add outline on hover * Fix spaces * Fix spaces * Remove dead code * Fix elevation * Remove dead code * Fix shadows * Add outline to expand button * Fix spacing * Fix spacings * Fix selectable tables hover * Use proper delete icon * Fix ConfirmButtonTransitionState imports * Update src/apps/components/CustomApps/CustomApps.tsx Co-authored-by: Wojciech Mista <wojciech.mista@saleor.io> Co-authored-by: Wojciech Mista <wojciech.mista@saleor.io> * Rework error page (#1670) * Remake error page * Fix types * Update error id styles * Fix types * Login page rework (#1703) * Rework login page * Remove outline * Fix logo and footer placement * Sort imports * Random fixes part 5 (#1669) * Fix text color in dark mode * Update password reset pages (#1714) * Update password reset pages * Update src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com> Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com> * Fix collection page * Update dark mode logo * Bring back "create app" button * Fix spacings * Fix selects * Fix login e2e test * Fix not found page displaying * Update selector * Add missing package * Let dropdown overflow through card * Fix scroll * Fix scroll * Fix overflow on grid element * Fix e2e tests * Fix data-test-id * Update snapshots * Update messages * Update macaw * Update snapshots * Use stable macaw version Co-authored-by: Wojciech Mista <wojciech.mista@saleor.io> Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com>
saleor · Jan 26, 2022 · 4d1fbc1 · 4d1fbc1
1 parent d92ab0d
commit 4d1fbc1
Show file tree

Hide file tree

Showing 37 changed files with 5,846 additions and 10,050 deletions.
diff --git a/src/components/DeleteIconButton/DeleteIconButton.tsx b/src/components/DeleteIconButton/DeleteIconButton.tsx
@@ -1,10 +1,9 @@
-import { IconButton, IconButtonProps } from "@material-ui/core";
-import TrashIcon from "@saleor/icons/Trash";
+import { DeleteIcon, IconButton, IconButtonProps } from "@saleor/macaw-ui";
 import React from "react";
 
 const DeleteIconButton: React.FC<IconButtonProps> = ({ onClick }) => (
-  <IconButton color="primary" onClick={onClick}>
-    <TrashIcon />
+  <IconButton variant="secondary" onClick={onClick}>
+    <DeleteIcon />
   </IconButton>
 );
 

diff --git a/src/components/Money/Money.tsx b/src/components/Money/Money.tsx
@@ -1,49 +1,49 @@
-import { makeStyles, Typography, TypographyProps } from "@material-ui/core";
-import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
-import classNames from "classnames";
+import useLocale from "@saleor/hooks/useLocale";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
+const useStyles = makeStyles(
+  {
+    currency: {
+      fontSize: "0.875em",
+      marginRight: "0.5rem"
+    }
+  },
+  { name: "Money" }
+);
+
 export interface IMoney {
   amount: number;
   currency: string;
 }
 
-export interface MoneyProps extends TypographyProps {
+export interface MoneyProps {
   money: IMoney | null;
 }
 
-const useStyles = makeStyles(
-  () => ({
-    container: {
-      display: "flex",
-      alignItems: "baseline"
-    },
-    containerRight: {
-      justifyContent: "end"
-    }
-  }),
-  { name: "Money" }
-);
-
-export const Money: React.FC<MoneyProps> = ({ money, ...rest }) => {
-  const classes = useStyles({});
+export const Money: React.FC<MoneyProps> = ({ money }) => {
+  const { locale } = useLocale();
+  const classes = useStyles();
 
   if (!money) {
     return null;
   }
 
+  const currencyFractionDigits = new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: money.currency
+  }).resolvedOptions().maximumFractionDigits;
+
+  const amount = (12345.678).toLocaleString(locale, {
+    maximumFractionDigits: currencyFractionDigits,
+    minimumFractionDigits: currencyFractionDigits
+  });
+
   return (
-    <div
-      className={classNames(classes.container, {
-        [classes.containerRight]: rest.align === "right"
-      })}
-    >
-      <Typography variant="caption" {...rest}>
-        {money.currency}
-      </Typography>
-      <HorizontalSpacer spacing={0.5} />
-      <Typography {...rest}>{money.amount.toFixed(2)}</Typography>
-    </div>
+    <>
+      <span className={classes.currency}>{money.currency}</span>
+      {amount}
+    </>
   );
 };
 

diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
@@ -117,7 +117,6 @@ export const TimelineAddNote: React.FC<TimelineAddNoteProps> = props => {
                 className={classes.button}
                 disabled={disabled}
                 onClick={e => submit(e)}
-                disabled={disabled}
               >
                 <FormattedMessage
                   defaultMessage="Send"

diff --git a/src/customers/components/CustomerOrders/CustomerOrders.tsx b/src/customers/components/CustomerOrders/CustomerOrders.tsx
@@ -129,9 +129,9 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
                     <Skeleton />
                   )}
                 </TableCell>
-                <TableCell className={classes.textRight}>
+                <TableCell className={classes.textRight} align="right">
                   {maybe(() => order.total.gross) ? (
-                    <Money money={order.total.gross} align="right" />
+                    <Money money={order.total.gross} />
                   ) : (
                     <Skeleton />
                   )}

diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx
@@ -1,9 +1,10 @@
-import { Button, DialogContent, Typography } from "@material-ui/core";
+import { DialogActions, DialogContent, Typography } from "@material-ui/core";
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import useClipboard from "@saleor/hooks/useClipboard";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { buttonMessages } from "@saleor/intl";
+import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -33,30 +34,27 @@ const GiftCardCreateDialogCodeContent: React.FC<GiftCardCreateDialogCodeContentP
   };
 
   return (
-    <DialogContent>
-      <Typography>
-        {intl.formatMessage(messages.createdGiftCardLabel)}
-      </Typography>
-      <VerticalSpacer />
-      <Typography variant="h6" color="textSecondary" data-test-id="cardCode">
-        {cardCode}
-      </Typography>
-      <VerticalSpacer spacing={2} />
-      <div className={classes.buttonsContainer}>
+    <div className={classes.content}>
+      <DialogContent>
+        <Typography>
+          {intl.formatMessage(messages.createdGiftCardLabel)}
+        </Typography>
+        <VerticalSpacer />
+        <Typography variant="h6" color="textSecondary" data-test-id="cardCode">
+          {cardCode}
+        </Typography>
+        <VerticalSpacer spacing={2} />
+      </DialogContent>
+      <DialogActions>
         <Button onClick={onCopyCode}>
           {intl.formatMessage(messages.copyCodeLabel)}
         </Button>
         <HorizontalSpacer spacing={2} />
-        <Button
-          color="primary"
-          variant="contained"
-          onClick={onClose}
-          data-test="submit"
-        >
+        <Button variant="primary" onClick={onClose} data-test="submit">
           {intl.formatMessage(buttonMessages.ok)}
         </Button>
-      </div>
-    </DialogContent>
+      </DialogActions>
+    </div>
   );
 };
 

diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx
@@ -147,12 +147,7 @@ const GiftCardCreateDialogForm: React.FC<GiftCardCreateDialogFormProps> = ({
 
   return (
     <>
-      <DialogContent
-        style={{
-          overflowY: "auto",
-          overflowX: "hidden"
-        }}
-      >
+      <DialogContent className={classes.dialogContent}>
         <GiftCardCreateMoneyInput {...commonFormProps} set={set} />
         <CardSpacer />
         <GiftCardTagInput

diff --git a/src/giftCards/GiftCardCreateDialog/styles.ts b/src/giftCards/GiftCardCreateDialog/styles.ts
@@ -1,11 +1,16 @@
 import { makeStyles } from "@saleor/macaw-ui";
+import { CSSProperties } from "react";
+
+const contentStyles: CSSProperties = {
+  maxHeight: "calc(100vh - 230px)",
+  overflowY: "auto",
+  overflowX: "hidden"
+};
 
 export const useGiftCardCreateDialogCodeContentStyles = makeStyles(
   () => ({
-    buttonsContainer: {
-      display: "flex",
-      justifyContent: "flex-end",
-      minWidth: 450
+    content: {
+      ...contentStyles
     }
   }),
   { name: "GiftCardCreateDialogCodeContent" }
@@ -21,9 +26,7 @@ export const useGiftCardCreateFormStyles = makeStyles(
     },
     fullWidthContainer: { width: "100%" },
     dialogContent: {
-      minWidth: 550,
-      overflowY: "auto",
-      overflowX: "hidden"
+      ...contentStyles
     }
   }),
   { name: "GiftCardCreateDialogForm" }

diff --git a/...iftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx b/...iftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx
@@ -28,13 +28,15 @@ const GiftCardUpdateDetailsBalanceSection: React.FC = () => {
         className={classNames(classes.labelsContainer, classes.wideContainer)}
       >
         <Typography>{intl.formatMessage(messages.cardBalanceLabel)}</Typography>
-        <div className={classes.labelsContainer}>
+        <Typography className={classes.labelsContainer}>
           <Money money={currentBalance} />
           <HorizontalSpacer />
           /
           <HorizontalSpacer />
-          <Money className={classes.balanceTotal} money={initialBalance} />
-        </div>
+          <Typography component="span" color="textSecondary">
+            <Money money={initialBalance} />
+          </Typography>
+        </Typography>
       </div>
       <CardSpacer />
       <div className={classes.balanceBar}>

diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx
@@ -1,16 +1,11 @@
-import {
-  Button,
-  Card,
-  CardContent,
-  Divider,
-  Typography
-} from "@material-ui/core";
+import { Card, CardContent, Divider, Typography } from "@material-ui/core";
 import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
 import GiftCardTagInput from "@saleor/giftCards/components/GiftCardTagInput";
 import GiftCardUpdateExpirySelect from "@saleor/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect";
+import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -40,7 +35,6 @@ const GiftCardUpdateDetailsCard: React.FC = () => {
           !giftCard?.isExpired && (
             <Button
               data-test-id="set-balance-button"
-              color="primary"
               onClick={openSetBalanceDialog}
             >
               {intl.formatMessage(messages.setBalanceButtonLabel)}
@@ -56,7 +50,7 @@ const GiftCardUpdateDetailsCard: React.FC = () => {
               <CardSpacer />
               <Divider />
               <CardSpacer />
-              <Typography>
+              <Typography color="textSecondary">
                 {intl.formatMessage(messages.tagInputLabel)}
               </Typography>
               <VerticalSpacer />

diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/messages.ts b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/messages.ts
@@ -6,7 +6,7 @@ export const giftCardUpdateDetailsCardMessages = defineMessages({
     description: "details title"
   },
   setBalanceButtonLabel: {
-    defaultMessage: "set balance",
+    defaultMessage: "Set Balance",
     description: "set balance button label"
   },
   cardBalanceLabel: {

diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/styles.ts b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/styles.ts
@@ -22,9 +22,6 @@ export const useGiftCardDetailsBalanceStyles = makeStyles(
       height: 28,
       borderRadius: 14,
       backgroundColor: theme.palette.primary.light
-    },
-    balanceTotal: {
-      color: theme.palette.text.secondary
     }
   }),
   { name: "GiftCardUpdateDetailsBalanceSection" }

diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/GiftCardUpdateExpirySelect.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/GiftCardUpdateExpirySelect.tsx
@@ -45,14 +45,14 @@ const GiftCardUpdateExpirySelect: React.FC = () => {
         checked={cardExpiresSelected}
         onChange={event => setCardExpiresSelected(event.target.value)}
       />
-      <VerticalSpacer spacing={2} />
 
       {cardExpiresSelected && (
         <TextField
           error={!!formErrors?.expiryDate}
           helperText={getGiftCardErrorMessage(formErrors?.expiryDate, intl)}
           onChange={change}
           name={"expiryDate"}
+          fullWidth
           className={classes.dateField}
           label={intl.formatMessage(messages.expiryDateLabel)}
           value={expiryDate}

diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/styles.ts b/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/styles.ts
@@ -7,7 +7,9 @@ export const useGiftCardExpirySelectStyles = makeStyles(
       flexDirection: "row"
     },
     dateField: {
-      width: 400
+      display: "block",
+      width: 400,
+      marginTop: theme.spacing(2)
     },
     periodField: {
       display: "flex"

diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx
@@ -1,10 +1,9 @@
-import { Button } from "@material-ui/core";
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import PageHeader from "@saleor/components/PageHeader";
 import PageTitleWithStatusChip from "@saleor/components/PageTitleWithStatusChip";
 import GiftCardStatusChip from "@saleor/giftCards/components/GiftCardStatusChip/GiftCardStatusChip";
 import { sectionNames } from "@saleor/intl";
-import { Backlink } from "@saleor/macaw-ui";
+import { Backlink, Button } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -47,11 +46,7 @@ const GiftCardUpdatePageHeader: React.FC = () => {
         <GiftCardEnableDisableSection />
         <HorizontalSpacer />
         {!isExpired && (
-          <Button
-            color="primary"
-            variant="contained"
-            onClick={openResendCodeDialog}
-          >
+          <Button variant="primary" onClick={openResendCodeDialog}>
             {intl.formatMessage(messages.resendButtonLabel)}
           </Button>
         )}

diff --git a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
@@ -1,10 +1,10 @@
-import { Button } from "@material-ui/core";
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
 import CardMenu, { CardMenuItem } from "@saleor/components/CardMenu";
 import PageHeader from "@saleor/components/PageHeader";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
+import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -49,8 +49,7 @@ const GiftCardsListHeader: React.FC = () => {
         <CardMenu menuItems={menuItems} data-test="menu" />
         <HorizontalSpacer spacing={2} />
         <Button
-          color="primary"
-          variant="contained"
+          variant="primary"
           onClick={openCreateDialog}
           data-test-id="issueCardButton"
         >

diff --git a/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTable.tsx b/src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTable.tsx
@@ -9,6 +9,7 @@ import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import Checkbox from "@saleor/components/Checkbox";
 import DeleteIconButton from "@saleor/components/DeleteIconButton";
 import Link from "@saleor/components/Link";
+import Money from "@saleor/components/Money";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { customerUrl } from "@saleor/customers/urls";
@@ -130,13 +131,7 @@ const GiftCardsListTable: React.FC = () => {
                     )}
                   </TableCell>
                   <TableCell align="right" className={classes.colBalance}>
-                    <div className={classes.moneyContainer}>
-                      <Typography variant="caption">
-                        {currentBalance.currency}
-                      </Typography>
-                      <HorizontalSpacer spacing={0.5} />
-                      <Typography>{currentBalance.amount}</Typography>
-                    </div>
+                    <Money money={currentBalance} />
                   </TableCell>
                   <TableCell className={classes.colDelete}>
                     <DeleteIconButton