feat: action box static ui wip

mrgnlabs · Nov 30, 2023 · 1808432 · 1808432
1 parent 0fd8084
commit 1808432
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 18 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.tsx b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.tsx
@@ -1,3 +1,54 @@
+import React from "react";
+
+import { cn } from "~/utils";
+
+import { MrgnLabeledSwitch } from "~/components/common/MrgnLabeledSwitch";
+
+import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
+import { Button } from "~/components/ui/button";
+import { IconChevronDown } from "~/components/ui/icons";
+
 export const ActionBox = () => {
-  return <div className="p-8 bg-red-400 w-full max-w-[480px] flex items-center justify-center">Action Box</div>;
+  const [isTokenPopoverOpen, setIsTokenPopoverOpen] = React.useState(false);
+  return (
+    <div className="bg-background p-4 flex flex-col items-center gap-4">
+      <div className="space-y-6 text-center w-full flex flex-col items-center">
+        <div className="flex w-[150px] h-[42px]">
+          <MrgnLabeledSwitch labelLeft="Lend" labelRight="Borrow" checked={true} onClick={() => {}} />
+        </div>
+        <p>Supply. Earn interest. Borrow. Repeat.</p>
+      </div>
+      <div className="p-6 bg-background-gray text-white w-full max-w-[480px] rounded-xl">
+        <p className="text-lg mb-3">You supply</p>
+        <div className="bg-background text-3xl rounded-lg flex justify-between items-center p-4 font-medium mb-5">
+          <Popover open={isTokenPopoverOpen} onOpenChange={(open) => setIsTokenPopoverOpen(open)}>
+            <PopoverTrigger asChild>
+              <Button
+                className={cn(
+                  "bg-background-gray text-white text-xl p-6 pr-4 gap-4 transition-colors hover:bg-background-gray-light",
+                  isTokenPopoverOpen && "bg-background-gray-light"
+                )}
+              >
+                Select token <IconChevronDown />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80" align="start" sideOffset={10}>
+              <ul className="flex flex-col gap-4">
+                <li>Token item 1</li>
+                <li>Token item 2</li>
+                <li>Token item 3</li>
+              </ul>
+            </PopoverContent>
+          </Popover>
+          <input
+            type="number"
+            value={0}
+            className="bg-transparent w-full text-right"
+            style={{ WebkitAppearance: "none" }}
+          />
+        </div>
+        <Button className="w-full py-6">Select token and amount</Button>
+      </div>
+    </div>
+  );
 };
diff --git a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxDialog.tsx b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxDialog.tsx
@@ -9,24 +9,14 @@ type ActionBoxDialogProps = {
 };
 
 export const ActionBoxDialog = ({ children }: ActionBoxDialogProps) => {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
+  const [isDialogOpen, setIsDialogOpen] = React.useState(false);
 
   return (
     <div>
-      <Dialog open={open} onOpenChange={(open) => setOpen(open)}>
+      <Dialog open={isDialogOpen} onOpenChange={(open) => setIsDialogOpen(open)}>
         <DialogTrigger asChild>{children}</DialogTrigger>
-        <DialogContent className="md:flex">
-          <div className="flex items-center justify-center w-full">
-            <ActionBox />
-          </div>
+        <DialogContent className="md:flex md:max-w-[520px] md:p-4">
+          <ActionBox />
         </DialogContent>
       </Dialog>
     </div>

diff --git a/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetsList.tsx b/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetsList.tsx
@@ -175,7 +175,7 @@ const AssetsList = () => {
     <>
       <ActionBox />
       <ActionBoxDialog>
-        <Button>Open Action Box</Button>
+        <Button>Open Action Box Dialog</Button>
       </ActionBoxDialog>
       <AssetListFilters />
 

diff --git a/apps/marginfi-v2-ui/src/components/ui/dialog.tsx b/apps/marginfi-v2-ui/src/components/ui/dialog.tsx
@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 h-screen z-50 bg-background/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 h-screen z-50 bg-background/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}

diff --git a/apps/marginfi-v2-ui/tailwind.config.js b/apps/marginfi-v2-ui/tailwind.config.js
@@ -43,7 +43,8 @@ module.exports = {
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
         background: "hsl(var(--background))",
-        "background-gray": "#1A1F22",
+        "background-gray": "#1C2125",
+        "background-gray-light": "#303030",
         foreground: "hsl(var(--foreground))",
         chartreuse: "#DCE85D",
         primary: {