From ca11b02aeafdaa28ff6938e6a637252053dfad82 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Thu, 1 Sep 2022 15:00:22 -0700
Subject: [PATCH] chore: fix large loader dimensions (#1220)

---
 .../src/components/loader/loader.stories.tsx    | 17 +++++++++++++++++
 .../ui-toolkit/src/components/loader/loader.tsx |  7 ++++---
 2 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 libs/ui-toolkit/src/components/loader/loader.stories.tsx

diff --git a/libs/ui-toolkit/src/components/loader/loader.stories.tsx b/libs/ui-toolkit/src/components/loader/loader.stories.tsx
new file mode 100644
index 000000000..ebae2f10d
--- /dev/null
+++ b/libs/ui-toolkit/src/components/loader/loader.stories.tsx
@@ -0,0 +1,17 @@
+import type { Story, Meta } from '@storybook/react';
+import type { LoaderProps } from './loader';
+import { Loader } from './loader';
+
+export default {
+  component: Loader,
+  title: 'Loader',
+} as Meta;
+
+const Template: Story<LoaderProps> = (args) => <Loader />;
+
+export const Large = Template.bind({});
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+};
diff --git a/libs/ui-toolkit/src/components/loader/loader.tsx b/libs/ui-toolkit/src/components/loader/loader.tsx
index 602519dfb..91e456a65 100644
--- a/libs/ui-toolkit/src/components/loader/loader.tsx
+++ b/libs/ui-toolkit/src/components/loader/loader.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 
-interface LoaderProps {
+export interface LoaderProps {
   size?: 'small' | 'large';
   forceTheme?: 'dark' | 'light';
 }
@@ -21,10 +21,11 @@ export const Loader = ({ size = 'large', forceTheme }: LoaderProps) => {
     'dark:bg-white bg-black': !forceTheme,
     'bg-white': forceTheme === 'dark',
     'bg-black': forceTheme === 'light',
-    'w-16 h-16': size === 'large',
+    'w-[10px] h-[10px]': size === 'large',
     'w-[5px] h-[5px]': size === 'small',
   });
-  const wrapperClasses = size === 'small' ? 'w-[15px] h-[15px]' : 'w-64 h-64';
+  const wrapperClasses =
+    size === 'small' ? 'w-[15px] h-[15px]' : 'w-[50px] h-[50px]';
   const items = size === 'small' ? 9 : 16;
 
   return (