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
saleor · Dec 22, 2021 · 3a4f16a · 3a4f16a
1 parent fefb031
commit 3a4f16a
Show file tree

Hide file tree

Showing 26 changed files with 124 additions and 104 deletions.
diff --git a/src/apps/components/HorizontalSpacer/HorizontalSpacer.stories.tsx b/src/apps/components/HorizontalSpacer/HorizontalSpacer.stories.tsx
@@ -15,7 +15,7 @@ const HelperWrapper: React.FC<HelperWrapperProps> = ({ children }) => (
 
 const Text: React.FC = () => <Typography>{"<- The spacer is here"}</Typography>;
 
-storiesOf("Generic / Horizontal Spacer", module)
+storiesOf("Generics / Horizontal Spacer", module)
   .addDecorator(Decorator)
   .add("without", () => (
     <HelperWrapper>

diff --git a/src/channels/components/ShippingZonesCard/ShippingZoneItem.tsx b/src/channels/components/ShippingZonesCard/ShippingZoneItem.tsx
@@ -1,21 +1,9 @@
 import { Divider, Typography } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
 import { ChannelShippingZone } from "@saleor/channels/pages/ChannelDetailsPage/types";
 import DeletableItem from "@saleor/components/DeletableItem";
 import React from "react";
 
-const useStyles = makeStyles(
-  theme => ({
-    container: {
-      paddingLeft: theme.spacing(3),
-      display: "flex",
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center"
-    }
-  }),
-  { name: "ShippingZoneItem" }
-);
+import useStyles from "./styles";
 
 interface ShippingZoneItemProps {
   zone: ChannelShippingZone;

diff --git a/src/channels/components/ShippingZonesCard/ShippingZonesCard.tsx b/src/channels/components/ShippingZonesCard/ShippingZonesCard.tsx
@@ -6,13 +6,13 @@ import {
   Typography
 } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
-import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
 
 import ShippingZoneItem from "./ShippingZoneItem";
 import ShippingZonesCardListFooter from "./ShippingZonesCardListFooter";
 import ShippingZonesListHeader from "./ShippingZonesListHeader";
+import { useExpanderStyles } from "./styles";
 import { ShippingZonesProps } from "./types";
 
 const messages = defineMessages({
@@ -27,26 +27,6 @@ const messages = defineMessages({
   }
 });
 
-const useExpanderStyles = makeStyles(
-  () => ({
-    // empty expanded needed for mui to use root styles
-    expanded: {},
-    root: {
-      boxShadow: "none",
-
-      "&:before": {
-        content: "none"
-      },
-
-      "&$expanded": {
-        margin: 0,
-        border: "none"
-      }
-    }
-  }),
-  { name: "ShippingZonesCardExpander" }
-);
-
 type ShippingZonesCardProps = ShippingZonesProps;
 
 const ShippingZonesCard: React.FC<ShippingZonesCardProps> = props => {

diff --git a/src/channels/components/ShippingZonesCard/ShippingZonesCardListFooter.tsx b/src/channels/components/ShippingZonesCard/ShippingZonesCardListFooter.tsx
@@ -6,6 +6,7 @@ import { mapNodeToChoice } from "@saleor/utils/maps";
 import React, { useEffect, useRef, useState } from "react";
 import { defineMessages } from "react-intl";
 
+import useStyles from "./styles";
 import { ShippingZonesProps } from "./types";
 
 const messages = defineMessages({
@@ -24,6 +25,8 @@ const ShippingZonesCardListFooter: React.FC<ShippingZonesCardListFooterProps> =
   addShippingZone,
   shippingZones
 }) => {
+  const classes = useStyles();
+
   const [isChoicesSelectShown, setIsChoicesSelectShown] = useState(false);
   const shippingZonesRef = useRef<ChannelShippingZones>(shippingZones);
 
@@ -49,7 +52,7 @@ const ShippingZonesCardListFooter: React.FC<ShippingZonesCardListFooterProps> =
 
   return isChoicesSelectShown ? (
     <ClickAwayListener onClickAway={handleFooterClickAway}>
-      <div>
+      <div className={classes.root}>
         <SingleAutocompleteSelectField
           data-test-id="shippingAutoCompleteSelect"
           value=""

diff --git a/src/channels/components/ShippingZonesCard/ShippingZonesListHeader.tsx b/src/channels/components/ShippingZonesCard/ShippingZonesListHeader.tsx
@@ -20,6 +20,7 @@ const useStyles = makeStyles(
       width: "100%",
       border: "none",
       marginRight: theme.spacing(1),
+      padding: 0,
       paddingBottom: theme.spacing(2),
       minHeight: 0,
 
@@ -28,7 +29,6 @@ const useStyles = makeStyles(
       }
     },
     content: {
-      paddingLeft: theme.spacing(1),
       margin: 0,
 
       "&$expanded": {

diff --git a/src/channels/components/ShippingZonesCard/styles.ts b/src/channels/components/ShippingZonesCard/styles.ts
@@ -0,0 +1,39 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useExpanderStyles = makeStyles(
+  theme => ({
+    expanded: {},
+    root: {
+      boxShadow: "none",
+      padding: theme.spacing(1, 4),
+
+      "&:before": {
+        content: "none"
+      },
+
+      "&$expanded": {
+        margin: 0,
+        border: "none"
+      }
+    }
+  }),
+  { name: "Expander" }
+);
+
+const useStyles = makeStyles(
+  theme => ({
+    container: {
+      padding: theme.spacing(1, 0),
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    root: {
+      paddingRight: theme.spacing(1)
+    }
+  }),
+  { name: "ShippingZonesCard" }
+);
+
+export default useStyles;
diff --git a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
@@ -51,6 +51,7 @@ const useStyles = makeStyles(
     loadMoreLoaderContainer: {
       alignItems: "center",
       display: "flex",
+      marginTop: theme.spacing(2),
       height: theme.spacing(3),
       justifyContent: "center"
     },
@@ -146,7 +147,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
         id={scrollableTargetId}
       >
         <InfiniteScroll
-          dataLength={attributes?.length}
+          dataLength={attributes?.length || 0}
           next={onFetchMore}
           hasMore={hasMore}
           scrollThreshold="100px"

diff --git a/src/components/ChannelsAvailability/styles.ts b/src/components/ChannelsAvailability/styles.ts
@@ -50,9 +50,7 @@ export const useStyles = makeStyles(
       position: "relative"
     },
     label: {
-      lineHeight: 1.2,
-      marginBottom: 5,
-      marginTop: 0
+      lineHeight: 1.2
     },
     listingLabel: {
       marginTop: 9

diff --git a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx
@@ -73,6 +73,9 @@ const ChannelContent: React.FC<ChannelContentProps> = ({
   return (
     <div className={classes.container}>
       <RadioSwitchField
+        classes={{
+          radioLabel: classes.radioLabel
+        }}
         className={classes.radioField}
         disabled={disabled}
         firstOptionLabel={
@@ -156,6 +159,9 @@ const ChannelContent: React.FC<ChannelContentProps> = ({
         <>
           <Hr />
           <RadioSwitchField
+            classes={{
+              radioLabel: classes.radioLabel
+            }}
             className={classes.radioField}
             disabled={disabled}
             firstOptionLabel={

diff --git a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.stories.tsx b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.stories.tsx
@@ -10,7 +10,6 @@ import React from "react";
 import ChannelsAvailabilityCard, {
   ChannelsAvailabilityCardProps
 } from "./ChannelsAvailabilityCard";
-import { Messages } from "./types";
 
 const user: User = {
   __typename: "User",
@@ -53,16 +52,16 @@ storiesOf("Generics / Channels availability card", module)
       {...props}
       channelsList={undefined}
       channels={productChannels}
-      messages={productChannels.reduce(
-        (prevVal, currVal) => ({
-          ...prevVal,
-          [currVal.id]: {
-            availableLabel: "Available",
-            availableSecondLabel: "Will become available",
-            hiddenSecondLabel: "Will become published"
-          }
-        }),
-        {} as Messages
-      )}
+      messages={{
+        availableLabel: "Available",
+        availableSecondLabel: "Will become available",
+        unavailableLabel: "Lorem Ipsum",
+        visibleSecondLabel: "Dolor Sit Amet",
+        hiddenSecondLabel: "Will become published",
+        hiddenLabel: "Hidden",
+        visibleLabel: "Visible",
+        availableDateText: "available from 07/30/2020",
+        setAvailabilityDateLabel: "xd4"
+      }}
     />
   ));
diff --git a/src/components/ChannelsAvailabilityCard/styles.ts b/src/components/ChannelsAvailabilityCard/styles.ts
@@ -57,13 +57,16 @@ export const useStyles = makeStyles(
       position: "relative"
     },
     label: {
-      lineHeight: 1.2,
-      marginBottom: 5,
-      marginTop: 0
+      lineHeight: 1.2
     },
     listingLabel: {
       marginTop: 9
     },
+    radioLabel: {
+      "& > span": {
+        padding: theme.spacing(0, 0.5)
+      }
+    },
     rotate: {
       transform: "rotate(180deg)"
     },

diff --git a/src/components/DeletableItem/DeletableItem.tsx b/src/components/DeletableItem/DeletableItem.tsx
@@ -1,34 +1,18 @@
-import { makeStyles } from "@material-ui/core/styles";
-import TrashIcon from "@saleor/icons/Trash";
+import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import React from "react";
 
-const useStyles = makeStyles(
-  theme => ({
-    container: {
-      cursor: "pointer",
-      padding: theme.spacing(3),
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center"
-    }
-  }),
-  { name: "DeletableItem" }
-);
-
 interface DeletableItemProps {
   onDelete: (id: string) => void;
   id: string;
 }
 
 const DeletableItem: React.FC<DeletableItemProps> = ({ onDelete, id }) => {
-  const classes = useStyles({});
-
   const handleDelete = () => onDelete(id);
 
   return (
-    <div className={classes.container} onClick={handleDelete}>
-      <TrashIcon />
-    </div>
+    <IconButton variant="secondary" hoverOutline onClick={handleDelete}>
+      <DeleteIcon />
+    </IconButton>
   );
 };
 

diff --git a/src/components/FilterBar/FilterBar.tsx b/src/components/FilterBar/FilterBar.tsx
@@ -22,12 +22,12 @@ const useStyles = makeStyles(
       borderBottom: `1px solid ${theme.palette.divider}`,
       display: "flex",
       flexWrap: "wrap",
-      padding: theme.spacing(1, 3)
+      padding: theme.spacing(1, 4)
     },
     tabActionButton: {
       marginLeft: theme.spacing(2),
-      paddingLeft: theme.spacing(3),
-      paddingRight: theme.spacing(3)
+      paddingLeft: theme.spacing(4),
+      paddingRight: theme.spacing(4)
     }
   }),
   {

diff --git a/src/components/LinkChoice/LinkChoice.tsx b/src/components/LinkChoice/LinkChoice.tsx
@@ -23,7 +23,8 @@ const useStyles = makeStyles(
     menuItem: {
       "&:not(:last-of-type)": {
         marginBottom: theme.spacing()
-      }
+      },
+      borderRadius: 4
     },
     paper: {
       padding: theme.spacing()

diff --git a/src/components/Metadata/MetadataCard.tsx b/src/components/Metadata/MetadataCard.tsx
@@ -203,7 +203,7 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
                   </TableBody>
                 </Table>
               )}
-              <CardActions>
+              <CardActions className={classes.actions}>
                 <Button
                   data-test="addField"
                   onClick={() =>

diff --git a/src/components/Metadata/styles.ts b/src/components/Metadata/styles.ts
@@ -28,6 +28,12 @@ const useStyles = makeStyles(
         ...colName
       },
       colValue: {},
+      actions: {
+        "&&": {
+          paddingBottom: theme.spacing(2),
+          paddingTop: theme.spacing(2)
+        }
+      },
       content: {
         paddingBottom: 0,
         paddingTop: theme.spacing()