From a63e2b2c8398856c41f8e71cd564b5dabf190148 Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Sun, 17 Oct 2021 19:42:32 -0400
Subject: [PATCH] fix: consistently style login page

---
 src/components/Common/Accordion/index.tsx |  8 ++++++-
 src/components/Login/index.tsx            | 26 ++++++++++++++++-------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/Common/Accordion/index.tsx b/src/components/Common/Accordion/index.tsx
index 49187bd03..d9418acc6 100644
--- a/src/components/Common/Accordion/index.tsx
+++ b/src/components/Common/Accordion/index.tsx
@@ -19,13 +19,19 @@ export interface AccordionChildProps {
 type AccordionContentProps = {
   isOpen: boolean;
   children: React.ReactNode;
+  className?: string;
 };
 
 export const AccordionContent = ({
   isOpen,
   children,
+  className,
 }: AccordionContentProps) => {
-  return <AnimateHeight height={isOpen ? 'auto' : 0}>{children}</AnimateHeight>;
+  return (
+    <AnimateHeight height={isOpen ? 'auto' : 0} className={className}>
+      {children}
+    </AnimateHeight>
+  );
 };
 
 const Accordion = ({
diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
index 46c159d3b..08aefccf0 100644
--- a/src/components/Login/index.tsx
+++ b/src/components/Login/index.tsx
@@ -145,29 +145,39 @@ const Login = () => {
               {({ openIndexes, handleClick, AccordionContent }) => (
                 <>
                   {signinMethods.map((signinMethod, index) => (
-                    <>
+                    <div
+                      key={`accordion-${index}`}
+                      className="ring-1 ring-gray-700 sm:first:rounded-t-lg sm:last:rounded-b-lg"
+                    >
                       <button
-                        className={`w-full cursor-default bg-gray-800 bg-opacity-70 py-2 text-center text-base font-bold focus:outline-none sm:first:rounded-t-lg ${
+                        className={`w-full cursor-default bg-gray-800 bg-opacity-70 py-2 text-center text-base font-bold focus:outline-none ${
+                          index === 0 ? 'sm:rounded-t-lg' : ''
+                        } ${
                           openIndexes.includes(index)
                             ? 'text-indigo-500'
                             : `text-gray-400 ${
                                 index === signinMethods.length - 1
                                   ? 'sm:rounded-b-lg'
                                   : ''
+                              } ${
+                                signinMethods.length > 1
+                                  ? 'transition-colors duration-200 hover:cursor-pointer hover:bg-gray-700'
+                                  : ''
                               }`
-                        } ${
-                          signinMethods.length > 1
-                            ? 'transition-colors duration-200 hover:cursor-pointer hover:bg-gray-700'
-                            : ''
                         }`}
                         onClick={() => handleClick(index)}
                       >
                         {signinMethod.buttonText}
                       </button>
-                      <AccordionContent isOpen={openIndexes.includes(index)}>
+                      <AccordionContent
+                        isOpen={openIndexes.includes(index)}
+                        className={
+                          index < signinMethods.length - 1 ? 'mb-px' : ''
+                        }
+                      >
                         <div className="px-10 py-8">{signinMethod.content}</div>
                       </AccordionContent>
-                    </>
+                    </div>
                   ))}
                 </>
               )}