fix: mobile responsiveness for add to list dropdown

open-sauced · Oct 11, 2023 · fda8d3a · fda8d3a
1 parent 705cfa9
commit fda8d3a
Showing 1 changed file with 33 additions and 14 deletions.
diff --git a/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx b/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 
 import { TfiMoreAlt } from "react-icons/tfi";
 import { HiUserAdd } from "react-icons/hi";
+import { SlUserFollowing } from "react-icons/sl";
 import { SignInWithOAuthCredentials, User } from "@supabase/supabase-js";
 import { usePostHog } from "posthog-js/react";
 import { clsx } from "clsx";
@@ -166,18 +167,38 @@ const ContributorProfileHeader = ({
                 !isOwner && (
                   <>
                     {isFollowing ? (
-                      <Button
-                        onClick={handleFollowClick}
-                        variant="primary"
-                        className="group w-[6.25rem] justify-center items-center"
-                      >
-                        <span className="hidden text-center sm:block group-hover:hidden">Following</span>
-                        <span className="block text-center sm:hidden group-hover:block">Unfollow</span>
-                      </Button>
+                      <>
+                        <Button
+                          onClick={handleFollowClick}
+                          variant="primary"
+                          className="group w-[6.25rem] justify-center items-center hidden md:flex"
+                        >
+                          <span className="hidden text-center sm:block group-hover:hidden">Following</span>
+                          <span className="block text-center sm:hidden group-hover:block">Unfollow</span>
+                        </Button>
+                        <button
+                          className="p-2 text-white rounded-lg md:hidden bg-sauced-orange"
+                          onClick={handleFollowClick}
+                        >
+                          <SlUserFollowing className="text-xl" />
+                        </button>
+                      </>
                     ) : (
-                      <Button variant="primary" className="w-[6.25rem] text-center" onClick={handleFollowClick}>
-                        <HiUserAdd fontSize={20} className="mr-1" /> Follow
-                      </Button>
+                      <>
+                        <Button
+                          variant="primary"
+                          className="w-[6.25rem] text-center hidden md:flex"
+                          onClick={handleFollowClick}
+                        >
+                          <HiUserAdd fontSize={20} className="mr-1" /> Follow
+                        </Button>
+                        <button
+                          onClick={handleFollowClick}
+                          className="p-2 text-white rounded-lg md:hidden bg-sauced-orange"
+                        >
+                          <HiUserAdd className="text-xl font-bold" />
+                        </button>
+                      </>
                     )}
                   </>
                 )
@@ -269,8 +290,6 @@ const ContributorProfileHeader = ({
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
-
-            {/* Mobile dropdown menu */}
           </div>
         )}
       </div>
@@ -393,7 +412,7 @@ const AddToListDropdown = ({ username }: { username: string }) => {
           </Link>
         </div>
       }
-      className="w-10 px-4"
+      className="w-10 md:px-4 max-sm:text-sm"
       placeholder="Add to list"
       options={listOptions}
       selected={selectedList}