applied style to action container

src/app/components/Action.jsx

@@ -13,13 +13,16 @@ const Action = (props) => {
       }}
     >
       <div className="action-component-text">{index}</div>
-      <button onClick={() => handleSendSnapshot(index)}>Jump</button>
+      <div className="jump-button" onClick={() => handleSendSnapshot(index)}>
+        Jump
+      </div>
     </div>
   );
 };
 
 Action.propTypes = {
-  // snapshot: PropTypes.object,
+  selected: PropTypes.bool,
+  index: PropTypes.number,
 };
 
 export default Action;

src/app/containers/ActionContainer.jsx

@@ -28,11 +28,14 @@ class ActionContainer extends Component {
     }
     return (
       <div className="action-container">
-        <button className="emptySnapshot" onClick = {this.props.emptySnapshot}>emptySnapshot</button>
-        <div >{actionsArr}</div>
+        <div className="action-component">
+          <div className="empty-button" onClick={this.props.emptySnapshot}>
+            emptySnapshot
+          </div>
+        </div>
+        <div>{actionsArr}</div>
       </div>
     );
-
   }
 }
 

src/app/containers/MainContainer.jsx

@@ -91,7 +91,6 @@ class MainContainer extends Component {
 
     return (
       <div className="main-container">
-        main-conatiner
         <HeadContainer />
         <div className="body-container">
           <ActionContainer

src/app/styles/abstracts/_variables.scss

@@ -0,0 +1,26 @@
+/// fontFamily: 'monaco, Consolas, Lucida Console, monospace'
+/// @type List
+$text-font-stack: monaco, Consolas, 'Lucida Console', monospace, Arial,
+  sans-serif !default;
+
+/// @type Color
+$text-color: rgb(231, 231, 231);
+
+/// @type Color
+$brand-color: #2a2f3a !default;
+
+/// Light grey
+/// @type Color
+$light-grey-one: #474c55 !default;
+
+/// @type Color
+$light-grey-two: #5f6369 !default;
+
+/// @type Color
+$border-color: rgba(190, 190, 190, 0.5) !default;
+
+/// @type Color
+$highlight-color: rgba(224, 224, 224, 0.5) !default;
+
+/// @type Font Size
+$button-text-size: 10px;

src/app/styles/base/_typography.scss

@@ -0,0 +1,5 @@
+body {
+  color: $text-color;
+  font: normal 13px $text-font-stack;
+  // font: normal 125% / 1.4 $text-font-stack;
+}

src/app/styles/components/_actionComponent.scss

@@ -0,0 +1,22 @@
+.action-component {
+  padding: 5px 10px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 20px;
+  background-color: $brand-color;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-color: $border-color;
+  cursor: pointer;
+  text-overflow: ellipsis;
+}
+
+.action-component.selected {
+  background-color: $light-grey-one;
+}
+
+.action-component button {
+  position: relative;
+  right: 0px;
+}

src/app/styles/components/_buttons.scss

@@ -0,0 +1,30 @@
+.empty-button {
+  @extend %button-shared;
+  width: 120px;
+}
+
+.jump-button {
+  @extend %button-shared;
+  width: 50px;
+}
+
+.jump-button:hover {
+  background-color: $highlight-color;
+}
+
+.empty-button:hover {
+  background-color: $highlight-color;
+}
+
+%button-shared {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20px;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: $button-text-size;
+  line-height: 1.5em;
+}

src/app/styles/layout/_actionContainer.scss

@@ -0,0 +1,6 @@
+.action-container {
+  flex: 3 auto;
+  height: 100%;
+  overflow: scroll;
+  background-color: $brand-color;
+}

src/app/styles/main.scss

@@ -1 +1,16 @@
+@charset 'UTF-8';
+
+// 1. Configuration and helpers
+@import 'abstracts/variables';
+
+// 3. Base stuff
+@import 'base/base', 'base/fonts', 'base/helpers', 'base/typography';
+
+// 4. Layout-related sections
+@import 'layout/actionContainer';
+
+// 5. Components
+@import 'components/buttons', 'components/actionComponent';
+
+// other styles that needs to be modularized
 @import 'styles';

src/app/styles/styles.scss

@@ -2,45 +2,36 @@
   height: 100%;
   margin: 0;
   padding: 0;
-  background-color: rgb(238, 238, 238);
+  background-color: $brand-color;
 }
 
 .head-container {
-  height: 10%;
+  height: 5%;
 }
 
 .body-container {
-  height: 80%;
+  height: 75%;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
 }
 
-.action-container {
-  flex: 3 auto;
-  height: 100%;
-  overflow: scroll;
-}
-
-.emptySnapshot{
-  width: 100%;
-}
-
 .state-container {
   font-size: 15px;
-  flex: 7 auto;
+  flex: 6 auto;
   height: 100%;
   overflow: scroll;
-  background-color: rgb(0, 43, 54);
+  background-color: $brand-color;
 }
 
 /* if extension width is less than 500px, stack the body containers */
+// this is not working for some reason
 @media (max-width: 500px) {
   .body-container {
     flex-direction: column;
   }
   .state-container {
-    flex: 3 auto;
+    // flex: 5 auto;
   }
 }
 
@@ -58,28 +49,6 @@
 .state-container,
 .travel-container {
   border-style: solid;
-  border-color: black;
-  border-width: thin;
-}
-
-.action-component {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
-  height: 40px;
-  width: 100%;
-  background-color: rgb(170, 170, 170);
-  border-style: solid;
+  border-color: $border-color;
   border-width: thin;
-  cursor: pointer;
-}
-
-.action-component.selected {
-  background-color: rgb(134, 134, 134);
-}
-
-.action-component button {
-  position: relative;
-  right: 0px;
 }