From cb8e941bb6a29e341706995e4fbb67ddaae37fd5 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Mon, 6 Sep 2021 23:16:49 +1000
Subject: [PATCH] fix logo positioning

---
 src/App.tsx                   | 9 ++++++---
 src/assets/Logo.tsx           | 8 +++++---
 src/components/EmptyState.tsx | 1 +
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7e9698c9..bb324f01 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -109,9 +109,12 @@ export default function App() {
                                   <Navigation
                                     title="Home"
                                     titleComponent={
-                                      <div style={{ textAlign: "center" }}>
-                                        <Logo />
-                                      </div>
+                                      <Logo
+                                        style={{
+                                          display: "block",
+                                          margin: "0 auto",
+                                        }}
+                                      />
                                     }
                                   >
                                     <HomePage />
diff --git a/src/assets/Logo.tsx b/src/assets/Logo.tsx
index 98a32f4a..97495247 100644
--- a/src/assets/Logo.tsx
+++ b/src/assets/Logo.tsx
@@ -1,16 +1,18 @@
+import { SVGProps } from "react";
 import { useTheme } from "@material-ui/core";
 
-export default function Logo() {
+export default function Logo(props: SVGProps<SVGSVGElement>) {
   const theme = useTheme();
 
   return (
     <svg
       width="102"
-      height="33"
-      viewBox="0 -3 68 22"
+      height="32"
+      viewBox="0 -1.5 68 21"
       xmlns="http://www.w3.org/2000/svg"
       aria-labelledby="rowy-logo-title"
       role="img"
+      {...props}
     >
       <title id="rowy-logo-title">rowy</title>
 
diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
index e2b4594c..e676f5ec 100644
--- a/src/components/EmptyState.tsx
+++ b/src/components/EmptyState.tsx
@@ -71,6 +71,7 @@ export default function EmptyState({
         item
         sx={{
           maxWidth: "25em",
+          width: (theme) => `calc(100% - ${theme.spacing(2 * 2)})`,
           px: 2,
           typography: "body2",