update mouse interaction note

Author: eimrek

src/App.jsx

@@ -45,7 +45,6 @@ function App() {
   const [cifText3D, setCifText3D] = useState(null);
   const [cifText2D, setCifText2D] = useState(null);
 
-  // componentDidMount equivalent
   useEffect(() => {
     fetchCif3D().then((cifText) => {
       setCifText3D(cifText);

src/StructureVisualizer/StructureWindow/index.css

@@ -30,21 +30,21 @@
 }
 
 .mouse-disabled-note {
-  background-color: #fff1f1;
-  border: 1px solid black;
+  background-color: #f8f8f8;
+  border: 1px solid #999999;
   color: #353434;
-  padding: 2px 6px;
+  padding: 1px 6px;
   border-radius: 5px;
   position: absolute;
-  top: 10px;
-  left: 10px;
+  bottom: 10px;
+  right: 10px;
   z-index: 3;
   cursor: pointer;
   user-select: none;
 }
 
 .on {
-  background-color: #e9ffe7;
+  display: none;
 }
 
 .mouse-disabled-note:hover {

src/StructureVisualizer/StructureWindow/index.jsx

@@ -13,10 +13,9 @@ class StructureWindow extends React.Component {
     let swClassName = "structure-window";
     if (!this.props.mouseEnabled) swClassName += " disable-mouse";
 
-    let mouseNoteText = "Interaction off";
+    let mouseNoteText = "Click to interact";
     let mouseNoteClass = "mouse-disabled-note";
     if (this.props.mouseEnabled) {
-      mouseNoteText = "Interaction on";
       mouseNoteClass = "mouse-disabled-note on";
     }
     return (