Merge pull request #54 from afrin-k/staging

further design

Author: NishantGupt786

src/components/Navbar.tsx

@@ -21,7 +21,7 @@ function Navbar() {
       <div>
         <Link
           href="/"
-          className="jost tracking-wide bg-gradient-to-r from-[#562EE7] to-[#bd21b4] bg-clip-text text-center text-4xl font-extrabold text-transparent dark:from-[#562EE7] dark:to-[#bd21b4] md:w-[60%] md:text-6xl"
+          className="jost tracking-wide bg-gradient-to-r from-[#562EE7] to-[rgba(116,128,255,0.8)] bg-clip-text text-center text-4xl font-extrabold text-transparent dark:from-[#562EE7] dark:to-[#FFC6E8] md:w-[60%] md:text-6xl"
         >
           Papers
         </Link>
@@ -33,7 +33,7 @@ function Navbar() {
 
         <Link href="/upload">
           <div className="md:p-[2px] bg-gradient-to-r from-[#562EE7] to-[#bd21b4] rounded-full">
-              <div className="rounded-full font-bold text-xs md:text-sm mt-2 md:mt-0 bg-slate-200 dark:bg-black px-4 md:px-6 py-3 tracking-wider text-black dark:text-white font-sans hover:bg-white dark:hover:bg-slate-700">
+              <div className="whitespace-nowrap rounded-full font-bold text-xs md:text-sm mt-2 md:mt-0 bg-slate-200 dark:bg-black px-4 md:px-6 py-3 tracking-wider text-black dark:text-white font-sans hover:bg-white dark:hover:bg-slate-700">
               ⇱ UPLOAD PAPERS
               </div>
             </div>

src/components/PreviewCard.tsx

@@ -14,15 +14,15 @@ const PreviewCard = ({ paper }: { paper: Paper }) => {
   return (
     <div
       key={paper._id}
-      className="w-[65%] md:w-64 space-y-1 rounded-xl border-2 bg-white dark:bg-black hover:border-[#434dba] dark:hover:border-white border-black p-4 dark:border-[#434dba]"
+      className="w-[60%] md:w-56 space-y-1 rounded-xl border-2 bg-white dark:bg-black hover:border-[#434dba] dark:hover:border-white border-black p-4 dark:border-[#434dba]"
     >
       <Link href={`/paper/${paper._id}`} target="_blank" rel="noopener noreferrer">
         <Image
           src={paper.thumbnailUrl}
           alt={paper.subject}
           width={180}
           height={180}
-          className="mb-2 h-[160px] md:h-[180px] w-full object-cover"
+          className="mb-2 h-[156px] md:h-[170px] w-full object-cover"
         />
       </Link>
 

src/components/StoredPapers.tsx

@@ -29,7 +29,7 @@ function StoredPapers() {
 
   return (
     <>
-      <p className="mt-8 mb-6 text-center font-sans text-2xl md:text-3xl font-semibold">Most Viewed Papers</p>
+      <p className="mt-2 mb-6 text-center font-sans text-xl font-semibold">Most Viewed Papers</p>
       <div className="flex flex-wrap justify-center gap-4">
         {displayPapers.map((paper: Paper) => (
           <PreviewCard key={paper._id} paper={paper} />