refactor(bar-styling): remove glamorous div from header bars

Replaced styled components with style objects. Applied styles with css prop.

re dsmjs#571

src/atoms/header-bars/dsmJS/component-test.js

@@ -7,6 +7,6 @@ suite('dsmJS bar', () => {
   test('that dsmJS is shown', () => {
     const wrapper = shallow(<DsmJsBar />);
 
-    assert.equal(wrapper.dive().text(), 'dsmJS');
+    assert.equal(wrapper.shallow().text(), 'dsmJS');
   });
 });

src/atoms/header-bars/dsmJS/component.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import glamorous from 'glamorous';
 import styles from '../styles';
 
-const DsmJsBarDiv = glamorous.div({
+const dsmJsBarStyles = {
   ...styles,
   background: '#56626B'
-});
+};
 
 export default function DsmJsBar() {
-  return <DsmJsBarDiv>dsmJS</DsmJsBarDiv>;
+  return <div css={dsmJsBarStyles}>dsmJS</div>;
 }

src/atoms/header-bars/location/component-test.js

@@ -10,6 +10,6 @@ suite('location bar', () => {
 
     const wrapper = shallow(<LocationBar location={location} />);
 
-    assert.equal(wrapper.dive().text(), location);
+    assert.equal(wrapper.shallow().text(), location);
   });
 });

src/atoms/header-bars/location/component.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import {string} from 'prop-types';
-import glamorous from 'glamorous';
 import styles from '../styles';
 
-const LocationBarDiv = glamorous.div({
+const locationBarStyles = {
   ...styles,
   background: '#F07C6C'
-});
+};
 
 export default function LocationBar({location}) {
-  return <LocationBarDiv>{location}</LocationBarDiv>;
+  return <div css={locationBarStyles}>{location}</div>;
 }
 
 LocationBar.propTypes = {location: string.isRequired};

src/atoms/header-bars/recurrence/component-test.js

@@ -7,6 +7,6 @@ suite('Meeting Recurrence bar', () => {
   test('that the recurrence schedule is shown', () => {
     const wrapper = shallow(<RecurrenceBar />);
 
-    assert.equal(wrapper.dive().text(), 'Second Tuesday every month');
+    assert.equal(wrapper.shallow().text(), 'Second Tuesday every month');
   });
 });

src/atoms/header-bars/recurrence/component.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import glamorous from 'glamorous';
 import styles from '../styles';
 
-const RecurrenceBarDiv = glamorous.div({
+const recurrenceBarStyles = {
   ...styles,
   background: '#AD5472'
-});
+};
 
 export default function RecurrenceBar() {
-  return <RecurrenceBarDiv>Second Tuesday every month</RecurrenceBarDiv>;
+  return <div css={recurrenceBarStyles}>Second Tuesday every month</div>;
 }

src/atoms/header-bars/sponsor/component-test.js

@@ -10,6 +10,6 @@ suite('sponsor bar', () => {
 
     const wrapper = shallow(<SponsorBar sponsor={sponsor} />);
 
-    assert.equal(wrapper.dive().text(), sponsor);
+    assert.equal(wrapper.shallow().text(), sponsor);
   });
 });

src/atoms/header-bars/sponsor/component.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import {string} from 'prop-types';
-import glamorous from 'glamorous';
 import styles from '../styles';
 
-const SponsorBarDiv = glamorous.div({
+const sponsorBarStyles = {
   ...styles,
   background: '#6C9380'
-});
+};
 
 export default function SponsorBar({sponsor}) {
-  return <SponsorBarDiv>{sponsor}</SponsorBarDiv>;
+  return <div css={sponsorBarStyles}>{sponsor}</div>;
 }
 
 SponsorBar.propTypes = {sponsor: string.isRequired};