availabili.tf/src/assets/base.css

@@ -34,7 +34,7 @@
 
   --surface-0: #ccd0da;
   --base: #eff1f5;
-  --base-0: #fcfdfe;
+  --base-extra: #f5f6f7;
   --mantle: #e6e9ef;
   --crust: #dce0e8;
 
@@ -58,7 +58,6 @@
 
   --lavender: #7287fd;
   --accent: var(--lavender);
-  --accent-0: color-mix(in srgb, var(--accent),  var(--text) 50%);
   --lavender-transparent: color-mix(in srgb, var(--lavender), transparent 80%);
   --accent-transparent-80: color-mix(in srgb, var(--accent), transparent 80%);
   --accent-transparent-50: color-mix(in srgb, var(--accent), transparent 50%);
@@ -85,19 +84,18 @@
   --sapphire: #7dc4e4;
   --blue: #8aadf4;
   --lavender: #b7bdf8;
-  --text: #dad3d5;
+  --text: #cad3f5;
-  --subtext-1: #bec0c0;
+  --subtext-1: #b8c0e0;
-  --subtext-0: #abada5;
+  --subtext-0: #a5adcb;
-  --overlay-2: #9a9a9a;
+  --overlay-2: #939ab7;
-  --overlay-1: #8b8b8b;
+  --overlay-1: #8087a2;
-  --overlay-0: #717171;
+  --overlay-0: #6e738d;
-  --surface-2: #575757;
+  --surface-2: #5b6078;
-  --surface-1: #3f3f3f;
+  --surface-1: #494d64;
-  --surface-0: #2f2f2f;
+  --surface-0: #363a4f;
-  --base: #181818;
+  --base: #24273a;
-  --base-0: #242424;
+  --mantle: #1e2030;
-  --mantle: #121212;
+  --crust: #181926;
-  --crust: #0f0f0f;
   --destructive: var(--red);
 */
 }

availabili.tf/src/assets/main.css

