💄 Use web components like the cool kids

package.json

@@ -6,6 +6,9 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "@polymer/iron-icons": "^3.0.0-pre.12",
+    "@polymer/paper-button": "^3.0.0-pre.12",
+    "@polymer/paper-item": "^3.0.0-pre.12",
     "fit-html": "^0.5.4",
     "qs": "^6.5.1",
     "redux-devtools-extension": "^2.13.2",

src/components/app-shell.ts

@@ -1,3 +1,5 @@
+import '@polymer/iron-icons/iron-icons';
+
 import { connect, withStore } from 'fit-html';
 import { html, svg } from 'lit-html/lib/lit-extended';
 import store from '../store';
@@ -17,7 +19,7 @@ a, a:visited, a:hover, a:active {
 
 <div style="text-align: center;"><img src="logo_full.svg" /></div>
 <view-home></view-home>
-<footer><div style="text-align: center;"><a href="https://hacking.studio/">hacking ❤ studio</a></div></footer>
+<footer><div style="text-align: center;"><a href="https://hacking.studio/">hacking <iron-icon icon="icons:favorite"></iron-icon> studio</a></div></footer>
 `;
 
 const Shell = connect(

src/components/view-home.ts

@@ -1,3 +1,7 @@
+import '@polymer/paper-button/paper-button';
+import '@polymer/paper-item/paper-item';
+import '@polymer/iron-icons/iron-icons';
+
 import { connect } from 'fit-html';
 import { html } from 'lit-html/lib/lit-extended';
 import { loginSpotify } from "../actions/view-home";
@@ -20,32 +24,37 @@ interface ViewHomeDispatch {
 
 const View = (props: ViewHomeProps & ViewHomeDispatch) => html`
 
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
 <style>
+paper-button > img {
+    height: 2rem; 
+}
+</style>
 
-ul {
-    list-style-type: none;
-    padding: 0;
+<style is="custom-style">
+paper-button.spotify {
+    background-color: #1db954;
+    color: white;
 }
-li {
-    font-size: 2rem;
-    border-bottom: thin #909090 solid;
-    padding: 0.1rem 0.5rem;
+paper-item {
+    font-size: 1.5rem;
 }
 </style>
 
+<style is="custom-style" include="paper-item-shared-styles"></style>
+
 ${!props.loggedIn ? html`
 <div style="text-align: center">
-    <button style="font-size: 1.5rem;" type="button" class="btn btn-success" on-click="${ props.loginSpotify }">
-        Login via Spotify
-    </button>
+    <paper-button class="spotify" style="font-size: 1.25rem;" on-click="${ props.loginSpotify }">
+        Login via&nbsp;<img src="Spotify_Logo_RGB_White.png" />
+    </paper-button>
 </div>` : ''}
-<ul>
+
+<paper-listbox>
 ${props.playlists.map((playlist) => html`
-    <li>${playlist.name}</li>
+    <paper-item><iron-icon icon="icons:view-list"></iron-icon>&nbsp;${playlist.name}</paper-item>
 `)}
-</ul>
+</paper-listbox>
+<div style="height: 1rem;"></div>
 `;
 
 const mapStateToProps = (state: State): ViewHomeProps => ({

yarn.lock

@@ -183,6 +183,128 @@
     string-format-obj "^1.0.0"
     through2 "^2.0.0"
 
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/font-roboto/-/font-roboto-3.0.0-pre.12.tgz#b19391245d1d36369f4c6136e0a328468f18f423"
+
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/iron-a11y-keys-behavior/-/iron-a11y-keys-behavior-3.0.0-pre.12.tgz#bb25b4b991c30514b2e156ed92952c7ce0e34c81"
+  dependencies:
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/iron-behaviors/-/iron-behaviors-3.0.0-pre.12.tgz#b5a337c5e493b8e91b9d89ddb10ae6c1d864f835"
+  dependencies:
+    "@polymer/iron-a11y-keys-behavior" "3.0.0-pre.12"
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/iron-checked-element-behavior/-/iron-checked-element-behavior-3.0.0-pre.12.tgz#f616aea6658037807186896dbdc83b7d44119c29"
+  dependencies:
+    "@polymer/iron-form-element-behavior" "3.0.0-pre.12"
+    "@polymer/iron-validatable-behavior" "3.0.0-pre.12"
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/iron-flex-layout/-/iron-flex-layout-3.0.0-pre.12.tgz#209791d067521115e61a9fb2cb4070f0de82322b"
+  dependencies:
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/iron-form-element-behavior/-/iron-form-element-behavior-3.0.0-pre.12.tgz#5c729b89d032fe1035891cb1c469dbb82665dc52"
+  dependencies:
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/iron-icon/-/iron-icon-3.0.0-pre.12.tgz#5c6c8cef297ef02a25703c9de1dd7aef089c8ee7"
+  dependencies:
+    "@polymer/iron-flex-layout" "3.0.0-pre.12"
+    "@polymer/iron-meta" "3.0.0-pre.12"
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/iron-icons@^3.0.0-pre.12":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/iron-icons/-/iron-icons-3.0.0-pre.12.tgz#35316139f6a2c84dc207dbecce174bf122921c0f"
+  dependencies:
+    "@polymer/iron-icon" "3.0.0-pre.12"
+    "@polymer/iron-iconset-svg" "3.0.0-pre.12"
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/iron-iconset-svg/-/iron-iconset-svg-3.0.0-pre.12.tgz#99677b304a8ba72d5b6d9ec19ba4e0b16ef47662"
+  dependencies:
+    "@polymer/iron-meta" "3.0.0-pre.12"
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/iron-meta/-/iron-meta-3.0.0-pre.12.tgz#b89c280f4d004e7d6c8263d848803837e69d9776"
+  dependencies:
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/iron-validatable-behavior/-/iron-validatable-behavior-3.0.0-pre.12.tgz#1529a0e70960d2fcd362c1b5c6a7e728560e9c05"
+  dependencies:
+    "@polymer/iron-meta" "3.0.0-pre.12"
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/paper-behaviors/-/paper-behaviors-3.0.0-pre.12.tgz#b6d7686fec73b32c14c106f753c2fc6798690e6e"
+  dependencies:
+    "@polymer/iron-behaviors" "3.0.0-pre.12"
+    "@polymer/iron-checked-element-behavior" "3.0.0-pre.12"
+    "@polymer/paper-ripple" "3.0.0-pre.12"
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/paper-button@^3.0.0-pre.12":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/paper-button/-/paper-button-3.0.0-pre.12.tgz#c02396aea32595801dc147c159c65910d3ce75f4"
+  dependencies:
+    "@polymer/iron-flex-layout" "3.0.0-pre.12"
+    "@polymer/paper-behaviors" "3.0.0-pre.12"
+    "@polymer/paper-styles" "3.0.0-pre.12"
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/paper-item@^3.0.0-pre.12":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/paper-item/-/paper-item-3.0.0-pre.12.tgz#71524722bab67ec81b80d20ef8cd029cb8f7a3db"
+  dependencies:
+    "@polymer/iron-behaviors" "3.0.0-pre.12"
+    "@polymer/iron-flex-layout" "3.0.0-pre.12"
+    "@polymer/paper-styles" "3.0.0-pre.12"
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/paper-ripple/-/paper-ripple-3.0.0-pre.12.tgz#66f6f7ab406e7466a980eee0c92f5ff024fc57ea"
+  dependencies:
+    "@polymer/iron-a11y-keys-behavior" "3.0.0-pre.12"
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/paper-styles/-/paper-styles-3.0.0-pre.12.tgz#c8e27e078e10a3b90e74d67b964270abe7280ee3"
+  dependencies:
+    "@polymer/font-roboto" "3.0.0-pre.12"
+    "@polymer/iron-flex-layout" "3.0.0-pre.12"
+    "@polymer/polymer" "3.0.0-pre.12"
+
+"@polymer/[email protected]":
+  version "3.0.0-pre.12"
+  resolved "https://registry.yarnpkg.com/@polymer/polymer/-/polymer-3.0.0-pre.12.tgz#3f5dd19099a194bf1066cf417ae13c335bd63b04"
+  dependencies:
+    "@webcomponents/shadycss" "^1.0.0"
+    "@webcomponents/webcomponentsjs" "^1.0.0"
+
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
@@ -197,6 +319,14 @@
   version "0.0.38"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.38.tgz#c1be40aa933723c608820a99a373a16d215a1ca2"
 
+"@webcomponents/shadycss@^1.0.0":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@webcomponents/shadycss/-/shadycss-1.1.2.tgz#947e9306eb2e084a4a3a4fd738aced00721bce92"
+
+"@webcomponents/webcomponentsjs@^1.0.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-1.1.1.tgz#50caffdf8a901e5357532b7d85e776637a56446a"
+
 JSONStream@^1.2.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.2.tgz#c102371b6ec3a7cf3b847ca00c20bb0fce4c6dea"