diff --git a/package.json b/package.json
index dfac079..bbbb52e 100644
--- a/package.json
+++ b/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": {
diff --git a/src/css/content.scss b/src/css/content.scss
index 57b4c49..23d304e 100644
--- a/src/css/content.scss
+++ b/src/css/content.scss
@@ -2,30 +2,52 @@
@import "form";
@import "spinner";
-.moco-bx-bubble {
- img {
- width: 30px;
- height: 30px;
+#moco-bx-root {
+ position: fixed;
+ bottom: 40px;
+ 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;
- }
-}
-
diff --git a/src/js/content.js b/src/js/content.js
index 40a79c6..9992c29 100644
--- a/src/js/content.js
+++ b/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(
-
-
-
-
- ,
+ ,
document.getElementById("moco-bx-root")
)
}
diff --git a/src/manifest.json b/src/manifest.json
index ea58e05..7028982 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -29,7 +29,7 @@
{
"matches": [""],
"js": ["content.js"],
- "css": ["styles.css"]
+ "css": ["content.css"]
}
],
"browser_action": {
diff --git a/yarn.lock b/yarn.lock
index fb193e9..33490de 100644
--- a/yarn.lock
+++ b/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"