Dropdown component

src/components/DropDown/index.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+const DropDownWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+const DropDownButton = styled.button`
+  width: 160px;
+  background-color: white;
+  color: #5f7183;
+  font-family: 'Open Sans';
+  border: 1px solid #0085ff;
+  border-radius: 2px;
+  font-size: 16px;
+  cursor: pointer;
+`;
+
+const DropDownContent = styled.div`
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  border-radius: 0px 0px 2px 2px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  a {
+    color: black;
+    padding: 5px 5px;
+    text-decoration: none;
+    display: block;
+  }
+  ${DropDownWrapper}:hover & {
+    display: block;
+  }
+`;
+
+export default class DropDown extends Component {
+  render() {
+    return (
+      <DropDownWrapper>
+        <DropDownButton>Drop Down</DropDownButton>
+        <DropDownContent>
+          <a href="http://www.mbls.is">Link 1</a>
+          <a href="http://www.mbls.is">Link 2</a>
+          <a href="http://www.mbls.is">Link 3</a>
+        </DropDownContent>
+      </DropDownWrapper>
+    );
+  }
+}

src/components/Modal/index.js

@@ -43,7 +43,7 @@ const ModalHead = styled.div`
   width: 100%;
   padding: 10px 0;
 `;
-const ModalFooter = styled.div``;
+const ModalFooter = styled.div`padding: 12px;`;
 
 export default class Modal extends Component {
   render() {

src/containers/api/index.js

@@ -10,6 +10,7 @@ import * as ApiActions from '../../components/Actions/actions';
 import timeBlue from './timeblue.svg';
 import timeRed from './timered.svg';
 import noteGray from './notesgray.svg';
+import DropDown from '../../components/DropDown';
 
 const HeaderDiv = styled.div`
   button {
@@ -231,10 +232,10 @@ class Api extends Component {
         >
           <div>
             <div>
-              Start <img alt="Blue clock icon" src={timeBlue} />
+              Start <img alt="Blue clock icon" src={timeBlue} /> <DropDown />
             </div>
             <div>
-              End<img alt="Red clock icon" src={timeRed} />
+              End<img alt="Red clock icon" src={timeRed} /> <DropDown />
             </div>
             <div>
               Note<img alt="Grey note icon" src={noteGray} />