From 7946576714df427852505890097bc5bceb0838d0 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Tue, 27 Jun 2023 11:45:37 +0200
Subject: [PATCH] CR fixes and imprve layour

---
 apps/slack/package.json                       |  2 +
 .../AppColumnsLayout/AppColumnsLayout.tsx     |  3 +-
 apps/slack/src/pages/configuration.tsx        | 60 ++++++++-----------
 apps/slack/src/pages/index.tsx                |  2 +-
 pnpm-lock.yaml                                |  6 ++
 5 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/apps/slack/package.json b/apps/slack/package.json
index 1b9b6e1..ec7a2ee 100644
--- a/apps/slack/package.json
+++ b/apps/slack/package.json
@@ -16,7 +16,9 @@
     "@material-ui/lab": "4.0.0-alpha.61",
     "@saleor/app-sdk": "0.40.1",
     "@saleor/apps-shared": "workspace:*",
+    "@saleor/apps-ui": "workspace:*",
     "@saleor/macaw-ui": "0.8.0-pre.95",
+    "@saleor/react-hook-form-macaw": "workspace:*",
     "@sentry/nextjs": "7.55.2",
     "@urql/exchange-auth": "^2.1.4",
     "clsx": "^1.2.1",
diff --git a/apps/slack/src/components/AppColumnsLayout/AppColumnsLayout.tsx b/apps/slack/src/components/AppColumnsLayout/AppColumnsLayout.tsx
index 381bea6..63db4fb 100644
--- a/apps/slack/src/components/AppColumnsLayout/AppColumnsLayout.tsx
+++ b/apps/slack/src/components/AppColumnsLayout/AppColumnsLayout.tsx
@@ -6,10 +6,11 @@ type Props = PropsWithChildren<{}>;
 export const AppColumnsLayout = ({ children }: Props) => {
   return (
     <Box
+      paddingX={8}
       display={"grid"}
       marginTop={8}
       __maxWidth={"1180px"}
-      __gridTemplateColumns={"280px auto 280px"}
+      __gridTemplateColumns={"380px auto"}
       gap={8}
     >
       {children}
diff --git a/apps/slack/src/pages/configuration.tsx b/apps/slack/src/pages/configuration.tsx
index 9ebc512..36e0bf3 100644
--- a/apps/slack/src/pages/configuration.tsx
+++ b/apps/slack/src/pages/configuration.tsx
@@ -8,6 +8,8 @@ import { AppColumnsLayout } from "../components/AppColumnsLayout/AppColumnsLayou
 import { useDashboardNotification } from "@saleor/apps-shared";
 
 import { Input, Text, Box, Button } from "@saleor/macaw-ui/next";
+
+import { TextLink } from "@saleor/apps-ui";
 import { AccessWarning } from "../components/AccessWarning/AccessWarning";
 
 interface ConfigurationField {
@@ -116,39 +118,27 @@ function Instructions() {
 
   return (
     <>
-      <Text variant={"bodyStrong"}>How to configure</Text>
-      <ul>
+      <Text variant={"heading"}>How to configure</Text>
+      <Box display={"flex"} gap={2} as={"ul"} flexDirection={"column"}>
         <li>
-          <a
-            onClick={(e) => {
-              e.preventDefault();
-              openExternalUrl(slackUrl.href);
-            }}
-            href={slackUrl.href}
-          >
-            <Text>Install Slack application</Text>
-          </a>
+          <TextLink href={slackUrl.href}>1. Install Slack application</TextLink>
         </li>
         <li>
           <Text>
-            Copy incoming Webhook URL from Slack app configuration and paste it below into
-            `WEBHOOK_URL` field
+            2. Copy incoming Webhook URL from Slack app configuration and paste it below into{" "}
+            <Text variant={"bodyStrong"}>WEBHOOK_URL</Text> field
           </Text>
         </li>
-        <li>Save configuration</li>
-      </ul>
-      <Text variant={"bodyStrong"}>Useful links</Text>
+        <li>
+          <Text>3. Save configuration</Text>
+        </li>
+      </Box>
+      <Text variant={"heading"}>Useful links</Text>
       <ul>
         <li>
-          <a
-            onClick={(e) => {
-              e.preventDefault();
-              openExternalUrl("https://api.slack.com/messaging/webhooks");
-            }}
-            href="https://api.slack.com/messaging/webhooks"
-          >
-            <Text>Read about Slack apps that use incoming webhooks</Text>
-          </a>
+          <TextLink newTab href={"https://api.slack.com/messaging/webhooks"}>
+            Read about Slack apps that use incoming webhooks
+          </TextLink>
         </li>
       </ul>
     </>
@@ -164,21 +154,21 @@ const ConfigurationWithAuth = withAuthorization({
 
 ConfigurationWithAuth.getLayout = (page: ReactElement) => (
   <AppColumnsLayout>
-    <div />
-    <Box>
+    <Box marginBottom={4}>
+      <Instructions />
+    </Box>
+    <Box
+      borderColor={"neutralHighlight"}
+      borderStyle={"solid"}
+      borderWidth={1}
+      padding={4}
+      borderRadius={4}
+    >
       <Text as={"h2"} marginBottom={4} variant={"heading"}>
         Configuration
       </Text>
       <Box>{page}</Box>
     </Box>
-    <Box marginBottom={4}>
-      <Text as={"h2"} marginBottom={4} variant={"heading"}>
-        Instructions
-      </Text>
-      <Box>
-        <Instructions />
-      </Box>
-    </Box>
   </AppColumnsLayout>
 );
 
diff --git a/apps/slack/src/pages/index.tsx b/apps/slack/src/pages/index.tsx
index a1e5e66..8b93427 100644
--- a/apps/slack/src/pages/index.tsx
+++ b/apps/slack/src/pages/index.tsx
@@ -29,7 +29,7 @@ const IndexPage: NextPage = () => {
       <Text as={"p"}>This is Saleor App that allows invoices generation</Text>
       <Text as={"p"}>
         Install app in your Saleor instance and open in with Dashboard{" "}
-        <a href={"https://github.com/saleor/apps"}>or check it on Github</a>
+        <a href={"https://github.com/saleor/apps"}>or check it on GitHub</a>
       </Text>
     </Box>
   );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 23bf47c..6ecb40b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1273,9 +1273,15 @@ importers:
       '@saleor/apps-shared':
         specifier: workspace:*
         version: link:../../packages/shared
+      '@saleor/apps-ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
       '@saleor/macaw-ui':
         specifier: 0.8.0-pre.95
         version: 0.8.0-pre.95(@types/react-dom@18.2.5)(@types/react@18.2.5)(react-dom@18.2.0)(react@18.2.0)
+      '@saleor/react-hook-form-macaw':
+        specifier: workspace:*
+        version: link:../../packages/react-hook-form-macaw
       '@sentry/nextjs':
         specifier: 7.55.2
         version: 7.55.2(next@13.3.0)(react@18.2.0)