ui(resources): tweak mobile header styles with logo

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" : ""} />

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;