alleslabs · poomthiti · May 2, 2023 · Apr 28, 2023 · Apr 28, 2023 · Apr 28, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -64,6 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#308](https://github.com/alleslabs/celatone-frontend/pull/308) Adjust view more button to full width and fix empty state layout in contract history
 - [#304](https://github.com/alleslabs/celatone-frontend/pull/304) Remove suffix for token card
 - [#282](https://github.com/alleslabs/celatone-frontend/pull/282) Change details page top section explorer link to copy link
 - [#293](https://github.com/alleslabs/celatone-frontend/pull/293) Add comma separator to pagination and total blocks

diff --git a/src/lib/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx
@@ -19,7 +19,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       fontWeight="700"
       lineHeight="24px"
       letterSpacing="0.4px"
-      variant="ghost"
+      variant="ghost-gray"
       color="text.dark"
       mb={0}
       sx={{

diff --git a/src/lib/components/button/CustomIconButton.tsx b/src/lib/components/button/CustomIconButton.tsx
@@ -15,7 +15,7 @@ export const CustomIconButton = ({
   onClick,
 }: CustomIconButtonProps) => (
   <Button
-    variant="ghost"
+    variant="ghost-gray"
     size="xs"
     px="1"
     minWidth="32px"

diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -169,7 +169,7 @@ export const UnsupportedTokensModal = ({
         }}
       >
         <Button
-          variant="ghost"
+          variant="ghost-gray"
           color="text.dark"
           mb={1}
           fontSize="12px"

diff --git a/src/lib/components/table/ViewMore.tsx b/src/lib/components/table/ViewMore.tsx
@@ -10,16 +10,20 @@ interface ViewMoreProps {
 export const ViewMore = ({ onClick }: ViewMoreProps) => (
   <Flex w="full" justifyContent="center" textAlign="center">
     <Button
-      size="sm"
-      variant="ghost"
+      size="md"
+      w="full"
+      borderRadius="0"
+      minH="64px"
+      variant="ghost-gray"
       color="text.dark"
-      rightIcon={<CustomIcon name="chevron-right" boxSize="13px" />}
+      gap={2}
       onClick={() => {
         AmpTrack(AmpEvent.USE_VIEW_MORE);
         onClick();
       }}
     >
       View More
+      <CustomIcon name="chevron-right" boxSize="12px" color="text.dark" />
     </Button>
   </Flex>
 );
diff --git a/src/lib/components/table/codes/MySavedCodesTable.tsx b/src/lib/components/table/codes/MySavedCodesTable.tsx
@@ -27,7 +27,6 @@ export const MySavedCodesTable = ({
       <EmptyState
         imageVariant={isSearching ? "not-found" : "empty"}
         message={isSearching ? "No matched codes found" : emptyMessage}
-        withBorder
       />
     }
     onRowSelect={onRowSelect}

diff --git a/src/lib/components/table/tableComponents.ts b/src/lib/components/table/tableComponents.ts
@@ -6,7 +6,7 @@ export const TableContainer = chakra(Flex, {
     overflowX: "scroll",
     flexDir: "column",
     w: "full",
-    pb: 6,
+    pb: 0,
   },
 });
 

diff --git a/src/lib/layout/Footer.tsx b/src/lib/layout/Footer.tsx
@@ -63,7 +63,7 @@ const Footer = () => (
         rel="noopener noreferrer"
         onClick={() => AmpTrack(AmpEvent.FEEDBACK)}
       >
-        <Button variant="ghost" size="xs">
+        <Button variant="ghost-gray" size="xs">
           <Flex gap={1} align="center">
             <CustomIcon name="feedback" />
             <Text variant="body3" color="text.dark">
@@ -75,7 +75,7 @@ const Footer = () => (
     </Flex>
     <Flex direction="column" alignItems="end" minW="60px">
       <Button
-        variant="ghost"
+        variant="ghost-gray"
         size="xs"
         sx={{ _hover: { "> div > svg": { opacity: "100" } } }}
       >

diff --git a/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx b/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx
@@ -64,7 +64,6 @@ export const RelatedProposalsTable = ({
           <EmptyState
             imageVariant="empty"
             message="This contract does not have related proposals yet."
-            withBorder
           />
         }
       />

diff --git a/src/lib/pages/contract-details/components/tables/TxsTable.tsx b/src/lib/pages/contract-details/components/tables/TxsTable.tsx
@@ -67,7 +67,6 @@ export const TxsTable = ({
           <EmptyState
             imageVariant="empty"
             message="This contract does not have any transactions"
-            withBorder
           />
         }
         showRelations={false}

diff --git a/src/lib/pages/contract-details/components/tables/migration/index.tsx b/src/lib/pages/contract-details/components/tables/migration/index.tsx
@@ -62,7 +62,6 @@ export const MigrationTable = ({
       <EmptyState
         imageVariant="empty"
         message="This contract does not have any migration history yet."
-        withBorder
       />
     );
 

diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
@@ -90,7 +90,7 @@ export const PublicProjectCodeTable = observer(
           />
         ) : (
           <>
-            <TableContainer mb={10}>
+            <TableContainer>
               <CodeTableHeader />
               {publicCodes.map((code) => (
                 <PublicProjectCodeRow

diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
@@ -80,7 +80,7 @@ export const PublicProjectContractTable = observer(
           />
         ) : (
           <>
-            <TableContainer mb={10}>
+            <TableContainer>
               <ContractTableHeader />
               {publicContracts.map((contract) => (
                 <PublicProjectContractRow

diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts
@@ -164,7 +164,7 @@ export const Button: ComponentStyleConfig = {
       disabled: {
         color: "pebble.500",
       },
-      hoverBg: pebble700,
+      hoverBg: "pebble.800",
       activeBg: "transparent",
     }),
     "ghost-error": generateStyle({
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,7 @@ export const TableContainer = chakra(Flex, { @@
         overflowX: "scroll",
         flexDir: "column",
         w: "full",
-        pb: 6,
+        pb: 0,
       },
     });
@@ Expand Down @@