47

2 files changed, 48 insertions, 45 deletions

diff --git a/finished-application/frontend/components/Search.js b/finished-application/frontend/components/Search.js
index a972db2..dc1bfea 100644
--- a/finished-application/frontend/components/Search.js
+++ b/finished-application/frontend/components/Search.js
@@ -3,8 +3,8 @@ import Downshift from 'downshift';
 import Router from 'next/router';
 import { ApolloConsumer } from 'react-apollo';
 import gql from 'graphql-tag';
-import styled, { keyframes } from 'styled-components';
 import debounce from 'lodash.debounce';
+import { DropDown, DropDownItem, SearchStyles } from './styles/DropDown';
 
 const SEARCH_ITEMS_QUERY = gql`
   query SEARCH_ITEMS_QUERY($searchTerm: String!) {
@@ -24,50 +24,6 @@ function routeToItem(item) {
   });
 }
 
-const DropDown = styled.div`
-  position: absolute;
-  width: 100%;
-  z-index: 2;
-  border: 1px solid ${props => props.theme.lightgrey};
-`;
-
-const DropDownItem = styled.div`
-  border-bottom: 1px solid ${props => props.theme.lightgrey};
-  background: ${props => (props.highlighted ? '#f7f7f7' : 'white')};
-  padding: 1rem;
-  transition: all 0.2s;
-  ${props => (props.highlighted ? 'padding-left: 2rem;' : null)};
-  display: flex;
-  align-items: center;
-  border-left: 10px solid ${props => (props.highlighted ? props.theme.lightgrey : 'white')};
-  img {
-    margin-right: 10px;
-  }
-`;
-
-const glow = keyframes`
-  from {
-    box-shadow: 0 0 0px yellow;
-  }
-
-  to {
-    box-shadow: 0 0 10px 1px yellow;
-  }
-`;
-
-const SearchStyles = styled.div`
-  position: relative;
-  input {
-    width: 100%;
-    padding: 10px;
-    border: 0;
-    font-size: 2rem;
-    &.loading {
-      animation: ${glow} 0.5s ease-in-out infinite alternate;
-    }
-  }
-`;
-
 class AutoComplete extends React.Component {
   state = {
     items: [],
diff --git a/finished-application/frontend/components/styles/DropDown.js b/finished-application/frontend/components/styles/DropDown.js
new file mode 100644
index 0000000..df86aee
--- /dev/null
+++ b/finished-application/frontend/components/styles/DropDown.js
@@ -0,0 +1,47 @@
+import styled, { keyframes } from 'styled-components';
+
+const DropDown = styled.div`
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+  border: 1px solid ${props => props.theme.lightgrey};
+`;
+
+const DropDownItem = styled.div`
+  border-bottom: 1px solid ${props => props.theme.lightgrey};
+  background: ${props => (props.highlighted ? '#f7f7f7' : 'white')};
+  padding: 1rem;
+  transition: all 0.2s;
+  ${props => (props.highlighted ? 'padding-left: 2rem;' : null)};
+  display: flex;
+  align-items: center;
+  border-left: 10px solid ${props => (props.highlighted ? props.theme.lightgrey : 'white')};
+  img {
+    margin-right: 10px;
+  }
+`;
+
+const glow = keyframes`
+  from {
+    box-shadow: 0 0 0px yellow;
+  }
+
+  to {
+    box-shadow: 0 0 10px 1px yellow;
+  }
+`;
+
+const SearchStyles = styled.div`
+  position: relative;
+  input {
+    width: 100%;
+    padding: 10px;
+    border: 0;
+    font-size: 2rem;
+    &.loading {
+      animation: ${glow} 0.5s ease-in-out infinite alternate;
+    }
+  }
+`;
+
+export { DropDown, DropDownItem, SearchStyles };