Dama Landing Page Design

apps/web/app/components/DiscordLoginButton.res

@@ -1,7 +1,8 @@
 @react.component
 let make = (~label) => {
   <Remix.Form action={`/auth/discord`} method={#post}>
-    <button className="w-full p-6 bg-discord font-bold rounded-xl text-2xl text-white">
+    <button
+      className="w-full p-6 border-2 border-discord text-discord bg-transparent font-bold rounded-xl text-2xl hover:bg-discord hover:text-white">
       {label->React.string}
     </button>
   </Remix.Form>

apps/web/app/components/InviteButton.res

@@ -5,7 +5,7 @@ let make = (~className: option<string>=?) => {
     target="_blank"
     className={className->Option.getWithDefault("")}>
     <button
-      className="py-1 px-1 bg-transparent border border-brightOrange font-semibold rounded-xl text-lg text-brightOrange">
+      className="py-1 px-2 bg-transparent border border-brightOrange font-semibold rounded-xl text-lg text-brightOrange hover:text-white hover:bg-brightOrange">
       {`Add to Discord`->React.string}
     </button>
   </a>

apps/web/app/components/Sidebar.res

@@ -81,14 +81,16 @@ let make = (~isSidebarVisible, ~handleIsSidebarVisible, ~guilds, ~loadingGuilds)
     toggled={isSidebarVisible}>
     <SidebarHeader
       className="flex top-0 sticky bg-inherit z-10 justify-center items-center border-b border-b-black backdrop-blur-3xl ">
-      <img className="w-40" src={"/assets/brightid_reversed.svg"} />
+      <Remix.Link to="">
+        <img className="w-40" src={"/assets/brightid_reversed.svg"} />
+      </Remix.Link>
     </SidebarHeader>
     <SidebarContent className=" bg-extraDark z-[-1]">
       <Menu iconShape="square" key={0->Belt.Int.toString} />
       {sidebarElements}
     </SidebarContent>
     <SidebarFooter className="bg-dark bottom-0 sticky list-none">
-      <div className="flex flex-col justify-around items-center py-8">
+      <div className=" flex flex-col justify-around items-center py-8 gap-3">
         <p className="text-white font-poppins">
           {"Your server is not on the list?"->React.string}
         </p>

apps/web/app/components/SidebarToggle.res

@@ -1,9 +1,9 @@
 @react.component
-let make = (~handleToggleSidebar, ~maybeUser) => {
+let make = (~handleIsSidebarVisible, ~maybeUser) => {
   let visibility = maybeUser->Option.isSome ? "visible" : "invisible"
   <div
     className={`${visibility} md:hidden cursor-pointer w-12 h-12 bg-dark text-center text-white rounded-full flex justify-center items-center font-xl`}
-    onClick={_ => handleToggleSidebar(true)}>
+    onClick={_ => handleIsSidebarVisible(true)}>
     <ReactIcons.FaBars size={30} />
   </div>
 }