styling

13 files changed, 111 insertions, 60 deletions

diff --git a/img/icon-polls.svg b/img/icon-polls.svg
new file mode 100644
index 00000000..f280267d
--- /dev/null
+++ b/img/icon-polls.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   xml:space="preserve"
+   height="32"
+   width="32"
+   enable-background="new 0 0 595.275 311.111"
+   y="0px"
+   x="0px"
+   viewBox="0 0 32 32"
+   id="svg8"><metadata
+     id="metadata14"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs12" /><rect
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.93541431"
+     width="7"
+     height="26"
+     x="3"
+     y="2"
+     id="rect2" /><rect
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.93541431"
+     width="7"
+     height="16"
+     x="12"
+     y="12"
+     id="rect4" /><rect
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.8918826"
+     width="7"
+     height="20"
+     x="21"
+     y="8"
+     id="rect6" /></svg>
\ No newline at end of file
diff --git a/src/js/App.vue b/src/js/App.vue
index 71a62220..9f645cab 100644
--- a/src/js/App.vue
+++ b/src/js/App.vue
@@ -108,6 +108,7 @@ export default {
 	--color-polls-background-yes: #ebf5d6;
 	--color-polls-background-no: #ffede9;
 	--color-polls-background-maybe: #fcf7e1;
+	--icon-polls :url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBoZWlnaHQ9IjMyIgogICB3aWR0aD0iMzIiCiAgIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU5NS4yNzUgMzExLjExMSIKICAgeT0iMHB4IgogICB4PSIwcHgiCiAgIHZpZXdCb3g9IjAgMCAzMiAzMiIKICAgaWQ9InN2ZzgiPjxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTE0Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjxkYzp0aXRsZT48L2RjOnRpdGxlPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzMTIiIC8+PHJlY3QKICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDowLjkzNTQxNDMxIgogICAgIHdpZHRoPSI3IgogICAgIGhlaWdodD0iMjYiCiAgICAgeD0iMyIKICAgICB5PSIyIgogICAgIGlkPSJyZWN0MiIgLz48cmVjdAogICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjAuOTM1NDE0MzEiCiAgICAgd2lkdGg9IjciCiAgICAgaGVpZ2h0PSIxNiIKICAgICB4PSIxMiIKICAgICB5PSIxMiIKICAgICBpZD0icmVjdDQiIC8+PHJlY3QKICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDowLjg5MTg4MjYiCiAgICAgd2lkdGg9IjciCiAgICAgaGVpZ2h0PSIyMCIKICAgICB4PSIyMSIKICAgICB5PSI4IgogICAgIGlkPSJyZWN0NiIgLz48L3N2Zz4=);
 	--icon-polls-yes: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Im0yLjM1IDcuMyA0IDRsNy4zLTcuMyIgc3Ryb2tlPSIjNDliYzQ5IiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiLz48L3N2Zz4K);
 	--icon-polls-handle: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNiI+DQogIDxwYXRoDQogICAgIGQ9Ik0yIDJ2MmgxMnYtMnptMCAzdjJoMTJ2LTJ6bTAgM3YyaDEydi0yem0wIDN2MmgxMnYtMnoiDQogICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgLz4NCjwvc3ZnPg0K);
 	--icon-polls-no: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNiIgdmVyc2lvbj0iMS4xIiB2aWV3Ym94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Im0xNCAxMi4zLTEuNyAxLjctNC4zLTQuMy00LjMgNC4zLTEuNy0xLjcgNC4zLTQuMy00LjMtNC4zIDEuNy0xLjcgNC4zIDQuMyA0LjMtNC4zIDEuNyAxLjctNC4zIDQuM3oiIGZpbGw9IiNmNDU1NzMiLz48L3N2Zz4K);
@@ -119,6 +120,9 @@ export default {
 	--color-polls-foreground-filter-no: invert(43%) sepia(100%) saturate(1579%) hue-rotate(318deg) brightness(99%) contrast(94%);
 	--color-polls-foreground-filter-maybe: invert(81%) sepia(22%) saturate(3383%) hue-rotate(353deg) brightness(101%) contrast(101%);
 }
