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>
saleor · Jan 11, 2022 · 90957ac · 90957ac
1 parent df4e76d
commit 90957ac
Show file tree

Hide file tree

Showing 185 changed files with 501 additions and 522 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -173,7 +173,7 @@
     "no-restricted-imports": [
       "error",
       {
-        "paths": ["lodash"]
+        "paths": ["lodash", "@material-ui/icons/Delete"]
       }
     ]
   },

diff --git a/src/apps/components/AppActivateDialog/AppActivateDialog.tsx b/src/apps/components/AppActivateDialog/AppActivateDialog.tsx
@@ -1,6 +1,6 @@
 import { DialogContentText } from "@material-ui/core";
 import ActionDialog from "@saleor/components/ActionDialog";
-import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { getStringOrPlaceholder } from "@saleor/misc";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

diff --git a/src/apps/components/AppDeactivateDialog/AppDeactivateDialog.tsx b/src/apps/components/AppDeactivateDialog/AppDeactivateDialog.tsx
@@ -1,6 +1,6 @@
 import { DialogContentText } from "@material-ui/core";
 import ActionDialog from "@saleor/components/ActionDialog";
-import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { getStringOrPlaceholder } from "@saleor/misc";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

diff --git a/src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx b/src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx
@@ -1,6 +1,6 @@
 import { DialogContentText } from "@material-ui/core";
 import ActionDialog from "@saleor/components/ActionDialog";
-import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { getStringOrPlaceholder } from "@saleor/misc";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

diff --git a/src/apps/components/AppInProgressDeleteDialog/AppInProgressDeleteDialog.tsx b/src/apps/components/AppInProgressDeleteDialog/AppInProgressDeleteDialog.tsx
@@ -1,6 +1,6 @@
 import { DialogContentText } from "@material-ui/core";
 import ActionDialog from "@saleor/components/ActionDialog";
-import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { getStringOrPlaceholder } from "@saleor/misc";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

diff --git a/src/apps/components/AppsInProgress/AppsInProgress.tsx b/src/apps/components/AppsInProgress/AppsInProgress.tsx
@@ -1,14 +1,15 @@
 import {
+  Card,
   CircularProgress as Progress,
   TableBody,
   TableCell,
   TableRow,
   Tooltip,
   Typography
 } from "@material-ui/core";
-import DeleteIcon from "@material-ui/icons/Delete";
 import ErrorIcon from "@material-ui/icons/Error";
 import CardTitle from "@saleor/components/CardTitle";
+import { DeleteIcon, ResponsiveTable } from "@saleor/macaw-ui";
 import { Button, IconButton } from "@saleor/macaw-ui";
 import { renderCollection, stopPropagation } from "@saleor/misc";
 import classNames from "classnames";
@@ -18,7 +19,6 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { JobStatusEnum } from "../../../types/globalTypes";
 import { useStyles } from "../../styles";
 import { AppsInstallations_appsInstallations } from "../../types/AppsInstallations";
