Merge pull request #376 from the-programmers-hangout/ui-improve-header

ui(header): tweak header background, and single title to be less awkward

src/components/Container/styles.tsx

@@ -7,10 +7,6 @@ export const ContainerWrapper = styled.div`
   padding: 0px var(--padding);
   margin: 0 auto;
 
-  @media screen and (max-width: 1200px) {
-    width: auto;
-  }
-
   @media screen and (max-width: 767px) {
     --padding: 32px;
   }

src/components/HeaderBarebone/index.tsx

@@ -11,30 +11,45 @@ interface IHeaderBareboneProps {
   className?: string
 }
 
+interface IBoxedTitleProps {
+  above?: React.ReactNode
+  content?: React.ReactNode
+}
+
+const BoxedTitle: React.FC<IBoxedTitleProps> = (props) => {
+  return (
+    <SC.Box>
+      {props.above}
+
+      <SC.Title
+        className={cx({
+          "has-content-above": props.above,
+          "has-content-below": props.content,
+        })}
+      >
+        {props.children}
+      </SC.Title>
+
+      {props.content}
+    </SC.Box>
+  )
+}
+
 export const HeaderBarebone: React.FC<IHeaderBareboneProps> = (props) => {
+  const isBoxed = props.above || props.content
+
   return (
     <SC.HeaderWrapper className={props.className}>
-      <SC.BackgroundWrapper>
-        <SC.StyledWavesBottom />
-        <SC.StyledWavesTop />
-        <SC.StyledCircles />
-      </SC.BackgroundWrapper>
+      <SC.Background />
 
       <Container>
-        <SC.Box>
-          {props.above}
-
-          <SC.Title
-            className={cx({
-              "has-content-above": props.above,
-              "has-content-below": props.content,
-            })}
-          >
+        {isBoxed && (
+          <BoxedTitle above={props.above} content={props.content}>
             {props.title}
-          </SC.Title>
+          </BoxedTitle>
+        )}
 
-          {props.content}
-        </SC.Box>
+        {!isBoxed && <SC.SingleTitle>{props.title}</SC.SingleTitle>}
       </Container>
     </SC.HeaderWrapper>
   )

src/components/HeaderBarebone/styles.tsx

@@ -1,15 +1,19 @@
-import { transparentize, darken } from "polished"
-import styled from "styled-components"
+import { transparentize } from "polished"
+import styled, { css } from "styled-components"
 import { fontFamily } from "../../design/typography"
-import { WavesTop, WavesBottom } from "../Waves"
-import Circles from "../../images/circles"
+import Header2560 from "../../images/header-2560x1440.png"
+import Header1920 from "../../images/header-1920x1080.png"
+import Header1440 from "../../images/header-1440x900.png"
+import HeaderMobile from "../../images/header-mobile-375x300.png"
 
-const height = 250
+const spaceAbove = 67
+const height = 300 - spaceAbove
 
 export const HeaderWrapper = styled.div`
+  display: flex;
   width: 100%;
   height: ${height}px;
-  padding-top: 67px;
+  padding-top: ${spaceAbove}px;
   position: relative;
 
   &.shifted {
@@ -30,51 +34,34 @@ export const HeaderWrapper = styled.div`
   }
 `
 
-export const BackgroundWrapper = styled.div`
-  height: ${height}px;
-  padding-top: 67px;
-  overflow: hidden;
+export const Background = styled.div`
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: cover;
 
-  @media screen and (max-width: 767px) {
-    height: calc(100% - 67px);
-    background: ${(props) => darken(0.2, props.theme.main.background)};
+  // 2560x1400 screens
+  @media screen and (min-width: 2500px) {
+    background-image: url("${Header2560}");
   }
-`
-
-export const StyledCircles = styled(Circles)`
-  position: absolute;
-  top: 50%;
-  margin-top: -200px;
 
-  @media screen and (max-width: 768px) {
-    margin-top: -145px;
-    margin-left: -20px;
-    margin-right: -20px;
+  // 1920x1080 screens
+  @media screen and (min-width: 1800px) and (max-width: 2499px) {
+    background-image: url("${Header1920}");
   }
-`
-
-export const StyledWavesTop = styled(WavesTop)`
-  opacity: ${(props) => (props.theme.name === "dark" ? 0.8 : 0.2)};
-  top: -10%;
-  transform: scaleX(-1);
 
-  @media screen and (max-width: 767px) {
-    top: 0;
+  // 1440x900 screens
+  @media screen and (min-width: 768px) and (max-width: 1799px) {
+    background-image: url("${Header1440}");
   }
-`
-
-export const StyledWavesBottom = styled(WavesBottom)`
-  opacity: ${(props) => (props.theme.name === "dark" ? 0.8 : 0.2)};
-  bottom: -30%;
-  transform: scaleX(-1);
 
+  // mobile screens
   @media screen and (max-width: 767px) {
-    bottom: 0;
+    background-image: url("${HeaderMobile}");
   }
 `
 
@@ -112,13 +99,17 @@ export const Box = styled.div`
   }
 `
 
-export const Title = styled.h1`
+const title = css`
   font-family: ${fontFamily.header};
   font-size: 34px;
   line-height: 41px;
   letter-spacing: -1.75px;
   margin-top: 0;
   margin-bottom: 0;
+`
+
+export const Title = styled.h1`
+  ${title};
 
   &.has-content-above {
     margin-top: 8px;
@@ -128,3 +119,22 @@ export const Title = styled.h1`
     margin-bottom: 8px;
   }
 `
+
+export const SingleTitle = styled(Title)`
+  ${title};
+  color: #fff;
+  position: absolute;
+  bottom: 100px;
+  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
+
+  &::after {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 100%;
+    margin-top: 8px;
+    width: 100px;
+    height: 5px;
+    background: #fff;
+  }
+`