the header cross

Author: dewanshDT

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,14 @@ 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,
+  CloseIcon,
+  ExitIcon,
+  crossIcon
+} from '../../../../common/icons';
 import {
   newFile,
   newFolder,
@@ -237,26 +244,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>
   );
 };