-import CardContainer from "../CardContainer";
 
 export interface AppsInProgressProps {
   appsList: AppsInstallations_appsInstallations[];
@@ -38,80 +38,79 @@ const AppsInProgress: React.FC<AppsInProgressProps> = ({
   const classes = useStyles(props);
 
   return (
-    <CardContainer
-      header={
-        <CardTitle
-          title={intl.formatMessage({
-            defaultMessage: "Ongoing Installations",
-            description: "section header"
-          })}
-        />
-      }
-    >
-      <TableBody>
-        {renderCollection(appsList, ({ status, appName, id, message }) => (
-          <TableRow key={id} className={classes.tableRow}>
-            <TableCell className={classes.colName}>
-              <span data-tc="name">{appName}</span>
-            </TableCell>
-            {status === JobStatusEnum.PENDING && (
-              <TableCell
-                className={classNames(
-                  classes.colAction,
-                  classes.colInstallAction
-                )}
-              >
-                <Typography variant="body2" className={classes.text}>
-                  <FormattedMessage
-                    defaultMessage="Installing app..."
-                    description="app installation"
-                  />
-                </Typography>
-                <div className={classes.colSpinner}>
-                  <Progress size={20} />
-                </div>
+    <Card>
+      <CardTitle
+        title={intl.formatMessage({
+          defaultMessage: "Ongoing Installations",
+          description: "section header"
+        })}
+      />
+      <ResponsiveTable>
+        <TableBody>
+          {renderCollection(appsList, ({ status, appName, id, message }) => (
+            <TableRow key={id} className={classes.tableRow}>
+              <TableCell className={classes.colName}>
+                <span data-tc="name">{appName}</span>
               </TableCell>
-            )}
-            {status === JobStatusEnum.FAILED && (
-              <TableCell
-                className={classNames(
-                  classes.colAction,
-                  classes.colInstallAction
-                )}
-              >
-                <Typography variant="body2" className={classes.error}>
-                  <FormattedMessage
-                    defaultMessage="There was a problem during installation"
-                    description="app installation error"
-                  />
-                  <Tooltip
-                    title={<Typography variant="body2">{message}</Typography>}
-                    classes={{
-                      tooltip: classes.customTooltip
-                    }}
-                  >
-                    <ErrorIcon />
-                  </Tooltip>
-                </Typography>
-                <Button onClick={() => onAppInstallRetry(id)}>
-                  <FormattedMessage
-                    defaultMessage="Retry"
-                    description="retry installation"
-                  />
-                </Button>
-                <IconButton
-                  variant="secondary"
-                  color="primary"
-                  onClick={stopPropagation(() => onRemove(id))}
+              {status === JobStatusEnum.PENDING && (
+                <TableCell
+                  className={classNames(
+                    classes.colAction,
+                    classes.colInstallAction
+                  )}
                 >
-                  <DeleteIcon />
-                </IconButton>
-              </TableCell>
-            )}
-          </TableRow>
-        ))}
-      </TableBody>
-    </CardContainer>
+                  <Typography variant="body2" className={classes.text}>
+                    <FormattedMessage
+                      defaultMessage="Installing app..."
+                      description="app installation"
+                    />
+                  </Typography>
+                  <div className={classes.colSpinner}>
+                    <Progress size={20} />
+                  </div>
+                </TableCell>
+              )}
+              {status === JobStatusEnum.FAILED && (
+                <TableCell
+                  className={classNames(
+                    classes.colAction,
+                    classes.colInstallAction
+                  )}
+                >
+                  <Typography variant="body2" className={classes.error}>
+                    <FormattedMessage
+                      defaultMessage="There was a problem during installation"
+                      description="app installation error"
+                    />
+                    <Tooltip
+                      title={<Typography variant="body2">{message}</Typography>}
+                      classes={{
+                        tooltip: classes.customTooltip
+                      }}
+                    >
+                      <ErrorIcon />
+                    </Tooltip>
+                  </Typography>
+                  <Button onClick={() => onAppInstallRetry(id)}>
+                    <FormattedMessage
+                      defaultMessage="Retry"
+                      description="retry installation"
+                    />
+                  </Button>
+                  <IconButton
+                    variant="secondary"
+                    color="primary"
+                    onClick={stopPropagation(() => onRemove(id))}
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </TableCell>
+              )}
+            </TableRow>
+          ))}
+        </TableBody>
+      </ResponsiveTable>
+    </Card>
   );
 };
 

diff --git a/src/apps/components/AppsListPage/AppsListPage.tsx b/src/apps/components/AppsListPage/AppsListPage.tsx
@@ -1,3 +1,4 @@
+import CardSpacer from "@saleor/components/CardSpacer";
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
 import { sectionNames } from "@saleor/intl";
@@ -48,25 +49,30 @@ const AppsListPage: React.FC<AppsListPageProps> = ({
     <Container>
       <PageHeader title={intl.formatMessage(sectionNames.apps)} />
       {!!appsInProgress?.length && (
-        <AppsInProgress
-          appsList={appsInProgress}
-          disabled={loadingAppsInProgress}
-          onAppInstallRetry={onAppInstallRetry}
-          onRemove={onAppInProgressRemove}
-        />
+        <>
+          <AppsInProgress
+            appsList={appsInProgress}
+            disabled={loadingAppsInProgress}
+            onAppInstallRetry={onAppInstallRetry}
+            onRemove={onAppInProgressRemove}
+          />
+          <CardSpacer />
+        </>
       )}
       <InstalledApps
         appsList={installedAppsList}
         onRemove={onInstalledAppRemove}
         onSettingsRowClick={onSettingsRowClick}
         {...listProps}
       />
+      <CardSpacer />
       <CustomApps
         appsList={customAppsList}
         navigateToCustomApp={navigateToCustomApp}
         navigateToCustomAppCreate={navigateToCustomAppCreate}
         onRemove={onCustomAppRemove}
       />
+      <CardSpacer />
       <Marketplace />
     </Container>
   );

diff --git a/src/apps/components/AppsSkeleton/AppsSkeleton.tsx b/src/apps/components/AppsSkeleton/AppsSkeleton.tsx
@@ -9,7 +9,7 @@ export const AppsSkeleton = () => {
 
   return (
     <TableRow className={classes.tableRow}>
-      <TableCell className={classes.colName}>
+      <TableCell colSpan={2} className={classes.colName}>
         <Skeleton />
       </TableCell>
     </TableRow>

diff --git a/src/apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx b/src/apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx
@@ -1,5 +1,4 @@
 import AccountPermissions from "@saleor/components/AccountPermissions";
-import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
@@ -8,6 +7,7 @@ import Savebar from "@saleor/components/Savebar";
 import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo";
 import { AppErrorFragment } from "@saleor/fragments/types/AppErrorFragment";
 import { sectionNames } from "@saleor/intl";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { Backlink } from "@saleor/macaw-ui";
 import { PermissionEnum } from "@saleor/types/globalTypes";
 import { getFormErrors } from "@saleor/utils/errors";

diff --git a/src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx b/src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx
@@ -1,6 +1,5 @@
 import AccountPermissions from "@saleor/components/AccountPermissions";
 import CardSpacer from "@saleor/components/CardSpacer";
-import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
@@ -10,6 +9,7 @@ import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInf
 import { AppErrorFragment } from "@saleor/fragments/types/AppErrorFragment";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { sectionNames } from "@saleor/intl";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { Backlink, Button } from "@saleor/macaw-ui";
 import { PermissionEnum } from "@saleor/types/globalTypes";
 import { getFormErrors } from "@saleor/utils/errors";

diff --git a/src/apps/components/CustomAppTokens/CustomAppTokens.tsx b/src/apps/components/CustomAppTokens/CustomAppTokens.tsx
@@ -5,11 +5,10 @@ import {
   TableHead,
   TableRow
 } from "@material-ui/core";
-import DeleteIcon from "@material-ui/icons/Delete";
 import CardTitle from "@saleor/components/CardTitle";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
-import { Button, IconButton } from "@saleor/macaw-ui";
+import { Button, DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import { renderCollection } from "@saleor/misc";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";