Remove shadow dom

package.json

@@ -21,7 +21,6 @@
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-select": "^2.3.0",
-    "react-shadow": "^16.3.2",
     "route-parser": "^0.0.5"
   },
   "devDependencies": {

src/css/content.scss

@@ -2,30 +2,52 @@
 @import "form";
 @import "spinner";
 
-.moco-bx-bubble {
+#moco-bx-root {
-  img {
+  position: fixed;
-    width: 30px;
+  bottom: 40px;
-    height: 30px;
+  left: 50%;
+  margin-left: -30px;
+  z-index: 1000;
+
+  height: 60px;
+  width: 60px;
+  background-color: white;
+  border-radius: 50%;
+  box-shadow: -1px -1px 15px 4px rgba(0, 0, 0, 0.05),
+    2px 2px 15px 4px rgba(0, 0, 0, 0.05);
+  padding: 5px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+
+  cursor: pointer;
+
+  .moco-bx-bubble {
+    img {
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+  .moco-bx-modal {
+    position: fixed; /* Stay in place */
+    z-index: 2000; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0, 0, 0); /* Fallback color */
+    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+
+    .moco-bx-modal-content {
+      background-color: white;
+      width: 600px;
+      padding: 40px;
+      margin: 0 auto;
+    }
   }
 }
-
-.moco-bx-modal {
-  position: fixed; /* Stay in place */
-  z-index: 2000; /* Sit on top */
-  padding-top: 100px; /* Location of the box */
-  left: 0;
-  top: 0;
-  width: 100%; /* Full width */
-  height: 100%; /* Full height */
-  overflow: auto; /* Enable scroll if needed */
-  background-color: rgb(0, 0, 0); /* Fallback color */
-  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
-
-  .moco-bx-modal-content {
-    background-color: white;
-    width: 600px;
-    padding: 40px;
-    margin: 0 auto;
-  }
-}
-

src/js/content.js

@@ -1,6 +1,5 @@
 import React from "react"
 import ReactDOM from "react-dom"
-import ShadowDOM from "react-shadow"
 import Bubble from "./components/Bubble"
 import { createMatcher, createEnhancer } from "utils/urlMatcher"
 import remoteServices from "./remoteServices"
@@ -39,11 +38,7 @@ const mountBubble = (settings) => {
   }
 
   ReactDOM.render(
-    <ShadowDOM include={[chrome.extension.getURL('content.css')]}>
+   <Bubble service={service} settings={settings} />,
-      <div>
-        <Bubble service={service} settings={settings} />
-      </div>
-    </ShadowDOM>,
     document.getElementById("moco-bx-root")
   )
 }

src/manifest.json

@@ -29,7 +29,7 @@
     {
       "matches": ["<all_urls>"],
       "js": ["content.js"],
-      "css": ["styles.css"]
+      "css": ["content.css"]
     }
   ],
   "browser_action": {

yarn.lock

@@ -5651,11 +5651,6 @@ react-select@^2.3.0:
     react-input-autosize "^2.2.1"
     react-transition-group "^2.2.1"
 
-react-shadow@^16.3.2:
-  version "16.3.2"
-  resolved "https://registry.yarnpkg.com/react-shadow/-/react-shadow-16.3.2.tgz#a431a7101b0e222dbc669c4070ab395f42dbb675"
-  integrity sha512-NxFoBvEg2WD3V25jgiWgIltpDfs2XBCbDyi63jEM6Gch8g8r2cqJxSWy2GfG666EfOpRR5Zsrhu0Qn5yze1PrA==
-
 react-transition-group@^2.2.1:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.3.tgz#26de363cab19e5c88ae5dbae105c706cf953bb92"