Merge pull request #2389 from dewanshDT/dewanshmobile/login

The mobile Login Page 🚪

Author: lindapaiste

client/common/icons.jsx

@@ -24,6 +24,7 @@ import Folder from '../images/folder-padded.svg';
 import CircleTerminal from '../images/circle-terminal.svg';
 import CircleFolder from '../images/circle-folder.svg';
 import CircleInfo from '../images/circle-info.svg';
+import Cross from '../images/cross.svg';
 
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -94,9 +95,8 @@ export const MoreIcon = withLabel(More);
 export const TerminalIcon = withLabel(Terminal);
 export const CodeIcon = withLabel(Code);
 export const SaveIcon = withLabel(Save);
-
 export const FolderIcon = withLabel(Folder);
-
+export const CrossIcon = withLabel(Cross);
 export const CircleTerminalIcon = withLabel(CircleTerminal);
 export const CircleFolderIcon = withLabel(CircleFolder);
 export const CircleInfoIcon = withLabel(CircleInfo);

client/images/cross.svg

@@ -13,7 +13,12 @@ import NavMenuItem from '../../../../components/Nav/NavMenuItem';
 import { prop, remSize } from '../../../../theme';
 import AsteriskIcon from '../../../../images/p5-asterisk.svg';
 import IconButton from '../../../../components/mobile/IconButton';
-import { AccountIcon, EditorIcon, MoreIcon } from '../../../../common/icons';
+import {
+  AccountIcon,
+  EditorIcon,
+  MoreIcon,
+  CrossIcon
+} from '../../../../common/icons';
 import {
   newFile,
   newFolder,
@@ -237,26 +242,40 @@ const MobileNav = () => {
           <h5>by {project?.owner?.username}</h5>
         )}
       </Title>
-      <Options>
-        {user.authenticated ? (
-          <AccountMenu />
-        ) : (
-          <div>
-            <Link to="/login">
-              <IconButton icon={AccountIcon} />
-            </Link>
-          </div>
-        )}
-        {title === project.name ? (
-          <MoreMenu />
-        ) : (
+
+      {/* check if the user is in login page */}
+      {pathname === '/login' || pathname === '/signup' ? (
+        // showing the login page
+        <Options>
           <div>
             <Link to={editorLink}>
-              <IconButton icon={EditorIcon} />
+              <IconButton icon={CrossIcon} />
             </Link>
           </div>
-        )}
-      </Options>
+        </Options>
+      ) : (
+        <Options>
+          {/* checking if user is logged in or not */}
+          {user.authenticated ? (
+            <AccountMenu />
+          ) : (
+            <div>
+              <Link to="/login">
+                <IconButton icon={AccountIcon} />
+              </Link>
+            </div>
+          )}
+          {title === project.name ? (
+            <MoreMenu />
+          ) : (
+            <div>
+              <Link to={editorLink}>
+                <IconButton icon={EditorIcon} />
+              </Link>
+            </div>
+          )}
+        </Options>
+      )}
     </Nav>
   );
 };

client/modules/IDE/components/Header/MobileNav.jsx

@@ -48,15 +48,15 @@ exports[`Nav renders dashboard version for mobile 1`] = `
 <DocumentFragment>
   <header>
     <nav
-      class="sc-giAqHp deBDHC"
+      class="sc-ezzafa bZzfr"
     >
       <div
-        class="sc-ezzafa bKgrFx"
+        class="sc-bYwzuL bIGdtt"
       >
         <test-file-stub />
       </div>
       <div
-        class="sc-bYwzuL lkVxhY"
+        class="sc-kLojOw btKDXx"
       >
         <h1>
           <span
@@ -89,7 +89,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
         </h1>
       </div>
       <div
-        class="sc-kLojOw casOUg"
+        class="sc-iklJeh jupmlX"
       >
         <div>
           <a
@@ -459,15 +459,15 @@ exports[`Nav renders editor version for mobile 1`] = `
 <DocumentFragment>
   <header>
     <nav
-      class="sc-giAqHp deBDHC"
+      class="sc-ezzafa bZzfr"
     >
       <div
