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
diff --git a/app/assets/icons/icon-check.svg b/app/assets/icons/icon-check.svg
new file mode 100644
index 0000000..f14e2bf
--- /dev/null
+++ b/app/assets/icons/icon-check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 12"><path d="M14 2.2L12.2.5 4.7 8 1.8 5.1 0 6.9l4.7 4.6z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-close.svg b/app/assets/icons/icon-close.svg
new file mode 100644
index 0000000..3fe44de
--- /dev/null
+++ b/app/assets/icons/icon-close.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="#231f20" d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z"/><path fill="none" d="M0 0h32v32H0z"/></svg>
diff --git a/app/assets/icons/icon-config.svg b/app/assets/icons/icon-config.svg
new file mode 100644
index 0000000..b649651
--- /dev/null
+++ b/app/assets/icons/icon-config.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27 16.76V16v-.77l1.92-1.68A2 2 0 0 0 29.3 11l-2.36-4a2 2 0 0 0-1.73-1 2 2 0 0 0-.64.1l-2.43.82a11.35 11.35 0 0 0-1.31-.75l-.51-2.52a2 2 0 0 0-2-1.61h-4.68a2 2 0 0 0-2 1.61l-.51 2.52a11.48 11.48 0 0 0-1.32.75l-2.38-.86A2 2 0 0 0 6.79 6a2 2 0 0 0-1.73 1L2.7 11a2 2 0 0 0 .41 2.51L5 15.24v1.53l-1.89 1.68A2 2 0 0 0 2.7 21l2.36 4a2 2 0 0 0 1.73 1 2 2 0 0 0 .64-.1l2.43-.82a11.35 11.35 0 0 0 1.31.75l.51 2.52a2 2 0 0 0 2 1.61h4.72a2 2 0 0 0 2-1.61l.51-2.52a11.48 11.48 0 0 0 1.32-.75l2.42.82a2 2 0 0 0 .64.1 2 2 0 0 0 1.73-1l2.28-4a2 2 0 0 0-.41-2.51zM25.21 24l-3.43-1.16a8.86 8.86 0 0 1-2.71 1.57L18.36 28h-4.72l-.71-3.55a9.36 9.36 0 0 1-2.7-1.57L6.79 24l-2.36-4 2.72-2.4a8.9 8.9 0 0 1 0-3.13L4.43 12l2.36-4 3.43 1.16a8.86 8.86 0 0 1 2.71-1.57L13.64 4h4.72l.71 3.55a9.36 9.36 0 0 1 2.7 1.57L25.21 8l2.36 4-2.72 2.4a8.9 8.9 0 0 1 0 3.13L27.57 20z"/><path d="M16 22a6 6 0 1 1 6-6 5.94 5.94 0 0 1-6 6zm0-10a3.91 3.91 0 0 0-4 4 3.91 3.91 0 0 0 4 4 3.91 3.91 0 0 0 4-4 3.91 3.91 0 0 0-4-4z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-control.svg b/app/assets/icons/icon-control.svg
new file mode 100644
index 0000000..fe554cc
--- /dev/null
+++ b/app/assets/icons/icon-control.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="23"><defs><path id="a" d="M11.107 2.83C10.733 1.228 9.24 0 7.467 0c-1.774 0-3.174 1.227-3.64 2.83H0v1.888h3.827c.373 1.604 1.866 2.83 3.64 2.83 1.773 0 3.173-1.226 3.64-2.83H28V2.83H11.107zm-3.64 1.888c-.56 0-.934-.377-.934-.944 0-.566.374-.943.934-.943s.933.377.933.943c0 .567-.373.944-.933.944zm13.066 2.83c1.774 0 3.174 1.227 3.64 2.832H28v1.887h-3.827c-.466 1.604-1.866 2.83-3.64 2.83-1.773 0-3.266-1.226-3.64-2.83H0V10.38h16.893c.467-1.605 1.867-2.831 3.64-2.831zm0 4.719c.56 0 .934-.378.934-.944s-.374-.944-.934-.944-.933.378-.933.944.373.944.933.944zm-13.066 2.83c1.773 0 3.173 1.227 3.64 2.831H28v1.887H11.107c-.467 1.604-1.867 2.831-3.64 2.831-1.774 0-3.267-1.227-3.64-2.83H0v-1.888h3.827c.466-1.604 1.866-2.83 3.64-2.83zm0 4.718c.56 0 .933-.377.933-.943s-.373-.944-.933-.944-.934.378-.934.944.374.943.934.943z"/></defs><use xlink:href="#a"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-copy.svg b/app/assets/icons/icon-copy.svg
new file mode 100644
index 0000000..a9b3be5
--- /dev/null
+++ b/app/assets/icons/icon-copy.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path d="M27.4346 14.6987L21.377 8.5776A1.9488 1.9488 0 0 0 19.998 8H12a2.002 2.002 0 0 0-2 2v19a2.002 2.002 0 0 0 2 2h14a2.002 2.002 0 0 0 2-2V16.0771a1.9755 1.9755 0 0 0-.5654-1.3784zM20 10.03L25.9235 16H20zM12 29V10h6v6a2.0023 2.0023 0 0 0 2 2h6.0006l.0009 11z"/><path d="M6 18H4V4a2.002 2.002 0 0 1 2-2h14v2H6z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-edit.svg b/app/assets/icons/icon-edit.svg
new file mode 100644
index 0000000..1986cd2
--- /dev/null
+++ b/app/assets/icons/icon-edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M2 27h28v2H2zM25.41 9a2 2 0 0 0 0-2.83l-3.58-3.58a2 2 0 0 0-2.83 0l-15 15V24h6.41zm-5-5L24 7.59l-3 3L17.41 7zM6 22v-3.59l10-10L19.59 12l-10 10z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-export.svg b/app/assets/icons/icon-export.svg
new file mode 100644
index 0000000..3d0bd6e
--- /dev/null
+++ b/app/assets/icons/icon-export.svg
@@ -0,0 +1 @@
+<svg baseProfile="tiny" viewBox="0 0 24 24"><path d="M21 14v6H3v-6H1v9h22v-9h-2z"/><path d="M11 5v13h2V5l4.5 4.5L19 8l-7-7-7 7 1.5 1.5L11 5z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-health.svg b/app/assets/icons/icon-health.svg
new file mode 100644
index 0000000..f01af2c
--- /dev/null
+++ b/app/assets/icons/icon-health.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M23 27.18l-2.59-2.59L19 26l4 4 7-7-1.41-1.41L23 27.18z"/><circle cx="11" cy="8" r="1"/><circle cx="11" cy="16" r="1"/><circle cx="11" cy="24" r="1"/><path d="M24 3H8a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h8v-2H8v-6h18V5a2 2 0 0 0-2-2zm0 16H8v-6h16zm0-8H8V5h16z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-information.svg b/app/assets/icons/icon-information.svg
new file mode 100644
index 0000000..1c0df72
--- /dev/null
+++ b/app/assets/icons/icon-information.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M17 22v-9h-4v2h2v7h-3v2h8v-2h-3zM16 7a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 7z"/><path d="M16 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14zm0-26a12 12 0 1 0 12 12A12 12 0 0 0 16 4z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-launch.svg b/app/assets/icons/icon-launch.svg
new file mode 100644
index 0000000..27440e6
--- /dev/null
+++ b/app/assets/icons/icon-launch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M26 28H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9v2H6v20h20v-9h2v9a2 2 0 0 1-2 2z"/><path d="M21 2v2h5.59L18 12.59 19.41 14 28 5.41V11h2V2h-9z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-more.svg b/app/assets/icons/icon-more.svg
new file mode 100644
index 0000000..b7f7043
--- /dev/null
+++ b/app/assets/icons/icon-more.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24.3 24.6"><path d="M12.1 23c-6 0-10.8-4.8-10.8-10.7S6.1 1.6 12.1 1.6s10.7 4.8 10.7 10.7S18 23 12.1 23zm0-20.4c-5.4 0-9.7 4.4-9.7 9.7S6.7 22 12.1 22s9.7-4.4 9.7-9.7-4.4-9.7-9.7-9.7z"/><circle cx="6.7" cy="12.5" r="1.5"/><circle cx="12.1" cy="12.5" r="1.5"/><circle cx="17.4" cy="12.5" r="1.5"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-overview.svg b/app/assets/icons/icon-overview.svg
new file mode 100644
index 0000000..748fa81
--- /dev/null
+++ b/app/assets/icons/icon-overview.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M4 2H2v26a2 2 0 0 0 2 2h26v-2H4z"/><path d="M30 9h-7v2h3.59L19 18.59l-4.29-4.3a1 1 0 0 0-1.42 0L6 21.59 7.41 23 14 16.41l4.29 4.3a1 1 0 0 0 1.42 0l8.29-8.3V16h2z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-plus.svg b/app/assets/icons/icon-plus.svg
new file mode 100644
index 0000000..4210a3f
--- /dev/null
+++ b/app/assets/icons/icon-plus.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path d="M16 4A12 12 0 1 1 4 16 12 12 0 0 1 16 4m0-2a14 14 0 1 0 14 14A14 14 0 0 0 16 2z"/><path d="M22 15h-5v-5h-2v5h-5v2h5v5h2v-5h5v-2z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-power.svg b/app/assets/icons/icon-power.svg
new file mode 100644
index 0000000..63da205
--- /dev/null
+++ b/app/assets/icons/icon-power.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path d="M22.5 5.74l-1 1.73a11 11 0 1 1-11 0l-1-1.73a13 13 0 1 0 13 0z"/><path d="M15 2h2v14h-2z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-restart.svg b/app/assets/icons/icon-restart.svg
new file mode 100644
index 0000000..9d46879
--- /dev/null
+++ b/app/assets/icons/icon-restart.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path d="M25 18A10 10 0 1 1 15 8h6.18l-3.58 3.59L19 13l6-6-6-6-1.4 1.41L21.19 6H15a12 12 0 1 0 12 12z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-return.svg b/app/assets/icons/icon-return.svg
new file mode 100644
index 0000000..e71e2b6
--- /dev/null
+++ b/app/assets/icons/icon-return.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.1 26.3"><path fill="none" stroke="#000" stroke-width="2" stroke-miterlimit="10" d="M17.1 22.1v3h-16v-24h16v4"/><path d="M16.1 18.1l1.5-1.5-2.5-2.5h8v-1.9l-8-.1 2.5-2.5-1.5-1.5-5 5z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-trashcan.svg b/app/assets/icons/icon-trashcan.svg
new file mode 100644
index 0000000..8e31a6e
--- /dev/null
+++ b/app/assets/icons/icon-trashcan.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M12 12h2v12h-2zM18 12h2v12h-2z"/><path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20zM12 2h8v2h-8z"/><path fill="none" d="M0 0h32v32H0z" data-name="<Transparent Rectangle>"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-user.svg b/app/assets/icons/icon-user.svg
new file mode 100644
index 0000000..0d4610d
--- /dev/null
+++ b/app/assets/icons/icon-user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 4a5 5 0 1 1-5 5 5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7 7 7 0 0 0-7-7zM26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z"/><path data-name="<Transparent Rectangle>" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
