From 875a69eda72320c2de47d5a6a639d43cf2b586db Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Wed, 4 Sep 2019 19:37:35 -0400
Subject: [PATCH] ui(resources): tweak mobile header styles with logo

---
 src/components/ResourcesLayout/index.tsx  |  5 ++++-
 src/components/ResourcesLayout/styles.tsx | 20 ++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/ResourcesLayout/index.tsx b/src/components/ResourcesLayout/index.tsx
index a7b9520..da82154 100644
--- a/src/components/ResourcesLayout/index.tsx
+++ b/src/components/ResourcesLayout/index.tsx
@@ -28,7 +28,10 @@ export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
       <GlobalStyles />
       <SC.Main>
         <SC.MobileHeader>
-          TPH Resources
+          <SC.LogoWrapper>
+            <SC.StyledLogo />
+          </SC.LogoWrapper>
+          Resources
           <SC.Burger onClick={openMenu} />
         </SC.MobileHeader>
         <ResourcesSidebar className={activeMobileMenu ? "is-open" : ""} />
diff --git a/src/components/ResourcesLayout/styles.tsx b/src/components/ResourcesLayout/styles.tsx
index f186d4f..dadf89c 100644
--- a/src/components/ResourcesLayout/styles.tsx
+++ b/src/components/ResourcesLayout/styles.tsx
@@ -1,4 +1,6 @@
 import styled from "styled-components"
+import { fontFamily } from "../../design/typography"
+import Logo from "../../images/tph-logo.svg"
 
 export const Main = styled.div`
   display: flex;
@@ -16,12 +18,30 @@ export const MobileHeader = styled.div`
   right: 0;
   padding: 16px 32px;
   align-items: center;
+  font-weight: 700;
+  font-family: ${fontFamily.header};
+  font-size: 22px;
 
   @media screen and (max-width: 767px) {
     display: flex;
   }
 `
 
+export const LogoWrapper = styled.div`
+  width: 35px;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #222;
+  border-radius: 7px;
+  margin-right: 8px;
+`
+
+export const StyledLogo = styled(Logo)`
+  height: 25px;
+`
+
 export const Overlay = styled.div`
   z-index: 99;
   position: fixed;