diff --git a/package.json b/package.json
index b479df6..e950e73 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/app-shell.ts b/src/components/app-shell.ts
index e475d86..d82e800 100644
--- a/src/components/app-shell.ts
+++ b/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 {
-
+
`;
const Shell = connect(
diff --git a/src/components/view-home.ts b/src/components/view-home.ts
index c8e7b11..1dd0daf 100644
--- a/src/components/view-home.ts
+++ b/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`
-
-
-ul {
- list-style-type: none;
- padding: 0;
+
+
+
${!props.loggedIn ? html`
-
+
+ Login via
+
` : ''}
-
+
+
${props.playlists.map((playlist) => html`
- - ${playlist.name}
+ ${playlist.name}
`)}
-
+
+
`;
const mapStateToProps = (state: State): ViewHomeProps => ({
diff --git a/yarn.lock b/yarn.lock
index f9d675d..0b74b82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -183,6 +183,128 @@
string-format-obj "^1.0.0"
through2 "^2.0.0"
+"@polymer/font-roboto@3.0.0-pre.12":
+ version "3.0.0-pre.12"
+ resolved "https://registry.yarnpkg.com/@polymer/font-roboto/-/font-roboto-3.0.0-pre.12.tgz#b19391245d1d36369f4c6136e0a328468f18f423"
+
+"@polymer/iron-a11y-keys-behavior@3.0.0-pre.12":
+ 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/iron-behaviors@3.0.0-pre.12":
+ 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/iron-checked-element-behavior@3.0.0-pre.12":
+ 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/iron-flex-layout@3.0.0-pre.12":
+ 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/iron-form-element-behavior@3.0.0-pre.12":
+ 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/iron-icon@3.0.0-pre.12":
+ 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/iron-iconset-svg@3.0.0-pre.12":
+ 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/iron-meta@3.0.0-pre.12":
+ 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/iron-validatable-behavior@3.0.0-pre.12":
+ 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/paper-behaviors@3.0.0-pre.12":
+ 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/paper-ripple@3.0.0-pre.12":
+ 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/paper-styles@3.0.0-pre.12":
+ 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/polymer@3.0.0-pre.12":
+ 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"