Rewrtirren Slack to the new macaw

.changeset/plenty-mayflies-enjoy.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-slack": minor
+---
+
+Rewritten UI to use modern macaw UI, instead legacy one with Material UI. There are slight changes in typography and spacings, but no new changes were introduced.

apps/slack/src/components/AccessWarning/AccessWarning.tsx

@@ -20,9 +20,11 @@ const warnings: Record<WarningCause, string> = {
 
 export function AccessWarning({ cause = "unknown_cause" }: AccessWarningProps) {
   return (
-    <div suppressHydrationWarning>
+    <div>
-      <Text variant="heading">App can&apos;t be accessed outside of the Saleor Dashboard</Text>
+      <Text as={"h2"} variant="heading">
-      <Text variant="heading" style={{ marginTop: "2rem" }}>
+        App can&apos;t be accessed outside of the Saleor Dashboard
+      </Text>
+      <Text variant="body" style={{ marginTop: "2rem" }}>
         ❌ {warnings[cause]}
       </Text>
     </div>

apps/slack/src/components/AppColumnsLayout/AppColumnsLayout.tsx

@@ -5,7 +5,13 @@ type Props = PropsWithChildren<{}>;
 
 export const AppColumnsLayout = ({ children }: Props) => {
   return (
-    <Box display={"grid"} __maxWidth={"1180px"} __gridTemplateColumns={"280px auto 280px"} gap={4}>
+    <Box
+      display={"grid"}
+      marginTop={8}
+      __maxWidth={"1180px"}
+      __gridTemplateColumns={"280px auto 280px"}
+      gap={8}
+    >
       {children}
     </Box>
   );

apps/slack/src/pages/_app.tsx

@@ -13,12 +13,15 @@ import { ThemeSynchronizer } from "../hooks/theme-synchronizer";
 export const appBridgeInstance = typeof window !== "undefined" ? new AppBridge() : undefined;
 
 function SaleorApp({ Component, pageProps }: AppProps) {
+  // @ts-ignore todo refactor
+  const getLayout = Component.getLayout ?? ((page) => page);
+
   return (
     <NoSSRWrapper>
       <AppBridgeProvider appBridgeInstance={appBridgeInstance}>
         <ThemeProvider>
           <ThemeSynchronizer />
-          <Component {...pageProps} />
+          {getLayout(<Component {...pageProps} />)}
         </ThemeProvider>
       </AppBridgeProvider>
     </NoSSRWrapper>

apps/slack/src/pages/configuration.tsx

@@ -71,18 +71,22 @@ function Configuration() {
     <form onSubmit={handleSubmit}>
       {configuration!.map(({ key, value }) => (
         <div key={key}>
-          <Input label={key} name={key} onChange={onChange} value={value} />
+          <Input
+            label={key}
+            name={key}
+            onChange={onChange}
+            value={value}
+            helperText={
+              "This webhook will be called when new order is created and `order_created` event is triggered."
+            }
+          />
         </div>
       ))}
-      <p>
+      <Box marginTop={4}>
-        This webhook will be called when new order is created and `order_created` event is
-        triggered.
-      </p>
-      <div>
         <Button type="submit" variant="primary">
           Save
         </Button>
-      </div>
+      </Box>
     </form>
   );
 }
@@ -112,7 +116,7 @@ function Instructions() {
 
   return (
     <>
-      <Text>How to configure</Text>
+      <Text variant={"bodyStrong"}>How to configure</Text>
       <ul>
         <li>
           <a
@@ -122,28 +126,19 @@ function Instructions() {
             }}
             href={slackUrl.href}
           >
-            Install Slack application
+            <Text>Install Slack application</Text>
           </a>
         </li>
         <li>
+          <Text>
             Copy incoming Webhook URL from Slack app configuration and paste it below into
             `WEBHOOK_URL` field
+          </Text>
         </li>
         <li>Save configuration</li>
       </ul>
-      <Text>Useful links</Text>
+      <Text variant={"bodyStrong"}>Useful links</Text>
       <ul>
-        <li>
-          <a
-            onClick={(e) => {
-              e.preventDefault();
-              openExternalUrl("https://github.com/saleor/saleor-app-slack");
-            }}
-            href="https://github.com/saleor/saleor-app-slack"
-          >
-            Visit repository & readme
-          </a>
-        </li>
         <li>
           <a
             onClick={(e) => {
@@ -152,7 +147,7 @@ function Instructions() {
             }}
             href="https://api.slack.com/messaging/webhooks"
           >
-            Read about Slack apps that use incoming webhooks
+            <Text>Read about Slack apps that use incoming webhooks</Text>
           </a>
         </li>
       </ul>
@@ -171,11 +166,15 @@ ConfigurationWithAuth.getLayout = (page: ReactElement) => (
   <AppColumnsLayout>
     <div />
     <Box>
-      <Text>Configuration</Text>
+      <Text as={"h2"} marginBottom={4} variant={"heading"}>
+        Configuration
+      </Text>
       <Box>{page}</Box>
     </Box>
     <Box marginBottom={4}>
-      <Text>Instructions</Text>
+      <Text as={"h2"} marginBottom={4} variant={"heading"}>
+        Instructions
+      </Text>
       <Box>
         <Instructions />
       </Box>