improvements

usecannon · Dec 28, 2024 · 78f2907 · 78f2907
1 parent 3fba5ba
commit 78f2907
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/packages/website/src/features/Packages/Abi.tsx b/packages/website/src/features/Packages/Abi.tsx
@@ -175,7 +175,7 @@ export const Abi: FC<{
         </SidebarGroupContent>
 
         <SidebarGroupContent>
-          <SidebarMenu>
+          <SidebarMenu className="gap-0">
             {isLoading ? (
               <FunctionRowsSkeleton />
             ) : (
@@ -206,7 +206,7 @@ export const Abi: FC<{
         <SidebarGroupLabel>Write Functions</SidebarGroupLabel>
 
         <SidebarGroupContent>
-          <SidebarMenu>
+          <SidebarMenu className="gap-0">
             {isLoading ? (
               <FunctionRowsSkeleton />
             ) : (

diff --git a/packages/website/src/features/Packages/Function.tsx b/packages/website/src/features/Packages/Function.tsx
@@ -9,6 +9,9 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   AlertTriangleIcon,
+  PlayIcon,
+  WalletIcon,
+  EyeIcon,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
@@ -343,7 +346,7 @@ export const Function: FC<{
           )}
         </div>
         <div className="flex flex-col md:flex-row gap-8 h-full py-2">
-          <div className="flex flex-1 w-full md:w-1/2 justify-center flex-col">
+          <div className="flex flex-1 w-full lg:w-1/2 justify-center flex-col">
             {f.inputs.map((input, index) => {
               return (
                 <div key={JSON.stringify(input)}>
@@ -406,17 +409,17 @@ export const Function: FC<{
               </div>
             )}
 
-            <div>
+            <div className="flex gap-4">
               {isFunctionReadOnly && (
                 <Button
                   disabled={loading}
                   variant="outline"
                   size="sm"
-                  className="mr-3"
                   onClick={() => {
                     void submit();
                   }}
                 >
+                  <EyeIcon className="w-4 h-4" />
                   Call view function
                 </Button>
               )}
@@ -427,9 +430,9 @@ export const Function: FC<{
                     disabled={loading}
                     variant="outline"
                     size="sm"
-                    className="mr-3"
                     onClick={async () => await submit({ simulate: true })}
                   >
+                    <PlayIcon className="w-4 h-4" />
                     Simulate transaction{' '}
                     {simulated && methodCallOrQueuedResult && (
                       <StatusIcon
@@ -441,9 +444,9 @@ export const Function: FC<{
                     disabled={loading}
                     variant="outline"
                     size="sm"
-                    className="mr-3"
                     onClick={async () => await submit()}
                   >
+                    <WalletIcon className="w-4 h-4" />
                     Submit using wallet{' '}
                     {!simulated && methodCallOrQueuedResult && (
                       <StatusIcon
@@ -456,9 +459,27 @@ export const Function: FC<{
                     disabled={loading}
                     variant="outline"
                     size="sm"
-                    className="mr-3"
                     onClick={handleQueueTransaction}
                   >
+                    <svg
+                      width="2px"
+                      height="2px"
+                      viewBox="0 0 39 40"
+                      fill="none"
+                    >
+                      <path
+                        d="M2.22855 19.5869H6.35167C7.58312 19.5869 8.58087 20.6155 8.58087 21.8847V28.0535C8.58087 29.3227 9.57873 30.3513 10.8101 30.3513H27.2131C28.4445 30.3513 29.4424 31.3798 29.4424 32.6492V36.8993C29.4424 38.1685 28.4445 39.1971 27.2131 39.1971H9.86067C8.62922 39.1971 7.6457 38.1685 7.6457 36.8993V33.4893C7.6457 32.2201 6.64783 31.3196 5.41638 31.3196H2.22938C0.99805 31.3196 0.000190262 30.2911 0.000190262 29.0217V21.8581C0.000190262 20.5888 0.997223 19.5869 2.22855 19.5869Z"
+                        fill="white"
+                      />
+                      <path
+                        d="M29.4429 11.1437C29.4429 9.87434 28.4451 8.84578 27.2136 8.84578H10.8207C9.58924 8.84578 8.5915 7.81722 8.5915 6.54797V2.29787C8.5915 1.02853 9.58924 0 10.8207 0H28.164C29.3953 0 30.3932 1.02853 30.3932 2.29787V5.57274C30.3932 6.84199 31.3909 7.87055 32.6224 7.87055H35.7952C37.0266 7.87055 38.0244 8.89911 38.0244 10.1685V17.3398C38.0244 18.6092 37.0224 19.5861 35.791 19.5861H31.668C30.4365 19.5861 29.4387 18.5576 29.4387 17.2883L29.4429 11.1437Z"
+                        fill="white"
+                      />
+                      <path
+                        d="M20.9524 15.1196H16.992C15.7013 15.1196 14.6543 16.1997 14.6543 17.5293V21.6117C14.6543 22.942 15.7021 24.0212 16.992 24.0212H20.9524C22.243 24.0212 23.29 22.9411 23.29 21.6117V17.5293C23.29 16.1989 22.2422 15.1196 20.9524 15.1196Z"
+                        fill="white"
+                      />
+                    </svg>
                     Stage to Safe
                   </Button>
                 </>