from last

2 files changed, 5 insertions, 1 deletions

diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index 23a5ad824..134860d0a 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -89,6 +89,7 @@
         box-shadow: black 0.3em 0.3em 1em;
         border-radius: 5px;
         display: flex;
+        opacity: 0.3;
         width: 25px;
         height: 25px;
         align-items: center;
@@ -96,6 +97,9 @@
             margin: auto;
         }
     }
+    .webBox-annotationToggle:hover {
+        opacity: 1;
+    }
 
     .touch-iframe-overlay {
         width: 100%;
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 290b4a720..bb544fedc 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -241,7 +241,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
             <div className="webBox-annotationToggle"
                 style={{ color: this.props.Document.isAnnotating ? "black" : "white", backgroundColor: this.props.Document.isAnnotating ? "white" : "black" }}
                 onClick={action(() => this.layoutDoc.isAnnotating = !this.layoutDoc.isAnnotating)}>
-                <FontAwesomeIcon icon="edit" size="lg" />
+                <FontAwesomeIcon icon="edit" size="sm" />
             </div>
         </Tooltip>;
     }