From b900fbdaa885d3d9b520384af45b1295c809c58a Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Wed, 7 Feb 2024 17:27:04 +0100
Subject: [PATCH] Fix label position

---
 src/components/BottomLabel.css | 11 ++++++++++-
 src/components/BottomLabel.tsx |  6 ++++++
 src/popup.tsx                  | 12 +++++++++---
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/BottomLabel.css b/src/components/BottomLabel.css
index 4d467bb..622209c 100644
--- a/src/components/BottomLabel.css
+++ b/src/components/BottomLabel.css
@@ -9,9 +9,18 @@
   font-size: 14px;
 }
 
+.top-right-label {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  font-weight: normal;
+  color: #4A4863;
+  font-size: 14px;
+}
+
 .dot {
   width: 2px;
   height: 2px;
   background: currentColor;
   border-radius: 100px;
-}
\ No newline at end of file
+}
diff --git a/src/components/BottomLabel.tsx b/src/components/BottomLabel.tsx
index f18d227..a864998 100644
--- a/src/components/BottomLabel.tsx
+++ b/src/components/BottomLabel.tsx
@@ -12,3 +12,9 @@ export function BottomLabel() {
     </h3>
   );
 }
+
+export function TopRightLabel() {
+  const version = useVersion({ prefixed: true });
+
+  return <h3 className="top-right-label">{version}</h3>;
+}
diff --git a/src/popup.tsx b/src/popup.tsx
index 13d87b8..7ff5673 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -1,4 +1,4 @@
-import { BottomLabel } from '~components/BottomLabel';
+import { BottomLabel, TopRightLabel } from '~components/BottomLabel';
 import { DisabledScreen } from '~components/DisabledScreen';
 import { Frame } from '~components/Frame';
 import { PermissionMissingScreen } from '~components/PermissionMissingScreen';
@@ -18,12 +18,18 @@ function IndexPopup() {
   if (!hasPermission) page = 'perm';
   else if (!domain) page = 'disabled';
 
-  return (
+  return page === 'perm' ? (
+    <Frame>
+      <div className="popup">
+        <PermissionMissingScreen />
+        <TopRightLabel />
+      </div>
+    </Frame>
+  ) : (
     <Frame>
       <div className="popup">
         {page === 'toggle' ? <ToggleButton active={isWhitelisted} onClick={toggle} domain={domain} /> : null}
         {page === 'disabled' ? <DisabledScreen /> : null}
-        {page === 'perm' ? <PermissionMissingScreen /> : null}
         <BottomLabel />
       </div>
     </Frame>