Merge branch 'lw/logo-on-login' #1904 into #1905

oasisprotocol · Apr 26, 2024 · d360fda · d360fda
2 parents 28618de + 84c6a0a
commit d360fda
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/.changelog/1904.bugfix.md b/.changelog/1904.bugfix.md
@@ -0,0 +1 @@
+Add logo to login form
diff --git a/src/app/components/Persist/LoginModalLayout.tsx b/src/app/components/Persist/LoginModalLayout.tsx
@@ -1,15 +1,20 @@
 import { Box } from 'grommet/es6/components/Box'
 import { ResponsiveLayer } from '../ResponsiveLayer'
-import React from 'react'
+import React, { useContext } from 'react'
 import { Header } from 'app/components/Header'
 import { Navigation } from '../Sidebar'
+import walletBlueLogotype from '../../../../public/Rose Wallet Logo Blue cropped.svg'
+import walletWhiteLogotype from '../../../../public/Rose Wallet Logo White cropped.svg'
+import { ThemeContext } from 'styled-components'
 
 export function LoginModalLayout(props: {
   title: string
   children: React.ReactNode
   onClickOutside?: () => void
   onEsc?: () => void
 }) {
+  const { dark } = useContext<any>(ThemeContext)
+
   return (
     <Box direction="row-responsive" background="background-back" fill style={{ minHeight: '100dvh' }}>
       <Navigation />
@@ -20,7 +25,15 @@ export function LoginModalLayout(props: {
         onEsc={props.onEsc}
       >
         <Box pad="medium">
-          <Header level={2} textAlign="center" margin={{ top: 'medium' }}>
+          <Box align="center" margin={{ vertical: 'large' }}>
+            <img
+              alt="ROSE Wallet logo"
+              src={dark ? walletWhiteLogotype : walletBlueLogotype}
+              style={{ height: '65px' }}
+            />
+          </Box>
+
+          <Header level={2} textAlign="center">
             {props.title}
           </Header>