From b3178b2d56247c922ffd68fcaa15a7e86e8e287d Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Tue, 21 Feb 2023 15:31:52 +0100
Subject: [PATCH] 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                |  5 +++++
 .../modules/app-configuration/ui/address-form.tsx | 13 +++++++------
 .../ui/channels-configuration.tsx                 |  4 +---
 .../app-configuration/ui/channels-list.tsx        | 15 +++++++++++----
 apps/invoices/src/pages/_app.tsx                  |  1 +
 apps/invoices/src/styles/globals.css              | 11 ++---------
 6 files changed, 27 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/clean-onions-sparkle.md

diff --git a/.changeset/clean-onions-sparkle.md b/.changeset/clean-onions-sparkle.md
new file mode 100644
index 0000000..14121c0
--- /dev/null
+++ b/.changeset/clean-onions-sparkle.md
@@ -0,0 +1,5 @@
+---
+"saleor-app-invoices": patch
+---
+
+Improve UI - better styling, headers
diff --git a/apps/invoices/src/modules/app-configuration/ui/address-form.tsx b/apps/invoices/src/modules/app-configuration/ui/address-form.tsx
index 014f480..1c73a13 100644
--- a/apps/invoices/src/modules/app-configuration/ui/address-form.tsx
+++ b/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")} />
diff --git a/apps/invoices/src/modules/app-configuration/ui/channels-configuration.tsx b/apps/invoices/src/modules/app-configuration/ui/channels-configuration.tsx
index 96723c2..eb62a12 100644
--- a/apps/invoices/src/modules/app-configuration/ui/channels-configuration.tsx
+++ b/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,
diff --git a/apps/invoices/src/modules/app-configuration/ui/channels-list.tsx b/apps/invoices/src/modules/app-configuration/ui/channels-list.tsx
index ae20a0b..35a8e3e 100644
--- a/apps/invoices/src/modules/app-configuration/ui/channels-list.tsx
+++ b/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>
diff --git a/apps/invoices/src/pages/_app.tsx b/apps/invoices/src/pages/_app.tsx
index 0637922..ea3af4a 100644
--- a/apps/invoices/src/pages/_app.tsx
+++ b/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";
diff --git a/apps/invoices/src/styles/globals.css b/apps/invoices/src/styles/globals.css
index d5bb855..e12f100 100644
--- a/apps/invoices/src/styles/globals.css
+++ b/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;
 }