Song

src/components/CoverPhoto/CoverPhoto.css

@@ -0,0 +1,26 @@
+.coverPhoto {
+    margin: 15px 0 15px 45px;
+    text-align: center;
+    border-radius: 10px 10px;
+    height: 80vh;
+    box-shadow: 0px 3px 6px #00000029 ;
+  -webkit-box-shadow: 0px 3px 6px #00000029;
+  -moz-box-shadow: 0px 3px 6px #00000029;
+}
+
+.coverText {
+    display: flex;
+   display: inline-flex;
+   margin: 45px;
+   font-size: 18px;
+   font-weight: 600;
+
+}
+
+.firstText {
+    margin-right: 10px;
+}
+
+/*.coverPhoto > img {
+    margin: 5px 0; 
+}*/

src/components/CoverPhoto/CoverPhoto.stories.js

@@ -0,0 +1,22 @@
+import React from "react";
+import {storiesOf} from "@storybook/react";
+import {withInfo} from "@storybook/addon-info";
+import {withKnobs, text} from "@storybook/addon-knobs";
+import CoverPhoto from "./index";
+
+storiesOf("CoverPhoto", module)
+    .addDecorator(
+        withInfo({
+            text: "This is a CoverPhoto component"
+        })
+    )
+
+    .addDecorator(withKnobs()
+    )
+
+    .add("CoverPhoto", () => (
+        <CoverPhoto
+            name={text("name", "name of artiste")}
+            coverimg={text("coverimg","image of artiste")} 
+        />
+    ));

src/components/CoverPhoto/CoverPhoto.test.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { mount } from "enzyme";
+import Text from "../Text";
+import CoverPhoto from "./index";
+
+
+describe("CoverPhoto Component render", () => {
+    it("renders correctly", () => {
+        const wrapper = mount(<CoverPhoto name="name of artiste" />)
+        expect(wrapper).toMatchSnapshot();
+    })
+
+    it("renders image correctly", () => {
+        const wrapper = mount(<CoverPhoto coverimg="name of artiste" />)
+        expect(wrapper).toMatchSnapshot();
+    })
+
+    it("renders text on the page", () => {
+        const wrapper = mount(<CoverPhoto />);
+        const findText = wrapper.find(Text);
+        expect(findText.length).toBe(2);
+    });
+
+    it("renders the name of the artiste correctly", () => {
+        const wrapper = mount(<CoverPhoto name="The name of the artiste" />);
+        expect(
+          wrapper
+            .find(Text)
+            .at(1)
+            .props().text
+        ).toBe("The name of the artiste");
+      });
+
+    it("renders the image of the artiste", () => {
+    const wrapper = mount(<CoverPhoto />);
+    const artisteImg = wrapper.find(Image);
+    expect(artisteImg.length).toBe(0);
+    });
+
+})

src/components/CoverPhoto/__snapshots__/CoverPhoto.test.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CoverPhoto Component render renders correctly 1`] = `ReactWrapper {}`;
+
+exports[`CoverPhoto Component render renders image correctly 1`] = `ReactWrapper {}`;

src/components/CoverPhoto/index.js

@@ -0,0 +1,23 @@
+import React from "react";
+import Image from "../Image";
+import Text from "../Text"
+import "./CoverPhoto.css"
+
+
+const CoverPhoto = ({name, coverimg}) => {
+    return (
+        <div className="coverPhoto">
+            <div className="coverText">
+                <div className="firstText">
+                    <Text text="Playing DJ:" color="greyish" size="extrasmall" />
+                </div>
+            <Text text={name} color="greyish" size="extrasmall" />
+            </div>
+            <Image source={coverimg} alt="cover photo" width= {200} height= {200} />
+
+        </div>
+    )
+
+};
+
+export default CoverPhoto;

src/components/EventDetail/EventDetail.css

@@ -1,4 +1,7 @@
 .eventDetails{
+    /*margin: 15px 45px 15px 0;
+    height: 40vh; */
+    border-radius: 10px 10px; 
     border: 0px grey solid;
     padding: 25px;
     font-size: 14px;
@@ -10,10 +13,10 @@
     0 22.3px 17.9px rgba(0, 0, 0, 0.072),
     0 41.8px 33.4px rgba(0, 0, 0, 0.086),
     0 100px 80px rgba(0, 0, 0, 0.12);
-        /* use flexbox */
-    position: relative;
+        /* use flexbox */ 
+    /* position: relative;    
     left: 50%;
-    bottom: 130%;
+    bottom: 130%; */
 }
 .eventDetails p {
     font-size: 14px !important;

src/components/Image/Image.css

@@ -1,6 +1,3 @@
-.greenshadow {
-  box-shadow: -30px 30px #1abc9c;
-  -webkit-box-shadow: -10px 10px #1abc9c;
-  -moz-box-shadow: -10px 10px #1abc9c;
-  border-radius: 50px 0px;
-}
+.imageClass {
+  border-radius: 100px;
+}

src/components/Image/Image.test.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Image from "./index";
+
+describe("Image Component render", () => {
+    it("renders correctly", () => {
+        const wrapper = shallow(<Image />)
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it("renders an image", () => {
+        const wrapper = shallow(<Image />)
+            const findImage = wrapper.find("img")
+            expect (findImage.length).toBe(1)
+    })
+
+})

src/components/Image/__snapshots__/Image.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image Component render renders correctly 1`] = `ShallowWrapper {}`;

src/components/Image/image.stories.js

