Configure positioning of bubble

src/css/content.scss

@@ -1,31 +1,26 @@
 #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;
-
-  cursor: pointer;
-
   iframe {
     border: 0;
   }
 
   .moco-bx-bubble {
+    position: fixed;
+    bottom: 2rem;
+    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;
+
+    cursor: pointer;
+
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
-    width: 100%;
-    height: 100%;
 
     img.moco-bx-logo {
       width: 30px;
@@ -61,6 +56,7 @@
     background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
 
     .moco-bx-popup-content {
+      box-sizing: content-box;
       background-color: white;
       width: 600px;
       height: 400px;

src/js/components/Bubble.js

@@ -140,7 +140,7 @@ class Bubble extends Component {
     const { service, settings, browser } = this.props
 
     return (
-      <div className="moco-bx-bubble" onClick={this.open}>
+      <div className="moco-bx-bubble" onClick={this.open} style={service.position}>
         <img className="moco-bx-logo" src={this.props.browser.extension.getURL(logoUrl)} />
         {this.bookedHours > 0
           ? <span className="moco-bx-badge">{this.bookedHours}h</span>

src/js/remoteServices.js

@@ -14,7 +14,8 @@ export default {
         ?.textContent.trim()
         ?.match(/^\[(\d+)\]/)
       return match && match[1]
-    }
+    },
+    position: { left: '50%' },
   },
 
   "github-issue": {
@@ -26,11 +27,13 @@ export default {
       `${org}/${repo}/${id} - ${document
         .querySelector(".gh-header-title")
         .textContent.trim()}`,
+    position: { left: '2rem' },
   },
 
   "trello": {
     name: "trello",
     urlPattern: "https://trello.com/c/:id/:title",
-    description: (document, service, { title }) => title.split('-').slice(1).join(' ')
+    description: (document, service, { title }) => title.split('-').slice(1).join(' '),
+    position: { right: '2rem' },
   }
 }

src/js/utils/urlMatcher.js

@@ -38,7 +38,8 @@ export const createEnhancer = document => url => service => {
     id: evaluate(service.id) || match.id,
     description: evaluate(service.description),
     projectId: evaluate(service.projectId),
-    taskId: evaluate(service.taskId)
+    taskId: evaluate(service.taskId),
+    position: service.position || { left: '50%', transform: 'translateX(-50%)' }
   }
 }