Add icons for all settings dropdowns

src/components/list/list-settings-dropdown.vue

@@ -3,53 +3,63 @@
 		<template v-if="isSavedFilter">
 			<dropdown-item
 				:to="{ name: `${listRoutePrefix}.settings.edit`, params: { listId: list.id } }"
+				icon="pen"
 			>
-				Edit this filter
+				Edit
 			</dropdown-item>
 			<dropdown-item
 				:to="{ name: `${listRoutePrefix}.settings.delete`, params: { listId: list.id } }"
+				icon="trash-alt"
 			>
-				Delete this filter
+				Delete
 			</dropdown-item>
 		</template>
-		<template v-if="list.isArchived">
+		<template v-else-if="list.isArchived">
 			<dropdown-item
 				:to="{ name: `${listRoutePrefix}.settings.archive`, params: { listId: list.id } }"
+				icon="archive"
 			>
-				Un-Archive this list
+				Un-Archive
 			</dropdown-item>
 		</template>
 		<template v-else>
 			<dropdown-item
 				:to="{ name: `${listRoutePrefix}.settings.edit`, params: { listId: list.id } }"
+				icon="pen"
 			>
-				Edit this list
+				Edit
 			</dropdown-item>
 			<dropdown-item
 				:to="{ name: `${listRoutePrefix}.settings.background`, params: { listId: list.id } }"
 				v-if="backgroundsEnabled"
+				icon="image"
 			>
-				Set list background
+				Set background
 			</dropdown-item>
 			<dropdown-item
 				:to="{ name: `${listRoutePrefix}.settings.share`, params: { listId: list.id } }"
+				icon="share-alt"
 			>
-				Share this list
+				Share
 			</dropdown-item>
 			<dropdown-item
 				:to="{ name: `${listRoutePrefix}.settings.duplicate`, params: { listId: list.id } }"
+				icon="paste"
 			>
-				Duplicate this list
+				Duplicate
 			</dropdown-item>
 			<dropdown-item
 				:to="{ name: `${listRoutePrefix}.settings.archive`, params: { listId: list.id } }"
+				icon="archive"
 			>
-				Archive this list
+				Archive
 			</dropdown-item>
 			<dropdown-item
 				:to="{ name: `${listRoutePrefix}.settings.delete`, params: { listId: list.id } }"
+				icon="trash-alt"
+				class="has-text-danger"
 			>
-				Delete this list
+				Delete
 			</dropdown-item>
 		</template>
 	</dropdown>

src/components/namespace/namespace-settings-dropdown.vue

@@ -5,35 +5,40 @@
 				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
 				icon="archive"
 			>
-				Un-Archive this namespace
+				Un-Archive
 			</dropdown-item>
 		</template>
 		<template v-else>
 			<dropdown-item
 				:to="{ name: 'namespace.settings.edit', params: { id: namespace.id } }"
+				icon="pen"
 			>
-				Edit this namespace
+				Edit
 			</dropdown-item>
 			<dropdown-item
 				:to="{ name: 'namespace.settings.share', params: { id: namespace.id } }"
+				icon="share-alt"
 			>
-				Share this namespace
+				Share
 			</dropdown-item>
 			<dropdown-item
 				:to="{ name: 'list.create', params: { id: namespace.id } }"
+				icon="plus"
 			>
-				Create a new list
+				New list
 			</dropdown-item>
 			<dropdown-item
 				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
 				icon="archive"
 			>
-				Archive this namespace
+				Archive
 			</dropdown-item>
 			<dropdown-item
 				:to="{ name: 'namespace.settings.delete', params: { id: namespace.id } }"
+				icon="trash-alt"
+				class="has-text-danger"
 			>
-				Delete this namespace
+				Delete
 			</dropdown-item>
 		</template>
 	</dropdown>

src/main.js

@@ -59,6 +59,8 @@ import {
 	faCocktail,
 	faEllipsisH,
 	faArchive,
+	faShareAlt,
+	faImage,
 } from '@fortawesome/free-solid-svg-icons'
 import {faCalendarAlt, faClock, faComments, faSave, faStar, faTimesCircle, faSun} from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
@@ -148,6 +150,8 @@ library.add(faCoffee)
 library.add(faCocktail)
 library.add(faEllipsisH)
 library.add(faArchive)
+library.add(faShareAlt)
+library.add(faImage)
 
 Vue.component('icon', FontAwesomeIcon)
 

src/styles/theme/theme.scss

@@ -75,9 +75,15 @@ button.table {
 .dropdown-item {
   display: flex;
   align-items: center;
+  justify-content: left !important;
 
   .icon {
     padding-right: .5rem;
+    color: $grey-300 !important;
+  }
+
+  &.has-text-danger .icon {
+    color: $danger !important;
   }
 
   &.is-disabled {