Update logo

gilbarbara · Jul 12, 2019 · 9f1c03e · 9f1c03e
1 parent deae69a
commit 9f1c03e
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 46 deletions.
diff --git a/assets/media/brand/react-redux-saga.png b/assets/media/brand/react-redux-saga.png
diff --git a/assets/media/brand/react-redux-saga.svg b/assets/media/brand/react-redux-saga.svg
diff --git a/src/components/Background.jsx b/src/components/Background.jsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Background = styled.div`
-  background: #000 linear-gradient(to bottom, #00b4d5 0%, #002529 100%) fixed;
+  background: #000 linear-gradient(to bottom, #00657e 0%, #002529 100%) fixed;
   color: #fff;
   min-height: 100vh;
   overflow: hidden;
@@ -16,7 +16,7 @@ const Background = styled.div`
     position: absolute;
     right: 0;
     top: 0;
-    transform: rotate(-20deg) scale(1.5) translate(0, 43%);
+    transform: rotate(-20deg) scale(2) translate(0, 45%);
   }
 `;
 

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import rgba from 'polished/lib/color/rgba';
 import { appColor, headerHeight } from 'modules/theme';
 
 import { logOut } from 'actions';
@@ -13,7 +12,7 @@ import Logo from 'components/Logo';
 const { responsive, spacer } = utils;
 
 const HeaderWrapper = styled.header`
-  background-color: ${rgba(appColor, 0.9)};
+  background-color: #113740;
   height: ${headerHeight}px;
   left: 0;
   position: fixed;
@@ -44,15 +43,15 @@ const HeaderContainer = styled(Container)`
 
 const Logout = styled.button`
   align-items: center;
-  color: #333;
+  color: #fff;
   display: flex;
   font-size: 1.3rem;
   padding: ${spacer(2)};
 
   ${responsive({ lg: 'font-size: 1.6rem;' })}; /* stylelint-disable-line */
 
   &.active {
-    color: #000;
+    color: #fff;
   }
 
   span {
@@ -77,7 +76,7 @@ export default class Header extends React.PureComponent {
     return (
       <HeaderWrapper>
         <HeaderContainer>
-          <Logo />
+          <Logo type="logo" />
           <Logout onClick={this.handleClickLogout}>
             <span>logout</span>
             <Icon name="sign-out" width={16} />

diff --git a/src/components/Logo.jsx b/src/components/Logo.jsx
@@ -1,22 +1,26 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import { ReactComponent as Icon } from 'assets/media/brand/icon.svg';
+import { ReactComponent as RRS } from 'assets/media/brand/react-redux-saga.svg';
 
-export const Logo = styled.div`
+export const Wrapper = styled.div`
   align-items: flex-start;
   display: inline-flex;
   font-size: 0;
 
   svg {
-    height: auto;
+    height: 4.2rem;
     max-height: 100%;
-    width: 4.8rem;
+    width: auto;
   }
 `;
 
-export default () => (
-  <Logo>
-    <Icon />
-  </Logo>
-);
+const Logo = ({ type = 'icon' }) => <Wrapper>{type === 'icon' ? <Icon /> : <RRS />}</Wrapper>;
+
+Logo.propTypes = {
+  type: PropTypes.string,
+};
+
+export default Logo;
diff --git a/src/routes/Home.jsx b/src/routes/Home.jsx
@@ -26,7 +26,14 @@ const Header = styled.div`
   text-align: center;
 
   svg {
-    width: 20rem;
+    height: 10rem;
+    width: auto;
+
+    ${/* sc-custom '@media-query' */ utils.responsive({
+      lg: `
+        height: 15rem;
+     `,
+    })};
   }
 `;
 
@@ -43,7 +50,6 @@ const Heading = styled.h1`
       font-size: 4rem;
     `,
   })};
-  /* stylelint-enable */
 `;
 
 export class Home extends React.PureComponent {
@@ -65,7 +71,7 @@ export class Home extends React.PureComponent {
       <Background key="Home" data-testid="HomeWrapper">
         <HomeContainer verticalPadding>
           <Header>
-            <Logo />
+            <Logo type="logo" />
           </Header>
           <Heading>{config.name}</Heading>
           <Button

diff --git a/test/components/__snapshots__/Background.spec.js.snap b/test/components/__snapshots__/Background.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Background should render properly 1`] = `
 .c0 {
-  background: #000 linear-gradient(to bottom,#00b4d5 0%,#002529 100%) fixed;
+  background: #000 linear-gradient(to bottom,#00657e 0%,#002529 100%) fixed;
   color: #fff;
   min-height: 100vh;
   overflow: hidden;
@@ -18,9 +18,9 @@ exports[`Background should render properly 1`] = `
   position: absolute;
   right: 0;
   top: 0;
-  -webkit-transform: rotate(-20deg) scale(1.5) translate(0,43%);
-  -ms-transform: rotate(-20deg) scale(1.5) translate(0,43%);
-  transform: rotate(-20deg) scale(1.5) translate(0,43%);
+  -webkit-transform: rotate(-20deg) scale(2) translate(0,45%);
+  -ms-transform: rotate(-20deg) scale(2) translate(0,45%);
+  transform: rotate(-20deg) scale(2) translate(0,45%);
 }
 
 <Background>

diff --git a/test/components/__snapshots__/Header.spec.js.snap b/test/components/__snapshots__/Header.spec.js.snap
@@ -25,13 +25,13 @@ exports[`Header should render properly 1`] = `
 }
 
 .c2 svg {
-  height: auto;
+  height: 4.2rem;
   max-height: 100%;
-  width: 4.8rem;
+  width: auto;
 }
 
 .c0 {
-  background-color: rgba(0,180,213,0.9);
+  background-color: #113740;
   height: 70px;
   left: 0;
   position: fixed;
@@ -84,7 +84,7 @@ exports[`Header should render properly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #333;
+  color: #fff;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -94,7 +94,7 @@ exports[`Header should render properly 1`] = `
 }
 
 .c3.active {
-  color: #000;
+  color: #fff;
 }
 
 .c3 span {
@@ -126,13 +126,13 @@ exports[`Header should render properly 1`] = `
       <div
         className="c1"
       >
-        <Logo>
+        <Wrapper>
           <div
             className="c2"
           >
             SVG
           </div>
-        </Logo>
+        </Wrapper>
         <Logout
           onClick={[Function]}
         >

diff --git a/test/components/__snapshots__/Logo.spec.js.snap b/test/components/__snapshots__/Logo.spec.js.snap
@@ -14,16 +14,16 @@ exports[`Logo should render properly 1`] = `
 }
 
 .c0 svg {
-  height: auto;
+  height: 4.2rem;
   max-height: 100%;
-  width: 4.8rem;
+  width: auto;
 }
 
-<Logo>
+<Wrapper>
   <div
     className="c0"
   >
     SVG
   </div>
-</Logo>
+</Wrapper>
 `;