Merge pull request #57 from open-contracting/strive-logo

feat: strive logo
open-contracting · Sep 12, 2023 · e13af00 · e13af00
2 parents 51c9f4f + fef0a86
commit e13af00
Showing 1 changed file with 20 additions and 3 deletions.
diff --git a/src/layout/AppBar.tsx b/src/layout/AppBar.tsx
@@ -2,8 +2,10 @@ import { Box, Container, Toolbar, useMediaQuery } from '@mui/material';
 import MuiAppBar from '@mui/material/AppBar';
 import { useT } from '@transifex/react';
 import { Link } from 'react-router-dom';
+import Text from 'src/stories/text/Text';
 
 import OCPLogo from '../assets/ocp-logo.svg';
+import StriveLogo from '../assets/strive-logo.svg';
 import SelectLanguageComponent from '../components/SelectLanguageComponent';
 import { Button } from '../stories/button/Button';
 
@@ -18,6 +20,10 @@ const styleWithMobileLogo = {
   width: '125px',
 };
 
+const styleWithMobileLogoStrive = {
+  width: '160px',
+};
+
 export function AppBar({ auth = true, logout }: AppBarProps) {
   const t = useT();
   const matches = useMediaQuery('(min-width:600px)');
@@ -26,9 +32,20 @@ export function AppBar({ auth = true, logout }: AppBarProps) {
     <MuiAppBar position="static" className="bg-darkest" elevation={0}>
       <Container maxWidth={false} className="lg:px-20 md:px-12 sm:px-10 px-6 mx-0">
         <Toolbar disableGutters sx={{ height: '100px' }}>
-          <Link to="/" style={{ textDecoration: 'none', color: '#fff' }}>
-            <img style={matches && auth ? {} : styleWithMobileLogo} src={OCPLogo} alt="logo" />
-          </Link>
+          <div className="flex flex-row items-end">
+            <Link to="/" style={{ textDecoration: 'none', color: '#fff' }}>
+              <img style={matches && auth ? {} : styleWithMobileLogo} src={OCPLogo} alt="logo" />
+            </Link>
+            <div className={`flex ${matches ? 'flex-row ml-5 items-end' : 'flex-col ml-2'}  justify-end`}>
+              <Text className={`mb-2 text-white ${matches ? 'text-xl mr-6' : 'text-xs mr-1'}`}>Supported by</Text>
+              <img
+                className="justify-self-end"
+                style={matches && auth ? styleWithMobileLogoStrive : { width: '92px' }}
+                src={StriveLogo}
+                alt="strive-logo"
+              />
+            </div>
+          </div>
 
           <Box sx={{ display: 'flex', flexGrow: 1, justifyContent: 'flex-end' }}>
             <SelectLanguageComponent />