refactor(styling): added more props

HoseaCodes · Sep 8, 2021 · 9b1baf1 · 9b1baf1
1 parent 2e8154a
commit 9b1baf1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/src/Components/Hero/hero.jsx b/src/Components/Hero/hero.jsx
@@ -6,7 +6,7 @@ const Hero = (props) => {
   const {firstName, lastName} = props.username
   return (
     <>
-      <HeroContainer>
+      <HeroContainer Home>
         <HeroPositioning >
             <h1>
               <HeroText Left>{firstName}</HeroText>

diff --git a/src/Layout/Hero/styledHero.jsx b/src/Layout/Hero/styledHero.jsx
@@ -1,21 +1,38 @@
 import styled, {css} from 'styled-components';
 import breakpoint from '../../Utils/breakpoints.js';
+import wireframe from '../../Assets/Images/wireframe-min.jpg';
+import houston from '../../Assets/Images/besomeone-min.jpg';
 
 const HeroContainer = styled.div`
-  background-image: linear-gradient(
-      to right bottom,
-      rgba(119, 119, 119, 0.6),
-      rgba(119, 119, 119, 0.6)
-    ),
-    url("../../icons/wireframe.jpg");
   background-size: cover;
   background-position: top;
   background-repeat: no-repeat;
   background-attachment: fixed;
   position: relative;
   height: 70vh;
   padding-bottom: 55px;
-
+  ${props => props.Home && css`
+  background-image: linear-gradient(
+    to right bottom,
+    rgba(119, 119, 119, 0.6),
+    rgba(119, 119, 119, 0.6)
+  ),
+  url(${wireframe});  `}
+  ${props => props.About && css`
+    background-image: linear-gradient(
+        to right bottom,
+        rgba(119, 119, 119, 0.6),
+        rgba(119, 119, 119, 0.6)
+      ),
+      url(${houston});
+      background-position: center;
+    height: 40vh;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    `}
   @media only screen and ${breakpoint.devicemin.xs} and ${breakpoint.devicemax.lg} {
     height: 40vh;
     width: 100%;
@@ -76,4 +93,8 @@ const HeroText = styled.span`
   }
 `;
 
-export {HeroContainer, HeroPositioning, HeroText};
+const HeroCircleImage = styled.img.attrs({src: `${'https://i.imgur.com/dj1vhqzm.png?1'}`})`
+  border-radius: 50%;
+`;
+
+export {HeroContainer, HeroPositioning, HeroText, HeroCircleImage};