From 8f028e2b51376da87ea976e747f4f97da3b06120 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Thu, 14 Jul 2022 17:46:59 +0300
Subject: [PATCH] use styled-jsx in FloatingPanel

---
 src/components/FloatingPanel.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/FloatingPanel.tsx b/src/components/FloatingPanel.tsx
index 540bced..5a04259 100644
--- a/src/components/FloatingPanel.tsx
+++ b/src/components/FloatingPanel.tsx
@@ -10,15 +10,19 @@ const FloatingPanel: FunctionComponent<{
   if(!props.visible) return <></>
   return (
     <div style={{
-      position: "absolute",
-      bottom: "0px",
-      left: "0px",
-      padding: "15px",
-      borderTopRightRadius: "1vw",
-      minWidth: "10vw",
-      minHeight: "1vw",
       backgroundColor: props.color,
     }}>
+      <style jsx>{`
+        div {
+          position: absolute;
+          bottom: 0px;
+          left: 0px;
+          padding: 15px;
+          border-top-right-radius: 1vw;
+          min-width: 10vw;
+          min-height: 1vw;
+        }
+      `}</style>
       {props.children}
     </div>
   )