From 89571d57bdbb4ca46fb4a392597f595c5c3db4cb Mon Sep 17 00:00:00 2001
From: venashial <venashial.levo@aleeas.com>
Date: Thu, 26 May 2022 19:16:46 -0700
Subject: [PATCH] Fix oled theme, docs, component bugs

---
 .../components/CheckboxVirtualList.svelte     |  2 +-
 src/package/components/Pagination.svelte      | 43 +++++++++++++------
 src/package/styles/themes/oled.postcss        |  3 +-
 src/routes/getting-started/utils.md           |  8 ++--
 4 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/package/components/CheckboxVirtualList.svelte b/src/package/components/CheckboxVirtualList.svelte
index 57cad49d..251d9563 100644
--- a/src/package/components/CheckboxVirtualList.svelte
+++ b/src/package/components/CheckboxVirtualList.svelte
@@ -31,7 +31,7 @@
     >
         {@const option = options[index]}
         <Checkbox
-            checked={value.includes(option.value)}
+            checked={value && value.includes(option.value)}
             on:change={(e) => handleChange(e, option.value)}
         >
             {#if option.icon && typeof option.icon === 'string'}
diff --git a/src/package/components/Pagination.svelte b/src/package/components/Pagination.svelte
index e88ef31e..94bb8503 100644
--- a/src/package/components/Pagination.svelte
+++ b/src/package/components/Pagination.svelte
@@ -1,38 +1,52 @@
 <script lang="ts">
     // TODO: Fix mobile support, currently just cuts off buttons
 
-    import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
-    import IconArrowLeft from 'virtual:icons/heroicons-outline/arrow-left'
-    import IconMinus from 'virtual:icons/heroicons-outline/minus'
-    import Button from "./Button.svelte";
-    import { createEventDispatcher } from 'svelte'
+    import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right';
+    import IconArrowLeft from 'virtual:icons/heroicons-outline/arrow-left';
+    import IconMinus from 'virtual:icons/heroicons-outline/minus';
+    import Button from './Button.svelte';
+    import { createEventDispatcher } from 'svelte';
 
     export let page: number;
     export let count: number;
 
-    $: options = count > 4
-        ? page + 3 >= count
-            ? [1, '-', count - 4, count - 3, count - 2, count - 1, count]
-            : page > 4
+    $: options =
+        count > 4
+            ? page + 3 >= count
+                ? [1, '-', count - 4, count - 3, count - 2, count - 1, count]
+                : page > 4
                 ? [1, '-', page - 1, page, page + 1, '-', count]
                 : [1, 2, 3, 4, 5, '-', count]
-        : Array.from({ length: count }, (_, i) => i + 1)
+            : Array.from({ length: count }, (_, i) => i + 1);
 
     const dispatch = createEventDispatcher();
 </script>
 
 {#if count > 1}
     <div class="pagination">
-        <Button color="raised" on:click={() => dispatch('change', page - 1)} disabled={page <= 1} title="Last page"><IconArrowLeft height="20px" />
+        <Button
+            color="raised"
+            on:click={() => dispatch('change', page - 1)}
+            disabled={page <= 1}
+            title="Last page"
+            ><IconArrowLeft height="20px" />
         </Button>
         {#each options as option}
             {#if option === '-'}
                 <IconMinus class="pagination__dash" />
             {:else}
-                <Button color={option === page ? 'primary' : 'raised'} on:click={() => dispatch('change', option)} evenPadding={true}>{option}</Button>
+                <Button
+                    color={option === page ? 'primary' : 'raised'}
+                    on:click={() => dispatch('change', option)}>{option}</Button
+                >
             {/if}
         {/each}
-        <Button color="raised" on:click={() => dispatch('change', page + 1)} disabled={page >= count} title="Next page">
+        <Button
+            color="raised"
+            on:click={() => dispatch('change', page + 1)}
+            disabled={page >= count}
+            title="Next page"
+        >
             <IconArrowRight height="20px" />
         </Button>
     </div>
@@ -54,7 +68,8 @@
         @media (width <= 500px) {
             grid-gap: 0.25rem;
 
-            :global(> *:nth-child(4)), :global(> *:nth-child(6)) {
+            :global(> *:nth-child(4)),
+            :global(> *:nth-child(6)) {
                 display: none;
             }
         }
diff --git a/src/package/styles/themes/oled.postcss b/src/package/styles/themes/oled.postcss
index 22443502..d5cb40f2 100644
--- a/src/package/styles/themes/oled.postcss
+++ b/src/package/styles/themes/oled.postcss
@@ -1,4 +1,4 @@
-.oled-theme {
+.theme-oled {
     @extend .dark-theme;
 
     /* Container colors */
@@ -7,7 +7,6 @@
     --color-raised-bg-hover: hsl(220, 13%, 20%);
     --color-divider: hsl(220, 13%, 35%);
     --color-button-bg: hsl(220, 13%, 20%);
-    --color-button-bg-hover: hsl(220, 13%, 15%);
 
     /* Ad colors */
     --color-ad-bg: hsl(200, 70%, 15%);
diff --git a/src/routes/getting-started/utils.md b/src/routes/getting-started/utils.md
index 8f4a6a3a..09bffd4a 100644
--- a/src/routes/getting-started/utils.md
+++ b/src/routes/getting-started/utils.md
@@ -33,7 +33,7 @@ The `markdownInline` parser is perfect for translations and short bios. It doesn
 
 ```svelte example raised
 <script lang="ts">
-  import { markdownInline } from "omorphia"
+  import { markdownInline } from "omorphia/utils"
 
   const source = "This is some **bolded** and *italicized* text."
 </script>
@@ -45,7 +45,7 @@ The `markdownInline` parser is perfect for translations and short bios. It doesn
 
 ```svelte example raised
 <script lang="ts">
-  import { ago } from 'omorphia';
+  import { ago } from 'omorphia/utils';
 </script>
 
 <p>Something happened {ago(Date.now())}.</p>
@@ -59,7 +59,7 @@ The `markdownInline` parser is perfect for translations and short bios. It doesn
 The `Permissions` class provides an easy way to manage user permissions.
 
 ```ts
-import { Permissions } from 'omorphia';
+import { Permissions } from 'omorphia/utils';
 
 const adminLevel = new Permissions('ALL');
 const memberLevel = new Permissions(member.permissions); /* `member` from API */
@@ -76,7 +76,7 @@ The `formatVersions` function provides an easy way to parse a project's versions
 
 ```svelte example raised
 <script lang="ts">
-  import { formatVersions } from 'omorphia';
+  import { formatVersions } from 'omorphia/utils';
 </script>
 
 <p>{formatVersions(["1.18", "1.18.1", "1.18.2", "1.17.1"])}</p>