[F] Fix build warnings

AquaNet/src/components/ActionCard.svelte

@@ -52,7 +52,7 @@
       filter: drop-shadow(0 0 12px rgba(var(--card-color), 0.5))
       outline-color: rgba(var(--card-color), 0.5)
 
-    span
+    :global(span)
       font-size: 1.2rem
       display: block
       margin-bottom: 0.5rem

AquaNet/src/components/CommunityCard.svelte

@@ -39,7 +39,7 @@
       filter: drop-shadow(0 0 12px rgba(var(--card-color), 0.5))
       outline-color: rgba(var(--card-color), 0.5)
 
-    span
+    :global(span)
       font-size: 1.2rem
       display: block
       margin-bottom: 0.5rem

AquaNet/src/components/RatingComposition.svelte

@@ -32,10 +32,4 @@
     // 3 columns
     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))
     gap: vars.$gap
-
-  .rating-composition-2
-    display: grid
-    // 2 columns
-    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr))
-    gap: vars.$gap
 </style>

AquaNet/src/components/UserBox.svelte

@@ -434,37 +434,10 @@
 <style lang="sass">
     @use "../vars"
 
-    .outer-container
-        display: flex
-        flex-direction: column
-        gap: 1rem
-
-        nav
-            display: flex
-            gap: 1rem
-
-            div
-                padding: 0.5rem 1rem
-                border-radius: 0.4rem
-                cursor: pointer
-                transition: background-color 0.2s
-                font-weight: 500
-
-                &.active
-                    color: vars.$c-main
-
     img
         width: 100%
         height: auto
 
-    .container
-      display: flex
-      flex-direction: row
-      gap: 3rem
-
-      @media (max-width: vars.$w-max)
-        flex-direction: column
-
     .preview
         display: flex
         flex-direction: column

AquaNet/src/components/UserCard.svelte

@@ -23,7 +23,7 @@
   <div>Error: {error}</div>
 {:else}
   <div class="user-card">
-    <img use:pfp={data.aquaUser} alt="Profile Picture" />
+    <img use:pfp={data.aquaUser} alt="Profile" />
     <div class="details">
       <span class="in-game-name">{data.name}</span>
       <span class="username">@{username}</span>

AquaNet/src/pages/Home/LinkCard.svelte

@@ -222,7 +222,7 @@
           <span class="type">{card.isGhost ? t('home.linkcard.account-card') : cardType(card.luid)}</span>
           <span class="register">{t('home.linkcard.registered')}: {moment(card.registerTime).format("YYYY MMM DD")}</span>
           <span class="last">{t('home.linkcard.lastused')}: {moment(card.accessTime).format("YYYY MMM DD")}</span>
-          <div/>
+          <div></div>
           <span class="id">{formatLUID(card.luid, card.isGhost)}</span>
           {#if !card.isGhost}
             <button class="icon error" on:click={() => unlink(card)}><Icon icon="tabler:trash-x-filled"/></button>
@@ -334,30 +334,30 @@
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
       gap: 1rem
 
-      .existing.card
+    .existing-cards .existing.card
-        min-height: 90px
+      min-height: 90px
-        position: relative
+      position: relative
-        overflow: hidden
+      overflow: hidden
 
-        *
+      *
-          white-space: nowrap
+        white-space: nowrap
 
-        &.ghost
+      &.ghost
-          background: rgba(vars.$c-darker, 0.8)
+        background: rgba(vars.$c-darker, 0.8)
 
-        .register, .last
+      .register, .last
-          opacity: 0.7
+        opacity: 0.7
 
-        span:not(.type)
+      span:not(.type)
-          font-size: 0.8rem
+        font-size: 0.8rem
 
-        > div
+      > div
-          flex: 1
+        flex: 1
 
-        button
+      button
-          position: absolute
+        position: absolute
-          right: 10px
+        right: 10px
-          bottom: 10px
+        bottom: 10px
 
     .conflict-cards
       .card

AquaNet/src/pages/Ranking.svelte

@@ -38,7 +38,7 @@
 
   {#if d}
     <div class="leaderboard-container">
-      <div class="lb-user" on:mouseenter={() => hoveringUser = d.users[0].username}>
+      <div class="lb-user" on:mouseenter={() => hoveringUser = d.users[0].username} role="heading" aria-level="2">
         <span class="rank">{t("Leaderboard.Rank")}</span>
         <span class="name"></span>
         <span class="rating">{t("Leaderboard.Rating")}</span>
@@ -47,7 +47,9 @@
         <span class="ap">{t("Leaderboard.AP")}</span>
       </div>
       {#each d.users as user, i (user.rank)}
-        <div class="lb-user" class:alternate={i % 2 === 1} on:mouseover={() => hoveringUser = user.username}>
+        <div class="lb-user" class:alternate={i % 2 === 1} role="listitem"
+          on:mouseover={() => hoveringUser = user.username} on:focus={() => {}}>
+
           <span class="rank">#{user.rank}</span>
           <span class="name">
             {#if user.username !== ""}

AquaNet/src/pages/UserHome.svelte

@@ -109,9 +109,10 @@
       <div class="name-box">
         <h2>{d.user.name}</h2>
         {#if typeof d.user.rival === 'boolean' && game === 'mai2'}
-          <a class="clickable" on:click={()=>setRival(!d.user.rival)}>
+          <span class="clickable" on:click={() => setRival(!d?.user.rival)} role="button" tabindex="0"
+             on:keydown={e => e.key === "Enter" && setRival(!d?.user.rival)}>
             {d.user.rival ? t("UserHome.RemoveRival") : t("UserHome.AddRival")}
-          </a>
+          </span>
         {/if}
         {#if me && me.username === username}
           <a class="setting-icon clickable" use:tooltip={t("UserHome.Settings")} href="/settings">
@@ -219,7 +220,7 @@
     <div>
       <h2>{t('UserHome.PlayActivity')}</h2>
       <div class="activity-info">
-        <div class="hide-scrollbar" id="cal-heatmap" bind:this={calElement} />
+        <div class="hide-scrollbar" id="cal-heatmap" bind:this={calElement}></div>
 
         <div class="info-bottom">
           <div class="plays">