Login: add mobile header

packages/login/src/client/App.tsx

@@ -5,6 +5,7 @@ import InvalidRoute from "./components/Invalid";
 import CodeLogin from "./components/CodeLogin";
 import initLoginStore from "../store";
 import { Provider as MobxProvider } from "mobx-react";
+import SimpleNav from "../client/components/sub-components/SimpleNav";
 
 interface ILoginProps extends IInitialState {
   isDesktopEditor?: boolean;
@@ -13,6 +14,7 @@ const App: React.FC<ILoginProps> = (props) => {
   const loginStore = initLoginStore(props.currentColorScheme);
   return (
     <MobxProvider {...loginStore}>
+      <SimpleNav />
       <Switch>
         <Route path="/login/error">
           <InvalidRoute />

packages/login/src/client/components/StyledLogin.ts

@@ -241,6 +241,7 @@ export const LoginFormWrapper = styled.div`
 
   @media (max-width: 428px) {
     background-image: none;
+    height: calc(100vh - 48px);
   }
 
 `;

packages/login/src/client/components/sub-components/SimpleNav.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import styled from "styled-components";
+import { hugeMobile } from "@docspace/components/utils/device";
+
+const StyledNav = styled.div`
+  display: none;
+  height: 48px;
+  align-items: center;
+  justify-content: center;
+  background-color: #f8f9f9;
+
+  @media ${hugeMobile} {
+    display: flex;
+  }
+`;
+
+const SimpleNav = () => {
+  return (
+    <StyledNav>
+      <img src="/static/images/logo.docspace.react.svg" />
+    </StyledNav>
+  );
+};
+
+export default SimpleNav;