ui bug fixes

Author: Advik-Gupta

src/components/AddPapers.tsx

@@ -2,11 +2,9 @@ const AddPapers = ({ onClick }: { onClick?: () => void }) => {
   return (
     <div
       onClick={onClick}
-      className="flex h-full w-full cursor-pointer items-center justify-center rounded-md border-2 border-dashed border-purple-500 bg-transparent transition hover:border-gray-400 hover:bg-[#2a2a2a] hover:text-gray-300"
+      className="flex h-full w-full cursor-pointer items-center justify-center rounded-md border-2 border-dashed border-purple-500 bg-transparent text-purple-500 transition hover:border-gray-400 hover:bg-[#e8e9ff] hover:text-gray-700 dark:hover:bg-[#2a2a2a] dark:hover:text-gray-300"
     >
-      <span className="text-4xl text-purple-500 transition-colors duration-200 group-hover:text-gray-300">
-        +
-      </span>
+      <span className="text-4xl transition-colors duration-200">+</span>
     </div>
   );
 };

src/components/PinButton.tsx

@@ -14,9 +14,11 @@ export default function PinButton({
   return (
     <button
       onClick={onToggle}
-      className={`ml-2 flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium ${
-        isPinned ? "bg-purple-700 text-white" : "bg-[#2B2B30] text-white/80"
-      } transition hover:bg-purple-600`}
+      className={`ml-2 flex items-center gap-2 rounded-full border border-[#3A3745] px-4 py-2 text-sm font-medium transition ${
+        isPinned
+          ? "bg-purple-700 text-white hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-500"
+          : "bg-[#e8e9ff] text-gray-700 hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823]"
+      }`}
       disabled={disabled}
     >
       {isPinned ? <Pin className="h-4 w-4" /> : <PinOff className="h-4 w-4" />}

src/components/Searchbar/pinned-searchbar.tsx

@@ -210,7 +210,7 @@ function PinnedSearchBar({
                 <PinButton
                   isPinned={pinned}
                   onToggle={handlePinToggle}
-                  disabled={!showControls && searchText.trim() === ""}
+                  disabled={!showControls || searchText.trim() === ""}
                 />
               </div>
 
@@ -232,14 +232,14 @@ function PinnedSearchBar({
                         handlePinToggle();
                         setOpen(false);
                       }}
-                      disabled={!showControls && searchText.trim() === ""}
+                      disabled={!showControls || searchText.trim() === ""}
                     />
                     <button
                       onClick={() => {
                         handleRemoveAll();
                         setOpen(false);
                       }}
-                      className="flex items-center gap-2 rounded-full border border-[#3A3745] px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-[#1A1823]"
+                      className="flex items-center gap-2 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-3 py-1.5 text-sm font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823]"
                     >
                       Remove All <X className="h-4 w-4" />
                     </button>
@@ -254,8 +254,11 @@ function PinnedSearchBar({
       <div className="mt-2 hidden w-full md:block">
         <div className="ml-auto w-fit">
           <button
-            onClick={handleRemoveAll}
-            className={`flex items-center gap-2 rounded-full border border-[#3A3745] px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-[#1A1823] ${showControls ? "block" : "hidden"}`}
+            onClick={() => {
+              handleRemoveAll();
+              setOpen(false);
+            }}
+            className="flex items-center gap-2 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-3 py-1.5 text-sm font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823]"
           >
             Remove All <X className="h-4 w-4" />
           </button>

src/components/Searchbar/searchbar-child.tsx

@@ -147,7 +147,37 @@ function SearchBarChild({
                     id="subject"
                     className="items-center text-sm tracking-wide text-black dark:text-white sm:text-base"
                   >
-                    {suggestion}
+                    {(() => {
+                      const codeMatch = /\[[^\]]+\]$/.exec(suggestion);
+                      const code = codeMatch ? codeMatch[0] : "";
+                      const title = suggestion.replace(/\s\[[^\]]+\]$/, "");
+
+                      let displayTitle = title;
+                      const isMobile =
+                        typeof window !== "undefined" &&
+                        window.innerWidth < 640;
+
+                      if (isMobile) {
+                        if (title.length > 25) {
+                          const start = title.slice(0, 15).trim();
+                          const end = title.slice(-8).trim();
+                          displayTitle = `${start}.....${end}`;
+                        }
+                      } else {
+                        if (title.length > 40) {
+                          const start = title.slice(0, 25).trim();
+                          const end = title.slice(-15).trim();
+                          displayTitle = `${start}.....${end}`;
+                        }
+                      }
+
+                      return (
+                        <>
+                          <span className="truncate">{displayTitle}</span>
+                          <span className="ml-2 shrink-0">{code}</span>
+                        </>
+                      );
+                    })()}
                   </span>
                 </li>
               ))}

src/components/UpcomingPaper.tsx

@@ -94,11 +94,13 @@ export default function PaperCard({ subject, slots }: PaperCardProps) {
               e.stopPropagation();
               handlePinToggle();
             }}
-            className="group z-10 mt-1"
+            className="group z-10 mt-1 text-black dark:text-white"
           >
             <Pin
-              className={`h-6 w-6 transform stroke-white transition-all ${
-                pinned ? "fill-[#A78BFA]" : "group-hover:fill-[#A78BFA]"
+              className={`h-6 w-6 transform stroke-current transition-all ${
+                pinned
+                  ? "fill-violet-400 dark:fill-violet-500"
+                  : "fill-transparent group-hover:fill-violet-400 dark:group-hover:fill-violet-500"
               } group-hover:scale-110`}
             />
           </button>

src/components/ui/PWAInstallButton.tsx

@@ -13,7 +13,8 @@ interface BeforeInstallPromptEvent extends Event {
 }
 
 const PWAInstallButton = () => {
-  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
+  const [deferredPrompt, setDeferredPrompt] =
+    useState<BeforeInstallPromptEvent | null>(null);
   const [canInstall, setCanInstall] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
 
@@ -53,14 +54,19 @@ const PWAInstallButton = () => {
 
   return (
     <>
-      <div className="md:hidden flex items-center justify-between rounded-full dark:bg-[#2b2343] bg-transparent px-4 py-2 shadow-md text-white w-fit border border-[#3A3745] transition hover:bg-black hover:dark:bg-[#2b2b30]">
+      <div className="flex w-fit items-center justify-between rounded-full border border-[#3A3745] bg-[#e8e9ff] px-4 py-2 text-gray-700 shadow-md transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#2b2b30] md:hidden">
         <div className="flex items-center gap-3">
-          <Image src="/papers_logo.png" alt="Papers App" width={32} height={32} />
-          <span className="font-semibold text-lg text-white">Papers App</span>
+          <Image
+            src="/papers_logo.png"
+            alt="Papers App"
+            width={32}
+            height={32}
+          />
+          <span className="text-lg font-semibold">Papers App</span>
         </div>
         <button
           onClick={handleInstall}
-          className="ml-6 flex items-center gap-2 rounded-full border border-[#3A3745] dark:bg-[#1e1e24] bg-transparent px-4 py-1 text-sm font-semibold text-white transition hover:bg-black hover:dark:bg-[#2b2b30]"
+          className="ml-6 flex items-center gap-2 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-4 py-1 text-sm font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823]"
         >
           <Download className="h-4 w-4" />
           Install
@@ -69,15 +75,10 @@ const PWAInstallButton = () => {
 
       <div
         onClick={handleInstall}
-        className="hidden md:flex items-center gap-3 rounded-full px-5 py-2 text-white cursor-pointer dark:bg-[#130e1f] bg-transparent border border-[#3A3745] transition hover:bg-black hover:dark:bg-[#1A1823]"
+        className="hidden cursor-pointer items-center gap-3 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-5 py-2 text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823] md:flex"
       >
-        <Image
-          src="/papers_logo.png"
-          alt="Papers App"
-          width={28}
-          height={28}
-        />
-        <span className="font-semibold text-sm text-white">Papers App</span>
+        <Image src="/papers_logo.png" alt="Papers App" width={28} height={28} />
+        <span className="text-sm font-semibold">Papers App</span>
       </div>
     </>
   );