From 302077c9c12fa116ffdaabb19f279c66d88a343d Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Mon, 24 May 2021 17:16:07 +0100
Subject: [PATCH] Use .menu styling for other menu-y things

---
 src/components/sidebar/PlayerList.vue     |  2 +-
 src/components/sidebar/PlayerListItem.vue | 14 +-------------
 src/components/sidebar/ServerList.vue     |  6 +-----
 src/components/sidebar/ServerListItem.vue | 17 -----------------
 src/scss/style.scss                       |  5 +++++
 5 files changed, 8 insertions(+), 36 deletions(-)

diff --git a/src/components/sidebar/PlayerList.vue b/src/components/sidebar/PlayerList.vue
index 94563f8..720ecf8 100644
--- a/src/components/sidebar/PlayerList.vue
+++ b/src/components/sidebar/PlayerList.vue
@@ -17,7 +17,7 @@
 <template>
 	<section class="sidebar__section sidebar__section--players">
 		<span class="section__heading">{{ heading }} [{{ players.size }}/{{ maxPlayers }}]</span>
-		<ul class="section__content">
+		<ul class="section__content menu">
 			<PlayerListItem v-for="[account, player] in players" :key="account" :player="player"></PlayerListItem>
 			<li v-if="!players.size" class="section__skeleton">{{ skeletonPlayers }}</li>
 		</ul>
diff --git a/src/components/sidebar/PlayerListItem.vue b/src/components/sidebar/PlayerListItem.vue
index 9e4fb42..96468bf 100644
--- a/src/components/sidebar/PlayerListItem.vue
+++ b/src/components/sidebar/PlayerListItem.vue
@@ -104,13 +104,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 	.player {
-		position: relative;
-		display: block;
-		line-height: 3rem;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-
 		.player__icon {
 			position: absolute;
 			display: block;
@@ -123,12 +116,7 @@ export default defineComponent({
 		}
 
 		.player__name {
-			padding: 0.8rem 0 0.7rem 3.5rem;
-			text-align: left;
-			margin: 0;
-			width: 100%;
-			height: 100%;
-			min-height: 3.2rem;
+			padding-left: 3.5rem;
 		}
 
 		&.player--hidden {
diff --git a/src/components/sidebar/ServerList.vue b/src/components/sidebar/ServerList.vue
index 753caee..e6edf12 100644
--- a/src/components/sidebar/ServerList.vue
+++ b/src/components/sidebar/ServerList.vue
@@ -17,7 +17,7 @@
 <template>
 	<section class="sidebar__section" v-if="servers.size > 1">
 		<span class="section__heading">{{ heading }}</span>
-		<ul class="section__content">
+		<ul class="section__content menu">
 			<ServerListItem :server="server" v-for="[name, server] in servers" :key="name"></ServerListItem>
 		</ul>
 	</section>
@@ -46,7 +46,3 @@ export default defineComponent({
 });
 
 </script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/sidebar/ServerListItem.vue b/src/components/sidebar/ServerListItem.vue
index f9b7bad..d34944b 100644
--- a/src/components/sidebar/ServerListItem.vue
+++ b/src/components/sidebar/ServerListItem.vue
@@ -50,20 +50,3 @@ export default defineComponent({
 	}
 });
 </script>
-
-<style lang="scss" scoped>
-	@import '../../scss/placeholders';
-
-	.server {
-		height: 3.2rem;
-
-		button {
-			@extend %button;
-			text-align: left;
-			display: block;
-			height: 100%;
-			width: 100%;
-			border-radius: 0.5rem;
-		}
-	}
-</style>
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 94e03cf..0f3bec4 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -154,14 +154,19 @@ input {
 	> li {
 		display: flex;
 		padding: 0.8rem 0.8rem 0.7rem;
+		position: relative;
 		margin: 0 !important;
 
 		> button {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
 			margin: -0.8rem -0.8rem -0.7rem;
 			padding: 0.8rem 0.8rem 0.7rem;
 			text-align: left;
 			flex-grow: 1;
 			min-height: 3.2rem;
+			border-radius: 0.5rem;
 		}
 	}
 }