fixing layout and login page

packages/desktop/src/styles/index.css

@@ -3,12 +3,14 @@ body {
   flex-direction: column;
   flex: 1;
 
+  margin: 0;
+
   background: #00000000;
 }
 
 #root {
-  height: inherit;
-  width: inherit;
+  height: 100vh;
+  width: 100vw;
   display: flex;
   padding: 0 !important;
   font-family: 'IBM Plex Sans', sans-serif;

packages/desktop/src/subcomponents/NirvanaLogo.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export default function NirvanaLogo({
+  className,
+  type,
+  grayscale = false,
+}: {
+  className?: string;
+  type?: 'primary' | 'small';
+  grayscale?: boolean;
+}) {
+  return (
+    <svg
+      width="25"
+      height="31.75"
+      viewBox="0 0 85 107"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${className} ${grayscale ? 'text-black grayscale' : ''}`}
+    >
+      <path
+        d="M0.398438 25.9375C1.84375 26.9531 2.89453 27.6562 3.91016 28.4023C11.9258 34.2617 19.9336 40.125 27.9414 45.9961C32.8008 49.5391 37.1211 53.5898 40.1445 58.8867C42.6094 63.0898 44.1328 67.6172 44.7148 72.4648C44.9258 74.1797 45.0469 75.9062 45.0703 77.6367C45.1055 86.8281 45.0703 96.0156 45.0703 105.207V106.809C44.5742 106.562 44.0938 106.289 43.625 105.992C34.1094 99.043 24.5391 92.1523 15.1055 85.0859C6.83203 78.8672 1.97266 70.5273 0.734375 60.1484C0.527344 58.3633 0.421875 56.5703 0.414062 54.7734C0.398439 46.0312 0.398438 37.2891 0.398438 28.5508V25.9375Z"
+        fill="#438E86"
+      />
+      <path
+        d="M84.2539 15.5039V23.0859C84.2539 28.0352 84.2851 32.9844 84.2539 37.9297C84.1875 46.7539 80.4922 53.875 73.6367 59.1641C66.6484 64.5703 59.4023 69.6328 52.2617 74.8477C52.0078 75.0352 51.7422 75.207 51.2695 75.5352C51.164 75.0273 51.0937 74.5117 51.0586 73.9922C51.0586 66.9883 50.9492 59.9805 51.0781 52.9805C51.2382 44.5977 54.539 37.5352 61.0937 32.3828C68.3945 26.6445 76.0117 21.3125 83.4961 15.8125C83.7422 15.6914 83.9961 15.5859 84.2539 15.5039Z"
+        fill="#438E86"
+      />
+      <path
+        d="M44.957 44.9219L39.5781 40.9766C36.0156 38.3672 32.4336 35.7812 28.8828 33.1484C23.1992 28.9219 20.3281 23.2539 20.332 16.1367V2.45703C20.332 1.82813 20.332 1.20312 20.332 0.308594C20.8125 0.488281 21.2773 0.707031 21.7188 0.964844C26.6875 4.58203 31.6875 8.16016 36.5898 11.8672C41.1133 15.2852 44 19.7812 44.8516 25.4844C44.9648 26.0469 45.0352 26.6172 45.0625 27.1953C45.082 32.6562 45.0938 38.1172 45.0898 43.5742C45.0898 43.8828 45.0312 44.1914 44.957 44.9219Z"
+        fill="#438E86"
+      />
+    </svg>
+  );
+}

packages/desktop/src/tree/Login.tsx

@@ -1,7 +1,10 @@
+import { Button, CircularProgress, Container } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 import Channels from '../electron/constants';
 import { FcGoogle } from 'react-icons/fc';
+import NirvanaLogo from '../subcomponents/NirvanaLogo';
+import { blueGrey } from '@mui/material/colors';
 // import Logo from '../../components/Logo';
 import { login } from '../api/NirvanaApi';
 import { useAsyncFn } from 'react-use';
@@ -48,6 +51,30 @@ export default function Login() {
     window.electronAPI.auth.initiateLogin();
   };
 
+  return (
+    <Container
+      maxWidth={false}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 5,
+        background: blueGrey[50],
+      }}
+    >
+      <NirvanaLogo />
+
+      {isLoading ? (
+        <CircularProgress />
+      ) : (
+        <Button onClick={continueAuth} variant="outlined" color="primary" startIcon={<FcGoogle />}>
+          Continue with Google
+        </Button>
+      )}
+    </Container>
+  );
+
   return (
     <div
       className="flex flex-col space-y-5 justify-center items-center