1 files changed, 64 insertions, 44 deletions

diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 00c069e1f..98cf7f92f 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -1,43 +1,59 @@
 .imageBox-cont {
-  padding: 0vw;
-  position: relative;
-  text-align: center;
-  width: 100%;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  pointer-events: none;
+    padding: 0vw;
+    position: relative;
+    text-align: center;
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    pointer-events: none;
 }
+
 .imageBox-cont-interactive {
-  pointer-events: all;
-  width:100%;
-  height:auto;
+    pointer-events: all;
+    width: 100%;
+    height: auto;
 }
 
 .imageBox-dot {
-    position:absolute;
+    position: absolute;
     bottom: 10;
     left: 0;
     border-radius: 10px;
-    width:20px;
-    height:20px;
-    background:gray;
+    width: 20px;
+    height: 20px;
+    background: gray;
 }
 
 .imageBox-cont img {
     height: auto;
-    width:100%;
+    width: 100%;
 }
+
 .imageBox-cont-interactive img {
     height: auto;
-    width:100%;
+    width: 100%;
+}
+
+#google-photos {
+    transition: all 0.5s ease 0s;
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    border: 2px solid black;
+    border-radius: 50%;
+    padding: 3px;
+    background: white;
+    cursor: pointer;
 }
 
 .imageBox-button {
-  padding: 0vw;
-  border: none;
-  width: 100%;
-  height: 100%;
+    padding: 0vw;
+    border: none;
+    width: 100%;
+    height: 100%;
 }
 
 .imageBox-audioBackground {
@@ -49,6 +65,7 @@
     border-radius: 25px;
     background: white;
     opacity: 0.3;
+
     svg {
         width: 90% !important;
         height: 70%;
@@ -59,44 +76,47 @@
 }
 
 #cf {
-    position:relative;
-    width:100%;
-    margin:0 auto;
-    display:flex;
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
     align-items: center;
-    height:100%;
-    overflow:hidden;
+    height: 100%;
+    overflow: hidden;
+
     .imageBox-fadeBlocker {
-        width:100%;
-        height:100%;
+        width: 100%;
+        height: 100%;
         background: black;
-        display:flex;
+        display: flex;
         flex-direction: row;
         align-items: center;
         z-index: 1;
+
         .imageBox-fadeaway {
             object-fit: contain;
-            width:100%;
-            height:100%;
+            width: 100%;
+            height: 100%;
         }
     }
-  }
-  
-  #cf img {
-    position:absolute;
-    left:0;
-  }
-  
-  .imageBox-fadeBlocker {
+}
+
+#cf img {
+    position: absolute;
+    left: 0;
+}
+
+.imageBox-fadeBlocker {
     -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
     -o-transition: opacity 1s ease-in-out;
     transition: opacity 1s ease-in-out;
-  }
-  .imageBox-fadeBlocker:hover {
+}
+
+.imageBox-fadeBlocker:hover {
     -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
     -o-transition: opacity 1s ease-in-out;
     transition: opacity 1s ease-in-out;
-    opacity:0;
-  }
\ No newline at end of file
+    opacity: 0;
+}
\ No newline at end of file