added formatted gif to info ui

2 files changed, 28 insertions, 28 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 524869e6d..763d14116 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -97,13 +97,10 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     render() {
         return (
             <div className="infoUI">
+                <div className="msg">{this.State?.[StateMessage]}</div>
                 <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}>
                     <img className="gif" src={this.State?.[StateMessageGIF]} alt="state message gif"></img>
                 </div>
-
-                {/* <img src={this.State?.[StateMessageGIF]} alt='state message gif'></img> */}
-                {/* <img src="./assets/link.png"></img> */}
-                {this.State?.[StateMessage]}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 9fbf5d628..3e0236776 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -258,15 +258,8 @@
 
 .infoUI {
     position: absolute;
-    display: flex;
+    display: block;
     top: 0;
-    // height: 100%;
-    // width: 100%;
-    // width:fit-content;
-    // width:-webkit-fit-content;
-    // width:-moz-fit-content;
-    // bottom: 46px;
-
     overflow: auto;
 
     color: white;
@@ -277,25 +270,35 @@
     margin: 15px;
     padding: 10px;
 
+    .msg {
+      position: relative;
+      // display: block;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -o-user-select: none;
+      user-select: none;
+      
+    }
+    
     .gif-container {
-        font-size: 15;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -o-user-select: none;
-        user-select: none;
-
+      position: relative;
+      margin-top: 5px;
+      // display: block;
+
+      justify-content: center;
+      align-items: center;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -o-user-select: none;
+      user-select: none;
+
+      
         .gif {
             background-color: transparent;
-            width: 25px;
-            height: 25px;
-            margin-right: 5px;
+            height: 300px;
         }
-  }
+    }
 
 }
-