fix: create contract popover style

cosmology-tech · Sep 17, 2024 · b2db706 · b2db706
1 parent 336edd3
commit b2db706
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/examples/chain-template/components/contract/MyContractsTab.tsx b/examples/chain-template/components/contract/MyContractsTab.tsx
@@ -15,7 +15,7 @@ const ContentViews = {
 
 type ContentView = (typeof ContentViews)[keyof typeof ContentViews];
 
-const createContractOptions = [
+const contractCreationOptions = [
   { label: 'From Upload', value: ContentViews.CREATE_FROM_UPLOAD },
   { label: 'From Code ID', value: ContentViews.CREATE_FROM_CODE_ID },
 ];
@@ -38,9 +38,10 @@ export const MyContractsTab = ({ show, switchTab }: MyContractsTabProps) => {
         switchTab={switchTab}
         createContractTrigger={
           <PopoverSelect
-            trigger={<Button variant="primary">Create New Contract</Button>}
-            options={createContractOptions}
+            trigger={<Button variant="primary">Create Contract</Button>}
+            options={contractCreationOptions}
             onOptionClick={(value) => setContentView(value as ContentView)}
+            popoverWidth="152px"
           />
         }
       />

diff --git a/examples/chain-template/components/contract/PopoverSelect.tsx b/examples/chain-template/components/contract/PopoverSelect.tsx
@@ -20,12 +20,14 @@ type PopoverSelectProps = {
   trigger: React.ReactNode;
   options: Option[];
   onOptionClick: (value: string) => void;
+  popoverWidth?: string;
 };
 
 export const PopoverSelect = ({
   trigger,
   options,
   onOptionClick,
+  popoverWidth = '100%',
 }: PopoverSelectProps) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
@@ -45,8 +47,8 @@ export const PopoverSelect = ({
         <Box
           display="flex"
           flexDirection="column"
-          // width={`${elemWidth}px`}
-          py="10px"
+          width={popoverWidth}
+          p="10px"
           bg="$background"
           borderRadius="4px"
           boxShadow={`0px 4px 20px 0px rgba(${
@@ -85,10 +87,11 @@ const CustomOption = ({
       gap="10px"
       alignItems="center"
       minHeight="40px"
-      px="20px"
+      px="10px"
       cursor="pointer"
+      borderRadius="4px"
       bg={{
-        hover: useColorModeValue('$blackAlpha100', '$whiteAlpha100'),
+        hover: useColorModeValue('$gray100', '$whiteAlpha100'),
         base: '$background',
       }}
       attributes={{ onClick }}

diff --git a/examples/chain-template/config/theme.ts b/examples/chain-template/config/theme.ts
@@ -18,6 +18,7 @@ export const lightColors: ThemeDef['vars']['colors'] = {
   blackAlpha200: '#D5DDE9',
   blackAlpha100: '#F6F8FE',
   blackAlpha50: '#FBFBFB',
+  gray100: '#EFF2F4',
   white: '#FFFFFF',
   background: '#FFFFFF',
   green600: '#38A169',
@@ -53,6 +54,7 @@ export const darkColors: ThemeDef['vars']['colors'] = {
   blackAlpha200: '#443F4B',
   blackAlpha100: '#29262F',
   blackAlpha50: '#1D2328',
+  gray100: '#EFF2F4',
   white: '#FFFFFF',
   background: '#232A31',
   green600: '#38A169',