Merge pull request #1 from plsankar/develop

Develop

package.json

@@ -15,12 +15,15 @@
         "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
     },
     "dependencies": {
+        "@headlessui/react": "^1.7.15",
         "@types/chrome": "^0.0.237",
         "color": "^4.2.3",
+        "lucide-react": "^0.259.0",
         "react": "^18.2.0",
         "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "^18.2.0",
-        "react-hot-toast": "^2.4.1"
+        "react-hot-toast": "^2.4.1",
+        "react-tooltip": "^5.18.0"
     },
     "devDependencies": {
         "@crxjs/vite-plugin": "^2.0.0-beta.18",

public/manifest.json

@@ -2,12 +2,12 @@
     "manifest_version": 3,
     "name": "Color Hunter",
     "description": "Export the color palette of a website in a single click",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "icons": {
-        "16": "dist/icon16.png",
-        "32": "dist/icon32.png",
-        "48": "dist/icon48.png",
-        "128": "dist/icon128.png"
+        "16": "icon16.png",
+        "32": "icon32.png",
+        "48": "icon48.png",
+        "128": "icon128.png"
     },
     "action": {
         "default_popup": "index.html"
@@ -24,7 +24,6 @@
     ],
     "permissions": [
         "tabs",
-        "<all_urls>",
-        "activeTab"
+        "<all_urls>"
     ]
 }

src/ui/App.tsx

@@ -5,6 +5,8 @@ import Color from "color";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { getActiveTabId } from "./utils";
 import { toast } from "react-hot-toast";
+import Header from "./components/Header";
+import ErrorPanel from "./components/ErrorPanel";
 
 function App() {
     const [colors, setColors] = useState<TColor[]>([]);
@@ -17,7 +19,7 @@ function App() {
             return;
         }
         if (!activeTab.url?.startsWith("http")) {
-            setError("Sorry!, This page is not scannable");
+            setError("Sorry, This page is not scannable");
             return;
         }
         chrome.tabs.sendMessage<EventBlast, ColorScannerResponse>(activeTab.id, { action: "color-scanner" }, function (response) {
@@ -51,18 +53,16 @@ function App() {
     }, []);
 
     return (
-        <div className="relative flex flex-col">
-            <div className="sticky top-0 py-5 bg-white border-b shadow-sm">
-                <h1 className="text-xl text-center">ColorHunter</h1>
-            </div>
+        <div className="relative flex flex-col min-h-screen">
+            <Header />
             {colors.length > 0 && (
                 <div className="flex flex-col gap-5 p-5">
                     {colors.map((color, index) => (
                         <ColorItem value={color} key={index} />
                     ))}
                 </div>
             )}
-            {error && <p className="p-5 text-center rounded">{error}</p>}
+            {error && <ErrorPanel message={error} />}
         </div>
     );
 }

src/ui/components/ErrorPanel.tsx

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import WebColors from "../illustrations/WebColors";
+
+const ErrorPanel: FC<{ message: string }> = ({ message }) => {
+    return (
+        <div className="flex flex-col items-center justify-center flex-grow gap-5 p-4">
+            <WebColors />
+            <p className="text-sm text-center">{message}</p>
+        </div>
+    );
+};
+
+export default ErrorPanel;

src/ui/components/Header.tsx

@@ -0,0 +1,12 @@
+import HeaderMenu from "./HeaderMenu";
+
+const Header = () => {
+    return (
+        <div className="sticky top-0 flex flex-row items-center w-full gap-4 px-4 py-4 bg-white border-b shadow-sm">
+            <img src={chrome.runtime.getURL("logo.svg")} alt="ColorHunter" className="inline-block w-40" />
+            <HeaderMenu />
+        </div>
+    );
+};
+
+export default Header;