fixed up some UX stuff

This was some simple fixes that might help with new users

app/src/components/BaseButton.vue

@@ -19,7 +19,7 @@ export default {
 
 <style lang="css" scoped>
 button {
-  font-size: 1em;
+  font-size: 0.8em;
   touch-action: manipulation;
   color: black;
   border: none;

app/src/components/NodesLayer.vue

@@ -26,7 +26,7 @@
                   :id="nodeid"
                   class="drag-cancel"
                   ref="nodetext"
-                  placeholder="Idea goes here!"
+                  placeholder="Idea goes here! (auto saved every keystroke)"
                 ></textarea>
               </div>
             </div>
@@ -47,6 +47,7 @@
             </div>
 
             <p class="info">*markdown supported</p>
+            <p class="info">*autosaves</p>
             <div class="btn-row">
               <BaseButton buttonClass="danger" @click="deleteFlag()"
                 >Delete</BaseButton
@@ -56,7 +57,7 @@
                   class="read"
                   buttonClass="action"
                   @click="readFlag()"
-                  >Edit
+                  >Edit Mode
                 </BaseButton>
               </div>
               <div v-else>
@@ -64,7 +65,7 @@
                   class="read"
                   buttonClass="action"
                   @click="readFlag()"
-                  >Read</BaseButton
+                  >Read Mode</BaseButton
                 >
               </div>
             </div>
@@ -104,7 +105,7 @@
                   :id="nodeid"
                   class="drag-cancel"
                   ref="nodetext"
-                  placeholder="Idea goes here!"
+                  placeholder="Idea goes here! (auto saved every keystroke)"
                 ></textarea>
               </div>
             </div>
@@ -125,6 +126,7 @@
             </div>
 
             <p class="info">*markdown supported</p>
+            <p class="info">*autosaves</p>
             <div class="btn-row">
               <BaseButton buttonClass="danger" @click="deleteFlag()"
                 >Delete</BaseButton
@@ -134,7 +136,7 @@
                   class="read"
                   buttonClass="action"
                   @click="readFlag()"
-                  >Edit
+                  >Edit Mode
                 </BaseButton>
               </div>
               <div v-else>
@@ -142,7 +144,7 @@
                   class="read"
                   buttonClass="action"
                   @click="readFlag()"
-                  >Read</BaseButton
+                  >Read Mode</BaseButton
                 >
               </div>
             </div>

app/src/components/OnBoard.vue

@@ -13,10 +13,11 @@
       <form>
         <div>
           <p id="nodeid" :inner-html.prop="nodetext | marked"></p>
+          <div v-if="name == false">
             <input
               type="text"
               v-model.trim="clientid"
-            placeholder="device name"
+              placeholder="name"
               autocorrect="off"
               autocapitalize="none"
               ref="objectname"
@@ -24,12 +25,17 @@
               @focus="editTrue(true)"
               @blur="editTrue(false)"
             />
+
             <div class="btn-row">
               <BaseButton buttonClass="special" @click="setClient()"
                 >Store</BaseButton
               >
             </div>
           </div>
+          <div v-else>
+            <h4>Saved</h4>
+          </div>
+        </div>
       </form>
     </vue-draggable-resizable>
 
@@ -46,6 +52,7 @@
       <form>
         <div>
           <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
+          <div v-if="microcosm == false">
             <input
               type="text"
               v-model.trim="localmicrocosm"
@@ -57,14 +64,19 @@
               @focus="editTrue(true)"
               @blur="editTrue(false)"
             />
+
             <div class="btn-row">
               <BaseButton
                 buttonClass="special"
                 @click="createMicrocosm(), letsGo()"
-              >Create Microcosm</BaseButton
+                >Create or Rejoin a Microcosm</BaseButton
               >
             </div>
           </div>
+          <div v-else>
+            <h4>Loading...</h4>
+          </div>
+        </div>
       </form>
     </vue-draggable-resizable>
   </div>
@@ -83,8 +95,8 @@ export default {
         '## 3. What shall we call you ? 💥 \n First we need to connect this device to your ideas. This name is what allows you to create and edit your nodes and can be anything you like and this name is always anonymous.',
       nodetext2:
         '## 5. Start those engines ! 🏎 \n Now you can create your own microcosm to store your ideas and ask people to join you, either just tell them the name of the microcosm or share the alpha.nodenogg.in URL and add the ending; </br><em><b>/microcosm/nameofyourmicrocosm</b></em>',
-      // parta: true,
-      // partb: false,
+      name: false,
+      microcosm: false,
       // partc: false,
     }
   },
@@ -106,10 +118,12 @@ export default {
     createMicrocosm() {
       this.$store.dispatch('createMicrocosm', this.localmicrocosm)
       localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
+      this.microcosm = true
     },
     setClient() {
       this.$store.dispatch('setClient', this.clientid),
         localStorage.setItem('myNNClient', this.clientid)
+      this.name = true
     },
 
     editTrue(e) {

app/src/experimental/modes/index.js

@@ -31,16 +31,16 @@ export const move = {
   shortcut: false,
 }
 
-export const connect = {
-  name: 'connect',
-  view: {
-    pan: false,
-    zoom: false,
-  },
-  icon: 'connection',
-  cursor: 'crosshair',
-  shortcut: false,
-}
+// export const connect = {
+//   name: 'connect',
+//   view: {
+//     pan: false,
+//     zoom: false,
+//   },
+//   icon: 'connection',
+//   cursor: 'crosshair',
+//   shortcut: false,
+// }
 
 export const draw = {
   name: 'draw',

app/src/store/index.js

@@ -366,7 +366,7 @@ const store = new Vuex.Store({
           x_pos: 50,
           y_pos: 50,
           width: 220,
-          height: 275,
+          height: 295,
           z_index: 1,
           read_mode: false,
         })