Improve sidebar design

public/index.html

@@ -15,6 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -9,7 +9,7 @@ import { SpinerLoader } from "./components/SpinerLoader";
 
 function App() {
   return (
-    <div className="flex h-screen">
+    <div className="flex h-screen font-sans">
       <div className="w-64 bg-gray-2000" aria-label="Sidebar">
         <Sidebar />
       </div>

src/components/ClassObj.js

@@ -5,6 +5,7 @@ import { MainContext } from "../contexts/MainContext";
 
 export const ClassObj = ({ classProps }) => {
   const { activeClass, dispatchSetActiveClass } = useContext(MainContext);
+  const isActive = activeClass && activeClass.name === classProps.name;
 
   const setActiveClass = (class_) => {
     dispatchSetActiveClass({
@@ -15,17 +16,10 @@ export const ClassObj = ({ classProps }) => {
 
   return (
     <li
-      className={`subMenuHeader hoverAnimation`}
-      style={{
-        background: `${
-          activeClass && activeClass.name === classProps.name
-            ? activeClass.color
-            : ""
-        }`,
-      }}
-      onClick={() => {
-        setActiveClass(classProps);
-      }}
+      className={`subMenuHeader hoverAnimation ${
+        isActive ? "bg-slate-300" : "bg-white"
+      }`}
+      onClick={() => setActiveClass(classProps)}
     >
       <span className="text-xs block float-left">
         <BsSquareFill style={{ color: classProps.color }}></BsSquareFill>

src/components/Classes.js

@@ -20,20 +20,20 @@ export const Badge = ({ activeClass }) => {
 export const Classes = () => {
   const { activeProject, activeClass } = useContext(MainContext);
   const [classes, setClasses] = useState([]);
-  const [openMenu, setOpenMenu] = useState(true);
+  const [isOpen, setIsOpen] = useState(true);
 
   useEffect(() => {
     const classLayers = getClassLayers(activeProject);
     setClasses(classLayers);
-    setOpenMenu(true);
+    setIsOpen(true);
   }, [activeProject]);
   return (
     <MenuTemplate
-      title={"Classes"}
-      badge={<Badge activeClass={activeClass} />}
+      title="Classes"
+      badge={isOpen ? false : <Badge activeClass={activeClass} />}
       icon={<BsListUl />}
-      openMenu={openMenu}
-      setOpenMenu={setOpenMenu}
+      openMenu={isOpen}
+      setOpenMenu={setIsOpen}
     >
       <ul className="pt-1">
         {classes.map((classProps, index) => (

src/components/EncodeCanvas.js

@@ -25,14 +25,12 @@
   } = useContext(MainContext);
 
   const [samApiStatus, setSamApiStatus] = useState(null);
-
+  const [notificationShown, setNotificationShown] = useState(false);
   const reset = () => {
     setSpinnerLoading(false);
     setSamApiStatus(null);
   };
 
-  const [notificationShown, setNotificationShown] = useState(false);
-
   // Request segment-anything-services
   const requestSAM = async (requestProps, isEncode) => {
     setSpinnerLoading(true);
@@ -137,7 +135,7 @@
         );
       }
     }
   }, [pointsSelector]);
 
   const requestPrediction = async () => {
     const requestProps = getPropertiesRequest(map, pointsSelector);
@@ -147,10 +145,8 @@
   return (
     <>
       <button
-        className="custom_button"
-        onClick={() => {
-          requestPrediction();
-        }}
+        className="custom_button bg-orange-ds text-white hover:bg-orange-ds hover:bg-opacity-80"
+        onClick={() => requestPrediction()}
         disabled={samApiStatus || false}
       >
         New SAM AOI

src/components/EncodeExpImp.js

@@ -40,26 +40,23 @@ export const EncodeExpImp = () => {
 
   return (
     <div
-      className="relative inline-block"
+      className="relative inline-block text-right"
       onMouseLeave={() => setIsOpen(false)} // Add this line
     >
       {encodeItems.length === 0 ? (
         <EncodeImport />
       ) : (
         <button
-          className="custom_button px-1 inline-flex"
+          className="custom_button text-center pl-3"
           onClick={toggleDropdown}
         >
           Export AOIs
-          <BsChevronDown
-            size="1.5em"
-            className="w-6 h-3 ml-2 mt-[3px] text-red"
-          />
+          <BsChevronDown size="1.5em" className="inline w-6 h-3 text-red" />
         </button>
       )}
 
       {isOpen && (
-        <div className="absolute text-xs right-0  left-0 mt-0 bg-white border border-gray-200 rounded shadow-lg">
+        <div className="absolute text-left text-xs right-0 left-0 mt-0 bg-white border border-gray-200 rounded shadow-lg">
           <ul>
             <li
               className="py-2 custom_button border-none px-1"

src/components/EncodeItem.js

@@ -57,14 +57,14 @@
 
   return (
     <div className=" relative inline-flex justify-center items-center pr-1 pl-1 ml-1 text-xs text-slate-900 font-medium rounded-full cursor-pointer">
       <img
         src={encodeItem.canvas}
-        alt={`Encode Image`}
+        alt={`Encoded Image for ${encodeItem.canvas}`}
         className={`w-full h-full object-cover opacity-100 transition-opacity duration-500 ease-in-out transform hover:opacity-90 mb-2 
       ${
         activeEncodeImageItem && encodeItem.id === activeEncodeImageItem.id
-          ? "border border-green-400 border-2"
-          : "border border-gray-300 border-2"
+          ? "border border-orange-ds border-2"
+          : "border border-orange-ds border-opacity-50 border-2"
       }`}
         style={{
           width: "100px",
@@ -73,21 +73,21 @@
         onClick={() => zoomTo(encodeItem)}
       />
       <div
-        className={`absolute w-22 top-1 mr-1 ml-1  pl-1 pr-1 text-xxs bg-${
+        className={`absolute w100 top-1 mr-1 ml-1  pl-1 pr-1 text-xxs ${
           activeEncodeImageItem && activeEncodeImageItem.id === encodeItem.id
-            ? "green"
-            : "yellow"
-        }-500 rounded opacity-80 backdrop-filter backdrop-blur-md flex items-center space-x-2`}
+            ? "bg-orange-ds"
+            : "bg-grey"
+        } rounded opacity-80 backdrop-filter backdrop-blur-md flex items-center space-x-2`}
       >
-        <p className="font-bold text-gray">
+        <span className="font-bold text-white">
           {activeEncodeImageItem && activeEncodeImageItem.id === encodeItem.id
             ? "Active"
             : `[${encodeItem.image_shape[1]},${
                 encodeItem.image_shape[0]
               }] - z${Math.round(encodeItem.zoom)} `}
-        </p>
+        </span>
       </div>
-      <div className="absolute bottom-1 right-1 p-1 text-xs bg-red-500 rounded opacity-90 backdrop-filter backdrop-blur-md flex items-center space-x-2">
+      <div className="absolute bottom-1 right-1 p-1 text-xs bg-orange-ds rounded opacity-90 backdrop-filter backdrop-blur-md flex items-center space-x-2">
         <BsTrash
           onClick={() => handleRemoveEncodeItem(encodeItem)}
           className="text-white fill-current w-3 h-3 cursor-pointer"

src/components/EncodeItems.js

@@ -7,7 +7,7 @@
 import { openDatabase, storeEncodeItems } from "../store/indexedDB";
 import { fetchListURLS } from "../utils/requests";
 import { getFileNameFromURL } from "../utils/utils";
-import { BsLayers } from "react-icons/bs";
+import { BsLayoutWtf } from "react-icons/bs";
 
 export const Badge = () => {
   const { activeEncodeImageItem } = useContext(MainContext);
@@ -64,13 +64,13 @@
     };
     fetchData();
     setOpenMenu(true);
   }, [activeProject]);
 
   return (
     <MenuTemplate
       title={"SAM AOIs"}
       badge={<Badge />}
-      icon={<BsLayers />}
+      icon={<BsLayoutWtf />}
       openMenu={openMenu}
       setOpenMenu={setOpenMenu}
     >
@@ -80,7 +80,9 @@
             <EncodeItem key={index} encodeItem={encodeItem} />
           ))}
           {!encodeItems?.length && (
-            <p className="text-sm text-center text-slate-500 my-1">No AOI is available yet</p>
+            <p className="text-sm text-center text-slate-500 my-1">
+              No AOI is available yet
+            </p>
           )}
         </div>
         <div className="grid grid-cols-2 gap-2">

src/components/Header.js

@@ -1,4 +1,4 @@
 import React, { useState, useContext } from "react";
 import { BsInfoCircleFill } from "react-icons/bs";
 
 import { MainContext } from "./../contexts/MainContext";
@@ -7,15 +7,15 @@
 export const Header = () => {
   const { setDisplayModal } = useContext(MainContext);
   return (
-    <div className="flex items-center bg-gray-100 pt-2 pb-2 pl-3">
+    <div className="flex items-center pt-2 pb-2 pl-3">
       <a href="https://devseed.com/" target="_blank" rel="noopener noreferrer">
         <img
           src={DevSeedLogo}
           alt="Development Seed logo"
           className="text-4xl cursor-pointer block float-left mr-2 h-9"
         />
       </a>
-      <span className="self-center text-xl text-slate-900 font-semibold whitespace-nowrap">
+      <span className="self-center text-xl text-slate-900 font-base font-bold whitespace-nowrap">
         DS-Annotate
       </span>
       <div className="self-center text-lg pt-1 text-slate-400 ml-3 cursor-pointer">

src/components/Items.js

@@ -12,7 +12,7 @@
 import { MenuTemplate } from "./MenuTemplate";
 import React from "react";
 import { ItemsDataActions } from "./ItemsDataActions";
-import { BsLayoutWtf } from "react-icons/bs";
+import { BsBoundingBoxCircles } from "react-icons/bs";
 
 export const Items = () => {
   const { items, dispatchSetItems, activeProject } = useContext(MainContext);
@@ -42,7 +42,7 @@
     };
     fetchData();
     setOpenMenu(true);
   }, [activeProject]);
 
   useEffect(() => {
     if (scrollDivRef.current) {
@@ -52,9 +52,8 @@
   }, [items]);
   return (
     <MenuTemplate
-      title={"Drawn items"}
-      badge={""}
-      icon={<BsLayoutWtf />}
+      title={"Drawn Items"}
+      icon={<BsBoundingBoxCircles />}
       openMenu={openMenu}
       setOpenMenu={setOpenMenu}
     >

src/components/MenuExpData.js

@@ -3,7 +3,7 @@ import { MainContext } from "../contexts/MainContext";
 import { downloadInJOSM } from "../utils/requests";
 import { downloadGeojsonFile } from "../utils/utils";
 import { olFeatures2geojson } from "../utils/convert";
-import { BsFileArrowDown, BsFileArrowUp } from "react-icons/bs";
+import { BsDownload, BsUpload } from "react-icons/bs";
 
 export const MenuExpData = () => {
   const { items, activeProject } = useContext(MainContext);
@@ -21,14 +21,20 @@ export const MenuExpData = () => {
 
   return (
     <div className="grid grid-cols-2 gap-2 mt-6">
-      <button className="custom_button" onClick={() => downloadGeojson()}>
-        <div style={{ display: "flex", alignItems: "center" }}>
-          <BsFileArrowDown style={{ marginRight: "5px" }} /> GeoJSON
+      <button
+        className="custom_button"
+        onClick={() => downloadGeojson()}
+        title="Download data as GeoJSON"
+      >
+        <div className="text-center">
+          <BsDownload className="mr-2 inline" />
+          GeoJSON
         </div>
       </button>
       <button className="custom_button" onClick={() => josm()}>
-        <div style={{ display: "flex", alignItems: "center" }}>
-          <BsFileArrowUp style={{ marginRight: "5px" }} /> JOSM
+        <div className="text-center">
+          <BsUpload className="mr-2 inline" />
+          JOSM
         </div>
       </button>
     </div>

src/components/MenuTemplate.js

@@ -11,21 +11,15 @@ export const MenuTemplate = ({
 }) => {
   return (
     <>
-      <div
-        className="menuHeader"
-        onClick={() => {
-          setOpenMenu(!openMenu);
-        }}
-      >
+      <div className="menuHeader" onClick={() => setOpenMenu(!openMenu)}>
         {icon}
-        <span className="text-sm text-base font-small flex-1 duration-200 false">
+        <span className="text-sm font-semibold flex-1 duration-200 false text-ellipsis truncate">
           {title}
         </span>
         {badge}
         {openMenu ? <BsChevronUp /> : <BsChevronDown />}
       </div>
       {openMenu && <div>{children}</div>}
-      {openMenu && <div className="border-t border-gray-200 my-1"></div>}
     </>
   );
 };

src/components/Modal.js

@@ -19,7 +19,7 @@ export const Modal = () => {
             <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
               {/*header*/}
               <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
-                <h3 className="text-3xl font-semibold">DS Annotate Tool</h3>
+                <h3 className="text-3xl font-semibold">DS-Annotate</h3>
 
                 <BsXLg
                   className="p-1 cursor-pointer ml-auto border-0 text-black-900 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
@@ -32,7 +32,7 @@ export const Modal = () => {
                   DS-Annotate empowers users to draw intricate polygons over
                   aerial imagery using the{" "}
                   <a
-                    className="text-red-500"
+                    className="text-orange-ds"
                     href="https://github.com/facebookresearch/segment-anything"
                     target="_blank"
                     rel="noreferrer"
@@ -41,7 +41,7 @@ export const Modal = () => {
                   </a>
                   and the{" "}
                   <a
-                    className="text-red-500"
+                    className="text-orange-ds"
                     href="https://github.com/Tamersoul/ol-magic-wand"
                     target="_blank"
                     rel="noreferrer"
@@ -101,7 +101,7 @@ export const Modal = () => {
 
                 <p className="my-4 text-md">
                   <a
-                    className="text-red-500"
+                    className="text-orange-ds"
                     href="https://github.com/developmentseed/ds-annotate/issues"
                     target="_blank"
                     rel="noreferrer"
@@ -113,7 +113,7 @@ export const Modal = () => {
               </div>
               <div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
                 <button
-                  className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                  className="text-orange-ds background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                   type="button"
                   onClick={() => modalStatus("none")}
                 >

src/components/Projects.js

@@ -15,7 +15,7 @@
     dispatchActiveEncodeImageItem,
   } = useContext(MainContext);
   const [projectName, setProjectName] = useState("Projects");
-  const [openMenu, setOpenMenu] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const setProject = useCallback(
     (project) => {
@@ -40,7 +40,7 @@
         payload: null,
       });
     },
     [dispatchSetActiveClass, dispatchSetActiveProject]
   );
 
   // Load project from query
@@ -63,25 +63,29 @@
     if (projectFeature) {
       setProject(projectFeature);
     }
   }, [searchParams]);
 
   return (
     <MenuTemplate
       title={projectName}
       badge={""}
       icon={<BsFolder2 />}
-      openMenu={openMenu}
-      setOpenMenu={setOpenMenu}
+      openMenu={isOpen}
+      setOpenMenu={setIsOpen}
     >
       <div>
         <ul className="pt-1">
           {projects.features.map((feature) => (
             <Link
               key={feature.properties.slug}
-              className="subMenuHeader hoverAnimation"
+              className={`subMenuHeader hoverAnimation ${
+                projectName === feature.properties.name
+                  ? "bg-slate-300"
+                  : "bg-white"
+              }`}
               onClick={() => {
                 setProject(feature);
-                setOpenMenu(false);
+                setIsOpen(false);
               }}
               to={`?project=${feature.properties.slug}`}
             >