css tweaks

app/src/components/IpfsInfo.vue

@@ -3,15 +3,15 @@
     <h1>IPFS View</h1>
     <h3>Testing Only</h3>
     <h1>{{ status }}</h1>
-    <!-- <h2>ID: {{ id }}</h2> -->
-    <!-- <h2>Agent version: {{ agentVersion }}</h2> -->
+    <h2>ID: {{ id }}</h2>
+    <h2>Agent version: {{ agentVersion }}</h2>
     <!-- <h3>Files : {{ fileContents }}</h3> -->
-    <!-- <h3>Path: {{ path }}</h3> -->
+    <!-- <h3>Path: {{ path }}</h3>
     <div v-if="path == 'ready'"></div>
     <div v-else>
       <img :src="'https://ipfs.io/ipfs/' + path" />
     </div>
-    <!-- <img :src="'data:image/jpg;base64,' + output" /> -->
+    <img :src="'data:image/jpg;base64,' + output" /> -->
 
     <form>
       <input
@@ -47,8 +47,8 @@ export default {
   data: function () {
     return {
       status: 'Connecting to IPFS...',
-      // id: '',
-      // agentVersion: '',
+      id: '',
+      agentVersion: '',
       selectedFile: null,
       fileContents: this.fileContents,
       output: output,

app/src/components/NodesLayer.vue

@@ -117,7 +117,7 @@
               ></p>
             </div>
 
-            <h3>Reactions</h3>
+            <!-- <h3>Reactions</h3> -->
 
             <div v-for="(emojis, index) in configEmoji" :key="index">
               <p class="allemoji" v-if="nodeid == emojis.node_id">
@@ -325,6 +325,7 @@ export default {
 
 .info {
   font-size: 0.8em;
+  display: inline;
 }
 
 textarea {
@@ -335,7 +336,10 @@ textarea {
   font-family: 'Inter var', Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  outline: #cab6ff;
+  border: none;
+  outline: none;
+  background-color: rgb(187, 227, 255);
+  scrollbar-color: yellow rgb(187, 227, 255);
 }
 
 .btn-row {
@@ -351,6 +355,7 @@ textarea {
 
 .allemoji {
   font-size: 2em;
+  float: left;
 }
 
 img {

app/src/components/OtherNodeslayer.vue

@@ -117,14 +117,14 @@
           <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
             {{ nodeid }}
           </p>
-          <h3>Reactions</h3>
+          <!-- <h3>Reactions</h3> -->
           <div v-for="(emojis, index) in configEmoji" :key="index">
             <p class="allemoji" v-if="nodeid == emojis.node_id">
               {{ emojis.emoji_text }}
             </p>
           </div>
           <div class="react" v-if="nodeid != undefined">
-            <h2>React</h2>
+            <!-- <h2>React</h2> -->
             <div class="eeee">
               <input :value="nodeid" name="id" readonly hidden />
               <input
@@ -340,6 +340,7 @@ input {
 
 .allemoji {
   font-size: 2em;
+  float: left;
 }
 
 h3 {
@@ -357,20 +358,26 @@ h3 {
   right: 0.5rem;
   width: 1.5rem;
   height: 1.5rem;
-
+  /* transform: scale(1.6); */
   margin: 0em 0em 1em 0em;
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.2s;
 }
-.emoji-invoker:hover {
-  transform: scale(1.1);
+.emoji-invoker:hover > svg {
+  fill: #84949b;
+
+  /* transform: scale(1.5); */
 }
 .emoji-invoker > svg {
   fill: #b1c6d0;
+  margin-top: -15px;
+  margin-left: 0.2em;
+  transform: scale(1.5);
 }
 
 .emoji-picker {
+  transform: scale(1.2);
   z-index: 1;
   font-family: Montserrat;
   border: 1px solid #ccc;