Improve Invoices App UI (#182)

* Improve Invoices App UI

* Create clean-onions-sparkle.md

* Update apps/invoices/src/modules/app-configuration/ui/address-form.tsx

Co-authored-by: Adrian Pilarczyk <admin@peelar.dev>

---------

Co-authored-by: Adrian Pilarczyk <admin@peelar.dev>

.changeset/clean-onions-sparkle.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-invoices": patch
+---
+
+Improve UI - better styling, headers

apps/invoices/src/modules/app-configuration/ui/address-form.tsx

@@ -5,18 +5,19 @@ import { Button, makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   field: {
     marginBottom: 20,
   },
   form: {
     padding: 20,
+    paddingTop: 0,
   },
   channelName: {
-    fontFamily: "monospace",
     cursor: "pointer",
+    borderBottom: `2px solid ${theme.palette.secondary.main}`,
   },
-});
+}));
 
 type Props = {
   channelSlug: string;
@@ -53,11 +54,11 @@ export const AddressForm = (props: Props) => {
       })}
       className={styles.form}
     >
-      <Typography variant="body1" paragraph>
+      <Typography component="h3" variant="h3" paragraph>
         Configure
-        <strong onClick={handleChannelNameClick} className={styles.channelName}>
+        <span onClick={handleChannelNameClick} className={styles.channelName}>
           {` ${props.channelName} `}
-        </strong>
+        </span>
         channel:
       </Typography>
       <TextField label="Company Name" {...CommonFieldProps} {...register("companyName")} />

apps/invoices/src/modules/app-configuration/ui/channels-configuration.tsx

@@ -14,9 +14,7 @@ const useStyles = makeStyles((theme) => {
   return {
     header: { marginBottom: 20 },
     grid: { display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "start", gap: 40 },
-    formContainer: {
-      marginTop: 12,
-    },
+    formContainer: {},
     instructionsContainer: {
       marginTop: 12,
       padding: 15,

apps/invoices/src/modules/app-configuration/ui/channels-list.tsx

@@ -18,9 +18,11 @@ const useStyles = makeStyles((theme) => {
       height: "auto !important",
     },
     listItemActive: {
-      border: `1px solid ${theme.palette.grey.A100}`,
+      background: "#f4f4f4",
+      borderRadius: 4,
+      overflow: "hidden",
     },
-    cellSlug: {
+    channelSlug: {
       fontFamily: "monospace",
       opacity: 0.8,
     },
@@ -38,6 +40,11 @@ export const ChannelsList = ({ channels, activeChannelSlug, onChannelClick }: Pr
 
   return (
     <OffsettedList gridTemplate={["1fr"]}>
+      <OffsettedListHeader>
+        <Typography variant="h3" paragraph>
+          Available channels
+        </Typography>
+      </OffsettedListHeader>
       <OffsettedListBody>
         {channels.map((c) => {
           return (
@@ -52,8 +59,8 @@ export const ChannelsList = ({ channels, activeChannelSlug, onChannelClick }: Pr
             >
               <OffsettedListItemCell>
                 {c.name}
-                <Typography variant="caption">
-                  <code>{c.slug}</code>
+                <Typography variant="caption" className={styles.channelSlug}>
+                  {c.slug}
                 </Typography>
               </OffsettedListItemCell>
             </OffsettedListItem>

apps/invoices/src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import "@saleor/apps-shared/src/globals.css";
+import "../styles/globals.css";
 import { AppBridge, AppBridgeProvider } from "@saleor/app-sdk/app-bridge";
 import { RoutePropagator } from "@saleor/app-sdk/app-bridge/next";
 import React, { useEffect } from "react";

apps/invoices/src/styles/globals.css

@@ -2,15 +2,8 @@ body {
   font-family: Inter, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
     "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   color: #111;
-  padding: 1rem 2rem;
 }
 
-code {
-  background: #f6f8fa;
-  border: 1px solid #eaeaea;
-  border-radius: 5px;
-  display: inline-block;
-  padding: 0.1em 0.2em;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
+a {
+  cursor: pointer;
 }