chore(prettier): use spaces instead of tabs

5 files changed, 233 insertions, 233 deletions

diff --git a/src/lib/Loading/Ellipsis.svelte b/src/lib/Loading/Ellipsis.svelte
index dd7800d7..ba1f30b8 100644
--- a/src/lib/Loading/Ellipsis.svelte
+++ b/src/lib/Loading/Ellipsis.svelte
@@ -1,78 +1,78 @@
 <script lang="ts">
-	export let colour = 'var(--fg)';
+  export let colour = 'var(--fg)';
 </script>
 
 <div class="ellipsis" style={`--loader-colour: ${colour};`}>
-	{#each Array.from({ length: 4 }) as _}
-		<div />
-	{/each}
+  {#each Array.from({ length: 4 }) as _}
+    <div />
+  {/each}
 </div>
 
 <style lang="scss">
-	.ellipsis {
-		display: inline-block;
-		position: relative;
-		width: 80px;
-		height: 80px;
+  .ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
 
-		div {
-			position: absolute;
-			top: 33px;
-			width: 13px;
-			height: 13px;
-			border-radius: 50%;
-			background: var(--loader-colour);
-			animation-timing-function: cubic-bezier(0, 1, 1, 0);
-		}
-	}
+    div {
+      position: absolute;
+      top: 33px;
+      width: 13px;
+      height: 13px;
+      border-radius: 50%;
+      background: var(--loader-colour);
+      animation-timing-function: cubic-bezier(0, 1, 1, 0);
+    }
+  }
 
-	.ellipsis div:nth-child(1) {
-		left: 8px;
-		animation: ellipsis-1 0.6s infinite;
-	}
+  .ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: ellipsis-1 0.6s infinite;
+  }
 
-	.ellipsis div:nth-child(2) {
-		left: 8px;
-		animation: ellipsis-2 0.6s infinite;
-	}
+  .ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: ellipsis-2 0.6s infinite;
+  }
 
-	.ellipsis div:nth-child(3) {
-		left: 32px;
-		animation: ellipsis-2 0.6s infinite;
-	}
+  .ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: ellipsis-2 0.6s infinite;
+  }
 
-	.ellipsis div:nth-child(4) {
-		left: 56px;
-		animation: ellipsis-3 0.6s infinite;
-	}
+  .ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: ellipsis-3 0.6s infinite;
+  }
 
-	@keyframes ellipsis-1 {
-		0% {
-			transform: scale(0);
-		}
+  @keyframes ellipsis-1 {
+    0% {
+      transform: scale(0);
+    }
 
-		100% {
-			transform: scale(1);
-		}
-	}
+    100% {
+      transform: scale(1);
+    }
+  }
 
-	@keyframes ellipsis-2 {
-		0% {
-			transform: translate(0, 0);
-		}
+  @keyframes ellipsis-2 {
+    0% {
+      transform: translate(0, 0);
+    }
 
-		100% {
-			transform: translate(24px, 0);
-		}
-	}
+    100% {
+      transform: translate(24px, 0);
+    }
+  }
 
-	@keyframes ellipsis-3 {
-		0% {
-			transform: scale(1);
-		}
+  @keyframes ellipsis-3 {
+    0% {
+      transform: scale(1);
+    }
 
-		100% {
-			transform: scale(0);
-		}
-	}
+    100% {
+      transform: scale(0);
+    }
+  }
 </style>
diff --git a/src/lib/Loading/Grid.svelte b/src/lib/Loading/Grid.svelte
index 6fff4da0..1a64b3e0 100644
--- a/src/lib/Loading/Grid.svelte
+++ b/src/lib/Loading/Grid.svelte
@@ -1,57 +1,57 @@
 <script lang="ts">
-	export let colour = 'var(--fg)';
+  export let colour = 'var(--fg)';
 </script>
 
 <div class="grid" style={`--loader-colour: ${colour};`}>
