Consolidate button styles

This patchset will create consistent button styling according
to the styleguide and remove redundant button styles by creating
reusable button classes.

This patchset also implements a consistent strategy for including
icon assets. Currently, svg icons are imported as CSS background
images or inlined into the markup. Inlining an svg is preferred,
especially when used with buttons or links so the colors can
be easily changed for different states (hover, focus, disabled)
without having to request variants.
The icon provider allows us to inline svgs without cluttering
the markup. Webpack config was adjusted to use svg-inline-loader
when resolving svgs that are used by the icon provider directive.

- All svgs were optimized to remove unncessary information.
- Removed unused svg color variants
- Moved icons used by icon provider to separate directory to
  avoid Webpack parsing the files twice
- Small changes to navigation icons

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I1ca214b74fc502e6b6e760cfee88b48110237c43

1 files changed, 7 insertions, 7 deletions

diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index 34a2ec3..3b164bd 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -46,21 +46,21 @@
             </p>
           </div>
           <div class="inline__confirm-buttons">
-            <button class="btn-primary" ng-click="accept()">Yes</button>
-            <button class="btn-primary" ng-click="confirm = false">No</button>
+            <button class="btn  btn-primary" ng-click="accept()">Yes</button>
+            <button class="btn  btn-primary" ng-click="confirm = false">No</button>
           </div>
         </div>
         <p class="inline" ng-show="selectedEvents.length"><span class="event__select-count">{{selectedEvents.length}}</span> Events are selected</p>
         <p class="inline" ng-hide="selectedEvents.length"><span class="event__select-count">{{filteredLogs.length}}</span> Events are logged</p>
         <!-- when logs are selected, this text changes to show how many logs are checked -->
         <div class="event__actions">
-          <button class="inline btn-delete" ng-class="{'disabled': (!selectedEvents.length && !all)}" ng-disabled="!selectedEvents.length && !all" ng-click="confirm= ! confirm">
-            <img class="event__icon" src="../../assets/images/icon-trashcan-white.svg" alt="">Delete
+          <button class="btn  btn-tertiary" ng-class="{'disabled': (!selectedEvents.length && !all)}" ng-disabled="!selectedEvents.length && !all" ng-click="confirm= ! confirm">
+            <icon file="icon-trashcan.svg"></icon>Delete
           </button>
-          <button class="inline btn-resolve" ng-class="{'disabled': ((selectedEvents|unResolvedCount) == 0)}" ng-click="resolve()" ng-disabled="(selectedEvents|unResolvedCount) == 0">
-            <img class="event__icon" src="../../assets/images/icon-check-white.svg" alt="">Mark as resolved
+          <button class="btn  btn-tertiary" ng-class="{'disabled': ((selectedEvents|unResolvedCount) == 0)}" ng-click="resolve()" ng-disabled="(selectedEvents|unResolvedCount) == 0">
+            <icon file="icon-check.svg"></icon>Mark as resolved
           </button>
-          <a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="inline btn-export"  ng-class="{'disabled': (!selectedEvents.length && !all)}" download="{{export_name}}">Export</a>
+          <a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="btn  btn-tertiary"  ng-class="{'disabled': (!selectedEvents.length && !all)}" download="{{export_name}}"><icon file="icon-export.svg"></icon>Export</a>
         </div>
       </div>
     </div>