Fix sales/voucher page styles and fix date tooltips styles (#2154)

* Fix voucher sales page style

* Update date tooltips in sales and vouchers

src/components/Date/Date.tsx

@@ -5,6 +5,7 @@ import React from "react";
 
 import { LocaleConsumer } from "../Locale";
 import { Consumer } from "./DateContext";
+import { useStyles } from "./styles";
 
 interface DateProps {
   date: string;
@@ -12,7 +13,10 @@ interface DateProps {
 }
 
 export const Date: React.FC<DateProps> = ({ date, plain }) => {
+  const classes = useStyles();
+
   const localizeDate = useDateLocalize();
+
   const getHumanized = (value: string, locale: string, currentDate: number) =>
     moment(value)
       .locale(locale)
@@ -26,7 +30,12 @@ export const Date: React.FC<DateProps> = ({ date, plain }) => {
             plain ? (
               localizeDate(date)
             ) : (
-              <Tooltip title={localizeDate(date)}>
+              <Tooltip
+                title={localizeDate(date)}
+                PopperProps={{
+                  className: classes.tooltip,
+                }}
+              >
                 <time dateTime={date}>
                   {getHumanized(date, locale, currentDate)}
                 </time>

src/components/Date/DateTime.tsx

@@ -6,6 +6,7 @@ import ReactMoment from "react-moment";
 import { LocaleConsumer } from "../Locale";
 import { TimezoneConsumer } from "../Timezone";
 import { Consumer } from "./DateContext";
+import { useStyles } from "./styles";
 
 interface DateTimeProps {
   date: string;
@@ -13,6 +14,8 @@ interface DateTimeProps {
 }
 
 export const DateTime: React.FC<DateTimeProps> = ({ date, plain }) => {
+  const classes = useStyles();
+
   const getTitle = (value: string, locale?: string, tz?: string) => {
     let date = moment(value).locale(locale);
     if (tz !== undefined) {
@@ -20,6 +23,7 @@ export const DateTime: React.FC<DateTimeProps> = ({ date, plain }) => {
     }
     return date.format("lll");
   };
+
   return (
     <TimezoneConsumer>
       {tz => (
@@ -30,7 +34,12 @@ export const DateTime: React.FC<DateTimeProps> = ({ date, plain }) => {
                 plain ? (
                   getTitle(date, locale, tz)
                 ) : (
-                  <Tooltip title={getTitle(date, locale, tz)}>
+                  <Tooltip
+                    title={getTitle(date, locale, tz)}
+                    PopperProps={{
+                      className: classes.tooltip,
+                    }}
+                  >
                     <ReactMoment from={currentDate} locale={locale} tz={tz}>
                       {date}
                     </ReactMoment>

src/components/Date/styles.ts

@@ -0,0 +1,14 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  theme => ({
+    tooltip: {
+      "& .MuiTooltip-tooltip": {
+        color: theme.palette.getContrastText(theme.palette.text.primary),
+      },
+    },
+  }),
+  {
+    name: "DateTime",
+  },
+);

src/discounts/components/VoucherValue/VoucherValue.tsx

@@ -9,7 +9,6 @@ import {
 import CardTitle from "@saleor/components/CardTitle";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import { FormSpacer } from "@saleor/components/FormSpacer";
-import Hr from "@saleor/components/Hr";
 import RadioGroupField from "@saleor/components/RadioGroupField";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
@@ -172,7 +171,6 @@ const VoucherValue: React.FC<VoucherValueProps> = props => {
         <FormSpacer />
         {variant === "update" && (
           <>
-            <Hr className={classes.hr} />
             <RadioGroupField
               choices={voucherTypeChoices}
               disabled={disabled}

src/discounts/components/VoucherValue/styles.ts

@@ -15,16 +15,11 @@ export const useStyles = makeStyles(
       textAlign: "right",
       width: 300,
     },
-    hr: {
-      margin: theme.spacing(2, -3),
-      width: `calc(100% + ${theme.spacing(6)}px)`,
-    },
     table: {
       tableLayout: "fixed",
     },
     tableContainer: {
-      margin: theme.spacing(0, -3),
-      width: `calc(100% + ${theme.spacing(6)}px)`,
+      margin: theme.spacing(0, -4),
     },
   }),
   {

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -95322,9 +95322,6 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
               <div
                 class="FormSpacer-spacer-id"
               />
-              <hr
-                class="Hr-root-id VoucherValue-hr-id"
-              />
               <div
                 class="MuiFormControl-root-id RadioGroupField-root-id"
               >
@@ -97677,9 +97674,6 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
               <div
                 class="FormSpacer-spacer-id"
               />
-              <hr
-                class="Hr-root-id VoucherValue-hr-id"
-              />
               <div
                 class="MuiFormControl-root-id RadioGroupField-root-id"
               >
@@ -100057,9 +100051,6 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
               <div
                 class="FormSpacer-spacer-id"
               />
-              <hr
-                class="Hr-root-id VoucherValue-hr-id"
-              />
               <div
                 class="MuiFormControl-root-id RadioGroupField-root-id"
               >