2 files changed, 16 insertions, 8 deletions
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index f2914eaae..6cb8e3486 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -531,20 +531,20 @@ export class MobileInterface extends React.Component {
         const button = document.getElementById("inkButton") as HTMLElement;
         // const color = InkingControl.Instance.selectedColor;
         const color = "lightpink";
-        button.style.backgroundColor = this._ink ? "white" : color;
+        button.style.backgroundColor = this._ink ? "white" : "black";
         button.style.color = this._ink ? "black" : "white";
 
         if (!this._ink) {
             console.log("INK IS ACTIVE");
             // InkingControl.Instance.switchTool(InkTool.Pen);
             Doc.SetSelectedTool(InkTool.Pen);
-            InkOptionsMenu.Instance.jumpTo(300, 300);
+            //InkOptionsMenu.Instance.jumpTo(300, 300);
             this._ink = true;
         } else {
             console.log("INK IS INACTIVE");
             // InkingControl.Instance.switchTool(InkTool.None);
             Doc.SetSelectedTool(InkTool.None);
-            InkOptionsMenu.Instance.fadeOut(true);
+            //InkOptionsMenu.Instance.fadeOut(true);
             this._ink = false;
         }
     }
@@ -552,7 +552,11 @@ export class MobileInterface extends React.Component {
     inkMenu = () => {
         if (this._activeDoc._viewType === "docking") {
             if (this._ink) {
-                return <InkOptionsMenu />
+                console.log("here");
+                return <div className="colorSelector">
+                    <InkOptionsMenu />
+                </div>
+
             }
         }
     }
@@ -844,9 +848,8 @@ export class MobileInterface extends React.Component {
                     {this.drawInk()}
                     {this.uploadAudioButton()}
                     {/* {this.colorTool()} */}
-                    {this.inkMenu()}
-                    <InkOptionsMenu />
                 </div>
+                {this.inkMenu()}
                 <GestureOverlay>
                     {this.displayWorkspaces()}
                     {this.renderDefaultContent()}
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index da1e9d951..8b68109d0 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -334,12 +334,17 @@ body {
     top: -450px;
 }
 
-.toolbar .colorSelector {
+.colorSelector {
+    position: absolute;
+    top: 550px;
+    left: 300px;
+    transform: translate(-50%, 0);
+    z-index: 100;
     display: inline-flex;
     width: max-content;
-    padding: 5px;
     height: max-content;
     pointer-events: all;
+    font-size: 90px;
 }
 
 .widthSelector {