From 5b7cfe83b483b1f6bb83c094a02322867f36c3dd Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 31 Aug 2023 00:08:24 -0700
Subject: [PATCH] Fixed update notice.

---
 src/components/common/UpdateNotice.js         | 6 ++++--
 src/components/common/UpdateNotice.module.css | 5 +++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/common/UpdateNotice.js b/src/components/common/UpdateNotice.js
index e3edc70c..23907948 100644
--- a/src/components/common/UpdateNotice.js
+++ b/src/components/common/UpdateNotice.js
@@ -1,4 +1,5 @@
 import { useEffect, useCallback, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Button, Row, Column } from 'react-basics';
 import { setItem } from 'next-basics';
 import useStore, { checkVersion } from 'store/version';
@@ -44,7 +45,7 @@ export function UpdateNotice({ user, config }) {
     return null;
   }
 
-  return (
+  return createPortal(
     <Row className={styles.notice}>
       <Column variant="two" className={styles.message}>
         {formatMessage(messages.newVersionAvailable, { version: `v${latest}` })}
@@ -55,7 +56,8 @@ export function UpdateNotice({ user, config }) {
         </Button>
         <Button onClick={handleDismissClick}>{formatMessage(labels.dismiss)}</Button>
       </Column>
-    </Row>
+    </Row>,
+    document.body,
   );
 }
 
diff --git a/src/components/common/UpdateNotice.module.css b/src/components/common/UpdateNotice.module.css
index db7a0abd..261a3169 100644
--- a/src/components/common/UpdateNotice.module.css
+++ b/src/components/common/UpdateNotice.module.css
@@ -2,13 +2,14 @@
   position: absolute;
   max-width: 800px;
   gap: 20px;
-  margin: 20px auto;
-  justify-self: center;
+  margin: 80px auto;
+  align-self: center;
   background: var(--base50);
   padding: 20px;
   border: 1px solid var(--base300);
   border-radius: var(--border-radius);
   z-index: var(--z-index-popup);
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .message {