From 692053e4a0f3d6e78924c0fda7d94a8bc93fdbc6 Mon Sep 17 00:00:00 2001
From: Gcolon021 <34667267+Gcolon021@users.noreply.github.com>
Date: Mon, 7 Oct 2024 16:09:41 -0400
Subject: [PATCH] Update login button appearance and add support for dynamic
 images (#245)

The style changes are temporary and will likely be reverted in the
future. The ability to include images will be kept.
---
 .../NIH_2013_logo_vertical_text_removed.svg   | 48 +++++++++++++++++++
 src/lib/components/LoginButton.svelte         |  8 ++++
 src/lib/models/AuthProvider.ts                |  6 +++
 .../(authentication)/login/+page.svelte       |  4 +-
 .../NIH_2013_logo_vertical_text_removed.svg   | 48 +++++++++++++++++++
 5 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/assets/login/NIH_2013_logo_vertical_text_removed.svg
 create mode 100644 static/NIH_2013_logo_vertical_text_removed.svg

diff --git a/src/lib/assets/login/NIH_2013_logo_vertical_text_removed.svg b/src/lib/assets/login/NIH_2013_logo_vertical_text_removed.svg
new file mode 100644
index 00000000..ac648ecb
--- /dev/null
+++ b/src/lib/assets/login/NIH_2013_logo_vertical_text_removed.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+        viewBox="0 0 374 329"
+        version="1.1"
+        id="svg8"
+        width="374"
+        height="329"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:svg="http://www.w3.org/2000/svg"
+        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+        xmlns:cc="http://creativecommons.org/ns#"
+        xmlns:dc="http://purl.org/dc/elements/1.1/">
+   <defs
+           id="defs12" />
+   <title
+           id="title2">NIH Intramural Research Program: Our Research Changes Lives</title>
+   <metadata
+           id="metadata5867">
+      <rdf:RDF>
+         <cc:Work
+                 rdf:about="">
+            <dc:title>NIH Intramural Research Program: Our Research Changes Lives</dc:title>
+         </cc:Work>
+      </rdf:RDF>
+   </metadata>
+   <g
+           id="g_center"
+           transform="translate(0, 50)"> <!-- Adjust this value as needed -->
+      <g
+              id="g293534"
+              style="display:inline"
+              transform="translate(66.936798,431.56897)">
+         <g
+                 id="g23279"
+                 transform="matrix(2.2457257,0,0,2.2144497,-30.271816,-431.43103)">
+            <path
+                    d="m 111.00886,95.3 26.1,-47.7 -26,-47.6 h 6.5 c 3.6,0 7.9,2.6 9.6,5.7 l 22.8,41.9 -22.9,41.9 c -1.7,3.2 -6.1,5.7 -9.6,5.7 h -6.5 z"
+                    fill="#20558a"
+                    id="path4"
+                    style="display:inline" />
+            <path
+                    id="path22970"
+                    d="M 8.6992188,0 C 3.8992188,0 0,3.9007812 0,8.8007812 V 86.5 c 0,4.8 3.8992188,8.800781 8.6992188,8.800781 H 104.5 L 130.59961,47.599609 104.5,0 Z m 5.9003902,26.400391 h 7.800782 l 19.199218,31.40039 h 0.09961 v -31.40039 h 7 V 69 H 40.900391 L 21.800781,37.699219 H 21.599609 V 69 h -7 z m 41.400391,0 h 7.400391 V 69 H 63.300781 56 Z m 14.699219,0 h 7.40039 v 16.90039 h 19.201172 v -16.90039 h 7.298829 V 69 H 97.199219 V 49.800781 H 78.099609 V 69 h -7.40039 z"
+                    style="fill:#616265" />
+         </g>
+      </g>
+   </g>
+</svg>
diff --git a/src/lib/components/LoginButton.svelte b/src/lib/components/LoginButton.svelte
index e0075d4c..751c53b4 100644
--- a/src/lib/components/LoginButton.svelte
+++ b/src/lib/components/LoginButton.svelte
@@ -15,6 +15,11 @@
       resetSearch();
     });
   };
+
+  let imageSrc: string | undefined = undefined;
+  if (provider.imagesrc) {
+    imageSrc = './' + provider.imagesrc;
+  }
 </script>
 
 <button
@@ -23,6 +28,9 @@
   class={$$props.class ?? 'btn variant-filled-primary m-1'}
   on:click={() => login(redirectTo, provider.type)}
 >
