dark theme

fpgmaas · Jun 15, 2024 · 3e92f7c · 3e92f7c
1 parent 1f2b033
commit 3e92f7c
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <p align="center">
   <picture>
     <source srcset="./static/pypi-light.svg" media="(prefers-color-scheme: light)">
-    <img alt="deptry logo" width="420" height="200" src="./static/pypi.svg">
+    <img alt="pypi-scout logo" width="420" height="200" src="./static/pypi.svg">
   </picture>
 </p>
 PyPI Scout helps you find PyPI packages through natural language prompts using Large Language Models (LLM's).

diff --git a/frontend/app/components/InfoBox.tsx b/frontend/app/components/InfoBox.tsx
@@ -8,15 +8,15 @@ const InfoBox: React.FC<InfoBoxProps> = ({ infoBoxVisible }) => {
   if (!infoBoxVisible) return null;
 
   return (
-    <div className="w-3/5 bg-white p-6 rounded-lg shadow-lg mt-4">
+    <div className="w-3/5 bg-gray-800 p-6 rounded-lg shadow-lg mt-4 text-white">
       <h2 className="text-2xl font-bold mb-2">How does this work?</h2>
-      <p className="text-gray-700">
+      <p className="text-gray-300">
         This application allows you to search for Python packages on PyPI using
         natural language. An example query would be &quot;a package that creates
         plots and beautiful visualizations&quot;.
       </p>
       <br />
-      <p className="text-gray-700">
+      <p className="text-gray-300">
         Once you click search, your query will be matched against the summary
         and the first part of the description of all PyPI packages with more
         than 50 weekly downloads. The results are then scored based on their

diff --git a/frontend/app/components/SearchResultsTable.tsx b/frontend/app/components/SearchResultsTable.tsx
@@ -27,19 +27,19 @@ const SearchResultsTable: React.FC<SearchResultsTableProps> = ({
 
   return (
     <div className="overflow-x-auto w-full">
-      <table className="min-w-full divide-y divide-gray-200">
-        <thead className="bg-gray-50">
+      <table className="min-w-full divide-y divide-gray-700">
+        <thead className="bg-gray-800">
           <tr>
             <th
-              className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer whitespace-nowrap"
+              className="px-4 py-2 text-left text-xs font-medium text-gray-200 uppercase tracking-wider cursor-pointer whitespace-nowrap"
               onClick={() => onSort("name")}
             >
               <div className="flex items-center">
                 Name <span className="ml-1">{getSortIndicator("name")}</span>
               </div>
             </th>
             <th
-              className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer whitespace-nowrap"
+              className="px-4 py-2 text-left text-xs font-medium text-gray-200 uppercase tracking-wider cursor-pointer whitespace-nowrap"
               onClick={() => onSort("similarity")}
             >
               <div className="flex items-center">
@@ -48,7 +48,7 @@ const SearchResultsTable: React.FC<SearchResultsTableProps> = ({
               </div>
             </th>
             <th
-              className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer whitespace-nowrap"
+              className="px-4 py-2 text-left text-xs font-medium text-gray-200 uppercase tracking-wider cursor-pointer whitespace-nowrap"
               onClick={() => onSort("weekly_downloads")}
             >
               <div className="flex items-center">
@@ -58,33 +58,35 @@ const SearchResultsTable: React.FC<SearchResultsTableProps> = ({
                 </span>
               </div>
             </th>
-            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="px-4 py-2 text-left text-xs font-medium text-gray-200 uppercase tracking-wider">
               Summary
             </th>
-            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="px-4 py-2 text-left text-xs font-medium text-gray-200 uppercase tracking-wider">
               Link
             </th>
           </tr>
         </thead>
-        <tbody className="bg-white divide-y divide-gray-200">
+        <tbody className="bg-gray-800 divide-y divide-gray-700">
           {results.map((result, index) => (
-            <tr key={index} className="hover:bg-gray-100">
-              <td className="px-4 py-2 whitespace-nowrap">{result.name}</td>
-              <td className="px-4 py-2 whitespace-nowrap">
+            <tr key={index} className="hover:bg-gray-700">
+              <td className="px-4 py-2 whitespace-nowrap text-gray-200">
+                {result.name}
+              </td>
+              <td className="px-4 py-2 whitespace-nowrap text-gray-200">
                 {result.similarity.toFixed(3)}
               </td>
-              <td className="px-4 py-2 whitespace-nowrap">
+              <td className="px-4 py-2 whitespace-nowrap text-gray-200">
                 {result.weekly_downloads.toLocaleString()}
               </td>
-              <td className="px-4 py-2 whitespace-normal break-words">
+              <td className="px-4 py-2 whitespace-normal break-words text-gray-200">
                 {result.summary}
               </td>
               <td className="px-4 py-2 whitespace-nowrap">
                 <a
                   href={`https://pypi.org/project/${result.name}/`}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-blue-500 hover:underline flex items-center"
+                  className="text-blue-400 hover:underline flex items-center"
                 >
                   <FaExternalLinkAlt className="mr-1" />
                   PyPI

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
@@ -6,13 +6,16 @@
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
+  --dark-bg-start-rgb: 10, 10, 35; /* Very dark blue almost grey */
+  --dark-bg-end-rgb: 25, 25, 50; /* Dark blue */
+  --dark-foreground-rgb: 255, 255, 255;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --foreground-rgb: var(--dark-foreground-rgb);
+    --background-start-rgb: var(--dark-bg-start-rgb);
+    --background-end-rgb: var(--dark-bg-end-rgb);
   }
 }
 

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -31,22 +31,29 @@ export default function Home() {
   };
 
   return (
-    <main className="flex flex-col items-center justify-start min-h-screen p-4 space-y-4 bg-gray-100">
-      <header className="w-full text-center mb-4">
-        <h1 className="text-4xl font-bold p-2 mt-4">✨PyPI Scout</h1>
-        <p className="text-lg text-gray-600">
+    <main className="flex flex-col items-center justify-start min-h-screen p-4 space-y-4 bg-gray-900">
+      <header className="w-full flex flex-col items-center text-center mb-4">
+        <picture>
+          <img
+            alt="pypi-scout logo"
+            width="420"
+            height="220"
+            src="./pypi.svg"
+          ></img>
+        </picture>
+        <p className="text-lg text-gray-300 mt-2">
           Enter your query to search for Python packages
         </p>
       </header>
-      <div className="flex flex-col items-center space-y-4 w-3/5 bg-white p-6 rounded-lg shadow-lg">
+      <div className="flex flex-col items-center space-y-4 w-3/5 bg-gray-800 p-6 rounded-lg shadow-lg">
         <textarea
-          className="w-full h-24 p-2 border rounded resize-none overflow-auto focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="w-full h-24 p-2 border border-gray-700 rounded resize-none overflow-auto focus:outline-none focus:ring-2 focus:ring-blue-700 bg-gray-700 text-white"
           value={text}
           onChange={(e) => setText(e.target.value)}
           placeholder="Enter your query here..."
         ></textarea>
         <button
-          className="w-[250px] p-2 border rounded bg-blue-500 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="w-[250px] p-2 border border-gray-700 rounded bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700"
           onClick={() =>
             handleSearch(
               text,
@@ -68,7 +75,7 @@ export default function Home() {
 
       <div className="w-full flex justify-center mt-6">
         <button
-          className="w-[250px] p-2 border rounded bg-gray-300 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500"
+          className="w-[250px] p-2 border border-gray-700 rounded bg-gray-600 text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700"
           onClick={() => setInfoBoxVisible(!infoBoxVisible)}
         >
           {infoBoxVisible ? "Hide Info" : "How does this work?"}
@@ -79,7 +86,7 @@ export default function Home() {
 
       {results.length > 0 && (
         <div className="w-full flex justify-center mt-6">
-          <div className="w-11/12 bg-white p-6 rounded-lg shadow-lg flex flex-col items-center">
+          <div className="w-11/12 bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center">
             <SearchResultsTable
               results={results}
               sortField={sortField}

diff --git a/static/pypi.svg → frontend/public/pypi.svg b/static/pypi.svg → frontend/public/pypi.svg
diff --git a/static/demo.gif b/static/demo.gif
diff --git a/static/pypi-scout.mp4 b/static/pypi-scout.mp4