Merge pull request #100 from Franpastoragusti/Ux-fixes-part-2

Ux fixes part 2
BuidlGuidl · Apr 16, 2024 · 7e971e4 · 7e971e4
2 parents fa43c75 + 4346698
commit 7e971e4
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 52 deletions.
diff --git a/packages/nextjs/app/page.css b/packages/nextjs/app/page.css
@@ -0,0 +1,11 @@
+.w-custom{
+    width: 100%;
+  }
+
+
+  @media (min-width: 1000px) {
+    .w-custom{
+        width: calc(100% - 550px);
+      }
+
+  }
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import "./page.css";
 import { DataSet, SelectedVector } from "./types/data";
 import { debounce } from "lodash";
 import type { NextPage } from "next";
@@ -63,11 +64,7 @@ const Home: NextPage = () => {
 
   return (
     <main className={`w-full flex flex-col relative`}>
-      <div
-        className={`${
-          fullGraph ? "w-full" : "lg:w-[50%] xl:w-[58%] 2xl:w-[64%] 3xl:w-[70%]"
-        } duration-500 ease-in-out transition-all`}
-      >
+      <div className={`${fullGraph ? "w-full" : "w-custom"} duration-500 ease-in-out transition-all`}>
         <div
           className="flex w-full h-[50vh] overflow"
           onWheel={e => {
@@ -93,7 +90,7 @@ const Home: NextPage = () => {
         <div
           className={`lg:mx-5 ${
             fullGraph ? "flex-1" : "lg:w-[50%] xl:w-[58%] 2xl:w-[64%] 3xl:w-[70%]"
-          } w-full lg:mt-0 mt-6`}
+          } w-full lg:mt-0 p-2`}
         >
           <ImpactVectorTable />
         </div>

diff --git a/packages/nextjs/components/impact-vector/FilterModal.tsx b/packages/nextjs/components/impact-vector/FilterModal.tsx
@@ -52,7 +52,7 @@ const FilterModal = ({ vector, onFiltered }: { vector: SelectedVector; onFiltere
 
   return (
     <>
-      <div onKeyDown={handleKeyDown} className="lg:mr-5 flex justify-end relative">
+      <div onKeyDown={handleKeyDown} className="flex justify-end relative">
         {vector.filters.length > 0 ? (
           <span className="bg-red-500 text-white flex absolute left-[10px] top-[-5px] justify-center items-center w-[16px] h-[16px] rounded-full text-xs">
             {vector.filters.length}
@@ -183,14 +183,42 @@ const FilterItem = ({ item, onChange, onDelete }: IFilterItemProps) => {
       ) : (
         <></>
       )}
+      <ValueInputs item={item} onChange={val => onChange(val)} />
+      <div className="flex-grow justify-end flex items-center">
+        <button className="w-[20px]">
+          <FiTrash2 size={20} onClick={() => onDelete()} />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default FilterModal;
+
+interface IValueInputsProps {
+  item: IFilter;
+  onChange: (arg: IFilter) => void;
+}
+const ValueInputs = ({ item, onChange }: IValueInputsProps) => {
+  let value = item.value;
+  let value2 = "0";
+  const isBetweenOperator = item.condition == "<>";
+  if (isBetweenOperator) {
+    const val = JSON.parse(`${item.value || "[]"}`) as string[];
+    value = val[0];
+    value2 = val[1];
+  }
+  return (
+    <>
       <input
         type="number"
         className=" max-w-[60px] pl-2 p-0 input input-info input-bordered bg-secondary focus:outline-none border border-neutral hover:border-gray-400 rounded-xl text-neutral-500"
         placeholder="0"
         onChange={e => {
-          onChange({ ...item, value: e.target.value });
+          const newVal = !isBetweenOperator ? e.target.value : `[${[e.target.value, value2]}]`;
+          onChange({ ...item, value: newVal });
         }}
-        value={item.value}
+        value={value}
       />
       {item.condition == "<>" ? (
         <>
@@ -200,21 +228,15 @@ const FilterItem = ({ item, onChange, onDelete }: IFilterItemProps) => {
             className=" max-w-[60px] pl-2 p-0  input input-info input-bordered bg-secondary focus:outline-none border border-neutral hover:border-gray-400 rounded-xl text-neutral-500"
             placeholder="0"
             onChange={e => {
-              onChange({ ...item, value: e.target.value });
+              const newVal = `[${[value, e.target.value]}]`;
+              onChange({ ...item, value: newVal });
             }}
-            value={item.value}
+            value={value2}
           />
         </>
       ) : (
         <></>
       )}
-      <div className="flex-grow justify-end flex items-center">
-        <button className="w-[20px]">
-          <FiTrash2 size={20} onClick={() => onDelete()} />
-        </button>
-      </div>
-    </div>
+    </>
   );
 };
-
-export default FilterModal;
diff --git a/packages/nextjs/components/impact-vector/ImpactVectorCard.tsx b/packages/nextjs/components/impact-vector/ImpactVectorCard.tsx
@@ -65,24 +65,22 @@ const ImpactVectorCard = ({ vector }: IProps) => {
             <HiMiniCheckBadge size={24} className="text-OPred w-5 h-5" />
           </button>
         ) : (
-          <div className="">
-            <button
-              disabled={isSelected}
-              onClick={e => {
-                e.stopPropagation();
-                handleAddVector();
-              }}
-              className="rounded-xl border-2 border-primary bg-primary hover:bg-red-600 p-4"
-            >
-              <Image
-                className="w-5 h-5"
-                src="assets/svg/folderPlusIcon.svg"
-                alt="folder plus icon"
-                width={24}
-                height={24}
-              />
-            </button>
-          </div>
+          <button
+            disabled={isSelected}
+            onClick={e => {
+              e.stopPropagation();
+              handleAddVector();
+            }}
+            className="rounded-xl border-2 border-primary bg-primary hover:bg-red-600 min-w-[40px] min-h-[40px] flex justify-center items-center"
+          >
+            <Image
+              className="w-5 h-5"
+              src="assets/svg/folderPlusIcon.svg"
+              alt="folder plus icon"
+              width={24}
+              height={24}
+            />
+          </button>
         )}
       </div>
       <p className=" text-base-content-100  m-0">@{vector.sourceName}</p>

diff --git a/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx b/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx
@@ -15,22 +15,22 @@ const NON_VECTOR_KEYS = ["image", "name", "profile", "opAllocation"];
 const COLOR_CLASS_BY_VECTOR: { [key in keyof ImpactVectors]: string } = {
   "# GitHub Repos": "text-[#ff0000]",
   "Date First Commit": "text-[#00ff00]",
-  "Total Stars": "text-[#0000ff]",
-  "Total Forks": "text-[#ffff00]",
-  "Total Contributors": "text-[#ff00ff]",
-  "Contributors Last 6 Months": "text-[#00ffff]",
+  "Total Stars": "text-[#FA5300]",
+  "Total Forks": "text-[#5A9E00]",
+  "Total Contributors": "text-[#FF0420]",
+  "Contributors Last 6 Months": "text-[#3374DB]",
   "Avg Monthly Active Devs Last 6 Months": "text-[#ff8000]",
   "# OP Contracts": "text-[#8000ff]",
   "Date First Txn": "text-[#00ff80]",
-  "Total Onchain Users": "text-[#ff0080]",
-  "Onchain Users Last 6 Months": "text-[#80ff00]",
+  "Total Onchain Users": "text-[#8D33DB]",
+  "Onchain Users Last 6 Months": "text-[#008F8F]",
   "Total Txns": "text-[#0080ff]",
   "Total Txn Fees (ETH)": "text-[#ff0080]",
   "Txn Fees Last 6 Months (ETH)": "text-[#ff80ff]",
-  "# NPM Packages": "text-[#80ff80]",
+  "# NPM Packages": "text-[#027A48]",
   "Date First Download": "text-[#8080ff]",
-  "Total Downloads": "text-[#ffff80]",
-  "Downloads Last 6 Months": "text-[#80ffff]",
+  "Total Downloads": "text-[#147C49]",
+  "Downloads Last 6 Months": "text-[#B42318]",
 };
 const shouldRenderAsVector = (key: string) =>
   !key.includes("_actual") && !key.includes("_normalized") && !NON_VECTOR_KEYS.includes(key);
@@ -147,6 +147,7 @@ export default function ImpactVectorGraph({
             tickLine={false}
             className="text-xs opacity-50"
             tickMargin={10}
+            width={55}
             scale={isLogarithmic ? logScale : "linear"}
             domain={[1, "auto"]}
             tickFormatter={abbreviateNumber}
@@ -161,6 +162,7 @@ export default function ImpactVectorGraph({
             dataKey="profile"
             onMouseMove={handleMouseMove}
             axisLine={false}
+            height={0}
             tickLine={false}
             tick={<CustomXAxis x={0} y={0} hovered={hoveredProject} />}
             interval={0}
@@ -170,8 +172,8 @@ export default function ImpactVectorGraph({
               if (active && payload && payload.length) {
                 const data = payload[0].payload;
                 return (
-                  <div className="w-fit h-fit space-y-2 p-4 pt-1 text-sm bg-base-100">
-                    <p>{`${data.name}`}</p>
+                  <div className="w-fit h-fit space-y-2 p-4 pt-1 text-sm bg-base-100 shadow shadow-xl p-6 mb-6 bg-white rounded-xl">
+                    <p className="font-semibold">{`${data.name}`}</p>
                     <p>
                       <span className=" text-red-500 font-semibold">OP Allocation:</span> {data.opAllocation}
                     </p>

diff --git a/packages/nextjs/components/impact-vector/SaveIcon.tsx b/packages/nextjs/components/impact-vector/SaveIcon.tsx
@@ -3,13 +3,13 @@ export const SaveIcon = () => (
     xmlns="http://www.w2.org/2000/svg"
     fill="none"
     viewBox="-1 0 24 24"
-    stroke-width="0.5"
+    strokeWidth="0.5"
     stroke="currentColor"
     className="h-7 w-6"
   >
     <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       d="M2 3v18h18V6l-3-3H3ZM7.5 3v6h9V3M6 21v-9h12v9M14.25 5.25v1.5"
     />
   </svg>

diff --git a/packages/nextjs/components/impact-vector/table-components/ImpactTableRow.tsx b/packages/nextjs/components/impact-vector/table-components/ImpactTableRow.tsx
@@ -48,7 +48,7 @@ const ImpactTableRow = ({ vector, updateWeight, onFilteredChange }: Props) => {
       </td>
       <td className="pr-2 lg:pr-6 py-2 sm:py-4 whitespace-nowrap ">
         <div className="grid gap-2 items-center justify-end grid-flow-col">
-          <div className="flex gap-1 sm:gap-3 ">
+          <div className="flex gap-6">
             <FilterModal vector={vector} onFiltered={newFilters => onFilteredChange(newFilters)} />
             <button className="w-[20px]">
               <FiTrash2 size={20} onClick={handleRemoveVector} />