feat: added climate warehouse logo to headline

Chia-Network · Feb 21, 2022 · c40db57 · c40db57
1 parent 0d886c4
commit c40db57
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 53 deletions.
diff --git a/src/components/blocks/LeftNav.js b/src/components/blocks/LeftNav.js
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styled, { withTheme } from 'styled-components';
 import {
-  ClimateWarehouseLogo,
   ButtonText,
   WarehouseIcon,
   RegistryIcon,
@@ -30,12 +29,6 @@ const NavContainer = styled('div')`
   background-color: #3b8ee0;
 `;
 
-const LogoContainer = styled('div')`
-  display: flex;
-  justify-content: center;
-  margin: 20.46px auto 3.5344rem auto;
-`;
-
 const StyledCreateOrgButtonContainer = styled('div')`
   h4 {
     color: white;
@@ -94,9 +87,6 @@ const LeftNav = withTheme(({ children }) => {
   return (
     <Container>
       <NavContainer>
-        <LogoContainer>
-          <ClimateWarehouseLogo />
-        </LogoContainer>
         <StyledTitleContainer>
           <WarehouseIcon height={24} width={24} />
           <ButtonText>
@@ -109,8 +99,7 @@ const LeftNav = withTheme(({ children }) => {
           onClick={() => {
             dispatch(resetRefreshPrompt);
             setLocation('projects');
-          }}
-        >
+          }}>
           <FormattedMessage id="projects-list" />
         </MenuItem>
         <div></div>
@@ -120,8 +109,7 @@ const LeftNav = withTheme(({ children }) => {
           onClick={() => {
             dispatch(resetRefreshPrompt);
             setLocation('units');
-          }}
-        >
+          }}>
           <FormattedMessage id="units-list" />
         </MenuItem>
         <StyledTitleContainer disabled={myOrgIsNotCreated}>
@@ -138,8 +126,7 @@ const LeftNav = withTheme(({ children }) => {
               onClick={() => {
                 dispatch(resetRefreshPrompt);
                 setLocation('my-projects');
-              }}
-            >
+              }}>
               <FormattedMessage id="my-projects" />
             </MenuItem>
             <div></div>
@@ -149,8 +136,7 @@ const LeftNav = withTheme(({ children }) => {
               onClick={() => {
                 dispatch(resetRefreshPrompt);
                 setLocation('my-units');
-              }}
-            >
+              }}>
               <FormattedMessage id="my-units" />
             </MenuItem>
           </>
@@ -160,21 +146,18 @@ const LeftNav = withTheme(({ children }) => {
             <MenuItem
               to={window.location}
               onClick={() => setConfirmCreateOrgIsVisible(true)}
-              disabled
-            >
+              disabled>
               <FormattedMessage id="my-projects" />
             </MenuItem>
             <div></div>
             <MenuItem
               to={window.location}
               onClick={() => setConfirmCreateOrgIsVisible(true)}
-              disabled
-            >
+              disabled>
               <FormattedMessage id="my-units" />
             </MenuItem>
             <StyledCreateOrgButtonContainer
-              onClick={() => setCreateOrgIsVisible(true)}
-            >
+              onClick={() => setCreateOrgIsVisible(true)}>
               <AddIconCircle width="20" height="20" />
               <ButtonText>
                 <FormattedMessage id="create-organization" />

diff --git a/src/components/blocks/LocaleSwitcher.js b/src/components/blocks/LocaleSwitcher.js
@@ -2,9 +2,9 @@ import React from 'react';
 import styled, {withTheme} from 'styled-components';
 import {useDispatch, useSelector} from 'react-redux';
 import {Select, MenuItem} from '@mui/material';
-import {LocaleIcon} from '../../components';
 import {LANGUAGE_CODES} from '../../translations';
 import {setLocale} from '../../store/actions/app';
+import { SelectSizeEnum, SelectTypeEnum } from '..';
 
 const Container = styled('div')`
   display: flex;
@@ -27,10 +27,10 @@ const LocaleSwitcher = withTheme(() => {
 
   return (
     <Container selectedTheme={appStore.theme}>
-      <LocaleIcon style={{marginRight: '10px'}} />
       <Select
         disableUnderline
-        variant="standard"
+        size={SelectSizeEnum.small}
+        type={SelectTypeEnum.basic}
         value={appStore.locale}
         onChange={handleLocaleChange}>
         {Object.keys(LANGUAGE_CODES).map(key => (

diff --git a/src/components/icons/ClimateWarehouseLogo.js b/src/components/icons/ClimateWarehouseLogo.js
diff --git a/src/components/layout/Dashboard.js b/src/components/layout/Dashboard.js
@@ -1,16 +1,7 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import styled, { withTheme } from 'styled-components';
-import { LeftNav, LocaleSwitcher, Body } from '..';
-
-const Container = styled('div')`
-  width: 100%;
-  display: flex;
-  background-color: #e5e5e5;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow: hidden;
-`;
+import { LeftNav, LocaleSwitcher, Body, ClimateWarehouseLogo } from '..';
 
 const Headline = styled('div')`
   width: 100%;
@@ -22,30 +13,38 @@ const Main = styled('div')`
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
 `;
 
 const BodyText = styled('div')`
   max-width: calc(100% - 3rem);
   width: calc(100% - 3rem);
-  height: 100%;
   margin: 1.5rem;
   background-color: #ffffff;
   overflow: hidden;
   box-sizing: border-box;
   padding: 0;
 `;
 
+const InnerContainer = styled('div')`
+  display: flex;
+  height: 100%;
+`;
+
+const LogoContainer = styled('div')`
+  align-self: center;
+`;
+
 const StyledLocalContainer = styled('div')`
   width: 100%;
   height: 100%;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   padding: 0rem 1.5rem 0rem 1.5rem;
   box-sizing: border-box;
 `;
 
 const HomeOrgUidContainer = styled('div')`
-  width: 100%;
   align-self: center;
 `;
 
@@ -63,20 +62,25 @@ const Dashboard = withTheme(({ children }) => {
 
   return (
     <Main>
-      <LeftNav />
-      <Container>
-        <Headline>
-          <StyledLocalContainer>
-            <HomeOrgUidContainer>
-              {homeOrgUid ? (
+      <Headline>
+        <StyledLocalContainer>
+          <LogoContainer>
+            <ClimateWarehouseLogo />
+          </LogoContainer>
+          <HomeOrgUidContainer>
+            {homeOrgUid ? (
+              <div>
                 <Body size="Small">{`Organization ID: ${homeOrgUid}`}</Body>
-              ) : null}
-            </HomeOrgUidContainer>
-            <LocaleSwitcher />
-          </StyledLocalContainer>
-        </Headline>
+              </div>
+            ) : null}
+          </HomeOrgUidContainer>
+          <LocaleSwitcher />
+        </StyledLocalContainer>
+      </Headline>
+      <InnerContainer>
+        <LeftNav />
         <BodyText>{children}</BodyText>
-      </Container>
+      </InnerContainer>
     </Main>
   );
 });