From e2770c33752d41dd772550f8dc78a65609bed399 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <enotcode@gmail.com>
Date: Tue, 18 Oct 2022 01:12:25 +0500
Subject: [PATCH] Login: add mobile header

---
 packages/login/src/client/App.tsx             |  2 ++
 .../src/client/components/StyledLogin.ts      |  1 +
 .../components/sub-components/SimpleNav.tsx   | 25 +++++++++++++++++++
 3 files changed, 28 insertions(+)
 create mode 100644 packages/login/src/client/components/sub-components/SimpleNav.tsx

diff --git a/packages/login/src/client/App.tsx b/packages/login/src/client/App.tsx
index ef4cc490a2..60b8c97a2e 100644
--- a/packages/login/src/client/App.tsx
+++ b/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 />
diff --git a/packages/login/src/client/components/StyledLogin.ts b/packages/login/src/client/components/StyledLogin.ts
index 4beb2894db..200872d062 100644
--- a/packages/login/src/client/components/StyledLogin.ts
+++ b/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);
   }
 
 `;
diff --git a/packages/login/src/client/components/sub-components/SimpleNav.tsx b/packages/login/src/client/components/sub-components/SimpleNav.tsx
new file mode 100644
index 0000000000..3b29fdd08c
--- /dev/null
+++ b/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;