From 5e7548f68eb49af6ec8841b7b893404799a1a7af Mon Sep 17 00:00:00 2001
From: Rita Lopes <up202108819@up.pt>
Date: Tue, 8 Aug 2023 20:15:42 +0100
Subject: [PATCH] Added page stories and icon className

---
 src/lib/component/Icon.svelte                    |  7 ++++---
 src/lib/component/VariableVisibilityInput.svelte |  2 +-
 src/lib/layout/MemberButton.svelte               |  2 +-
 src/routes/layout.stories.ts                     |  3 ++-
 src/routes/login/page.stories.ts                 | 15 +++++++++++++++
 src/routes/page.stories.ts                       |  3 ++-
 6 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 src/routes/login/page.stories.ts

diff --git a/src/lib/component/Icon.svelte b/src/lib/component/Icon.svelte
index 78af6eea..2dae2a04 100644
--- a/src/lib/component/Icon.svelte
+++ b/src/lib/component/Icon.svelte
@@ -3,15 +3,16 @@
 
   export let src: string | { a: { viewBox: string }; c: string } | undefined;
   export let href: string | undefined = undefined;
-  export let color: string | undefined;
+  export let color: string | undefined = undefined;
   export let size: string | undefined;
   export let ariaLabel: string | undefined = undefined;
+  export let className: string | undefined = undefined;
 </script>
 
 {#if href}
   <a {href} target="_blank" rel="noreferrer" class="w-min" aria-label={ariaLabel}>
-    <Icon {src} {color} {size} />
+    <Icon {src} {color} {size} {className} />
   </a>
 {:else}
-  <Icon {src} {size} color="currentcolor" className={$$props.color} />
+  <Icon {src} {color} {size} {className} />
 {/if}
diff --git a/src/lib/component/VariableVisibilityInput.svelte b/src/lib/component/VariableVisibilityInput.svelte
index c4af26d7..bf22a629 100644
--- a/src/lib/component/VariableVisibilityInput.svelte
+++ b/src/lib/component/VariableVisibilityInput.svelte
@@ -14,6 +14,6 @@
     class="z-40 col-start-2 col-end-3 row-start-1 mr-4"
     on:click={() => (visible = !visible)}
   >
-    <Icon src={icon} size="1.5em" color="fill-rose-950/[.54]" />
+    <Icon src={icon} size="1.5em" className="fill-rose-950/[.54]" />
   </button>
 </div>
diff --git a/src/lib/layout/MemberButton.svelte b/src/lib/layout/MemberButton.svelte
index c2ee1a9b..bd01e127 100644
--- a/src/lib/layout/MemberButton.svelte
+++ b/src/lib/layout/MemberButton.svelte
@@ -9,6 +9,6 @@
 >
   <p class="w-full whitespace-nowrap pl-2 font-source_code text-sm text-white">Área Membro</p>
   <div class="rounded-md bg-muted-red-400 px-1 pt-1">
-    <Icon src={Icons.User} color="fill-rose-950" size="32px" />
+    <Icon src={Icons.User} color="#411315" size="32px" />
   </div>
 </a>
diff --git a/src/routes/layout.stories.ts b/src/routes/layout.stories.ts
index 6f7bfa79..5e364def 100644
--- a/src/routes/layout.stories.ts
+++ b/src/routes/layout.stories.ts
@@ -8,7 +8,8 @@ export default {
   title: 'Organisms/Layout',
   component: Layout,
   parameters: {
-    layout: 'fullscreen'
+    layout: 'fullscreen',
+    backgrounds: { default: 'transparent' }
   },
   decorators: [() => LayoutDecorator]
 };
diff --git a/src/routes/login/page.stories.ts b/src/routes/login/page.stories.ts
new file mode 100644
index 00000000..c0213977
--- /dev/null
+++ b/src/routes/login/page.stories.ts
@@ -0,0 +1,15 @@
+import Layout from '../+layout.svelte';
+import Page from './+page.svelte';
+import LayoutDecorator from '$lib/storybook-utils/LayoutDecorator.svelte';
+
+export default {
+  title: 'Pages/Login',
+  component: Page,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: { default: 'clear' }
+  },
+  decorators: [() => Layout, () => LayoutDecorator]
+};
+
+export const Login = {};
diff --git a/src/routes/page.stories.ts b/src/routes/page.stories.ts
index 89efe609..47ba53f9 100644
--- a/src/routes/page.stories.ts
+++ b/src/routes/page.stories.ts
@@ -6,7 +6,8 @@ export default {
   title: 'Pages/HomePage',
   component: Page,
   parameters: {
-    layout: 'fullscreen'
+    layout: 'fullscreen',
+    backgrounds: { default: 'transparent' }
   },
   decorators: [() => Layout, () => LayoutDecorator]
 };