From c1dab0ba18a25a23afff001cf64932c3778dcb9a Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Mon, 13 Feb 2023 16:17:30 +0100
Subject: [PATCH] Make content cards not sticky, for better support of smaller
 screens (#148)

* [Invoices] Remove sticky containers for better support of small screens

* Change loader to be circular instead linear
---
 .changeset/thick-singers-mate.md              |  5 +++++
 .gitignore                                    |  4 +++-
 .../ui/channels-configuration.tsx             | 14 +++++++------
 apps/invoices/src/modules/ui/loader.tsx       | 21 +++++++++++++++++++
 apps/invoices/src/pages/index.tsx             |  4 ++--
 5 files changed, 39 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/thick-singers-mate.md
 create mode 100644 apps/invoices/src/modules/ui/loader.tsx

diff --git a/.changeset/thick-singers-mate.md b/.changeset/thick-singers-mate.md
new file mode 100644
index 0000000..73b73ba
--- /dev/null
+++ b/.changeset/thick-singers-mate.md
@@ -0,0 +1,5 @@
+---
+"saleor-app-invoices": minor
+---
+
+Unsticky app cards and change loader type
diff --git a/.gitignore b/.gitignore
index e0669c4..9e4b4b6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,4 +38,6 @@ yarn-error.log*
 .saleor-app-auth.json
 test-invoice.pdf
 coverage/
-apps/**/generated
\ No newline at end of file
+apps/**/generated
+
+.eslintcache
\ No newline at end of file
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 afcc95d..96723c2 100644
--- a/apps/invoices/src/modules/app-configuration/ui/channels-configuration.tsx
+++ b/apps/invoices/src/modules/app-configuration/ui/channels-configuration.tsx
@@ -8,18 +8,17 @@ import { ChannelsList } from "./channels-list";
 import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
 import { AppColumnsLayout } from "../../ui/app-columns-layout";
 import { TitleBar } from "@saleor/apps-shared";
+import { Loader } from "../../ui/loader";
 
 const useStyles = makeStyles((theme) => {
   return {
     header: { marginBottom: 20 },
     grid: { display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "start", gap: 40 },
     formContainer: {
-      top: TitleBar.height + 16,
-      position: "sticky",
+      marginTop: 12,
     },
     instructionsContainer: {
-      top: TitleBar.height + 16,
-      position: "sticky",
+      marginTop: 12,
       padding: 15,
     },
   };
@@ -64,7 +63,7 @@ export const ChannelsConfiguration = () => {
   }, [channels.data, activeChannelSlug]);
 
   if (channels.isLoading || !channels.data) {
-    return <LinearProgress />;
+    return <Loader />;
   }
 
   if (!activeChannel) {
@@ -76,7 +75,10 @@ export const ChannelsConfiguration = () => {
       <ChannelsList
         channels={channels.data}
         activeChannelSlug={activeChannel.slug}
-        onChannelClick={setActiveChannelSlug}
+        onChannelClick={(slug) => {
+          setActiveChannelSlug(slug);
+          window.scrollTo({ top: 0, behavior: "smooth" });
+        }}
       />
 
       {activeChannel ? (
diff --git a/apps/invoices/src/modules/ui/loader.tsx b/apps/invoices/src/modules/ui/loader.tsx
new file mode 100644
index 0000000..0c8d236
--- /dev/null
+++ b/apps/invoices/src/modules/ui/loader.tsx
@@ -0,0 +1,21 @@
+import { CircularProgress } from "@material-ui/core";
+import { makeStyles } from "@saleor/macaw-ui";
+
+const useStyles = makeStyles({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 300,
+  },
+});
+
+export const Loader = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.root}>
+      <CircularProgress color="primary" />
+    </div>
+  );
+};
diff --git a/apps/invoices/src/pages/index.tsx b/apps/invoices/src/pages/index.tsx
index 7ba2ab1..dca92e9 100644
--- a/apps/invoices/src/pages/index.tsx
+++ b/apps/invoices/src/pages/index.tsx
@@ -3,8 +3,8 @@ import { useAppBridge } from "@saleor/app-sdk/app-bridge";
 import { useEffect } from "react";
 import { useIsMounted } from "usehooks-ts";
 import { useRouter } from "next/router";
-import { LinearProgress } from "@material-ui/core";
 import { isInIframe } from "@saleor/apps-shared";
+import { Loader } from "../modules/ui/loader";
 
 const IndexPage: NextPage = () => {
   const { appBridgeState } = useAppBridge();
@@ -18,7 +18,7 @@ const IndexPage: NextPage = () => {
   }, [isMounted, appBridgeState?.ready]);
 
   if (isInIframe()) {
-    return <LinearProgress />;
+    return <Loader />;
   }
 
   return (