refactor: Consistent pill items

frontend/src/App.vue

@@ -396,6 +396,11 @@ export default {
 			background-color: var(--white);
 		}
 	}
+
+	.pill {
+		background-color: var(--dark-grey);
+		color: var(--primary-color);
+	}
 }
 
 .christmas-mode {
@@ -2013,4 +2018,26 @@ html {
 .disabled {
 	cursor: not-allowed;
 }
+
+.pill {
+	background-color: var(--light-grey);
+	color: var(--primary-color);
+	padding: 5px 10px;
+	border-radius: 5px;
+	font-size: 14px;
+	font-weight: 600;
+	white-space: nowrap;
+	margin-top: 5px;
+	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+	transition: all 0.2s ease-in-out;
+
+	&:hover,
+	&:focus {
+		filter: brightness(95%);
+	}
+
+	&:not(:last-of-type) {
+		margin-right: 5px;
+	}
+}
 </style>

frontend/src/components/modals/BulkActions.vue

@@ -37,7 +37,7 @@
 					<div
 						v-for="(item, index) in items"
 						:key="`item-${item}`"
-						class="tag"
+						class="pill"
 					>
 						{{ item }}
 						<span
@@ -104,7 +104,7 @@ export default {
 	},
 	methods: {
 		init() {
-			if (this.type.autosuggest)
+			if (this.type.autosuggest && this.type.autosuggestDataAction)
 				this.socket.dispatch(this.type.autosuggestAction, res => {
 					if (res.status === "success") {
 						const { items } = res.data;
@@ -158,22 +158,8 @@ export default {
 	flex: 1;
 }
 
-.tag {
+.pill {
 	display: inline-flex;
-	margin: 5px;
-	padding: 5px 10px;
-	font-size: 14px;
-	font-weight: 600;
-	border-radius: 5px;
-	background-color: var(--primary-color);
-	color: var(--white);
-	transition: all 0.2s ease-in-out;
-
-	&:hover,
-	&:focus {
-		filter: brightness(90%);
-		transition: all 0.2s ease-in-out;
-	}
 
 	.remove-item {
 		font-size: 16px;

frontend/src/pages/Team.vue

@@ -43,6 +43,7 @@
 								<a
 									v-for="project in member.projects"
 									:key="project"
+									class="pill"
 									:href="
 										'https://github.com/Musare/' +
 										project +
@@ -94,6 +95,7 @@
 								<a
 									v-for="project in member.projects"
 									:key="project"
+									class="pill"
 									:href="
 										'https://github.com/Musare/' +
 										project +
@@ -264,10 +266,6 @@ export default {
 			color: var(--light-grey-2);
 		}
 	}
-	.group .card .card-content .projects a,
-	.other-contributors div a {
-		background-color: var(--dark-grey);
-	}
 }
 
 .container {
@@ -384,18 +382,6 @@ h2 {
 				display: flex;
 				flex-wrap: wrap;
 				margin-top: auto;
-
-				a {
-					background: var(--light-grey);
-					height: 30px;
-					padding: 5px;
-					border-radius: 5px;
-					white-space: nowrap;
-					margin-top: 5px;
-					&:not(:last-of-type) {
-						margin-right: 5px;
-					}
-				}
 			}
 		}
 	}