ui improvements

AngelProtocolFinance · Sep 11, 2024 · f856343 · f856343
1 parent f30fa7b
commit f856343
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/src/pages/Admin/Charity/Dashboard/Figure.tsx b/src/pages/Admin/Charity/Dashboard/Figure.tsx
@@ -30,7 +30,7 @@ export default function Figure(props: Props) {
 
         <span className="ml-auto">{props.icon}</span>
       </div>
-      <p className="text-2xl font-medium">{props.amount}</p>
+      <p className="text-2xl font-medium font-heading">{props.amount}</p>
       {props.actions}
     </div>
   );

diff --git a/src/pages/Admin/Charity/Dashboard/Movements.tsx b/src/pages/Admin/Charity/Dashboard/Movements.tsx
@@ -13,28 +13,28 @@ const asset: {
   [K in Flow]: {
     icon: ReactNode;
     source: string;
-    title: string;
+    title: ReactNode;
   };
 } = {
   "liq-cash": {
-    title: "Grant",
+    title: <span className="text-sm text-navy-l1">Grant</span>,
     icon: <Icon type="ArrowRight" className="text-navy-l1 size-4" />,
     source: "Savings",
   },
   "lock-cash": {
-    title: "Grant",
+    title: <span className="text-sm text-navy-l1">Grant</span>,
     icon: <Icon type="ArrowRight" className="text-navy-l1 size-4" />,
-    source: "Investment",
+    source: "Investments",
   },
   "liq-lock": {
-    title: "Invest",
-    icon: <Icon type="Sprout" className="text-green" />,
+    title: <span className="text-sm text-green">Invest</span>,
+    icon: <Icon type="Sprout" className="text-green size-4" />,
     source: "Savings",
   },
   "lock-liq": {
-    title: "Save",
-    icon: <Icon type="PiggyBank" className="text-navy-l1" />,
-    source: "Investment",
+    title: <span className="text-sm text-amber">Save</span>,
+    icon: <Icon type="PiggyBank" className="text-navy-l1 size-4" />,
+    source: "Investments",
   },
 };
 
@@ -48,14 +48,15 @@ interface Props {
 export function Movements({ classes = "", ...props }: Props) {
   const { showModal } = useModalContext();
   const movs = Object.entries(props.mov).filter(([_, v]) => v > 0);
+
   if (movs.length === 0) return null;
 
   return (
     <div className={`p-4 grid rounded border border-gray-l4 ${classes}`}>
       <h4 className="grid border-b border-gray-l4 w-full pb-2">
         Pending transactions
       </h4>
-      <div className="grid grid-cols-[auto_auto_auto_1fr] mt-2">
+      <div className="grid grid-cols-[auto_auto_auto_auto_auto_1fr] mt-4 gap-y-2">
         {movs.map((entry) => {
           const [k, v] = entry as [Flow, number];
           const a = asset[k];
@@ -65,10 +66,10 @@ export function Movements({ classes = "", ...props }: Props) {
               className="grid gap-x-2 grid-cols-subgrid col-span-full items-center"
             >
               {a.icon}
-              <span>{a.title}</span>
-              <span>
-                $ {humanize(v)} from:{a.source}
-              </span>
+              {a.title}
+              <span className="font-heading font-medium">$ {humanize(v)}</span>
+              <span className="text-xs ml-2">from</span>
+              <span className="text-sm">{a.source}</span>
               <button
                 type="button"
                 onClick={() =>
@@ -81,7 +82,7 @@ export function Movements({ classes = "", ...props }: Props) {
                     initAmount: roundDownToNum(v, 2),
                   })
                 }
-                className="text-right"
+                className="text-right bg-gray-l4 text-navy-d4 px-3 py-1 font-heading hover:bg-gray-l3 justify-self-end text-xs rounded-full"
               >
                 edit
               </button>

diff --git a/src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx b/src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx
@@ -151,7 +151,9 @@ function Row(props: IRow) {
         {props.pct ?? 50} %
       </span>
       <span className="text-right">$</span>
-      <span className="text-left">{humanize(val)}</span>
+      <span className="text-left font-heading font-medium">
+        {humanize(val)}
+      </span>
       {props.tooltip?.(val)}
     </div>
   );