feat: add initial UI for home's top component

- Changed background color of Home component - Removed commented out code in Home component - Improved layout and styling of Top component - Added logo to Top component - Added search bar to Top component - Added new email button to Top component - Added hamburger menu icon to Top component
ajyey · Jun 20, 2023 · d1abac3 · d1abac3
1 parent 249ac81
commit d1abac3
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 42 deletions.
diff --git a/src/pages/popup/components/home/Home.tsx b/src/pages/popup/components/home/Home.tsx
@@ -13,24 +13,24 @@ interface HomeComponentProps {
 
 export default function HomeComponent() {
   const [maskedEmails, setMaskedEmails] = useState<MaskedEmail[]>([]);
-  useEffect(() => {
-    const fetchMaskedEmails = async () => {
-      try {
-        const storageData = await chrome.storage.sync.get('fastmail_session');
-        const session = storageData.fastmail_session;
-        const allMaskedEmails: MaskedEmail[] = await list(session);
-        setMaskedEmails(allMaskedEmails);
-      } catch (error) {
-        console.error('Error fetching masked emails:', error);
-      }
-    };
-
-    fetchMaskedEmails();
-  }, []);
+  // useEffect(() => {
+  //   const fetchMaskedEmails = async () => {
+  //     try {
+  //       const storageData = await chrome.storage.sync.get('fastmail_session');
+  //       const session = storageData.fastmail_session;
+  //       const allMaskedEmails: MaskedEmail[] = await list(session);
+  //       setMaskedEmails(allMaskedEmails);
+  //     } catch (error) {
+  //       console.error('Error fetching masked emails:', error);
+  //     }
+  //   };
+  //
+  //   fetchMaskedEmails();
+  // }, []);
   return (
-    <div className="bg-gray-800 h-[400px] w-[600px]">
+    <div className="bg-astronaut h-[400px] w-[600px]">
       <TopComponent />
-      <div className="w-full bg-red-500">
+      <div className="w-full">
         <div className="flex">
           <div className="w-5/12 bg-gray-400 ml-2 mt-2">
             <MaskedEmailListPane maskedEmails={maskedEmails} />

diff --git a/src/pages/popup/components/home/top/Top.tsx b/src/pages/popup/components/home/top/Top.tsx
@@ -3,14 +3,20 @@ import icon from '@assets/img/icon.svg';
 
 export default function TopComponent() {
   return (
-    <section className="flex">
+    <section className="flex h-[55px]">
       <div className="w-full">
+        {/*LOGO*/}
         <div className="flex">
-          <div className="w-1/6 bg-gray-400 ml-2 mt-2">
-            <img src={icon} className="pointer-events-none h-5" alt="icon" />
+          <div className="flex columns-[45px] items-center">
+            <img
+              src={icon}
+              className="pointer-events-none h-[30px] w-[45px] p-1"
+              alt="icon"
+            />
           </div>
-          <div className="w-3/6 bg-gray-500">
-            <div className="relative w-full">
+          {/*SEARCH BAR*/}
+          <div className="columns-[375px]">
+            <div className="relative w-full p-1">
               <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                 <svg
                   aria-hidden="true"
@@ -29,33 +35,54 @@ export default function TopComponent() {
               <input
                 type="text"
                 id="simple-search"
-                className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                className="bg-big-stone text-gray-900 text-sm rounded-[5px] w-full pl-10 p-2.5"
                 placeholder="Search Masked Emails..."
                 required
               ></input>
             </div>
           </div>
-          <div className="w-2/6 bg-gray-400">
-            <button
-              type="button"
-              className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-            >
-              <svg
-                width="16"
-                height="16"
-                data-path-count="1"
-                xmlns="http://www.w3.org/2000/svg"
-                className="mr-2 text-white fill-current"
+          {/*NEW EMAIL BUTTON*/}
+          <div className="flex columns-[120px] items-center">
+            <div className="relative w-full p-1">
+              <button
+                type="button"
+                className="text-white bg-mikado-yellow/[.85] font-bold rounded-[5px] text-sm p-2.5 text-center inline-flex items-center"
               >
-                <path
-                  data-path-style="onLight"
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M8 2a1 1 0 0 0-1 1v4H3a1 1 0 0 0 0 2h4v4a1 1 0 1 0 2 0V9h4a1 1 0 1 0 0-2H9V3a1 1 0 0 0-1-1Z"
-                ></path>
-              </svg>
-              New Email
-            </button>
+                <svg
+                  width="16"
+                  height="16"
+                  data-path-count="1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="mr-2 text-white fill-current"
+                >
+                  <path
+                    data-path-style="onLight"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M8 2a1 1 0 0 0-1 1v4H3a1 1 0 0 0 0 2h4v4a1 1 0 1 0 2 0V9h4a1 1 0 1 0 0-2H9V3a1 1 0 0 0-1-1Z"
+                  ></path>
+                </svg>
+                New Email
+              </button>
+            </div>
+          </div>
+          {/*HAMBURGER*/}
+          <div className="flex items-center p-1.5">
+            <svg
+              width="35"
+              height="35"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.75 6.75H20.25M3.75 12H20.25M3.75 17.25H20.25"
+                stroke="#D8D9D8"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
           </div>
         </div>
       </div>