refactor(user): ids to classes

1 files changed, 11 insertions, 12 deletions

diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 98991d85..b971abd9 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -85,24 +85,23 @@
 	{:else}
 		<div class="card card-small">
 			<div
-				class="card"
-				id="user-grid"
+				class="card user-grid"
 				style={`background-image: ${
 					userData ? `url(${userData.bannerImage})` : 'none'
 				}; padding: 0;`}
 			>
 				{#if userData}
-					<img src={userData.bannerImage} alt="" id="cover-image" />
+					<img src={userData.bannerImage} alt="" class="cover-image" />
 				{/if}
 
-				<div class="card" id="user-grid-content">
-					<div id="user-grid-avatar">
+				<div class="card user-grid-content">
+					<div class="user-grid-avatar">
 						<a href={`https://anilist.co/user/${userData.name}`} target="_blank">
-							<img src={userData.avatar.large} alt="" width="100vw" id="avatar" />
+							<img src={userData.avatar.large} alt="" width="100vw" class="avatar" />
 						</a>
 					</div>
 
-					<div id="user-grid-content-text">
+					<div>
 						<p>
 							<a
 								href={`https://anilist.co/user/${userData.name}`}
@@ -196,7 +195,7 @@
 {/if}
 
 <style lang="scss">
-	#user-grid-content {
+	.user-grid-content {
 		display: flex;
 		flex-wrap: wrap;
 		column-gap: 1.5em;
@@ -206,14 +205,14 @@
 		border-top-right-radius: 0;
 	}
 
-	#user-grid-avatar {
+	.user-grid-avatar {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 	}
 
-	#avatar {
+	.avatar {
 		border-radius: 8px;
 	}
 
@@ -221,13 +220,13 @@
 		margin: 0 0.625rem;
 	}
 
-	#user-grid {
+	.user-grid {
 		background-size: cover;
 		background-position: center;
 		background-repeat: no-repeat;
 	}
 
-	#cover-image {
+	.cover-image {
 		visibility: hidden;
 		height: 4.5em;
 	}