refactor: [M3-8775] - Make the Support Ticket UI look slightly less broken

packages/manager/.changeset/pr-11144-changed-1729684811107.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Slightly improve styles on support ticket flows ([#11144](https://github.com/linode/manager/pull/11144))

packages/manager/src/components/Paper.tsx

@@ -40,11 +40,11 @@ export const Paper = (props: Props) => {
 const StyledPaper = styled(_Paper, {
   shouldForwardProp: omittedProps(['error']),
 })<Props>(({ theme, ...props }) => ({
-  borderColor: props.error ? theme.color.red : undefined,
+  borderColor: props.error ? theme.palette.error.dark : undefined,
   padding: theme.spacing(3),
   paddingTop: 17,
 }));
 
 const StyledErrorText = styled(FormHelperText)(({ theme }) => ({
-  color: theme.color.red,
+  color: theme.palette.error.dark,
 }));

packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/MarkdownReference.tsx

@@ -1,66 +1,56 @@
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
+import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown';
 import { Link } from 'src/components/Link';
+import { Paper } from 'src/components/Paper';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 
-import type { Theme } from '@mui/material/styles';
-
-const useStyles = makeStyles()((theme: Theme) => ({
-  example: {
-    backgroundColor: theme.name === 'dark' ? theme.bg.white : theme.bg.offWhite,
-    margin: `${theme.spacing(2)} 0`,
-    padding: theme.spacing(2),
-  },
-  header: {
-    marginBottom: theme.spacing(),
-    marginTop: theme.spacing(2),
-  },
-}));
-
 interface Props {
   isReply?: boolean;
-  rootClass?: string;
 }
 
 export const MarkdownReference = (props: Props) => {
-  const { classes } = useStyles();
-
   return (
-    <div className={props.rootClass}>
+    <Stack spacing={2}>
       <Typography>
         You can use Markdown to format your{' '}
-        {props.isReply ? 'reply' : 'question'}. For more examples see this{' '}
+        {props.isReply ? 'reply' : 'question'}. For more examples, see this{' '}
         <Link external to="https://commonmark.org/help/">
           Markdown cheatsheet
         </Link>
       </Typography>
-      <Typography className={classes.header}>
-        <strong>Examples</strong>
-      </Typography>
-      <div className={classes.example}>
+      <Typography fontFamily={(theme) => theme.font.bold}>Examples</Typography>
+      <Paper
+        sx={(theme) => ({
+          backgroundColor: theme.palette.background.default,
+          p: 2,
+        })}
+      >
         <Typography>[I am a link](https://google.com)</Typography>
-        <br />
         <Typography
           dangerouslySetInnerHTML={{
             __html: '<a>I am a link</a>',
           }}
         />
-      </div>
-      <div className={classes.example}>
+      </Paper>
+      <Paper
+        sx={(theme) => ({
+          backgroundColor: theme.palette.background.default,
+          p: 2,
+        })}
+      >
         <Typography>
-          ```
+          ```js
           <br />
           const someCode = 'hello world';
           <br />
           ```
         </Typography>
-        <Typography
-          dangerouslySetInnerHTML={{
-            __html: `<pre style="white-space: pre-wrap;">const someCode = "hello world"</pre>`,
-          }}
+        <HighlightedMarkdown
+          textOrMarkdown={'```ts\nconst someCode = "hello world"\n```'}
         />
-      </div>
-    </div>
+      </Paper>
+    </Stack>
   );
 };

packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/PreviewReply.tsx

@@ -14,12 +14,12 @@ export const PreviewReply = (props: Props) => {
   return (
     <Paper
       sx={{
-        border: '1px solid #ccc',
-        height: 320,
+        height: '243px',
         overflowY: 'auto',
-        padding: `9px 12px 9px 12px`,
+        padding: 1.75,
       }}
       error={error}
+      variant="outlined"
     >
       <HighlightedMarkdown textOrMarkdown={value} />
     </Paper>

packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx

@@ -1,11 +1,9 @@
-import { SupportReply, uploadAttachment } from '@linode/api-v4/lib/support';
-import { APIError } from '@linode/api-v4/lib/types';
+import { uploadAttachment } from '@linode/api-v4';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from 'tss-react/mui';
 import { lensPath, set } from 'ramda';
 import * as React from 'react';
 import { debounce } from 'throttle-debounce';
+import { makeStyles } from 'tss-react/mui';
 
 import { Accordion } from 'src/components/Accordion';
 import { Notice } from 'src/components/Notice/Notice';
@@ -14,37 +12,19 @@ import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
 import { storage } from 'src/utilities/storage';
 
 import { AttachFileForm } from '../../AttachFileForm';
-import { FileAttachment } from '../../index';
 import { MarkdownReference } from './MarkdownReference';
 import { ReplyActions } from './ReplyActions';
 import { TabbedReply } from './TabbedReply';
 
+import type { FileAttachment } from '../../index';
+import type { APIError, SupportReply } from '@linode/api-v4';
+import type { Theme } from '@mui/material/styles';
+
 const useStyles = makeStyles()((theme: Theme) => ({
-  expPanelSummary: {
-    backgroundColor: theme.name === 'dark' ? theme.bg.main : theme.bg.white,
-    borderTop: `1px solid ${theme.bg.main}`,
-    paddingTop: theme.spacing(),
-  },
-  reference: {
-    [theme.breakpoints.down('sm')]: {
-      padding: `${theme.spacing(2)} !important`,
-    },
-    [theme.breakpoints.up('sm')]: {
-      marginLeft: 4,
-      marginRight: 4,
-      marginTop: theme.spacing(7),
-      padding: `0 !important`,
-    },
-  },
-  referenceRoot: {
-    '& > p': {
-      marginBottom: theme.spacing(),
-    },
-  },
   replyContainer: {
     paddingLeft: theme.spacing(6),
     [theme.breakpoints.down('sm')]: {
-      paddingLeft: theme.spacing(6),
+      paddingLeft: theme.spacing(5),
     },
   },
 }));
@@ -172,23 +152,15 @@ export const ReplyContainer = (props: Props) => {
           variant="error"
         />
       )}
-      <Grid>
-        <TabbedReply
-          error={errorMap.description}
-          handleChange={setValue}
-          isReply
-          value={value}
-        />
-      </Grid>
-      <Grid style={{ marginTop: 8 }}>
-        <Accordion
-          defaultExpanded={false}
-          detailProps={{ className: classes.expPanelSummary }}
-          heading="Formatting Tips"
-        >
-          <MarkdownReference isReply rootClass={classes.referenceRoot} />
-        </Accordion>
-      </Grid>
+      <TabbedReply
+        error={errorMap.description}
+        handleChange={setValue}
+        isReply
+        value={value}
+      />
+      <Accordion heading="Formatting Tips" sx={{ mt: 2 }}>
+        <MarkdownReference isReply />
+      </Accordion>
       <Grid>
         <AttachFileForm
           updateFiles={(filesToAttach: FileAttachment[]) =>

packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/TabbedReply.tsx

@@ -1,58 +1,40 @@
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from 'tss-react/mui';
-import * as React from 'react';
+import React from 'react';
 
-import { Tab, TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel';
+import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
+import { Tab } from 'src/components/Tabs/Tab';
+import { TabList } from 'src/components/Tabs/TabList';
+import { TabPanels } from 'src/components/Tabs/TabPanels';
+import { Tabs } from 'src/components/Tabs/Tabs';
 
 import { PreviewReply } from './PreviewReply';
-import { Props as ReplyProps, TicketReply } from './TicketReply';
+import { TicketReply } from './TicketReply';
+
+import type { Props as ReplyProps } from './TicketReply';
 
 interface Props extends ReplyProps {
-  innerClass?: string;
   isReply?: boolean;
   required?: boolean;
-  rootClass?: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  root: {
-    '& div[role="tablist"]': {
-      marginBottom: theme.spacing(),
-      marginTop: theme.spacing(),
-    },
-    backgroundColor: 'transparent',
-    padding: 0,
-  },
-}));
-
 export const TabbedReply = (props: Props) => {
-  const { classes } = useStyles();
-  const { error, innerClass, rootClass, value, ...rest } = props;
+  const { error, value, ...rest } = props;
 
   const title = props.isReply ? 'Reply' : 'Description';
 
-  const tabs: Tab[] = [
-    {
-      render: () => {
-        return <TicketReply {...rest} error={error} value={value} />;
-      },
-      title: props.required ? `${title} (required)` : title,
-    },
-    {
-      render: () => {
-        return <PreviewReply error={error} value={value} />;
-      },
-      title: 'Preview',
-    },
-  ];
-
   return (
-    <TabbedPanel
-      header=""
-      innerClass={innerClass}
-      noPadding
-      rootClass={rootClass || classes.root}
-      tabs={tabs}
-    />
+    <Tabs>
+      <TabList>
+        <Tab>{props.required ? `${title} (required)` : title}</Tab>
+        <Tab>Preview</Tab>
+      </TabList>
+      <TabPanels>
+        <SafeTabPanel index={0}>
+          <TicketReply {...rest} error={error} value={value} />
+        </SafeTabPanel>
+        <SafeTabPanel index={1}>
+          <PreviewReply error={error} value={value} />
+        </SafeTabPanel>
+      </TabPanels>
+    </Tabs>
   );
 };

packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx

@@ -5,11 +5,11 @@ import * as React from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useLocation } from 'react-router-dom';
 import { debounce } from 'throttle-debounce';
-import { makeStyles } from 'tss-react/mui';
 
 import { Accordion } from 'src/components/Accordion';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { Box } from 'src/components/Box';
 import { Dialog } from 'src/components/Dialog/Dialog';
 import { Notice } from 'src/components/Notice/Notice';
 import { TextField } from 'src/components/TextField';
@@ -44,29 +44,8 @@ import type { SMTPCustomFields } from './SupportTicketSMTPFields';
 import type { CreateKubeClusterPayload } from '@linode/api-v4';
 import type { TicketSeverity } from '@linode/api-v4/lib/support';
 import type { CreateLinodeRequest } from '@linode/api-v4/src/linodes/types';
-import type { Theme } from '@mui/material/styles';
 import type { EntityForTicketDetails } from 'src/components/SupportLink/SupportLink';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  expPanelSummary: {
-    backgroundColor: theme.name === 'dark' ? theme.bg.main : theme.bg.white,
-    borderTop: `1px solid ${theme.bg.main}`,
-    paddingTop: theme.spacing(1),
-  },
-  innerReply: {
-    '& div[role="tablist"]': {
-      marginBottom: theme.spacing(),
-      marginTop: theme.spacing(),
-    },
-    padding: 0,
-  },
-  rootReply: {
-    marginBottom: theme.spacing(2),
-    marginTop: theme.spacing(2),
-    padding: 0,
-  },
-}));
-
 interface Accumulator {
   errors: AttachmentError[];
   success: string[];
@@ -212,8 +191,6 @@ export const SupportTicketDialog = (props: SupportTicketDialogProps) => {
 
   const [submitting, setSubmitting] = React.useState<boolean>(false);
 
-  const { classes } = useStyles();
-
   React.useEffect(() => {
     if (!open) {
       resetDrawer();
@@ -490,26 +467,28 @@ export const SupportTicketDialog = (props: SupportTicketDialogProps) => {
               {props.hideProductSelection ? null : (
                 <SupportTicketProductSelectionFields />
               )}
-              <Controller
-                render={({ field, fieldState }) => (
-                  <TabbedReply
-                    placeholder={
-                      "Tell us more about the trouble you're having and any steps you've already taken to resolve it."
-                    }
-                    error={fieldState.error?.message}
-                    handleChange={field.onChange}
-                    innerClass={classes.innerReply}
-                    required
-                    rootClass={classes.rootReply}
-                    value={description}
-                  />
-                )}
-                control={form.control}
-                name="description"
-              />
+              <Box mt={1}>
+                <Controller
+                  render={({ field, fieldState }) => (
+                    <TabbedReply
+                      placeholder={
+                        'Tell us more about the trouble you’re having and any steps you’ve already taken to resolve it.'
+                      }
+                      error={fieldState.error?.message}
+                      handleChange={field.onChange}
+                      required
+                      value={description}
+                    />
+                  )}
+                  control={form.control}
+                  name="description"
+                />
+              </Box>
               <Accordion
-                detailProps={{ className: classes.expPanelSummary }}
+                detailProps={{ sx: { p: 0.25 } }}
                 heading="Formatting Tips"
+                summaryProps={{ sx: { paddingX: 0.25 } }}
+                sx={(theme) => ({ mt: `${theme.spacing(0.5)} !important` })} // forcefully disable margin when accordion is expanded
               >
                 <MarkdownReference />
               </Accordion>