improved UI

pages/collections/[id].tsx

@@ -14,7 +14,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import { useSession } from "next-auth/react";
 import ProfilePhoto from "@/components/ProfilePhoto";
@@ -58,6 +58,10 @@ export default function () {
     setDeleteCollectionModal(!deleteCollectionModal);
   };
 
+  const handleSortChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setSortBy(event.target.value);
+  };
+
   useEffect(() => {
     setActiveCollection(
       collections.find((e) => e.id === Number(router.query.id))
@@ -120,7 +124,7 @@ export default function () {
               >
                 <div
                   onClick={toggleCollectionMembersModal}
-                  className="flex justify-end items-center w-fit ml-auto group cursor-pointer"
+                  className="flex justify-center sm:justify-end items-center w-fit mx-auto sm:mr-0 sm:ml-auto group cursor-pointer"
                 >
                   <div
                     className={`bg-sky-500 p-2 leading-3 select-none group-hover:bg-sky-400 duration-100 text-white rounded-full text-xs ${
@@ -173,7 +177,7 @@ export default function () {
 
                 {sortDropdown ? (
                   <SortLinkDropdown
-                    handleSortChange={(e) => setSortBy(e.target.value)}
+                    handleSortChange={handleSortChange}
                     sortBy={sortBy}
                     toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
                   />

pages/collections/index.tsx

@@ -81,10 +81,15 @@ export default function () {
     <MainLayout>
       <div className="p-5">
         <div className="flex gap-3 items-center justify-between mb-5">
-          <div className="flex gap-3 items-center">
-            <div className="flex gap-2 items-center">
-              <FontAwesomeIcon icon={faBox} className="w-5 h-5 text-sky-300" />
-              <p className="text-lg text-sky-900">All Collections</p>
+          <div className="flex gap-3 items-end">
+            <div className="flex gap-2">
+              <FontAwesomeIcon
+                icon={faBox}
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-300"
+              />
+              <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
+                All Collections
+              </p>
             </div>
             <div className="relative">
               <div