change presentation of expired polls

1 files changed, 36 insertions, 33 deletions

diff --git a/src/js/components/PollList/PollListItem.vue b/src/js/components/PollList/PollListItem.vue
index 3b7e6f7a..c3b3b49a 100644
--- a/src/js/components/PollList/PollListItem.vue
+++ b/src/js/components/PollList/PollListItem.vue
@@ -48,8 +48,8 @@
 		</div>
 	</div>
 
-	<div v-else class="pollListItem poll">
-		<div v-tooltip.auto="pollType" class="thumbnail" :class="[poll.type, {expired : expired}]">
+	<div v-else class="pollListItem poll" :class="{ expired: isExpired }">
+		<div v-tooltip.auto="pollType" class="icon" :class="[poll.type]">
 			{{ pollType }}
 		</div>
 
@@ -81,7 +81,7 @@
 			</ActionButton>
 		</Actions>
 
-		<div v-tooltip.auto="accessType" class="thumbnail access" :class="poll.access">
+		<div v-tooltip.auto="accessType" class="icon" :class="'access-' + poll.access">
 			{{ accessType }}
 		</div>
 
@@ -92,7 +92,7 @@
 		<div class="created ">
 			{{ moment.unix(poll.created).fromNow() }}
 		</div>
-		<div class="expiry" :class="{ expired : poll.expired }">
+		<div class="expiry">
 			{{ timeSpanExpiration }}
 		</div>
 	</div>
@@ -136,8 +136,7 @@ export default {
 	},
 
 	computed: {
-
-		expired() {
+		isExpired() {
 			return (this.poll.expire > 0 && moment.unix(this.poll.expire).diff() < 0)
 		},
 
@@ -151,10 +150,10 @@ export default {
 
 		pollType() {
 			if (this.poll.type === 'textPoll') {
-				// TRANSLATORS This means that this is the type of the poll. Another type is a 'date poll'.
-				return t('polls', 'Poll type')
+				// TRANSLATORS This means that this is the type of the poll. Another type is a 'Date poll'.
+				return t('polls', 'Text based')
 			} else {
-				return t('polls', 'Poll schedule')
+				return t('polls', 'Date poll')
 			}
 		},
 
@@ -232,7 +231,7 @@ export default {
 		flex: auto;
 		height: 4em;
 		align-items: center;
-		padding-left: 44px;
+		padding-left: 52px;
 
 		&> div {
 			cursor: pointer;
@@ -255,6 +254,9 @@ export default {
 				text-overflow: ellipsis;
 			}
 		}
+		&.expired {
+			opacity: 0.3;
+		}
 	}
 
 	.poll-title {
@@ -294,38 +296,39 @@ export default {
 	}
 }
 
-.thumbnail {
-	flex: 0 0 auto;
+.icon {
+	flex: 0 0 44px;
 	width: 44px;
 	height: 44px;
 	padding-right: 4px;
 	font-size: 0;
-	background-color: var(--color-text-light);
+	// background-size: 16px 16px;
+	background-repeat: no-repeat;
+	background-position: center;
+	// background-color: var(--color-text-light);
 	&.datePoll {
-		mask-image: var(--icon-calendar-000) no-repeat 50% 50%;
-		-webkit-mask: var(--icon-calendar-000) no-repeat 50% 50%;
-		mask-size: 16px;
+		background-image: var(--icon-calendar-000)
+		// mask-image: var(--icon-calendar-000) no-repeat 50% 50%;
+		// -webkit-mask: var(--icon-calendar-000) no-repeat 50% 50%;
+		// mask-size: 16px;
 	}
 	&.textPoll {
-		mask-image: var(--icon-organization-000) no-repeat 50% 50%;
-		-webkit-mask: var(--icon-organization-000) no-repeat 50% 50%;
-		mask-size: 16px;
+		background-image: var(--icon-organization-000)
+		// mask-image: var(--icon-organization-000) no-repeat 50% 50%;
+		// -webkit-mask: var(--icon-organization-000) no-repeat 50% 50%;
+		// mask-size: 16px;
 	}
-	&.expired {
-		background-color: var(--color-background-darker);
+	&.access-hidden {
+		background-image: var(--icon-password-000)
+		// mask-image: var(--icon-password-000) no-repeat 50% 50%;
+		// -webkit-mask: var(--icon-password-000) no-repeat 50% 50%;
+		// mask-size: 16px;
 	}
-	&.access {
-		display: inherit;
-		&.hidden {
-			mask-image: var(--icon-password-000) no-repeat 50% 50%;
-			-webkit-mask: var(--icon-password-000) no-repeat 50% 50%;
-			mask-size: 16px;
-		}
-		&.public {
-			mask-image: var(--icon-link-000) no-repeat 50% 50%;
-			-webkit-mask: var(--icon-link-000) no-repeat 50% 50%;
-			mask-size: 16px;
-		}
+	&.access-public {
+		background-image: var(--icon-link-000)
+		// mask-image: var(--icon-link-000) no-repeat 50% 50%;
+		// -webkit-mask: var(--icon-link-000) no-repeat 50% 50%;
+		// mask-size: 16px;
 	}
 }