Fix broken styles for tokens in custom apps (#5080)

* fix text display for tokens in apps * changesets * migrate token paper to new macaw
saleor · Jul 30, 2024 · a711406 · a711406
1 parent 55d49ee
commit a711406
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 127 deletions.
diff --git a/.changeset/thin-masks-listen.md b/.changeset/thin-masks-listen.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Components that show app token now display text in multiple lines instead of one.
diff --git a/src/custom-apps/components/CustomAppDefaultToken/CustomAppDefaultToken.tsx b/src/custom-apps/components/CustomAppDefaultToken/CustomAppDefaultToken.tsx
@@ -1,15 +1,12 @@
-import { Button } from "@dashboard/components/Button";
 import { DashboardCard } from "@dashboard/components/Card";
 import Link from "@dashboard/components/Link";
 import useClipboard from "@dashboard/hooks/useClipboard";
-import { Paper } from "@material-ui/core";
 import CloseIcon from "@material-ui/icons/Close";
-import { IconButton } from "@saleor/macaw-ui";
-import { Text } from "@saleor/macaw-ui-next";
+import { Box, Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { useStyles } from "./styles";
+import { Mono } from "../TokenCreateDialog/Mono";
 
 export interface CustomAppDefaultTokenProps {
   apiUrl: string;
@@ -20,21 +17,20 @@ export interface CustomAppDefaultTokenProps {
 
 const CustomAppDefaultToken: React.FC<CustomAppDefaultTokenProps> = props => {
   const { apiUrl, token, onApiUrlClick, onTokenClose } = props;
-  const classes = useStyles(props);
   const [copied, copy] = useClipboard();
 
   return (
-    <DashboardCard className={classes.root}>
-      <DashboardCard.Content>
-        <div className={classes.content}>
+    <DashboardCard boxShadow="defaultModal" position="relative">
+      <DashboardCard.Content padding={4}>
+        <Box display="flex" flexDirection="row" gap={2}>
           <div>
             <Text>
               <FormattedMessage
                 id="ixjvkM"
                 defaultMessage="We’ve created your default token. Make sure to copy your new personal access token now. You won’t be able to see it again."
               />
             </Text>
-            <Text>
+            <Text display="block">
               <FormattedMessage
                 id="DGCzal"
                 defaultMessage="This token gives you access to your shop's API, which you'll find here: {url}"
@@ -48,25 +44,27 @@ const CustomAppDefaultToken: React.FC<CustomAppDefaultTokenProps> = props => {
               />
             </Text>
           </div>
-          <div className={classes.closeContainer}>
-            <IconButton variant="secondary" onClick={onTokenClose}>
-              <CloseIcon />
-            </IconButton>
-          </div>
-        </div>
-        <Paper className={classes.paper} elevation={0}>
-          <Text size={2} fontWeight="light">
+
+          <Button variant="secondary" onClick={onTokenClose}>
+            <CloseIcon />
+          </Button>
+        </Box>
+
+        <Box marginTop={4} backgroundColor="default2" padding={4} borderRadius={8}>
+          <Text size={3} fontWeight="medium">
             <FormattedMessage id="Kxiige" defaultMessage="Generated Token" />
           </Text>
-          <Text>{token}</Text>
-          <Button className={classes.copy} onClick={() => copy(token)}>
+
+          <Mono>{token}</Mono>
+
+          <Button marginTop={4} variant="secondary" onClick={() => copy(token)}>
             {copied ? (
               <FormattedMessage id="r86alc" defaultMessage="Copied" description="button" />
             ) : (
               <FormattedMessage id="HVFq//" defaultMessage="Copy token" description="button" />
             )}
           </Button>
-        </Paper>
+        </Box>
       </DashboardCard.Content>
     </DashboardCard>
   );

diff --git a/src/custom-apps/components/CustomAppDefaultToken/styles.ts b/src/custom-apps/components/CustomAppDefaultToken/styles.ts
diff --git a/src/custom-apps/components/TokenCreateDialog/Mono.tsx b/src/custom-apps/components/TokenCreateDialog/Mono.tsx
@@ -0,0 +1,15 @@
+import { Text } from "@saleor/macaw-ui-next";
+import React, { PropsWithChildren } from "react";
+
+export const Mono: React.FC<PropsWithChildren<{}>> = ({ children }) => (
+  <Text
+    style={{
+      fontFamily:
+        "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+    }}
+    fontSize={2}
+    display="block"
+  >
+    {children}
+  </Text>
+);
diff --git a/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx b/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx
@@ -1,6 +1,5 @@
 // @ts-strict-ignore
 import BackButton from "@dashboard/components/BackButton";
-import { Button } from "@dashboard/components/Button";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
@@ -9,19 +8,12 @@ import { getApiUrl } from "@dashboard/config";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useModalDialogOpen from "@dashboard/hooks/useModalDialogOpen";
 import { buttonMessages } from "@dashboard/intl";
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Paper,
-  TextField,
-} from "@material-ui/core";
-import { Text } from "@saleor/macaw-ui-next";
+import { Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@material-ui/core";
+import { Box, Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { useStyles } from "./styles";
+import { Mono } from "./Mono";
 
 export interface TokenCreateDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
@@ -37,13 +29,18 @@ function handleCopy(token: string) {
   navigator.clipboard.writeText(token);
 }
 
-const Mono = ({ children, className }) => <span className={className}>{children}</span>;
+const tokenPaperStyles = {
+  padding: 4,
+  backgroundColor: "default2",
+  borderRadius: 4,
+  __whiteSpace: "pre-wrap",
+} as const;
+
 const createHeadersString = (token: string) => `{\n  "authorization": "Bearer ${token}"\n}`;
 const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
   const { confirmButtonState, open, token, onClose, onCreate } = props;
   const [step, setStep] = React.useState<TokenCreateStep>("form");
   const intl = useIntl();
-  const classes = useStyles(props);
   const headers = createHeadersString(token);
 
   React.useEffect(() => {
@@ -97,52 +94,60 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
                     />
                   </Text>
                   <CardSpacer />
-                  <Paper className={classes.paper} elevation={0}>
-                    <Text size={2} fontWeight="light">
+                  <Box {...tokenPaperStyles}>
+                    <Text size={4} fontWeight="medium">
                       <FormattedMessage id="5ZxAiY" defaultMessage="Token" />
                     </Text>
-                    <Text data-test-id="generated-token">
-                      <Mono className={classes.mono}>{token}</Mono>
+                    <Text data-test-id="generated-token" display="block">
+                      <Mono>{token}</Mono>
                     </Text>
-                    <Button className={classes.copy} onClick={() => handleCopy(token)}>
+                    <Button variant="secondary" marginTop={2} onClick={() => handleCopy(token)}>
                       <FormattedMessage
                         id="HVFq//"
                         defaultMessage="Copy token"
                         description="button"
                       />
                     </Button>
-                  </Paper>
+                  </Box>
                   <CardSpacer />
-                  <Paper className={classes.paper} elevation={0}>
-                    <Text size={2} fontWeight="light">
+                  <Box {...tokenPaperStyles}>
+                    <Text size={4} fontWeight="medium">
                       <FormattedMessage id="Wm+KUd" defaultMessage="Headers" />
                     </Text>
-                    <Text data-test-id="generated-headers">
-                      <Mono className={classes.mono}>{headers}</Mono>
+                    <Text data-test-id="generated-headers" display="block">
+                      <Mono>{headers}</Mono>
                     </Text>
-                    <Button className={classes.copy} onClick={() => handleCopy(headers)}>
-                      <FormattedMessage
-                        id="ZhqH8J"
-                        defaultMessage="Copy headers"
-                        description="button"
-                      />
-                    </Button>
-                    <Button className={classes.copy} onClick={openPlayground}>
-                      <FormattedMessage
-                        id="0KmZCN"
-                        defaultMessage="Open playground"
-                        description="button"
-                      />
-                    </Button>
-                  </Paper>
+                    <Box
+                      display="flex"
+                      flexDirection="row"
+                      alignItems="center"
+                      gap={2}
+                      marginTop={2}
+                    >
+                      <Button variant="secondary" onClick={() => handleCopy(headers)}>
+                        <FormattedMessage
+                          id="ZhqH8J"
+                          defaultMessage="Copy headers"
+                          description="button"
+                        />
+                      </Button>
+                      <Button variant="secondary" onClick={openPlayground}>
+                        <FormattedMessage
+                          id="0KmZCN"
+                          defaultMessage="Open playground"
+                          description="button"
+                        />
+                      </Button>
+                    </Box>
+                  </Box>
                   <CardSpacer />
                 </>
               )}
             </DialogContent>
             <DialogActions>
               {step === "form" ? (
                 <>
-                  <BackButton className={classes.cancel} onClick={onClose} />
+                  <BackButton marginRight={1} onClick={onClose} />
                   <ConfirmButton
                     data-test-id="submit"
                     transitionState={confirmButtonState}

diff --git a/src/custom-apps/components/TokenCreateDialog/styles.ts b/src/custom-apps/components/TokenCreateDialog/styles.ts