Restyling button for price breakdown to make it more clear that users press again to close the pop over

app/assets/javascripts/templates/price_breakdown_button.html.haml

@@ -1,2 +1,2 @@
 %button.graph-button{"ng-class" => "{open: tt_isOpen}"}
-  %i.ofn-i_058-graph
+  / %i.ofn-i_058-graph

app/assets/stylesheets/darkswarm/_shop-popovers.css.sass

@@ -77,44 +77,36 @@ ordercycle
 button.graph-button
   z-index: 9999999
   border: 1px solid transparent
-  @include box-shadow(none)
   padding: 0
   margin: 0
-  @include border-radius(999rem)
   display: inline
   background-color: rgba(255,255,255,0.5)
-  padding: 5px   
-  @media all and (max-width: 768px) 
-    display: none
-    // Hide for small
-
-  &:hover, &:active, &:focus
-    background-color: rgba(255,255,255,1)
-    i.ofn-i_058-graph
-      color: $clr-brick-bright
-
-  i.ofn-i_058-graph
+  padding: 4px 
+  @include box-shadow(none)
+  @include border-radius(999rem)
+  &:before
+    @include icon-font
+    content: '\e639'
     color: #999
-    margin: 0
-    padding: 0
-    font-size: 1rem
-
-  @media all and (max-width: 640px) 
-    padding: 3px
-    i.ofn-i_058-graph
-      font-size: 0.75rem 
+  &:focus
+    border: 1px solid #e0e0e0
+    background-color: rgba(255,255,255,1)
+    &:before
+      color: #666
+  &:hover, &:active
+    background-color: rgba(255,255,255,1)
+    border: 1px solid transparent
+    &:before
+      color: $clr-brick-bright
+  @media all and (max-width: 768px) 
+    // Hide for small
+    display: none
 
 button.graph-button.open
-  @include box-shadow(inset 0 1px 1px 0 rgba(0,0,0,0.35))
-  border: 1px solid #999
-  
-  &:hover, &:active, &:focus
-    background-color: rgba(255,255,255,1)
-    i.ofn-i_058-graph
-      color: $clr-brick-bright
-
-  i.ofn-i_058-graph
-    color: $clr-brick
-
+  border: 1px solid transparent
+  background-color:  $clr-brick-bright
+  &:before
+    content: '\e608'
+    color: white