@@ -0,0 +1,34 @@
+import React from "react";
+import {storiesOf} from "@storybook/react";
+import {withInfo} from "@storybook/addon-info";
+import {withKnobs, text} from "@storybook/addon-knobs";
+import Image from "./index";
+
+storiesOf("Image", module)
+    .addDecorator(
+        withInfo({
+            text: "This is an Image component"
+        })
+    )
+
+    .addDecorator(
+        withKnobs()
+    )
+
+    .add("An image", () => (
+        <Image
+            source = {text("path", "./assets/smiley.jpg")}
+            alt={text("alt", "DJ Spinal")}
+
+        />
+    ))
+
+    .add("Image", () => (
+        <Image
+            source = {text("path", "./link/to/image")}
+            alt={text("alt", "this is an image")}
+
+        />
+    ));
+
+

src/components/Image/index.js

@@ -3,25 +3,24 @@ import PropTypes from "prop-types";
 import "./Image.css";
 
 const Image = props => {
-  const { source, height, width, alt, boxshadow } = props;
+  const { source, height, width, alt } = props;
   return (
-    <div className={`${source} ${height} ${width} ${alt} ${boxshadow}`}>
-      <img src={source} height={height} width={width} alt={alt} />
+    //<div className={`${source} ${height} ${width} ${alt}`}>
+    <div className="imageDiv">
+      <img className="imageClass" src={source} height={height} width={width} alt={alt} />
     </div>
   );
 };
 
 Image.defaultProps = {
   alt: "image",
-  boxshadow: "greenshadow",
   source: "someimage",
   height: 300,
   width: 300
 };
 
 Image.propTypes = {
   alt: PropTypes.string,
-  boxshadow: PropTypes.string,
   source: PropTypes.string,
   height: PropTypes.number,
   width: PropTypes.number

src/components/Jumbotron/Jumbotron.css

@@ -25,13 +25,6 @@
   margin: 40px 45px 0 0;
 }
 
-/* kerry added */
-.words > p{
-font-size: 19.4px;
-margin: 25px 0px 30px 0px;
-padding-right: 70px;
-}
-
 @media (max-width: 740px) {
   .photo {
     order: 1;
@@ -42,3 +35,10 @@ padding-right: 70px;
     order: 2;
   }
 }
+
+/* kerry added */
+.words > p{
+  font-size: 19.4px;
+  margin: 25px 0px 30px 0px;
+  padding-right: 70px;
+  }

src/components/Location/Location.css

@@ -1,5 +1,9 @@
 .locationName {
-  margin: 15px 65px 40px 65px;
+  margin-left: 0px;
+  height: 15vh;
+  background: #ECECEC 0% 0% no-repeat padding-box;
+  opacity: 97%;
+  padding: 15px 65px 40px 40px;
 }
 
 .locationName > p:first-child {
@@ -14,6 +18,7 @@
   align-items: center;
   color: #7f8c8d;
   font-size: 22px;
+  font-weight: 600;
 }
 
 .locationText p {

src/components/Location/index.js

@@ -11,7 +11,7 @@ const Location = props => {
     <div className="locationName">
       <Text size="small" text={name} />
       <div className="locationText">
-        <Icon src="./assets/location.png" alt="youtube icon" />
+        <Icon src="./assets/location.png" alt="location icon" />
         <Text size="small" text={location} />
       </div>
     </div>

src/components/Text/Text.css

@@ -11,7 +11,7 @@
 }
 
 .extrasmall {
-  font-size: 18px;
+  font-size: 22px;
 }
 
 .default,

src/pages/EventPage/EventPage.css

@@ -0,0 +1,32 @@
+body {
+    overflow-x: hidden;
+}
+
+.djDetails {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-top: 15px;
+}
+
+.photoCover {
+    flex-basis: 60%;
+}
+
+.eventDetail {
+    flex-basis: 35%;
+}
+
+@media (max-width: 740px) {
+    .eventDetail {
+      order: 1;
+      flex-basis: 100%;
+      margin-left: 45px;
+      margin-top: 15px;
+    }
+    .photoCover {
+      order: 2;
+      flex-basis: 100%;
+      margin-right: 45px;
+    }
+  }

src/pages/EventPage/index.js

@@ -2,8 +2,10 @@ import React from "react";
 import Footer from "../../components/Footer";
 import Navigation from "../../components/Navigation";
 import EventDetail from "../../components/EventDetail";
+import CoverPhoto from "../../components/CoverPhoto";
 import EventTag from "../../components/EventTag";
 import Location from "../../components/Location";
+import "./EventPage.css";
 
 export const peopleIcon = "./assets/people.svg"
 
@@ -32,10 +34,17 @@ export const EventPage = () => {
         name= "DJ Spinal Take Over" 
         location="Party Club Estate, Alalaba, Lagos" 
       />
-      <EventDetail 
-      about={"DJ Spinal shutting Down popular club in Yaba"}
-      time={"8:00 PM - Dawn"}
-      date={"28th January, 2020"}/>
+      <div className="djDetails">
+        <div className="photoCover">
+            <CoverPhoto name="DJ Spinal" coverimg="./assets/smiley.jpg" />
+        </div>
+        <div className="eventDetail">
+            <EventDetail 
+            about={"DJ Spinal shutting Down popular club in Yaba"}
+            time={"8:00 PM - Dawn"}
+            date={"28th January, 2020"}/>
+        </div>
+      </div>
 
       <Footer />