-	{#each Array.from({ length: 9 }) as _}
-		<div />
-	{/each}
+  {#each Array.from({ length: 9 }) as _}
+    <div />
+  {/each}
 </div>
 
 <style lang="scss">
-	.grid {
-		display: inline-block;
-		position: relative;
-		width: 64px;
-		height: 64px;
-
-		div {
-			position: absolute;
-			width: 13px;
-			height: 13px;
-			border-radius: 50%;
-			background: var(--loader-colour);
-			animation: grid 1.2s linear infinite;
-		}
-	}
-
-	@function column($i) {
-		@if $i % 3 == 0 {
-			@return 3;
-		} @else {
-			@return $i % 3;
-		}
-	}
-
-	@for $i from 1 through 9 {
-		.grid div:nth-child(#{$i}) {
-			$row: ceil(calc($i / 3));
-			$column: column($i);
-
-			top: 6px + ($row - 1) * 20px;
-			left: 6px + ($column - 1) * 20px;
-			animation-delay: -0.4s * ($i - 1);
-		}
-	}
-
-	@keyframes grid {
-		0%,
-		100% {
-			opacity: 1;
-		}
-
-		50% {
-			opacity: 0.5;
-		}
-	}
+  .grid {
+    display: inline-block;
+    position: relative;
+    width: 64px;
+    height: 64px;
+
+    div {
+      position: absolute;
+      width: 13px;
+      height: 13px;
+      border-radius: 50%;
+      background: var(--loader-colour);
+      animation: grid 1.2s linear infinite;
+    }
+  }
+
+  @function column($i) {
+    @if $i % 3 == 0 {
+      @return 3;
+    } @else {
+      @return $i % 3;
+    }
+  }
+
+  @for $i from 1 through 9 {
+    .grid div:nth-child(#{$i}) {
+      $row: ceil(calc($i / 3));
+      $column: column($i);
+
+      top: 6px + ($row - 1) * 20px;
+      left: 6px + ($column - 1) * 20px;
+      animation-delay: -0.4s * ($i - 1);
+    }
+  }
+
+  @keyframes grid {
+    0%,
+    100% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0.5;
+    }
+  }
 </style>
diff --git a/src/lib/Loading/Message.svelte b/src/lib/Loading/Message.svelte
index 38794702..5aabec9c 100644
--- a/src/lib/Loading/Message.svelte
+++ b/src/lib/Loading/Message.svelte
@@ -1,45 +1,45 @@
 <script lang="ts">
-	import Ellipsis from './Ellipsis.svelte';
-	import Ripple from './Ripple.svelte';
-	import Grid from './Grid.svelte';
-	import Popup from '$lib/Layout/Popup.svelte';
+  import Ellipsis from './Ellipsis.svelte';
+  import Ripple from './Ripple.svelte';
+  import Grid from './Grid.svelte';
+  import Popup from '$lib/Layout/Popup.svelte';
 
-	export let message: string | undefined = undefined;
-	export let loader: 'ellipsis' | 'ripple' | 'grid' = 'ellipsis';
-	export let colour = 'var(--fg)';
-	export let slot = false;
-	export let withReload = false;
-	export let fullscreen = true;
+  export let message: string | undefined = undefined;
+  export let loader: 'ellipsis' | 'ripple' | 'grid' = 'ellipsis';
+  export let colour = 'var(--fg)';
+  export let slot = false;
+  export let withReload = false;
+  export let fullscreen = true;
 </script>
 
 <Popup {fullscreen} locked>
-	<div class="message">
-		{#if loader === 'ellipsis'}
-			<Ellipsis {colour} />
-		{:else if loader === 'ripple'}
-			<Ripple {colour} />
-		{:else if loader === 'grid'}
-			<Grid {colour} />
-		{/if}
+  <div class="message">
+    {#if loader === 'ellipsis'}
+      <Ellipsis {colour} />
+    {:else if loader === 'ripple'}
+      <Ripple {colour} />
+    {:else if loader === 'grid'}
+      <Grid {colour} />
+    {/if}
 
-		{#if message}
-			<br />
+    {#if message}
+      <br />
 
-			{message}
-		{:else if slot}
-			<br />
+      {message}
+    {:else if slot}
+      <br />
 
-			<slot />
+      <slot />
 
-			{#if withReload}
-				Please <a href={'#'} on:click={() => location.reload()}>try again</a> later.
-			{/if}
-		{/if}
-	</div>
+      {#if withReload}
+        Please <a href={'#'} on:click={() => location.reload()}>try again</a> later.
+      {/if}
+    {/if}
+  </div>
 </Popup>
 
 <style>
-	.message {
-		text-align: center;
-	}
+  .message {
+    text-align: center;
+  }
 </style>
diff --git a/src/lib/Loading/Ripple.svelte b/src/lib/Loading/Ripple.svelte
index 40fa07b8..05d62bb5 100644
--- a/src/lib/Loading/Ripple.svelte
+++ b/src/lib/Loading/Ripple.svelte
@@ -1,47 +1,47 @@
 <script lang="ts">
-	export let colour = 'var(--fg)';
+  export let colour = 'var(--fg)';
 </script>
 
 <div class="ripple" style={`--loader-colour: ${colour};`}>
-	<div />
-	<div />
+  <div />
+  <div />
 </div>
 
 <style lang="scss">
-	.ripple {
-		display: inline-block;
-		position: relative;
-		width: 80px;
-		height: 80px;
+  .ripple {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
 
-		div {
-			position: absolute;
-			border: 4px solid var(--loader-colour);
-			opacity: 1;
-			border-radius: 50%;
-			animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+    div {
+      position: absolute;
+      border: 4px solid var(--loader-colour);
+      opacity: 1;
+      border-radius: 50%;
+      animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 
-			&:nth-child(2) {
-				animation-delay: -0.5s;
-			}
-		}
-	}
+      &:nth-child(2) {
+        animation-delay: -0.5s;
+      }
+    }
+  }
 
-	@keyframes ripple {
-		0% {
-			top: 36px;
-			left: 36px;
-			width: 0;
-			height: 0;
-			opacity: 1;
-		}
+  @keyframes ripple {
+    0% {
+      top: 36px;
+      left: 36px;
+      width: 0;
+      height: 0;
+      opacity: 1;
+    }
 
-		100% {
-			top: 0px;
-			left: 0px;
-			width: 72px;
-			height: 72px;
-			opacity: 0;
-		}
-	}
+    100% {
+      top: 0px;
+      left: 0px;
+      width: 72px;
+      height: 72px;
+      opacity: 0;
+    }
+  }
 </style>
diff --git a/src/lib/Loading/Skeleton.svelte b/src/lib/Loading/Skeleton.svelte
index 3849b24d..3f39beec 100644
--- a/src/lib/Loading/Skeleton.svelte
+++ b/src/lib/Loading/Skeleton.svelte
@@ -1,71 +1,71 @@
 <script lang="ts">
-	export let count = 3;
-	export let width = '100%';
-	export let height = '100px';
-	export let card = true;
-	export let grid = false;
-	export let list = false;
-	export let pad = false;
-	export let bigCard = false;
+  export let count = 3;
+  export let width = '100%';
+  export let height = '100px';
+  export let card = true;
+  export let grid = false;
+  export let list = false;
+  export let pad = false;
+  export let bigCard = false;
 </script>
 
 {#if grid}
-	<div class="grid" style={pad ? 'padding-top: .75em;' : ''}>
-		{#each Array(count) as _, i}
-			<div class={card ? `${bigCard ? 'card' : ''} card-small` : ''} style={`width: ${width};`}>
-				<div class="skeleton-container" style={`--i: ${i};`}>
-					<div class="skeleton" style={`width: ${width}; height: ${height};`} />
-				</div>
-			</div>
-		{/each}
-	</div>
+  <div class="grid" style={pad ? 'padding-top: .75em;' : ''}>
+    {#each Array(count) as _, i}
+      <div class={card ? `${bigCard ? 'card' : ''} card-small` : ''} style={`width: ${width};`}>
+        <div class="skeleton-container" style={`--i: ${i};`}>
+          <div class="skeleton" style={`width: ${width}; height: ${height};`} />
+        </div>
+      </div>
+    {/each}
+  </div>
 {:else}
-	{#each Array(count) as _, i}
-		<div
-			class={card ? `${bigCard ? 'card' : ''} card-small` : ''}
-			style={`width: ${width}; ${list ? 'padding-top: .75em;' : ''}; --i: ${i};`}
-		>
-			<div class="skeleton-container">
-				<div class="skeleton" style={`width: ${width}; height: ${height};`} />
-			</div>
-		</div>
+  {#each Array(count) as _, i}
+    <div
+      class={card ? `${bigCard ? 'card' : ''} card-small` : ''}
+      style={`width: ${width}; ${list ? 'padding-top: .75em;' : ''}; --i: ${i};`}
+    >
+      <div class="skeleton-container">
+        <div class="skeleton" style={`width: ${width}; height: ${height};`} />
+      </div>
+    </div>
 
-		{#if !list && i < count - 1}
-			<p />
-		{/if}
-	{/each}
+    {#if !list && i < count - 1}
+      <p />
+    {/if}
+  {/each}
 {/if}
 
 <style>
-	@keyframes progress {
-		0% {
-			background-position: -200px 0;
-		}
-		100% {
-			background-position: calc(200px + 100%) 0;
-		}
-	}
+  @keyframes progress {
+    0% {
+      background-position: -200px 0;
+    }
+    100% {
+      background-position: calc(200px + 100%) 0;
+    }
+  }
 
-	.skeleton-container {
-		animation: progress 1.2s ease-in-out infinite;
-		background-color: var(--base001);
-		background-image: linear-gradient(90deg, var(--base0011), var(--base01), var(--base0011));
-		background-size: 200px 100%;
-		background-repeat: no-repeat;
-		border-radius: 8px;
-		animation-delay: calc(var(--i) * 0.025s);
-	}
+  .skeleton-container {
+    animation: progress 1.2s ease-in-out infinite;
+    background-color: var(--base001);
+    background-image: linear-gradient(90deg, var(--base0011), var(--base01), var(--base0011));
+    background-size: 200px 100%;
+    background-repeat: no-repeat;
+    border-radius: 8px;
+    animation-delay: calc(var(--i) * 0.025s);
+  }
 
-	.skeleton {
-		border-radius: 4px;
-		display: inline-block;
-		line-height: 1;
-	}
+  .skeleton {
+    border-radius: 4px;
+    display: inline-block;
+    line-height: 1;
+  }
 
-	.grid {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-		gap: 1em 0.5em;
-	}
+  .grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 1em 0.5em;
+  }
 </style>