From a29171d0ed464ab9f8a1ae72af041ae294672a57 Mon Sep 17 00:00:00 2001
From: Evan Purkhiser <evanpurkhiser@gmail.com>
Date: Tue, 14 Jul 2020 23:52:20 -0700
Subject: [PATCH] app: Fix alignment of overlay empty state

---
 src/overlay/index.tsx                         |  3 +--
 .../components/AvailableOverlays.tsx          |  6 ++---
 .../overlayConfig/components/EmptyState.tsx   |  2 --
 .../overlayConfig/components/OverlayList.tsx  | 27 +++++++++++++------
 src/renderer/views/overlayConfig/index.tsx    | 11 +++++---
 5 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/overlay/index.tsx b/src/overlay/index.tsx
index e669559..b02a9b5 100644
--- a/src/overlay/index.tsx
+++ b/src/overlay/index.tsx
@@ -1,5 +1,4 @@
 import taggedNowPlaying from './overlays/taggedNowPlaying';
-import cueCounter from './overlays/cueCounter';
 
 type OverlayType = typeof registeredOverlays[number]['type'];
 
@@ -65,4 +64,4 @@ export type OverlayInstance<T extends OverlayType = any> = {
  *
  * Add new entries here to register new overlays
  */
-export const registeredOverlays = [taggedNowPlaying, cueCounter] as const;
+export const registeredOverlays = [taggedNowPlaying] as const;
diff --git a/src/renderer/views/overlayConfig/components/AvailableOverlays.tsx b/src/renderer/views/overlayConfig/components/AvailableOverlays.tsx
index 7493e5e..304d526 100644
--- a/src/renderer/views/overlayConfig/components/AvailableOverlays.tsx
+++ b/src/renderer/views/overlayConfig/components/AvailableOverlays.tsx
@@ -99,9 +99,9 @@ const Container = styled(motion.div)`
 `;
 
 Container.defaultProps = {
-  initial: {opacity: 0, scale: 0.95},
-  animate: {opacity: 1, scale: 1},
-  exit: {opacity: 0, scale: 1.05},
+  initial: {opacity: 0, x: -20},
+  animate: {opacity: 1, x: 0},
+  exit: {opacity: 0},
   transition: {duration: 0.2},
 };
 
diff --git a/src/renderer/views/overlayConfig/components/EmptyState.tsx b/src/renderer/views/overlayConfig/components/EmptyState.tsx
index bafd657..0f34b96 100644
--- a/src/renderer/views/overlayConfig/components/EmptyState.tsx
+++ b/src/renderer/views/overlayConfig/components/EmptyState.tsx
@@ -14,9 +14,7 @@ const Wrapper = styled('div')`
   grid-template-rows: max-content max-content;
   grid-gap: 0.25rem;
   font-size: 0.875rem;
-  flex: 1;
   justify-content: center;
-  align-self: center;
   justify-items: center;
 `;
 
diff --git a/src/renderer/views/overlayConfig/components/OverlayList.tsx b/src/renderer/views/overlayConfig/components/OverlayList.tsx
index 172d1fa..91348b1 100644
--- a/src/renderer/views/overlayConfig/components/OverlayList.tsx
+++ b/src/renderer/views/overlayConfig/components/OverlayList.tsx
@@ -11,14 +11,19 @@ import {WEBSERVER_PORT} from 'src/shared/constants';
 import Example from './Example';
 import EmptyState from './EmptyState';
 
-const OverlayList = observer(() => (
-  <Container>
-    {store.config.overlays.length === 0 && <EmptyState />}
-    {store.config.overlays.map((instance, i) => (
-      <OverlayEntry index={i} key={instance.key} />
-    ))}
-  </Container>
-));
+const OverlayList = observer(() =>
+  store.config.overlays.length === 0 ? (
+    <EmptyContainer>
+      <EmptyState />
+    </EmptyContainer>
+  ) : (
+    <Container>
+      {store.config.overlays.map((instance, i) => (
+        <OverlayEntry index={i} key={instance.key} />
+      ))}
+    </Container>
+  )
+);
 
 const OverlayEntry = observer(({index}: {index: number}) => {
   const instance = store.config.overlays[index];
@@ -125,4 +130,10 @@ const Container = styled('div')`
   padding: 1.5rem;
 `;
 
+const EmptyContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 export default OverlayList;
diff --git a/src/renderer/views/overlayConfig/index.tsx b/src/renderer/views/overlayConfig/index.tsx
index 630445e..4f1f429 100644
--- a/src/renderer/views/overlayConfig/index.tsx
+++ b/src/renderer/views/overlayConfig/index.tsx
@@ -95,13 +95,16 @@ const BackButton = styled('button')`
 `;
 
 const Container = styled('div')`
+  position: relative;
   flex-grow: 1;
-  display: grid;
-  grid-template: 1fr / 1fr;
 
   > * {
-    grid-column: 1;
-    grid-row: 1;
+    overflow-y: scroll;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
   }
 `;