+.icon-polls {
+	background-image: var(--icon-polls);
+}
 
 .title {
 	margin: 8px 0;
@@ -155,11 +159,6 @@ export default {
 	opacity: 0;
 }
 
-.app-content {
-	padding: 8px 24px 8px 36px;
-	overflow: hidden;
-}
-
 input {
 	background-repeat: no-repeat;
 	background-position: 98%;
diff --git a/src/js/components/Base/ParticipantsList.vue b/src/js/components/Base/ParticipantsList.vue
index 6bd35567..f916d398 100644
--- a/src/js/components/Base/ParticipantsList.vue
+++ b/src/js/components/Base/ParticipantsList.vue
@@ -52,9 +52,8 @@ export default {
 
 <style lang="scss" scoped>
 	.participants-list {
-		margin: 8px 0;
-		padding-right: 24px;
-
+		padding: 8px;
+		background-color: var(--color-main-background);
 	}
 	.participants-list__list {
 		display: flex;
diff --git a/src/js/components/Base/UserDiv.vue b/src/js/components/Base/UserDiv.vue
index e84b96a3..e081b895 100644
--- a/src/js/components/Base/UserDiv.vue
+++ b/src/js/components/Base/UserDiv.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div class="user-row" :class="type">
+	<div class="user-div" :class="type">
 		<Avatar :disable-menu="disableMenu" :menu-position="menuPosition" :user="userId"
 			:is-guest="!Boolean(getCurrentUser())"
 			:display-name="displayName"
@@ -111,7 +111,7 @@ export default {
 </script>
 
 <style lang="scss">
-.user-row {
+.user-div {
 	display: flex;
 	flex: 1;
 	align-items: center;
diff --git a/src/js/components/Navigation/Navigation.vue b/src/js/components/Navigation/Navigation.vue
index 213c8d57..d9819b8c 100644
--- a/src/js/components/Navigation/Navigation.vue
+++ b/src/js/components/Navigation/Navigation.vue
@@ -85,7 +85,7 @@ export default {
 				{
 					id: 'all',
 					title: t('polls', 'All polls'),
-					icon: 'icon-folder',
+					icon: 'icon-polls',
 					pinned: false,
 				},
 				{
@@ -181,4 +181,5 @@ export default {
 			opacity: 0.6;
 		}
 	}
+
 </style>
diff --git a/src/js/components/PollList/PollItem.vue b/src/js/components/PollList/PollItem.vue
index 7caff427..5dda8433 100644
--- a/src/js/components/PollList/PollItem.vue
+++ b/src/js/components/PollList/PollItem.vue
@@ -239,6 +239,7 @@ export default {
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+
 }
 
 .item__icon-spacer {
@@ -284,17 +285,17 @@ export default {
 [class^='poll-item__'] {
 	display: flex;
 	flex: 1;
-	border-bottom: 1px solid var(--color-border-dark);
 	padding: 4px 8px;
+	border-bottom: 1px solid var(--color-border-dark);
+	background-color: var(--color-main-background)
 }
 
 .poll-item__header {
-	opacity: 0.5;
+	opacity: 0.7;
 	flex: auto;
 	height: 4em;
 	align-items: center;
 	padding-left: 52px;
-
 }
 
 .sortable {
diff --git a/src/js/components/SideBar/SideBarTabShare.vue b/src/js/components/SideBar/SideBarTabShare.vue
index 93604d6a..c330e93e 100644
--- a/src/js/components/SideBar/SideBarTabShare.vue
+++ b/src/js/components/SideBar/SideBarTabShare.vue
@@ -76,7 +76,7 @@
 		<h3>{{ t('polls','Public shares') }}</h3>
 		<TransitionGroup :css="false" tag="ul" class="shared-list">
 			<li v-for="(share) in publicShares" :key="share.id">
-				<div class="user-row user">
+				<div class="user-div user">
 					<div class="avatar icon-public" />
 					<div class="user-name">
 						{{ t('polls', 'Public link (' + share.token + ')') }}
@@ -94,7 +94,7 @@
 				</Actions>
 			</li>
 		</TransitionGroup>
-		<div class="user-row user" @click="addShare({type: 'public', user: '', emailAddress: ''})">
+		<div class="user-div user" @click="addShare({type: 'public', user: '', emailAddress: ''})">
 			<div class="avatar icon-add" />
 			<div class="user-name">
 				{{ t('polls', 'Add a public link') }}
diff --git a/src/js/components/Subscription/Subscription.vue b/src/js/components/Subscription/Subscription.vue
index b567c5bd..19c800ec 100644
--- a/src/js/components/Subscription/Subscription.vue
+++ b/src/js/components/Subscription/Subscription.vue
@@ -65,6 +65,7 @@ export default {
 
 <style lang="css" scoped>
 	.subscription {
-		margin: 8px 0;
+		padding: 8px;
+		background-color: var(--color-main-background);
 	}
 </style>
diff --git a/src/js/components/VoteTable/VoteList.vue b/src/js/components/VoteTable/VoteList.vue
index 50711ae3..caf27822 100644
--- a/src/js/components/VoteTable/VoteList.vue
+++ b/src/js/components/VoteTable/VoteList.vue
@@ -150,6 +150,7 @@ export default {
 		flex-direction: column;
 		justify-content: flex-start;
 		overflow: scroll;
+		padding-right: 8px;
 
 		.vote-row {
 			display: flex;
diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue
index 699be9f1..29967e6b 100644
--- a/src/js/components/VoteTable/VoteTable.vue
+++ b/src/js/components/VoteTable/VoteTable.vue
@@ -133,7 +133,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	.user-row.vote-table__user-column,
+	.user-div.vote-table__user-column,
 	.vote-table__header > .vote-table__user-column {
 		position: sticky;
 		left: 0;
@@ -145,7 +145,7 @@ export default {
 		}
 	}
 
-	.owner-access .user-row.vote-table__user-column,
+	.owner-access .user-div.vote-table__user-column,
 	.owner-access .vote-table__header > .vote-table__user-column {
 		width: 280px;
 	}
@@ -157,16 +157,18 @@ export default {
 
 	.vote-table {
 		display: flex;
-		flex: 0;
+		flex: 0 auto;
 		flex-direction: column;
 		justify-content: flex-start;
-		overflow: scroll;
-		padding: 10px 0;
+		overflow-x: scroll;
+		padding-bottom: 12px;
+		background-color: var(--color-main-background);
 
 		& > div {
 			display: flex;
 			flex: 1;
 			border-bottom: 1px solid var(--color-border-dark);
+			background-color: var(--color-main-background);
 			order: 3;
 			justify-content: space-between;
 			min-width: max-content;
@@ -220,7 +222,7 @@ export default {
 			&> .currentuser {
 				display: flex;
 				flex-direction: column;
-				&> .user-row {
+				&> .user-div {
 					display: none;
 				}
 			}
diff --git a/src/js/components/VoteTable/VoteTableHeader.vue b/src/js/components/VoteTable/VoteTableHeader.vue
index 374f11c3..9528e086 100644
--- a/src/js/components/VoteTable/VoteTableHeader.vue
+++ b/src/js/components/VoteTable/VoteTableHeader.vue
@@ -109,6 +109,7 @@ export default {
 .vote-table-header {
 	display: flex;
 	flex-direction: column;
+	background-color: var(--color-main-background);
 	&.winner {
 		font-weight: bold;
 		color: var(--color-polls-foreground-yes);
diff --git a/src/js/views/PollList.vue b/src/js/views/PollList.vue
index 4df06c99..4c593996 100644
--- a/src/js/views/PollList.vue
+++ b/src/js/views/PollList.vue
@@ -21,20 +21,20 @@
   -->
 
 <template>
-	<AppContent>
-		<div v-if="noPolls">
-			<div class="icon-polls" />
-			<h2> {{ t('No existing polls.') }} </h2>
-		</div>
-		<h2 v-if="!noPolls" class="title">
+	<AppContent class="poll-list">
+		<h2 class="title">
 			{{ title }}
 		</h2>
-		<h3 v-if="!noPolls" class="description">
+		<h3 class="description">
 			{{ description }}
 		</h3>
+		<div v-if="noPolls" class="emptycontent">
+			<div class="icon-polls" />
+			<h2> {{ t('polls', 'No existing polls.') }} </h2>
+		</div>
 
-		<transition-group v-if="!noPolls" name="list" tag="div"
-			class="table">
+		<transition-group v-else name="list" tag="div"
+			class="poll-list__list">
 			<PollItem key="0" :header="true"
 				:sort="sort" :reverse="reverse" @sortList="setSort($event)" />
 			<li is="PollItem"
@@ -68,7 +68,6 @@ export default {
 
 	data() {
 		return {
-			noPolls: false,
 			isLoading: false,
 			sort: 'created',
 			reverse: true,
@@ -130,6 +129,10 @@ export default {
 			}
 		},
 
+		noPolls() {
+			return this.sortedList.length < 1
+		},
+
 	},
 
 	watch: {
@@ -175,12 +178,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-	.main-container {
-		flex: 1;
+	.app-content {
+		display: flex;
+		flex-direction: column;
+		padding: 52px 8px 0;
+		&>* {
+			padding: 0 8px;
+		}
 	}
-
-	.table {
+	.poll-list__list {
 		width: 100%;
 		display: flex;
 		flex-direction: column;
@@ -188,12 +194,4 @@ export default {
 		overflow: scroll;
 		padding-bottom: 14px;
 	}
-
-	#emptycontent {
-		.icon-polls {
-			background-color: black;
-			-webkit-mask: url('./img/app.svg') no-repeat 50% 50%;
-			mask: url('./img/app.svg') no-repeat 50% 50%;
-		}
-	}
 </style>
diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue
index d55606da..736fca96 100644
--- a/src/js/views/Vote.vue
+++ b/src/js/views/Vote.vue
@@ -34,19 +34,20 @@
 				</ActionButton>
 			</Actions>
 		</div>
-		<h2 class="title">
-			{{ poll.title }}
-			<span v-if="expired" class="label error">{{ t('polls', 'Expired') }}</span>
-			<span v-if="!expired && poll.expire" class="label success">{{ t('polls', 'Place your votes until %n', 1, dateExpiryString) }}</span>
-			<span v-if="poll.deleted" class="label error">{{ t('polls', 'Deleted') }}</span>
-		</h2>
-		<PollInformation />
-
-		<VoteHeaderPublic v-if="!getCurrentUser()" />
-
-		<h3 class="description">
-			{{ poll.description ? poll.description : t('polls', 'No description provided') }}
-		</h3>
+		<div class="vote__introduction">
+			<h2 class="title">
+				{{ poll.title }}
+				<span v-if="expired" class="label error">{{ t('polls', 'Expired') }}</span>
+				<span v-if="!expired && poll.expire" class="label success">{{ t('polls', 'Place your votes until %n', 1, dateExpiryString) }}</span>
+				<span v-if="poll.deleted" class="label error">{{ t('polls', 'Deleted') }}</span>
+			</h2>
+			<PollInformation />
+			<VoteHeaderPublic v-if="!getCurrentUser()" />
+
+			<h3 class="description">
+				{{ poll.description ? poll.description : t('polls', 'No description provided') }}
+			</h3>
+		</div>
 
 		<VoteList v-show="!tableMode && options.length" />
 
@@ -179,9 +180,18 @@ export default {
 	margin: 44px 0;
 }
 
+.app-content {
+	display: flex;
+	flex-direction: column;
+	padding: 0 8px;
+}
+.vote__introduction {
+	padding: 8px;
+	background-color: var(--color-main-background);
+}
 .header-actions {
 	display: flex;
-	float: right;
+	justify-content: end;
 }
 
 .icon.icon-settings.active {