Ana/3199 mobile close button signin (#3238)

* add close x to signin * add close button for signin good * update snapshots * changelog * add user box class to closing button * add close button for mobile * adjust margins * update snapshot * update test and snap * simplify. no desktop logic. media queries * update snapshots * fix lint error
luniehq · Dec 3, 2019 · 8a2915a · 8a2915a
1 parent b3b9817
commit 8a2915a
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 30 deletions.
diff --git a/changes/ana_3199-mobile-close-button-signin b/changes/ana_3199-mobile-close-button-signin
@@ -0,0 +1 @@
+[Added] [#3199](https://github.com/cosmos/lunie/issues/3199) Now there is a close button also for mobile screen during the sign in flow @Bitcoinera
diff --git a/src/components/common/SessionFrame.vue b/src/components/common/SessionFrame.vue
@@ -12,12 +12,17 @@
           <slot></slot>
         </div>
       </div>
-      <TmBtn
-        class="session-close"
-        value="Back to Lunie"
-        color="secondary"
-        @click.native="$router.push(`/`)"
-      />
+      <div class="session-close">
+        <TmBtn
+          class="session-close-button"
+          value="Back to Lunie"
+          color="secondary"
+          @click.native="$router.push(`/`)"
+        />
+        <a class="user-box" @click="goBack">
+          <i class="material-icons">close</i>
+        </a>
+      </div>
     </div>
   </transition>
 </template>

diff --git a/src/components/common/TmSessionWelcome.vue b/src/components/common/TmSessionWelcome.vue
@@ -8,6 +8,9 @@
           alt="a small spinning circle to display loading"
         />
       </router-link>
+      <router-link to="/" class="session-close-mobile user-box">
+        <i class="material-icons">close</i>
+      </router-link>
 
       <h2 class="session-title welcome">
         Welcome to Lunie

diff --git a/src/styles/session.css b/src/styles/session.css
@@ -134,6 +134,28 @@
   padding: 0 1rem;
 }
 
+.user-box {
+  font-size: 12px;
+  margin-right: 1rem;
+  border-radius: 0.25rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.user-box i {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  border-radius: 50%;
+  background: var(--bc-dim);
+}
+
+.user-box i:hover {
+  background: var(--bc);
+  cursor: pointer;
+}
+
 .session .material-icons.circle.back {
   background: var(--app-fg);
   color: var(--dim);
@@ -158,6 +180,10 @@
     display: none;
   }
 
+  .session-close-mobile {
+    display: none;
+  }
+
   .session-paragraph {
     display: none;
   }
@@ -194,10 +220,27 @@
   .session-footer button {
     width: 100%;
   }
+
+  .session-close-mobile {
+    display: block;
+    position: absolute;
+    right: 1rem;
+    top: 2.5rem;
+  }
+
+  .session-close {
+    display: none;
+  }
 }
 
 @media screen and (max-width: 1023px) {
-  .session-frame .session-close {
+  .session-close .session-close-button {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .session-close .user-box {
     display: none;
   }
 }
diff --git a/tests/unit/specs/components/common/__snapshots__/SessionFrame.spec.js.snap b/tests/unit/specs/components/common/__snapshots__/SessionFrame.spec.js.snap
@@ -32,10 +32,24 @@ exports[`SessionFrame shows an overview of all wallets to sign in with from the
     </div>
   </div>
    
-  <tmbtn-stub
+  <div
     class="session-close"
-    color="secondary"
-    value="Back to Lunie"
-  />
+  >
+    <tmbtn-stub
+      class="session-close-button"
+      color="secondary"
+      value="Back to Lunie"
+    />
+     
+    <a
+      class="user-box"
+    >
+      <i
+        class="material-icons"
+      >
+        close
+      </i>
+    </a>
+  </div>
 </div>
 `;
diff --git a/tests/unit/specs/components/common/__snapshots__/TmSessionHardware.spec.js.snap b/tests/unit/specs/components/common/__snapshots__/TmSessionHardware.spec.js.snap
@@ -26,9 +26,10 @@ exports[`TmSessionHardware should show a state indicator for different states of
         </div>
       </div>
     </div>
-  </div> <button class="button session-close" color="secondary">
-    Back to Lunie
-  </button>
+  </div>
+  <div class="session-close"><button class="button session-close-button" color="secondary">
+      Back to Lunie
+    </button> <a class="user-box"><i class="material-icons">close</i></a></div>
 </div>
 `;
 
@@ -58,9 +59,10 @@ exports[`TmSessionHardware should show a state indicator for different states of
         </div>
       </div>
     </div>
-  </div> <button class="button session-close" color="secondary">
-    Back to Lunie
-  </button>
+  </div>
+  <div class="session-close"><button class="button session-close-button" color="secondary">
+      Back to Lunie
+    </button> <a class="user-box"><i class="material-icons">close</i></a></div>
 </div>
 `;
 
@@ -86,9 +88,10 @@ exports[`TmSessionHardware should show a state indicator for different states of
         </div>
       </div>
     </div>
-  </div> <button class="button session-close" color="secondary">
-    Back to Lunie
-  </button>
+  </div>
+  <div class="session-close"><button class="button session-close-button" color="secondary">
+      Back to Lunie
+    </button> <a class="user-box"><i class="material-icons">close</i></a></div>
 </div>
 `;
 
@@ -180,14 +183,28 @@ exports[`TmSessionHardware shows the ledger conection view when there're errors
     </div>
   </div>
    
-  <button
-    class="button session-close"
-    color="secondary"
+  <div
+    class="session-close"
   >
-    
+    <button
+      class="button session-close-button"
+      color="secondary"
+    >
+      
   Back to Lunie
 
-  </button>
+    </button>
+     
+    <a
+      class="user-box"
+    >
+      <i
+        class="material-icons"
+      >
+        close
+      </i>
+    </a>
+  </div>
 </div>
 `;
 
@@ -273,13 +290,27 @@ exports[`TmSessionHardware shows the ledger conection view with no errors 1`] =
     </div>
   </div>
    
-  <button
-    class="button session-close"
-    color="secondary"
+  <div
+    class="session-close"
   >
-    
+    <button
+      class="button session-close-button"
+      color="secondary"
+    >
+      
   Back to Lunie
 
-  </button>
+    </button>
+     
+    <a
+      class="user-box"
+    >
+      <i
+        class="material-icons"
+      >
+        close
+      </i>
+    </a>
+  </div>
 </div>
 `;
diff --git a/tests/unit/specs/components/common/__snapshots__/TmSessionWelcome.spec.js.snap b/tests/unit/specs/components/common/__snapshots__/TmSessionWelcome.spec.js.snap
@@ -17,6 +17,17 @@ exports[`TmSessionWelcome has the expected html structure 1`] = `
       />
     </router-link-stub>
      
+    <router-link-stub
+      class="session-close-mobile user-box"
+      to="/"
+    >
+      <i
+        class="material-icons"
+      >
+        close
+      </i>
+    </router-link-stub>
+     
     <h2
       class="session-title welcome"
     >
@@ -99,6 +110,17 @@ exports[`TmSessionWelcome has the expected html structure when on mobile 1`] = `
       />
     </router-link-stub>
      
+    <router-link-stub
+      class="session-close-mobile user-box"
+      to="/"
+    >
+      <i
+        class="material-icons"
+      >
+        close
+      </i>
+    </router-link-stub>
+     
     <h2
       class="session-title welcome"
     >