+  {#if imageSrc}
+    <img src={imageSrc} alt={provider.imageAlt} class="h-8 mr-2" />
+  {/if}
   {buttonText}
 </button>
 
diff --git a/src/lib/models/AuthProvider.ts b/src/lib/models/AuthProvider.ts
index 90d1346e..80dc69c7 100644
--- a/src/lib/models/AuthProvider.ts
+++ b/src/lib/models/AuthProvider.ts
@@ -9,6 +9,8 @@ export interface AuthData extends Indexable {
   helpText?: string;
   enabled: boolean;
   alt: boolean;
+  imageSrc?: string;
+  imageAlt?: string;
 }
 
 export default class AuthProvider implements AuthData {
@@ -21,6 +23,8 @@ export default class AuthProvider implements AuthData {
   logouturl?: string | undefined;
   callbackurl?: string | undefined;
   alt: boolean;
+  imageSrc?: string | undefined;
+  imageAlt?: string | undefined;
 
   constructor(data: AuthData) {
     this.name = data.name;
@@ -29,6 +33,8 @@ export default class AuthProvider implements AuthData {
     this.icon = data.icon;
     this.enabled = data.enabled;
     this.alt = data.alt || false;
+    this.imageSrc = data.imagesrc;
+    this.imageAlt = data.imagealt;
   }
 
   protected getRedirectURI(): string {
diff --git a/src/routes/(authentication)/login/+page.svelte b/src/routes/(authentication)/login/+page.svelte
index 9d7d898b..ea479cdf 100644
--- a/src/routes/(authentication)/login/+page.svelte
+++ b/src/routes/(authentication)/login/+page.svelte
@@ -68,7 +68,7 @@
                 provider={selectedProvider}
                 {redirectTo}
                 helpText={selectedProvider.helptext}
-                class="btn variant-filled-primary m-1 mt-2 w-full"
+                class="btn variant-outline-primary m-1 mt-2 w-full"
               />
             {/if}
           {:else}
@@ -78,7 +78,7 @@
                 {provider}
                 {redirectTo}
                 helpText={provider.helptext}
-                class="btn variant-filled-primary w-full"
+                class="btn variant-outline-primary text-primary-500 w-full"
               />
             {/each}
           {/if}
diff --git a/static/NIH_2013_logo_vertical_text_removed.svg b/static/NIH_2013_logo_vertical_text_removed.svg
new file mode 100644
index 00000000..ac648ecb
--- /dev/null
+++ b/static/NIH_2013_logo_vertical_text_removed.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+        viewBox="0 0 374 329"
+        version="1.1"
+        id="svg8"
+        width="374"
+        height="329"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:svg="http://www.w3.org/2000/svg"
+        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+        xmlns:cc="http://creativecommons.org/ns#"
+        xmlns:dc="http://purl.org/dc/elements/1.1/">
+   <defs
+           id="defs12" />
+   <title
+           id="title2">NIH Intramural Research Program: Our Research Changes Lives</title>
+   <metadata
+           id="metadata5867">
+      <rdf:RDF>
+         <cc:Work
+                 rdf:about="">
+            <dc:title>NIH Intramural Research Program: Our Research Changes Lives</dc:title>
+         </cc:Work>
+      </rdf:RDF>
+   </metadata>
+   <g
+           id="g_center"
+           transform="translate(0, 50)"> <!-- Adjust this value as needed -->
+      <g
+              id="g293534"
+              style="display:inline"
+              transform="translate(66.936798,431.56897)">
+         <g
+                 id="g23279"
+                 transform="matrix(2.2457257,0,0,2.2144497,-30.271816,-431.43103)">
+            <path
+                    d="m 111.00886,95.3 26.1,-47.7 -26,-47.6 h 6.5 c 3.6,0 7.9,2.6 9.6,5.7 l 22.8,41.9 -22.9,41.9 c -1.7,3.2 -6.1,5.7 -9.6,5.7 h -6.5 z"
+                    fill="#20558a"
+                    id="path4"
+                    style="display:inline" />
+            <path
+                    id="path22970"
+                    d="M 8.6992188,0 C 3.8992188,0 0,3.9007812 0,8.8007812 V 86.5 c 0,4.8 3.8992188,8.800781 8.6992188,8.800781 H 104.5 L 130.59961,47.599609 104.5,0 Z m 5.9003902,26.400391 h 7.800782 l 19.199218,31.40039 h 0.09961 v -31.40039 h 7 V 69 H 40.900391 L 21.800781,37.699219 H 21.599609 V 69 h -7 z m 41.400391,0 h 7.400391 V 69 H 63.300781 56 Z m 14.699219,0 h 7.40039 v 16.90039 h 19.201172 v -16.90039 h 7.298829 V 69 H 97.199219 V 49.800781 H 78.099609 V 69 h -7.40039 z"
+                    style="fill:#616265" />
+         </g>
+      </g>
+   </g>
+</svg>