CR fixes and imprve layour

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",

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}

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>
+      <Text variant={"heading"}>How to configure</Text>
-      <ul>
+      <Box display={"flex"} gap={2} as={"ul"} flexDirection={"column"}>
         <li>
-          <a
+          <TextLink href={slackUrl.href}>1. Install Slack application</TextLink>
-            onClick={(e) => {
-              e.preventDefault();
-              openExternalUrl(slackUrl.href);
-            }}
-            href={slackUrl.href}
-          >
-            <Text>Install Slack application</Text>
-          </a>
         </li>
         <li>
           <Text>
-            Copy incoming Webhook URL from Slack app configuration and paste it below into
+            2. Copy incoming Webhook URL from Slack app configuration and paste it below into{" "}
-            `WEBHOOK_URL` field
+            <Text variant={"bodyStrong"}>WEBHOOK_URL</Text> field
           </Text>
         </li>
-        <li>Save configuration</li>
+        <li>
-      </ul>
+          <Text>3. Save configuration</Text>
-      <Text variant={"bodyStrong"}>Useful links</Text>
+        </li>
+      </Box>
+      <Text variant={"heading"}>Useful links</Text>
       <ul>
         <li>
-          <a
+          <TextLink newTab href={"https://api.slack.com/messaging/webhooks"}>
-            onClick={(e) => {
+            Read about Slack apps that use incoming webhooks
-              e.preventDefault();
+          </TextLink>
-              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>
         </li>
       </ul>
     </>
@@ -164,21 +154,21 @@ const ConfigurationWithAuth = withAuthorization({
 
 ConfigurationWithAuth.getLayout = (page: ReactElement) => (
   <AppColumnsLayout>
-    <div />
+    <Box marginBottom={4}>
-    <Box>
+      <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>
 );
 

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>
   );

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)