@@ -24,8 +24,8 @@ button {
   align-items: center;
   gap: 4px;
   color: var(--text);
-  background-color: var(--base-0);
+  background-color: var(--crust);
-  border: 1px solid var(--surface-0);
+  border: none;
   padding: 6px 20px;
   line-height: 1.6;
   border-radius: 4px;
@@ -46,10 +46,6 @@ button {
   transition-duration: 200ms;
 }
 
-button.no-border {
-  border: none;
-}
-
 button.icon-end {
   justify-content: space-between;
 }
@@ -57,7 +53,6 @@ button.icon-end {
 button.icon {
   background-color: transparent;
   padding: 8px;
-  border: none;
 }
 
 button.icon:hover {
@@ -99,7 +94,6 @@ button:hover {
 button.accent {
   background-color: var(--accent);
   color: var(--base);
-  border-color: var(--accent-0);
   /*text-transform: uppercase;*/
 }
 
@@ -254,11 +248,6 @@ textarea {
   resize: vertical;
 }
 
-input:focus, textarea:focus {
-  box-shadow: 1px 1px 8px var(--surface-0);
-  outline: none;
-}
-
 .form-group {
   display: flex;
   flex-direction: column;
@@ -292,7 +281,7 @@ hr {
 }
 
 [role="menu"], [role="listbox"] {
-  background-color: var(--base-0);
+  background-color: var(--base);
   border: 1px solid var(--overlay-0);
   border-radius: 4px;
   padding: 4px 0 4px 0;
@@ -310,10 +299,9 @@ hr {
 }
 
 [role="menu"] button {
-  background-color: var(--base-0);
+  background-color: var(--base);
   width: 100%;
   border-radius: 0;
-  border: none;
 }
 
 [role="menu"] button.destructive {
@@ -347,7 +335,7 @@ hr {
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
-  background-color: var(--base-0);
+  background-color: var(--base);
   z-index: 10;
   animation: smooth-appear 0.2s ease;
 }
@@ -375,49 +363,3 @@ div.banner.info {
   background-color: var(--lavender-transparent);
   color: var(--lavender);
 }
-
-table {
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-th:first-child {
-  border-top-left-radius: 4px;
-  border-left: 1px solid var(--surface-0);
-}
-
-th {
-  text-align: left;
-  padding: 0.5rem 1rem;
-  border-top: 1px solid var(--surface-0);
-  border-bottom: 1px solid var(--surface-0);
-  font-size: 10pt;
-}
-
-th:last-child {
-  border-top-right-radius: 4px;
-  border-right: 1px solid var(--surface-0);
-}
-
-td {
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid var(--surface-0);
-  background-color: var(--base-0);
-  font-size: 10pt;
-}
-
-td:first-child {
-  border-left: 1px solid var(--surface-0);
-}
-
-td:last-child {
-  border-right: 1px solid var(--surface-0);
-}
-
-tr:last-child > td:first-child {
-  border-bottom-left-radius: 4px;
-}
-
-tr:last-child > td:last-child {
-  border-bottom-right-radius: 4px;
-}

availabili.tf/src/components/AvailabilityGrid.vue

@@ -8,7 +8,6 @@ const scheduleStore = useScheduleStore();
 const model = defineModel<number[]>({ required: true });
 
 const selectedTime = defineModel("selectedTime");
-const selectedIndex = defineModel("selectedIndex");
 
 const hoveredIndex = defineModel("hoveredIndex");
 
@@ -143,20 +142,11 @@ function onSlotMouseUp(_: MouseEvent) {
 }
 
 function onSlotClick(dayIndex: number, hour: number) {
-  let index = dayIndex * 24 + hour;
-
   if (isEditing.value) {
     return;
   }
 
-  if (selectedIndex.value == index) {
-    selectedIndex.value = -1;
-    selectedTime.value = undefined;
-    return;
-  }
-
   selectedTime.value = getTimeAtCell(dayIndex, hour);
-  selectedIndex.value = index;
   scheduleStore.selectIndex(24 * dayIndex + hour);
 }
 
@@ -245,7 +235,6 @@ function getHour(offset: number, tz?: string) {
           :class="{
             'time-slot': true,
             'height-24px': true,
-            'selected': selectedIndex == 24 * dayIndex + hour,
           }"
           :selection="
             selectionInside(dayIndex, hour) ? selectionValue
@@ -326,34 +315,9 @@ function getHour(offset: number, tz?: string) {
   font-weight: 700;
 }
 
-.time-slot:hover, .time-slot.selected {
-  outline: 2px inset var(--subtext-0);
-}
-
-.time-slot.selected {
-  outline-style: solid;
-  animation: pulse 1s infinite;
-}
-
-.time-slot.selected:hover {
-  outline-style: solid;
-}
-
-@keyframes pulse {
-  0% {
-    outline-color: var(--overlay-0);
-  }
-  50% {
-    outline-color: var(--text);
-  }
-  100% {
-    outline-color: var(--overlay-0);
-  }
-}
-
 .time-slot:hover {
   background-color: var(--crust);
-  outline-style: dashed;
+  outline: 2px inset var(--subtext-0);
 }
 
 .time-slot:nth-child(2n):not(:last-child) {

availabili.tf/src/components/EventCard.vue

@@ -109,8 +109,7 @@ h3 {
 .event-card {
   display: flex;
   align-items: center;
-  background-color: var(--base-0);
+  /*background-color: white;*/
-  border-radius: 8px;
   align-items: stretch;
 }
 
@@ -140,7 +139,7 @@ h3 {
 
 .details {
   padding: 1rem;
-  border: 1px solid var(--surface-0);
+  border: 1px solid var(--text);
   border-radius: 0 8px 8px 0;
   display: flex;
   flex-direction: column;

availabili.tf/src/components/EventConfirmButton.vue

@@ -113,12 +113,11 @@ const selectedOption = computed({
 <style scoped>
 .event-confirm-button {
   display: flex;
-  gap: 0px;
+  gap: 2px;
 }
 
 .left {
   border-radius: 4px 0 0 4px;
-  border-right: none;
 }
 
 .right {
@@ -129,10 +128,5 @@ const selectedOption = computed({
 .confirmed button.recolor {
   background-color: var(--text);
   color: var(--base);
-  border-color: var(--text);
-}
-
-.confirmed .left.recolor {
-  border-right: 1px solid var(--surface-0);
 }
 </style>

availabili.tf/src/components/EventList.vue

@@ -1,36 +1,16 @@
 <script setup lang="ts">
 import type { EventWithPlayerSchema, TeamSchema } from "@/client";
 import EventCard from "./EventCard.vue";
-import { onMounted, ref } from "vue";
-import { useTeamDetails } from "@/composables/team-details";
-import { useTeamsStore } from "@/stores/teams";
-import { useTeamsEventsStore } from "@/stores/teams/events";
-import LoaderContainer from "./LoaderContainer.vue";
-import { computed } from "@vue/reactivity";
 
-const { teamId, team } = useTeamDetails();
+const props = defineProps<{
-
+  events: EventWithPlayerSchema[];
-const teamsStore = useTeamsStore();
+  teamContext: TeamSchema;
-const teamsEventsStore = useTeamsEventsStore();
+}>();
-const isLoading = ref(false);
-const events = computed(() => teamsEventsStore.teamEvents[teamId.value]);
-
-onMounted(() => {
-  isLoading.value = true;
-  teamsStore.fetchTeam(teamId.value)
-    .then(() => {
-      teamsEventsStore.fetchTeamEvents(teamId.value)
-        .finally(() => isLoading.value = false);
-    });
-});
 </script>
 
 <template>
-  <LoaderContainer v-if="isLoading" height="160">
+  <div class="events-list" v-if="props.events?.length > 0">
-    <rect x="0" y="0" rx="4" ry="4" width="100%" height="160" />
+    <EventCard v-for="event in props.events" :key="event.event.id" :event="event" />
-  </LoaderContainer>
-  <div class="events-list" v-else-if="events?.length > 0">
-    <EventCard v-for="event in events" :key="event.event.id" :event="event" />
   </div>
   <div class="events-list" v-else>
     <em class="subtext">
@@ -39,7 +19,7 @@ onMounted(() => {
         :to="{
           name: 'schedule',
           query: {
-            teamId,
+            teamId: props.teamContext.id
           }
         }"
       >

availabili.tf/src/components/InviteEntry.vue

@@ -42,16 +42,14 @@ function revokeInvite() {
     <td>
       {{ createdAt }}
     </td>
-    <td>
+    <td class="buttons">
-      <div class="buttons">
       <button @click="copyLink">
         <i class="bi bi-link margin" />
         Copy Link
       </button>
-        <button class="icon" @click="revokeInvite">
+      <button class="destructive" @click="revokeInvite">
         <i class="bi bi-trash" />
       </button>
-      </div>
     </td>
   </tr>
 </template>

availabili.tf/src/components/LoaderContainer.vue

@@ -1,24 +1,11 @@
 <script setup lang="ts">
-import { ContentLoader } from "vue-content-loader";
+import Loader from './Loader.vue';
-
-const props = defineProps<{
-  width?: string;
-  height?: string;
-  speed?: number;
-}>();
-
-// get primary color from var(--overlay-0) and secondary from var(--overlay-1)
-const primaryColor = getComputedStyle(document.documentElement).getPropertyValue("--surface-0");
-
-const secondaryColor = getComputedStyle(document.documentElement).getPropertyValue("--overlay-0");
 </script>
 
 <template>
-  <!--ContentLoader :width="width" :height="height" :speed="speed">
+  <div class="loader-container">
-  </ContentLoader-->
+    <Loader />
-  <component :is="ContentLoader" v-bind="{ ...props, primaryColor, secondaryColor }">
+  </div>
-    <slot></slot>
-  </component>
 </template>
 
 <style scoped>

availabili.tf/src/components/MatchCard.vue

@@ -65,8 +65,7 @@ const props = defineProps<{
   display: flex;
   flex-direction: column;
   padding: 1rem;
-  border: 1px solid var(--surface-0);
+  border: 1px solid var(--text);
-  background-color: var(--base-0);
   border-radius: 8px;
   gap: 0.5rem;
 }

availabili.tf/src/components/MembersList.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { useTeamsStore } from "../stores/teams";
 import { useRoute, useRouter, RouterLink } from "vue-router";
-import { computed, onMounted, ref } from "vue";
+import { computed } from "vue";
 import { useTeamDetails } from "../composables/team-details";
 import PlayerTeamCard from "../components/PlayerTeamCard.vue";
-import LoaderContainer from "./LoaderContainer.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -16,13 +15,16 @@ const {
   availableMembersNextHour,
   teamMembers,
 } = useTeamDetails();
-const isLoading = ref(false);
 
-onMounted(() => {
+function leaveTeam() {
-  isLoading.value = true;
+  teamsStore.leaveTeam(team.value.id)
-  teamsStore.fetchTeamMembers(team.value.id)
+    .then(() => {
-    .finally(() => isLoading.value = false);
+      teamsStore.fetchTeams()
+        .then(() => {
+          router.push("/");
+        })
     });
+}
 </script>
 
 <template>
@@ -37,21 +39,7 @@ onMounted(() => {
     <div class="team-details-button-group">
     </div>
   </div>
-  <LoaderContainer v-if="isLoading">
+  <table class="member-table">
-    <rect x="0" y="10" rx="3" ry="3" width="100%" height="10" />
-    <rect x="0" y="30" rx="3" ry="3" width="100%" height="10" />
-    <rect x="0" y="50" rx="3" ry="3" width="100%" height="10" />
-    <rect x="0" y="70" rx="3" ry="3" width="100%" height="10" />
-  </LoaderContainer>
-  <table class="member-table" v-else>
-    <thead>
-      <tr>
-        <th>Username</th>
-        <th>Roles</th>
-        <th>Playtime</th>
-        <th></th>
-      </tr>
-    </thead>
     <tbody>
       <PlayerTeamCard
         v-for="member in teamMembers"
@@ -79,6 +67,12 @@ table.member-table {
   width: 100%;
 }
 
+table.member-table th {
+  text-align: left;
+  padding-left: 2em;
+  font-weight: 700;
+}
+
 .team-details-button-group {
   flex: 1;
   display: flex;

availabili.tf/src/components/PlayerCard.vue

@@ -82,14 +82,14 @@ const playtime = computed(() => {
 
 <style scoped>
 .player-card {
-  background-color: var(--base-0);
+  background-color: white;
   padding: 1em;
   border-radius: 8px;
   user-select: none;
   display: flex;
   gap: 1em;
   align-items: center;
-  border: 2px solid var(--surface-0);
+  border: 2px solid white;
   box-shadow: 1px 1px 8px var(--surface-0);
 }
 
@@ -122,13 +122,13 @@ const playtime = computed(() => {
 }
 
 .player-card.no-player {
-  border: 2px dashed var(--overlay-0);
+  border: 2px solid var(--overlay-0);
   box-shadow: none;
 }
 
 .player-card.no-player.selected {
   background-color: var(--accent-transparent);
-  border: 2px dashed var(--accent);
+  border: 2px solid var(--accent);
   color: var(--accent);
 }
 

availabili.tf/src/components/PlayerTeamCard.vue

@@ -180,7 +180,7 @@ const rightIndicator = computed(() => {
           No roles
         </span>
         <div class="edit-group">
-          <button v-if="!isEditing" class="icon" @click="isEditing = true">
+          <button v-if="!isEditing" @click="isEditing = true">
             <i class="bi bi-pencil-fill edit-icon" />
           </button>
         </div>
@@ -197,10 +197,10 @@ const rightIndicator = computed(() => {
     <td>
       <div class="edit-group">
         <template v-if="isEditing">
-          <button class="editing icon" @click="cancelEdit()">
+          <button class="editing" @click="cancelEdit()">
             <i class="bi bi-x-lg" />
           </button>
-          <button class="editing icon" @click="updateRoles()">
+          <button class="editing" @click="updateRoles()">
             <i class="bi bi-check-lg" />
           </button>
         </template>
@@ -314,6 +314,10 @@ a.player-name:hover {
   opacity: 1;
 }
 
+.edit-group > button.editing {
+  opacity: 1;
+}
+
 @media (max-width: 1024px) {
   .player-card > td {
     padding: 0.5em 0em;

availabili.tf/src/components/ProfileDropdown.vue

@@ -18,7 +18,7 @@ function logout() {
 
 <template>
   <DropdownMenuRoot>
-    <DropdownMenuTrigger className="profile-button no-border">
+    <DropdownMenuTrigger className="profile-button">
       {{ authStore.username }}
       <i class="bi bi-chevron-down" />
     </DropdownMenuTrigger>

availabili.tf/src/components/RoleTag.vue

@@ -47,7 +47,6 @@ function toggle(isMain: boolean) {
     </div>
     <button
       :class="{
-        'no-border': true,
         'center': true,
         'selected': roleObject?.isMain
       }"
@@ -57,7 +56,6 @@ function toggle(isMain: boolean) {
     </button>
     <button
       :class="{
-        'no-border': true,
         'right': true,
         'selected': !(roleObject?.isMain ?? true)
       }"

availabili.tf/src/components/TeamsListSidebar.vue

@@ -5,7 +5,6 @@ import { RouterLink } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import InviteKeyDialog from "./InviteKeyDialog.vue";
 import { ContentLoader } from "vue-content-loader";
-import LoaderContainer from "./LoaderContainer.vue";
 
 const teams = useTeamsStore();
 const isLoading = ref(false);
@@ -44,13 +43,17 @@ onMounted(() => {
     <div v-if="!authStore.isLoggedIn">
       Log in to view your teams.
     </div>
-    <div v-else-if="isLoading">
+    <div v-else-if="isLoading || true">
-      <LoaderContainer>
+      <ContentLoader :speed="1">
-        <rect x="0" y="15" rx="5" ry="5" width="220" height="10" />
+        <circle cx="10" cy="20" r="8" />
-        <rect x="0" y="45" rx="5" ry="5" width="220" height="10" />
+        <rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
-        <rect x="0" y="75" rx="5" ry="5" width="220" height="10" />
+        <circle cx="10" cy="50" r="8" />
-        <rect x="0" y="105" rx="5" ry="5" width="220" height="10" />
+        <rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
-      </LoaderContainer>
+        <circle cx="10" cy="80" r="8" />
+        <rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
+        <circle cx="10" cy="110" r="8" />
+        <rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
+      </ContentLoader>
     </div>
     <div
       v-else-if="teams.teamsWithRole"

availabili.tf/src/components/WeekSelectionBox.vue

@@ -21,11 +21,11 @@ function incrementDate(delta: number) {
 
 <template>
   <div class="scroll-box">
-    <button class="transparent icon" @click="incrementDate(-1)" :disabled="isDisabled">
+    <button class="transparent eq" @click="incrementDate(-1)" :disabled="isDisabled">
       <i class="bi bi-caret-left-fill"></i>
     </button>
     <span class="date-range">{{ dateStart }} &ndash; {{ dateEnd }}</span>
-    <button class="transparent icon" @click="incrementDate(1)" :disabled="isDisabled">
+    <button class="transparent eq" @click="incrementDate(1)" :disabled="isDisabled">
       <i class="bi bi-caret-right-fill"></i>
     </button>
   </div>

availabili.tf/src/views/ScheduleView.vue

@@ -189,6 +189,7 @@ main {
 
 .radio-group {
   display: flex;
+  gap: 2px;
 }
 
 button.radio {
@@ -206,7 +207,6 @@ button.radio.selected {
 
 button.left {
   border-radius: 4px 0 0 4px;
-  border-right-width: 0px;
 }
 
 button.radio.left.selected {

availabili.tf/src/views/TeamDetailsView.vue

@@ -11,7 +11,6 @@ import { useTeamsEventsStore } from "@/stores/teams/events";
 import MatchCard from "@/components/MatchCard.vue";
 import { useMatchesStore } from "@/stores/matches";
 import { ContentLoader } from "vue-content-loader";
-import LoaderContainer from "@/components/LoaderContainer.vue";
 
 const route = useRoute();
 const teamsStore = useTeamsStore();
@@ -37,8 +36,8 @@ onMounted(() => {
   let doFetchTeam = () => {
     teamsStore.fetchTeam(teamId.value)
       .then(() => {
-        //teamsStore.fetchTeamMembers(teamId.value);
+        teamsStore.fetchTeamMembers(teamId.value);
-        //teamsEventsStore.fetchTeamEvents(teamId.value);
+        teamsEventsStore.fetchTeamEvents(teamId.value);
         matchesStore.fetchRecentMatchesForTeam(teamId.value, 5);
         isLoading.value = false;
       });
@@ -60,10 +59,10 @@ onMounted(() => {
         <div class="left">
           <center class="margin">
             <h1>
-              <template v-if="isLoading">
+              <template v-if="isLoading || true">
-                <LoaderContainer view-box="0 0 250 10">
+                <content-loader view-box="0 0 250 10">
                   <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
-                </LoaderContainer>
+                </content-loader>
               </template>
               <template v-else>
                 {{ team.teamName }}
@@ -89,7 +88,7 @@ onMounted(() => {
         </div>
         <div class="right">
           <h2>Upcoming Events</h2>
-          <EventList />
+          <EventList :events="events" :team-context="team" />
           <h2 id="recent-matches-header">
             Recent Matches
             <RouterLink class="button" :to="{ name: 'team-settings/matches' }">
@@ -98,15 +97,15 @@ onMounted(() => {
               </button>
             </RouterLink>
           </h2>
+          <em class="subtext" v-if="!matches">
+            No recent matches.
+          </em>
           <MatchCard
-            v-if="matches?.length > 0"
+            v-else
             v-for="match in matches"
             :team-match="match"
             :team="team"
           />
-          <em class="subtext" v-else>
-            No recent matches.
-          </em>
         </div>
       </div>
     </template>
@@ -123,7 +122,6 @@ onMounted(() => {
 .content-container {
   display: flex;
   justify-content: space-between;
-  gap: 1rem;
 }
 
 .content-container > div.left {
@@ -165,7 +163,6 @@ onMounted(() => {
 @media (max-width: 1024px) {
   .content-container {
     flex-direction: column;
-    gap: unset;
   }
 }
 </style>

availabili.tf/src/views/TeamSettings/GeneralView.vue

@@ -5,7 +5,6 @@ import { onMounted, ref } from "vue";
 import { useTeamsStore } from "@/stores/teams";
 import { useTeamDetails } from "@/composables/team-details";
 import { computed } from "@vue/reactivity";
-import LoaderContainer from "@/components/LoaderContainer.vue";
 
 const {
   teamName,
@@ -52,20 +51,20 @@ const hasChangedTimeDetails = computed(() => {
   );
 });
 
-const isLoading = ref(false);
+const isLoaded = ref(false);
 
 const teamsStore = useTeamsStore();
 
 const team = computed(() => teamsStore.teams[teamId.value]);
 
 onMounted(() => {
-  isLoading.value = true;
+  isLoaded.value = true;
   teamsStore.fetchTeam(teamId.value)
     .then((response) => {
       teamName.value = response.team.teamName;
       timezone.value = response.team.tzTimezone;
       minuteOffset.value = response.team.minuteOffset;
-      isLoading.value = false;
+      isLoaded.value = false;
     });
 })
 </script>
@@ -73,15 +72,7 @@ onMounted(() => {
 <template>
   <div class="team-general-settings">
     <h2>Overview</h2>
-    <LoaderContainer v-if="isLoading">
+    <div>
-      <rect x="0" y="10" rx="5" width="40" height="10" />
-      <rect x="0" y="30" rx="5" width="100%" height="10" />
-      <rect x="0" y="50" rx="5" width="80" height="10" />
-      <rect x="250" y="50" rx="5" width="40" height="10" />
-      <rect x="0" y="70" rx="5" width="240" height="10" />
-      <rect x="250" y="70" rx="5" width="100" height="10" />
-    </LoaderContainer>
-    <div v-else>
       <div class="form-group margin">
         <h3 class="closer">Team Name</h3>
         <input v-model="teamName" />

availabili.tf/src/views/TeamSettings/IntegrationsView.vue

@@ -6,6 +6,7 @@ import { useTeamDetails } from "@/composables/team-details";
 import { useTeamsStore } from "@/stores/teams";
 import { useIntegrationsStore } from "@/stores/teams/integrations";
 import { onMounted, ref } from "vue";
+import { ContentLoader } from "vue-content-loader";
 
 const teamsStore = useTeamsStore();
 const integrationsStore = useIntegrationsStore();
@@ -32,14 +33,14 @@ onMounted(() => {
 <template>
   <div class="team-integrations">
     <div v-if="isLoading">
-      <LoaderContainer>
+      <ContentLoader>
-        <rect x="0" y="0" rx="5" ry="5" width="250" height="10" />
+        <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
-        <rect x="20" y="20" rx="5" ry="5" width="220" height="10" />
+        <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
-        <rect x="20" y="40" rx="5" ry="5" width="170" height="10" />
+        <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
-        <rect x="0" y="60" rx="5" ry="5" width="250" height="10" />
+        <rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
-        <rect x="20" y="80" rx="5" ry="5" width="200" height="10" />
+        <rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
-        <rect x="20" y="100" rx="5" ry="5" width="80" height="10" />
+        <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
-      </LoaderContainer>
+      </ContentLoader>
     </div>
     <template v-else>
       <DiscordIntegrationForm v-model="integrationsStore.discordIntegration" />

availabili.tf/src/views/TeamSettings/InvitesView.vue

@@ -27,16 +27,6 @@ onMounted(() => {
 <template>
   <div class="invites" v-if="team">
     <h2>Invites</h2>
-    <p class="small aside">
-      Invite players to your team by creating an invite link.
-      All invites are usable only once.
-    </p>
-    <div class="create-invite-group">
-      <button class="accent" @click="createInvite">
-        <i class="bi bi-person-fill-add margin" />
-        Create Invite
-      </button>
-    </div>
     <table id="invite-table" v-if="invites?.length > 0">
       <thead>
         <tr>
@@ -46,8 +36,6 @@ onMounted(() => {
           <th>
             Creation time
           </th>
-          <th>
-          </th>
         </tr>
       </thead>
       <tbody>
@@ -57,12 +45,22 @@ onMounted(() => {
         />
       </tbody>
     </table>
+    <div class="create-invite-group">
+      <button class="accent" @click="createInvite">
+        <i class="bi bi-person-fill-add margin" />
+        Create Invite
+      </button>
+      <span class="small aside">
+        Invites are usable once and expire after 24 hours.
+      </span>
+    </div>
   </div>
 </template>
 
 <style scoped>
 #invite-table {
   width: 100%;
+  border: 1px solid var(--overlay-0);
   border-radius: 8px;
   margin: 8px 0;
 }
@@ -77,6 +75,5 @@ onMounted(() => {
   display: flex;
   gap: 8px;
   align-items: center;
-  justify-content: end;
 }
 </style>

availabili.tf/src/views/TeamSettings/MatchesView.vue

@@ -25,10 +25,10 @@ onMounted(() => {
       <i class="bi bi-trophy-fill margin"></i>
       Matches
     </h2>
-  </div>
     <div class="button-group">
       <AddMatchDialog />
     </div>
+  </div>
   <table>
     <thead>
       <tr>
@@ -71,4 +71,9 @@ onMounted(() => {
 table {
   width: 100%;
 }
+
+th {
+  text-align: left;
+  font-weight: 800;
+}
 </style>

availabili.tf/src/views/TeamSettingsView.vue

@@ -46,7 +46,7 @@ onMounted(() => {
           Matches
         </RouterLink>
         <hr>
-        <button class="destructive-on-hover icon-end no-border" @click="leaveTeam">
+        <button class="destructive-on-hover icon-end" @click="leaveTeam">
           Leave team
           <i class="bi bi-box-arrow-left" />
         </button>
@@ -122,9 +122,4 @@ nav.sidebar button:hover {
   background-color: var(--crust);
   color: var(--text);
 }
-
-nav.sidebar button.destructive-on-hover:hover {
-  background-color: var(--destructive);
-  color: var(--base);
-}
 </style>