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/images/logo.svg b/app/assets/images/logo.svg
index d0fa158..272f5c3 100644
--- a/app/assets/images/logo.svg
+++ b/app/assets/images/logo.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 241.23 240.05"><defs><style>.cls-1{fill:#a6a8ab;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{fill:url(#linear-gradient-3);}.cls-5{fill:url(#linear-gradient-4);}.cls-6{fill:#626366;}</style><linearGradient id="linear-gradient" x1="82.9" y1="11.55" x2="82.9" y2="154.54" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00b0da"/><stop offset="1" stop-color="#008abf"/></linearGradient><linearGradient id="linear-gradient-2" x1="81.55" y1="27.55" x2="81.55" y2="158.66" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="156.66" y1="51.54" x2="156.66" y2="154.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a5d440"/><stop offset="1" stop-color="#8cce3f"/></linearGradient><linearGradient id="linear-gradient-4" x1="158.41" y1="51.54" x2="158.41" y2="154.8" xlink:href="#linear-gradient-3"/></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M241.23,205.77a18.66,18.66,0,1,0-.24,16L237.26,220a14.51,14.51,0,1,1,.21-12.46Z"/><path class="cls-2" d="M65.85,81.86a53.68,53.68,0,0,0,11.61,33.41c-.1.29-.15.6-.22.9a10.81,10.81,0,0,0-.34,2.57,11,11,0,1,0,11-11,10.75,10.75,0,0,0-1.2.07c-.31,0-.61.08-.91.13A42.82,42.82,0,0,1,99.95,43.86h0V2.07l-.77.21q-3.63.94-7.12,2.2c-1.29.47-2.58,1-3.84,1.48h0V38.19l-.13.1A53.79,53.79,0,0,0,65.85,81.86Z"/><path class="cls-3" d="M120.28,96.58a14.54,14.54,0,0,1-14.55-14.37H93.59v0a26.29,26.29,0,0,0,21,25.65v45.35A71.13,71.13,0,0,1,63.9,38.1c.31.06.63.1,1,.13s.64,0,1,0a10.83,10.83,0,1,0-10.25-7.41,82.23,82.23,0,0,0,64.18,133.6c1.41,0,2.81-.06,4.2-.14l1.63-.09h0V95.57A14.47,14.47,0,0,1,120.28,96.58Z"/><path class="cls-4" d="M171.95,68.54a53.78,53.78,0,0,0-9.85-19.71,11.31,11.31,0,0,0,.32-1.3,10.78,10.78,0,0,0,.24-2.17,11,11,0,1,0-8.89,10.8,42.83,42.83,0,0,1-14.17,64.08V162c1.08-.27,2.14-.56,3.2-.87a82.35,82.35,0,0,0,8.53-3V125.91a53.91,53.91,0,0,0,20.6-57.37Z"/><path class="cls-5" d="M184.63,132.75A82.21,82.21,0,0,0,119.79,0c-1.64,0-3.26.06-4.87.16h-.11V68.55h0A14.53,14.53,0,0,1,120,67.48h.27A14.56,14.56,0,0,1,134.87,82s0,.07,0,.11,0,.08,0,.13h11.08A26.21,26.21,0,0,0,125.81,56.8V11.3A71.14,71.14,0,0,1,176,125.83h-.07a11,11,0,0,0-12.58,10.88,11,11,0,0,0,11,11h0a11,11,0,0,0,10.54-14.13C184.82,133.3,184.73,133,184.63,132.75Z"/><polygon class="cls-1" points="201.22 231.42 201.22 195.65 196.53 195.65 182 225.14 167.47 195.65 162.72 195.65 162.72 231.42 166.89 231.42 166.89 204.21 180.33 231.42 183.67 231.42 197.1 204.21 197.1 231.42 201.22 231.42"/><path class="cls-6" d="M119.82,208.4a10.6,10.6,0,0,0-7.9-3.34,10.15,10.15,0,0,0-4.16.83,15.94,15.94,0,0,0-3.62,2.24v-2.7H99.91v26h4.23V216.64a7.74,7.74,0,0,1,2.08-5.5,7.48,7.48,0,0,1,10.66,0,7.76,7.76,0,0,1,2.08,5.48v14.78h4.11v-15a11.12,11.12,0,0,0-3.24-8"/><path class="cls-6" d="M63.68,224.4a12.41,12.41,0,0,1-4.86,5.17,13.54,13.54,0,0,1-7,1.85H45.54V240h-4V205.43H51.64a13.41,13.41,0,0,1,9.57,3.76,12.73,12.73,0,0,1,2.47,15.21m-18.14,3.24h5.77A9.48,9.48,0,0,0,58.05,225a8.59,8.59,0,0,0,2.76-6.54,8.38,8.38,0,0,0-2.7-6.41,9.43,9.43,0,0,0-6.68-2.51H45.54Z"/><path class="cls-6" d="M96.44,219.75a4.56,4.56,0,0,0,.14-1.36c0-7.38-6.27-13.36-14-13.36s-14,6-14,13.36,6.27,13.36,14,13.36a14,14,0,0,0,11.93-6.52l-3.25-2.45a9.89,9.89,0,0,1-8.68,5,9.43,9.43,0,1,1,0-18.83,9.8,9.8,0,0,1,9.35,6.54c0,.07.15.63.17.7H76.59v3.52Z"/><path class="cls-6" d="M33.19,213.53A14.53,14.53,0,1,1,18.66,199a14.53,14.53,0,0,1,14.53,14.53m4.12,0a18.66,18.66,0,1,0-18.66,18.66,18.66,18.66,0,0,0,18.66-18.66"/><path class="cls-1" d="M154.37,220.69a6.77,6.77,0,0,1-6.75,6.79H132.14V213.9h15.49a6.78,6.78,0,0,1,6.75,6.79m-2.29-15.93a5.08,5.08,0,0,1-5.05,5.08l-14.89,0V199.67H147a5.07,5.07,0,0,1,5.05,5.08m.94,6.7a9,9,0,0,0-5.69-15.75H128v35.75h20.14l.28,0v0A10.73,10.73,0,0,0,153,211.46"/></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 241.23 240.05"><defs><style>.cls-1{fill:#a6a8ab}.cls-6{fill:#626366}</style><linearGradient id="linear-gradient" x1="82.9" y1="11.55" x2="82.9" y2="154.54" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00b0da"/><stop offset="1" stop-color="#008abf"/></linearGradient><linearGradient id="linear-gradient-2" x1="81.55" y1="27.55" x2="81.55" y2="158.66" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="156.66" y1="51.54" x2="156.66" y2="154.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a5d440"/><stop offset="1" stop-color="#8cce3f"/></linearGradient><linearGradient id="linear-gradient-4" x1="158.41" y1="51.54" x2="158.41" y2="154.8" xlink:href="#linear-gradient-3"/></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M241.23 205.77a18.66 18.66 0 1 0-.24 16l-3.73-1.77a14.51 14.51 0 1 1 .21-12.46z"/><path d="M65.85 81.86a53.68 53.68 0 0 0 11.61 33.41c-.1.29-.15.6-.22.9a10.81 10.81 0 0 0-.34 2.57 11 11 0 1 0 11-11 10.75 10.75 0 0 0-1.2.07c-.31 0-.61.08-.91.13a42.82 42.82 0 0 1 14.16-64.08V2.07l-.77.21q-3.63.94-7.12 2.2c-1.29.47-2.58 1-3.84 1.48v32.23l-.13.1a53.79 53.79 0 0 0-22.24 43.57z" fill="url(#linear-gradient)"/><path d="M120.28 96.58a14.54 14.54 0 0 1-14.55-14.37H93.59a26.29 26.29 0 0 0 21 25.65v45.35A71.13 71.13 0 0 1 63.9 38.1c.31.06.63.1 1 .13s.64 0 1 0a10.83 10.83 0 1 0-10.25-7.41 82.23 82.23 0 0 0 64.18 133.6c1.41 0 2.81-.06 4.2-.14l1.63-.09V95.57a14.47 14.47 0 0 1-5.38 1.01z" fill="url(#linear-gradient-2)"/><path d="M171.95 68.54a53.78 53.78 0 0 0-9.85-19.71 11.31 11.31 0 0 0 .32-1.3 10.78 10.78 0 0 0 .24-2.17 11 11 0 1 0-8.89 10.8 42.83 42.83 0 0 1-14.17 64.08V162c1.08-.27 2.14-.56 3.2-.87a82.35 82.35 0 0 0 8.53-3v-32.22a53.91 53.91 0 0 0 20.6-57.37z" fill="url(#linear-gradient-3)"/><path d="M184.63 132.75A82.21 82.21 0 0 0 119.79 0c-1.64 0-3.26.06-4.87.16h-.11v68.39a14.53 14.53 0 0 1 5.19-1.07h.27A14.56 14.56 0 0 1 134.87 82v.24h11.08a26.21 26.21 0 0 0-20.14-25.44V11.3A71.14 71.14 0 0 1 176 125.83h-.07a11 11 0 0 0-12.58 10.88 11 11 0 0 0 11 11 11 11 0 0 0 10.54-14.13c-.07-.28-.16-.58-.26-.83z" fill="url(#linear-gradient-4)"/><path class="cls-1" d="M201.22 231.42v-35.77h-4.69L182 225.14l-14.53-29.49h-4.75v35.77h4.17v-27.21l13.44 27.21h3.34l13.43-27.21v27.21h4.12z"/><path class="cls-6" d="M119.82 208.4a10.6 10.6 0 0 0-7.9-3.34 10.15 10.15 0 0 0-4.16.83 15.94 15.94 0 0 0-3.62 2.24v-2.7h-4.23v26h4.23v-14.79a7.74 7.74 0 0 1 2.08-5.5 7.48 7.48 0 0 1 10.66 0 7.76 7.76 0 0 1 2.08 5.48v14.78h4.11v-15a11.12 11.12 0 0 0-3.24-8M63.68 224.4a12.41 12.41 0 0 1-4.86 5.17 13.54 13.54 0 0 1-7 1.85h-6.28V240h-4v-34.57h10.1a13.41 13.41 0 0 1 9.57 3.76 12.73 12.73 0 0 1 2.47 15.21m-18.14 3.24h5.77a9.48 9.48 0 0 0 6.74-2.64 8.59 8.59 0 0 0 2.76-6.54 8.38 8.38 0 0 0-2.7-6.41 9.43 9.43 0 0 0-6.68-2.51h-5.89zM96.44 219.75a4.56 4.56 0 0 0 .14-1.36c0-7.38-6.27-13.36-14-13.36s-14 6-14 13.36 6.27 13.36 14 13.36a14 14 0 0 0 11.93-6.52l-3.25-2.45a9.89 9.89 0 0 1-8.68 5 9.43 9.43 0 1 1 0-18.83 9.8 9.8 0 0 1 9.35 6.54c0 .07.15.63.17.7H76.59v3.52zM33.19 213.53A14.53 14.53 0 1 1 18.66 199a14.53 14.53 0 0 1 14.53 14.53m4.12 0a18.66 18.66 0 1 0-18.66 18.66 18.66 18.66 0 0 0 18.66-18.66"/><path class="cls-1" d="M154.37 220.69a6.77 6.77 0 0 1-6.75 6.79h-15.48V213.9h15.49a6.78 6.78 0 0 1 6.75 6.79m-2.29-15.93a5.08 5.08 0 0 1-5.05 5.08h-14.89v-10.17H147a5.07 5.07 0 0 1 5.05 5.08m.94 6.7a9 9 0 0 0-5.69-15.75H128v35.75h20.42a10.73 10.73 0 0 0 4.58-19.99"/></g></g></svg>
\ No newline at end of file
