From d73772929debb2c5c24f561d0c0f5dddc1fa470b Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sat, 25 Dec 2021 23:38:21 +0000
Subject: [PATCH] feat(native): overlay titlebar on login srceen

---
 src/components/native/Titlebar.tsx | 19 +++++++++++++++----
 src/pages/login/Login.tsx          |  8 ++++----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/native/Titlebar.tsx b/src/components/native/Titlebar.tsx
index e1d6b60e..14b2fff7 100644
--- a/src/components/native/Titlebar.tsx
+++ b/src/components/native/Titlebar.tsx
@@ -1,14 +1,25 @@
 import { Wrench } from "@styled-icons/boxicons-solid";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import UpdateIndicator from "../common/UpdateIndicator";
 
-const TitlebarBase = styled.div`
+interface Props {
+    overlay?: boolean;
+}
+
+const TitlebarBase = styled.div<Props>`
     height: var(--titlebar-height);
     display: flex;
     user-select: none;
     align-items: center;
 
+    ${(props) =>
+        props.overlay &&
+        css`
+            position: fixed;
+            width: 100%;
+        `}
+
     .drag {
         flex-grow: 1;
         -webkit-app-region: drag;
@@ -84,9 +95,9 @@ const TitlebarBase = styled.div`
     }
 `;
 
-export function Titlebar() {
+export function Titlebar(props: Props) {
     return (
-        <TitlebarBase>
+        <TitlebarBase {...props}>
             <div class="title">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
index 34253823..672d565d 100644
--- a/src/pages/login/Login.tsx
+++ b/src/pages/login/Login.tsx
@@ -20,12 +20,11 @@ import { FormResend, FormVerify } from "./forms/FormVerify";
 export default observer(() => {
     const state = useApplicationState();
     const theme = state.settings.theme;
-    const configuration = state.config.get();
 
     return (
         <>
             {window.isNative && !window.native.getConfig().frame && (
-                <Titlebar />
+                <Titlebar overlay />
             )}
             <div className={styles.login}>
                 <Helmet>
@@ -37,8 +36,9 @@ export default observer(() => {
                 <div className={styles.content}>
                     <div className={styles.nav}>
                         <a className={styles.logo}>
-                            {/*TOFIX: Hide logo if on Desktop Native*/}
-                            <img src={wideSVG} draggable={false} />
+                            {!("native" in window) && (
+                                <img src={wideSVG} draggable={false} />
+                            )}
                         </a>
                         <LocaleSelector />
                     </div>