-        class="sc-ezzafa bKgrFx"
+        class="sc-bYwzuL bIGdtt"
       >
         <test-file-stub />
       </div>
       <div
-        class="sc-bYwzuL lkVxhY"
+        class="sc-kLojOw btKDXx"
       >
         <h1>
           <span
@@ -500,7 +500,7 @@ exports[`Nav renders editor version for mobile 1`] = `
         </h1>
       </div>
       <div
-        class="sc-kLojOw casOUg"
+        class="sc-iklJeh jupmlX"
       >
         <div>
           <a

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -2,24 +2,29 @@
 	text-align: center;
 	display: flex;
 	flex-direction: column;
-  align-items: center;
+	align-items: center;
 	justify-content: center;
 	flex: 1;
+
+	@media (max-width: 550px) {
+		text-align: left;
+		justify-content: start;
+	}
 }
 
 .form-container--align-left {
-  text-align: left;
+	text-align: left;
 }
 
 .form-container--align-top {
-  height: unset;
+	height: unset;
 }
 
 .form-container__header {
 	width: 100%;
 	padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem;
 	display: flex;
-  justify-content: space-between;
+	justify-content: space-between;
 }
 
 .form-container__content {
@@ -31,28 +36,32 @@
 }
 
 .form-container--align-left .form-container__content {
-  align-items: left;
+	align-items: left;
 }
 
 .form-container__title {
 	font-weight: normal;
 	@include themify() {
-    color: getThemifyVariable('form-title-color')
-  }
+		color: getThemifyVariable("form-title-color");
+	}
+
+	@media (max-width: 770px) {
+		display: none;
+	}
 }
 
 .form-container__context {
-  @include themify() {
-    color: getThemifyVariable('secondary-text-color')
-  }
+	@include themify() {
+		color: getThemifyVariable("secondary-text-color");
+	}
 }
 
 .form-container__divider {
-  padding: #{20 / $base-font-size}rem 0;
+	padding: #{20 / $base-font-size}rem 0;
 }
 
 .form-container__logo-button {
-  @include icon();
+	@include icon();
 }
 
 .form-container__exit-button {

client/styles/components/_form-container.scss

@@ -5,7 +5,7 @@
   font-size: #{12 / $base-font-size}rem;
   text-align: left;
   @include themify() {
-    color: getThemifyVariable('error-color');
+    color: getThemifyVariable("error-color");
   }
 }
 
@@ -27,11 +27,16 @@
   margin-top: #{16 / $base-font-size}rem;
   font-size: #{12 / $base-font-size}rem;
   @include themify() {
-    color: getThemifyVariable('form-navigation-options-color');
+    color: getThemifyVariable("form-navigation-options-color");
+  }
+
+  @media (max-width: 550px) {
+    text-align: center;
+    margin: #{12 / $base-font-size}rem;
   }
 }
 
-.form__legend{
+.form__legend {
   font-size: #{21 / $base-font-size}rem;
   font-weight: bold;
 }
@@ -42,7 +47,7 @@
   margin-bottom: #{7 / $base-font-size}rem;
   display: block;
   @include themify() {
-    color: getThemifyVariable('form-secondary-title-color');
+    color: getThemifyVariable("form-secondary-title-color");
   }
 }
 
@@ -56,8 +61,8 @@
   height: #{40 / $base-font-size}rem;
   font-size: #{16 / $base-font-size}rem;
   @include themify() {
-    color: getThemifyVariable('form-input-text-color');
-    background-color: getThemifyVariable('input-background-color');
+    color: getThemifyVariable("form-input-text-color");
+    background-color: getThemifyVariable("input-background-color");
   }
 }
 
@@ -67,7 +72,7 @@
 
 .form__input::placeholder {
   @include themify() {
-    color: getThemifyVariable('form-input-placeholder-text-color');
+    color: getThemifyVariable("form-input-placeholder-text-color");
   }
 }
 
@@ -78,7 +83,7 @@
 
 .form__status {
   @include themify() {
-    color: getThemifyVariable('form-navigation-options-color');
+    color: getThemifyVariable("form-navigation-options-color");
   }
 }