From 45ac17037936af5ab42a3386ffecdd55f229de4b Mon Sep 17 00:00:00 2001
From: Ayush Gupta <ayushgupta3902@gmail.com>
Date: Thu, 5 Oct 2023 15:44:24 +0530
Subject: [PATCH 1/2] Modify login buttons

---
 src/pages/sign-in.tsx | 18 +++++++++++++-----
 src/utils/getIcon.ts  | 10 ++++++++++
 2 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 src/utils/getIcon.ts

diff --git a/src/pages/sign-in.tsx b/src/pages/sign-in.tsx
index 3aecd91e..67db1563 100644
--- a/src/pages/sign-in.tsx
+++ b/src/pages/sign-in.tsx
@@ -8,6 +8,7 @@ import { getProviders, signIn } from "next-auth/react";
 import { getServerSession } from "next-auth";
 import { authOptions } from "~/server/auth";
 import Link from "next/link";
+import getIcon from "~/utils/getIcon";
 
 const SignIn = ({
   providers,
@@ -25,14 +26,14 @@ const SignIn = ({
       <main className="flex min-h-screen flex-col items-center justify-center bg-[#f9fafb]">
         <div className="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
           <div className="animate-fade-in flex flex-col justify-center text-center">
-            <span className="text-sm font-medium text-gray-700">
+            {/* <span className="text-sm font-medium text-gray-700">
               Sign in with
-            </span>
-            <div className="mt-6 grid grid-cols-2 gap-3">
+            </span> */}
+            <div className="mt-3 flex flex-col gap-3">
               {Object.values(providers).map((provider) => (
                 <button
                   key={provider.id}
-                  className="relative inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-6 py-3 text-lg text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50"
+                  className="relative inline-flex items-center justify-center gap-3 rounded-md border border-gray-400 bg-white px-6 py-3 text-sm font-medium text-gray-600 shadow-sm hover:bg-gray-50"
                   type="button"
                   onClick={() =>
                     void signIn(provider.id, {
@@ -40,8 +41,15 @@ const SignIn = ({
                     })
                   }
                 >
+                  <div>
+                    <img
+                      className="h-6 w-6"
+                      src={getIcon(provider.name)}
+                      alt="button_icon"
+                    />
+                  </div>
                   <span className="flex flex-row">
-                    <span>{provider.name}</span>
+                    <span>Sign in with {provider.name}</span>
                   </span>
                 </button>
               ))}
diff --git a/src/utils/getIcon.ts b/src/utils/getIcon.ts
new file mode 100644
index 00000000..6c63b871
--- /dev/null
+++ b/src/utils/getIcon.ts
@@ -0,0 +1,10 @@
+const icons: { [key: string]: string } = {
+  Google:
+    "https://www.svgrepo.com/show/475656/google-color.svg",
+  GitHub:
+    "https://www.svgrepo.com/show/512317/github-142.svg"
+};
+
+export default function getIcon(iconName: string) {
+    return icons[iconName];
+}

From 25a74575e5549f324b895a80d6f9090de4a49eea Mon Sep 17 00:00:00 2001
From: Ayush Gupta <ayushgupta3902@gmail.com>
Date: Sun, 8 Oct 2023 12:17:00 +0530
Subject: [PATCH 2/2] Add buttons to assets

---
 src/assets/Github button icon.svg | 19 +++++++++++++++++++
 src/assets/Google button icon.svg | 27 +++++++++++++++++++++++++++
 src/pages/sign-in.tsx             |  9 ++++++---
 src/utils/getIcon.ts              | 13 +++++++------
 4 files changed, 59 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/Github button icon.svg
 create mode 100644 src/assets/Google button icon.svg

diff --git a/src/assets/Github button icon.svg b/src/assets/Github button icon.svg
new file mode 100644
index 00000000..dce1c59d
--- /dev/null
+++ b/src/assets/Github button icon.svg	
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg width="800px" height="800px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>github [#142]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#000000">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/Google button icon.svg b/src/assets/Google button icon.svg
new file mode 100644
index 00000000..56cb5e20
--- /dev/null
+++ b/src/assets/Google button icon.svg	
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="800px" height="800px" viewBox="-0.5 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>Google-color</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Color-" transform="translate(-401.000000, -860.000000)">
+            <g id="Google" transform="translate(401.000000, 860.000000)">
+                <path d="M9.82727273,24 C9.82727273,22.4757333 10.0804318,21.0144 10.5322727,19.6437333 L2.62345455,13.6042667 C1.08206818,16.7338667 0.213636364,20.2602667 0.213636364,24 C0.213636364,27.7365333 1.081,31.2608 2.62025,34.3882667 L10.5247955,28.3370667 C10.0772273,26.9728 9.82727273,25.5168 9.82727273,24" id="Fill-1" fill="#FBBC05">
+
+</path>
+                <path d="M23.7136364,10.1333333 C27.025,10.1333333 30.0159091,11.3066667 32.3659091,13.2266667 L39.2022727,6.4 C35.0363636,2.77333333 29.6954545,0.533333333 23.7136364,0.533333333 C14.4268636,0.533333333 6.44540909,5.84426667 2.62345455,13.6042667 L10.5322727,19.6437333 C12.3545909,14.112 17.5491591,10.1333333 23.7136364,10.1333333" id="Fill-2" fill="#EB4335">
+
+</path>
+                <path d="M23.7136364,37.8666667 C17.5491591,37.8666667 12.3545909,33.888 10.5322727,28.3562667 L2.62345455,34.3946667 C6.44540909,42.1557333 14.4268636,47.4666667 23.7136364,47.4666667 C29.4455,47.4666667 34.9177955,45.4314667 39.0249545,41.6181333 L31.5177727,35.8144 C29.3995682,37.1488 26.7323182,37.8666667 23.7136364,37.8666667" id="Fill-3" fill="#34A853">
+
+</path>
+                <path d="M46.1454545,24 C46.1454545,22.6133333 45.9318182,21.12 45.6113636,19.7333333 L23.7136364,19.7333333 L23.7136364,28.8 L36.3181818,28.8 C35.6879545,31.8912 33.9724545,34.2677333 31.5177727,35.8144 L39.0249545,41.6181333 C43.3393409,37.6138667 46.1454545,31.6490667 46.1454545,24" id="Fill-4" fill="#4285F4">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/pages/sign-in.tsx b/src/pages/sign-in.tsx
index 67db1563..da2b0631 100644
--- a/src/pages/sign-in.tsx
+++ b/src/pages/sign-in.tsx
@@ -9,6 +9,8 @@ import { getServerSession } from "next-auth";
 import { authOptions } from "~/server/auth";
 import Link from "next/link";
 import getIcon from "~/utils/getIcon";
+import Image from "next/image";
+
 
 const SignIn = ({
   providers,
@@ -33,7 +35,7 @@ const SignIn = ({
               {Object.values(providers).map((provider) => (
                 <button
                   key={provider.id}
-                  className="relative inline-flex items-center justify-center gap-3 rounded-md border border-gray-400 bg-white px-6 py-3 text-sm font-medium text-gray-600 shadow-sm hover:bg-gray-50"
+                  className="relative inline-flex items-center justify-center gap-3 rounded-md border border-gray-400 bg-white px-6 py-3 text-sm font-medium text-gray-600 shadow-sm hover:bg-gray-100"
                   type="button"
                   onClick={() =>
                     void signIn(provider.id, {
@@ -42,10 +44,11 @@ const SignIn = ({
                   }
                 >
                   <div>
-                    <img
-                      className="h-6 w-6"
+                    <Image
                       src={getIcon(provider.name)}
                       alt="button_icon"
+                      width={22}
+                      height={22}
                     />
                   </div>
                   <span className="flex flex-row">
diff --git a/src/utils/getIcon.ts b/src/utils/getIcon.ts
index 6c63b871..259d50f5 100644
--- a/src/utils/getIcon.ts
+++ b/src/utils/getIcon.ts
@@ -1,10 +1,11 @@
-const icons: { [key: string]: string } = {
-  Google:
-    "https://www.svgrepo.com/show/475656/google-color.svg",
-  GitHub:
-    "https://www.svgrepo.com/show/512317/github-142.svg"
+import googleButtonIcon from "../assets/Google button icon.svg";
+import githubButtonIcon from "../assets/Github button icon.svg";
+
+const icons: { [key: string]: any } = {
+  Google: googleButtonIcon,
+  GitHub: githubButtonIcon,
 };
 
 export default function getIcon(iconName: string) {
-    return icons[iconName];
+  return icons[iconName];
 }