From 2964842a6ee5ee6ef22133e80bee446e30c910ed Mon Sep 17 00:00:00 2001 From: Ramida J Date: Tue, 31 Jan 2023 19:08:38 +0700 Subject: [PATCH 01/10] feat(components): replace all primary color (pink) --- public/celatone-logo.svg | 39 +++++--- src/lib/components/AccordionStepperItem.tsx | 4 +- src/lib/components/ButtonCard.tsx | 11 ++- src/lib/components/ConnectWalletAlert.tsx | 6 +- src/lib/components/Copier.tsx | 2 +- src/lib/components/CustomTab.tsx | 4 +- src/lib/components/ExplorerLink.tsx | 4 +- src/lib/components/Loading.tsx | 2 +- src/lib/components/Wallet.tsx | 2 +- src/lib/components/action-msg/SingleMsg.tsx | 2 +- src/lib/components/button/AdminButton.tsx | 2 +- src/lib/components/button/ConnectWallet.tsx | 4 +- .../components/button/InstantiateButton.tsx | 2 +- src/lib/components/button/ShowMoreButton.tsx | 4 +- src/lib/components/dropzone/index.tsx | 4 +- src/lib/components/forms/AssetInput.tsx | 2 +- src/lib/components/forms/ListSelection.tsx | 8 +- src/lib/components/forms/SelectInput.tsx | 8 +- src/lib/components/forms/TagSelection.tsx | 10 +- src/lib/components/icon/UploadIcon.tsx | 4 +- src/lib/components/json/JsonInput.tsx | 10 +- src/lib/components/json/JsonReadOnly.tsx | 6 +- src/lib/components/json/ViewFullMsgButton.tsx | 4 +- src/lib/components/modal/ActionModal.tsx | 8 +- src/lib/components/modal/CodeSnippet.tsx | 4 +- src/lib/components/modal/RedoModal.tsx | 7 +- .../modal/code/SaveOrRemoveCode.tsx | 4 +- .../select-contract/ContractListCard.tsx | 23 ++--- .../select-contract/SelectContractAdmin.tsx | 2 +- .../SelectContractInstantiator.tsx | 2 +- src/lib/components/state/InvalidState.tsx | 6 +- src/lib/components/state/ZeroState.tsx | 4 +- src/lib/components/stepper/StepperItem.tsx | 6 +- src/lib/components/table/AccordionTx.tsx | 3 +- src/lib/components/table/EditableCell.tsx | 2 +- src/lib/components/table/tableComponents.ts | 4 +- .../upload/components/UploadCard.tsx | 6 +- src/lib/layout/Footer.tsx | 12 +-- src/lib/layout/Header.tsx | 2 +- src/lib/layout/Navbar.tsx | 10 +- src/lib/layout/Searchbar.tsx | 11 ++- src/lib/layout/index.tsx | 4 +- .../components/table/NoContracts.tsx | 2 +- .../table/contracts/ContractTable.tsx | 3 +- .../table/contracts/ContractTableRow.tsx | 4 +- src/lib/pages/code-details/index.tsx | 2 +- src/lib/pages/codes/components/CodesTable.tsx | 8 +- .../components/ContractTop.tsx | 12 +-- .../components/InstantiateInfo.tsx | 2 +- .../contract-description/UserContractDesc.tsx | 6 +- .../components/tables/NoTransactions.tsx | 7 +- .../tables/transactions/TxsTableRow.tsx | 3 +- src/lib/pages/contract-details/index.tsx | 2 +- .../components/ContractListTable.tsx | 26 +++--- src/lib/pages/contract-list/index.tsx | 2 +- src/lib/pages/contract-list/slug.tsx | 20 +--- .../pages/home/components/PastTransaction.tsx | 2 +- src/lib/pages/home/components/QuickMenu.tsx | 20 ++-- .../home/components/RecentActivities.tsx | 8 +- src/lib/pages/home/index.tsx | 2 +- src/lib/pages/instantiate/completed.tsx | 2 +- .../code-select/CodeTableReadOnly.tsx | 14 ++- .../past-txs/components/FilterSelection.tsx | 11 ++- .../pages/past-txs/components/PastTxRow.tsx | 8 +- src/lib/pages/past-txs/index.tsx | 5 +- .../components/BookmarkButton.tsx | 6 +- .../public-project/components/CodesTable.tsx | 6 +- .../components/ContractsTable.tsx | 6 +- .../components/DetailHeader.tsx | 2 +- .../components/PublicProjectCard.tsx | 8 +- .../public-project/components/SocialMedia.tsx | 14 +-- src/lib/pages/public-project/index.tsx | 2 +- src/lib/pages/public-project/slug.tsx | 4 +- src/lib/styles/theme/colors.ts | 59 ++++++++++-- src/lib/styles/theme/components/alert.ts | 12 ++- src/lib/styles/theme/components/badge.ts | 10 +- src/lib/styles/theme/components/button.ts | 92 ++++++++++++------- src/lib/styles/theme/components/form.ts | 2 +- src/lib/styles/theme/components/input.ts | 9 +- src/lib/styles/theme/components/link.ts | 2 +- src/lib/styles/theme/components/menu.ts | 10 +- src/lib/styles/theme/components/modal.ts | 4 +- src/lib/styles/theme/components/radio.ts | 4 +- src/lib/styles/theme/components/select.ts | 8 +- src/lib/styles/theme/components/textarea.ts | 4 +- 85 files changed, 392 insertions(+), 307 deletions(-) diff --git a/public/celatone-logo.svg b/public/celatone-logo.svg index a405a4cba..dd5dd1627 100644 --- a/public/celatone-logo.svg +++ b/public/celatone-logo.svg @@ -1,13 +1,28 @@ - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/components/AccordionStepperItem.tsx b/src/lib/components/AccordionStepperItem.tsx index ef648cc38..84ee343d1 100644 --- a/src/lib/components/AccordionStepperItem.tsx +++ b/src/lib/components/AccordionStepperItem.tsx @@ -8,7 +8,7 @@ export const AccordionStepperItem = () => ( h="31px" right="45%" bottom="9px" - background="gray.600" + background="pebble.600" position="absolute" visibility="hidden" zIndex={0} @@ -18,7 +18,7 @@ export const AccordionStepperItem = () => ( borderRadius="full" h="10px" w="10px" - borderColor="gray.600" + borderColor="pebble.600" borderWidth="1px" position="relative" zIndex={1} diff --git a/src/lib/components/ButtonCard.tsx b/src/lib/components/ButtonCard.tsx index 3dac8cc14..28183e83e 100644 --- a/src/lib/components/ButtonCard.tsx +++ b/src/lib/components/ButtonCard.tsx @@ -22,13 +22,14 @@ export const ButtonCard = ({ align="center" justify="space-between" onClick={!disabled ? onClick : undefined} - bgColor="gray.900" - borderRadius="4px 4px 0 0" + bgColor="pebble.800" + borderRadius="4px" w="100%" cursor="pointer" - _hover={{ bgColor: "rgba(255, 255, 255, 0.15)" }} + _hover={{ bgColor: "pebble.700" }} + transition="all .25s ease-in-out" _disabled={{ - bgColor: "divider.main", + bgColor: "pebble.800", cursor: "not-allowed", }} {...componentProps} @@ -45,6 +46,6 @@ export const ButtonCard = ({ {description} - + ); diff --git a/src/lib/components/ConnectWalletAlert.tsx b/src/lib/components/ConnectWalletAlert.tsx index 2559ded5a..ef4618bcf 100644 --- a/src/lib/components/ConnectWalletAlert.tsx +++ b/src/lib/components/ConnectWalletAlert.tsx @@ -34,7 +34,7 @@ export const ConnectWalletAlert = ({ return !address ? ( - + {title} - + {subtitle} diff --git a/src/lib/components/Copier.tsx b/src/lib/components/Copier.tsx index 26d982221..455a898dc 100644 --- a/src/lib/components/Copier.tsx +++ b/src/lib/components/Copier.tsx @@ -29,7 +29,7 @@ export const Copier = ({ label={copyLabel} placement="top" arrowSize={8} - bg="primary.dark" + bg="honeydew.darker" >
{ color="text.dark" sx={{ "&[aria-selected=true]": { - color: "primary.main", + color: "violet.light", }, }} _active={{ @@ -35,7 +35,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => { {count !== undefined && ( diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx index f41d07091..b5ab2a4e1 100644 --- a/src/lib/components/ExplorerLink.tsx +++ b/src/lib/components/ExplorerLink.tsx @@ -91,7 +91,7 @@ const LinkRender = ({ const textElement = ( { return ( { buttonText={truncate(address)} icon={MdOutlineAccountBalanceWallet} onClick={onClickOpenView} - variant="outline-primary" + variant="outline-info" /> } rejected={} diff --git a/src/lib/components/action-msg/SingleMsg.tsx b/src/lib/components/action-msg/SingleMsg.tsx index 8a76f1923..197f9bb25 100644 --- a/src/lib/components/action-msg/SingleMsg.tsx +++ b/src/lib/components/action-msg/SingleMsg.tsx @@ -69,7 +69,7 @@ export const SingleMsg = ({ hasArrow label={`Token ID: ${token.id}`} placement="top" - bg="primary.dark" + bg="honeydew.darker" maxW="240px" > diff --git a/src/lib/components/button/AdminButton.tsx b/src/lib/components/button/AdminButton.tsx index 22883b6bc..1effb891e 100644 --- a/src/lib/components/button/AdminButton.tsx +++ b/src/lib/components/button/AdminButton.tsx @@ -50,7 +50,7 @@ export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => { hasArrow label="You don't have admin access to this contract." placement="top" - bg="primary.dark" + bg="honeydew.darker" arrowSize={8} isDisabled={isAdmin} > diff --git a/src/lib/components/button/ConnectWallet.tsx b/src/lib/components/button/ConnectWallet.tsx index bfe989008..2794eafbf 100644 --- a/src/lib/components/button/ConnectWallet.tsx +++ b/src/lib/components/button/ConnectWallet.tsx @@ -13,8 +13,8 @@ export const ConnectWalletBtn = () => { return ( ); }; diff --git a/src/lib/components/button/InstantiateButton.tsx b/src/lib/components/button/InstantiateButton.tsx index a4a7be2ec..d28077666 100644 --- a/src/lib/components/button/InstantiateButton.tsx +++ b/src/lib/components/button/InstantiateButton.tsx @@ -89,7 +89,7 @@ export const InstantiateButton = ({ label={tooltipLabel} placement="top" arrowSize={8} - bg="primary.dark" + bg="honeydew.darker" > diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx index 2aaaac2c4..e2ce484d9 100644 --- a/src/lib/components/dropzone/index.tsx +++ b/src/lib/components/dropzone/index.tsx @@ -31,7 +31,7 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) { return ( - + Click to upload {" "} or drag Wasm file here diff --git a/src/lib/components/forms/AssetInput.tsx b/src/lib/components/forms/AssetInput.tsx index 6a522b4a8..0e5c92f7a 100644 --- a/src/lib/components/forms/AssetInput.tsx +++ b/src/lib/components/forms/AssetInput.tsx @@ -47,7 +47,7 @@ export const AssetInput = ({ diff --git a/src/lib/components/forms/ListSelection.tsx b/src/lib/components/forms/ListSelection.tsx index c790f04df..b3e7a0b60 100644 --- a/src/lib/components/forms/ListSelection.tsx +++ b/src/lib/components/forms/ListSelection.tsx @@ -127,7 +127,7 @@ export const ListSelection = forwardRef( alignItems="center" color="text.main" border="1px solid" - borderColor="divider.main" + borderColor="pebble.700" background="none" borderRadius="4px" maxW="100%" @@ -145,8 +145,8 @@ export const ListSelection = forwardRef( cursor="pointer" whiteSpace="nowrap" size="md" - bgColor="primary.main" - color="gray.900" + bgColor="violet.light" + color="pebble.900" alignItems="center" display="flex" textTransform="none" @@ -155,7 +155,7 @@ export const ListSelection = forwardRef( borderRadius="full" > {option.label} - + ))} diff --git a/src/lib/components/forms/SelectInput.tsx b/src/lib/components/forms/SelectInput.tsx index 938ffa51e..ea3c68150 100644 --- a/src/lib/components/forms/SelectInput.tsx +++ b/src/lib/components/forms/SelectInput.tsx @@ -75,7 +75,7 @@ export const SelectInput = ({ "&[aria-expanded=true]": { "> input": { border: "2px solid", - borderColor: "primary.main", + borderColor: "lilac.main", }, }, "& .form-label": { @@ -101,14 +101,14 @@ export const SelectInput = ({ color={selected ? "text.main" : "text.dark"} /> - + div:not(:last-of-type)": { borderBottom: "1px solid", - borderBottomColor: "divider.main", + borderBottomColor: "pebble.700", }, }} > diff --git a/src/lib/components/forms/TagSelection.tsx b/src/lib/components/forms/TagSelection.tsx index 5cab02676..a8d168bd2 100644 --- a/src/lib/components/forms/TagSelection.tsx +++ b/src/lib/components/forms/TagSelection.tsx @@ -148,7 +148,7 @@ export const TagSelection = observer( alignItems="center" color="text.main" border="1px solid" - borderColor="divider.main" + borderColor="pebble.700" background="none" borderRadius="4px" maxW="100%" @@ -214,7 +214,7 @@ export const TagSelection = observer( {displayOptions && ( {noResultAndUncreatable ? ( @@ -246,7 +246,7 @@ export const TagSelection = observer( selectOptionFromList(option)} > @@ -272,7 +272,7 @@ export const TagSelection = observer( {canCreateOption && inputValue && ( createOption()} > diff --git a/src/lib/components/icon/UploadIcon.tsx b/src/lib/components/icon/UploadIcon.tsx index 1fc53dd33..f52367d75 100644 --- a/src/lib/components/icon/UploadIcon.tsx +++ b/src/lib/components/icon/UploadIcon.tsx @@ -8,10 +8,10 @@ interface UploadIconProps { const getVariantStyle = (variant: UploadIconProps["variant"]) => { switch (variant) { case "muted": - return { bgColor: "divider.main", color: "text.dark" }; + return { bgColor: "pebble.700", color: "text.dark" }; case "primary": default: - return { bgColor: "rgba(244, 143, 177, 0.3)", color: "primary.main" }; + return { bgColor: "lilac.background", color: "lilac.main" }; } }; diff --git a/src/lib/components/json/JsonInput.tsx b/src/lib/components/json/JsonInput.tsx index 1b4e06b63..a25327fec 100644 --- a/src/lib/components/json/JsonInput.tsx +++ b/src/lib/components/json/JsonInput.tsx @@ -26,7 +26,7 @@ const getResponse = (jsonState: JsonState) => { switch (jsonState.state) { case "loading": return { - color: "gray.500", + color: "text.dark", response: ( <> Checking JSON Format... @@ -35,7 +35,7 @@ const getResponse = (jsonState: JsonState) => { }; case "success": return { - color: "white", + color: "text.main", response: ( <> Valid JSON Format @@ -88,12 +88,12 @@ const JsonInput = ({ topic, text, setText, height }: JsonInputProps) => { mt="8px" p="16px 12px" borderWidth="thin" - borderColor="divider.main" + borderColor="pebble.700" borderRadius="4px" position="relative" transition="all .2s" _hover={{ - borderColor: "gray.600", + borderColor: "pebble.600", }} > { top="-10px" w="fit-content" background="background.main" - textColor="gray.500" + textColor="pebble.400" fontSize="12px" position="absolute" > diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx index ec91cd9c0..3edca3c10 100644 --- a/src/lib/components/json/JsonReadOnly.tsx +++ b/src/lib/components/json/JsonReadOnly.tsx @@ -47,12 +47,12 @@ const JsonReadOnly = ({ : `16px 12px ${viewFull ? BUTTON_EXPAND_PADDING : "16px"}` } borderWidth={zeroHeight ? "none" : "thin"} - borderColor={!isJsonValid ? "error.main" : "divider.main"} + borderColor={!isJsonValid ? "error.main" : "pebble.700"} borderRadius="4px" position="relative" transition="all .2s" _hover={{ - borderColor: isJsonValid && "gray.600", + borderColor: isJsonValid && "pebble.600", "& .copy-button-box": { display: "block" }, }} > @@ -68,7 +68,7 @@ const JsonReadOnly = ({ diff --git a/src/lib/components/json/ViewFullMsgButton.tsx b/src/lib/components/json/ViewFullMsgButton.tsx index b071e347e..cf7954e26 100644 --- a/src/lib/components/json/ViewFullMsgButton.tsx +++ b/src/lib/components/json/ViewFullMsgButton.tsx @@ -17,7 +17,7 @@ export const ViewFullMsgButton = ({ w="full" p={3} borderTop="1px solid" - borderTopColor="divider.main" + borderTopColor="pebble.700" bg="background.main" borderRadius="0 0 4px 4px" transition="all .3s" @@ -25,7 +25,7 @@ export const ViewFullMsgButton = ({ bottom={0} left={0} cursor="pointer" - _hover={{ bg: "gray.800" }} + _hover={{ bg: "pebble.900" }} onClick={onClick} zIndex="docked" > diff --git a/src/lib/components/modal/ActionModal.tsx b/src/lib/components/modal/ActionModal.tsx index a3bb4f68a..1ac7758cf 100644 --- a/src/lib/components/modal/ActionModal.tsx +++ b/src/lib/components/modal/ActionModal.tsx @@ -38,7 +38,7 @@ export interface ActionModalProps { } export function ActionModal({ icon = MdMode, - iconColor = "gray.600", + iconColor = "pebble.600", title, subtitle, trigger, @@ -75,7 +75,7 @@ export function ActionModal({ @@ -83,14 +83,14 @@ export function ActionModal({ {title} {subtitle && ( - + {subtitle} )} {headerContent} - {!noCloseButton && } + {!noCloseButton && } {children} diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/CodeSnippet.tsx index 2b9311e65..a154214c7 100644 --- a/src/lib/components/modal/CodeSnippet.tsx +++ b/src/lib/components/modal/CodeSnippet.tsx @@ -212,7 +212,7 @@ execute(); - + {codeSnippets[type].map((item) => ( {item.name} ))} @@ -221,7 +221,7 @@ execute(); {codeSnippets[type].map((item) => ( { - + Redo Instantiate - + @@ -82,9 +82,8 @@ export const RedoModal = ({ message }: RedoModalProps) => { > diff --git a/src/lib/components/modal/code/SaveOrRemoveCode.tsx b/src/lib/components/modal/code/SaveOrRemoveCode.tsx index f1d2790b7..8620a554e 100644 --- a/src/lib/components/modal/code/SaveOrRemoveCode.tsx +++ b/src/lib/components/modal/code/SaveOrRemoveCode.tsx @@ -28,7 +28,7 @@ export function SaveOrRemoveCode({ codeInfo }: SaveOrRemoveCodeModalProps) { } variant="ghost-gray" - color="primary.main" + color="lilac.main" /> } /> @@ -39,7 +39,7 @@ export function SaveOrRemoveCode({ codeInfo }: SaveOrRemoveCodeModalProps) { } variant="ghost-gray" - color="gray.600" + color="pebble.600" /> } /> diff --git a/src/lib/components/modal/select-contract/ContractListCard.tsx b/src/lib/components/modal/select-contract/ContractListCard.tsx index 363f7674c..08977687c 100644 --- a/src/lib/components/modal/select-contract/ContractListCard.tsx +++ b/src/lib/components/modal/select-contract/ContractListCard.tsx @@ -46,12 +46,14 @@ export const ContractListCard = ({ - + {item.contracts.length} {showLastUpdated && ( - + Updated {dayjs(item.lastUpdated).toNow(true)} ago )} @@ -88,20 +91,14 @@ export const ContractListCard = ({ {!isReadOnly && ( - + , + icon: , children: "Edit list name", }} /> diff --git a/src/lib/components/modal/select-contract/SelectContractAdmin.tsx b/src/lib/components/modal/select-contract/SelectContractAdmin.tsx index 0368bb8f7..dbbe0b2db 100644 --- a/src/lib/components/modal/select-contract/SelectContractAdmin.tsx +++ b/src/lib/components/modal/select-contract/SelectContractAdmin.tsx @@ -59,7 +59,7 @@ export const SelectContractAdmin = ({ return ( <> @@ -65,9 +65,9 @@ const Footer = () => { as={BiUserVoice} width="18px" height="18px" - color="gray.600" + color="pebble.600" /> - + Feedback @@ -90,14 +90,14 @@ const Footer = () => { as={IoSparklesSharp} width="16px" height="16px" - color="gray.600" + color="honeydew.light" opacity="0" transition="all .25s ease-in-out" /> - + Made by - + Alles Labs diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx index bc37fc756..bf2606da0 100644 --- a/src/lib/layout/Header.tsx +++ b/src/lib/layout/Header.tsx @@ -61,7 +61,7 @@ const Header = () => { Celatone navigate({ pathname: "/" })} diff --git a/src/lib/layout/Navbar.tsx b/src/lib/layout/Navbar.tsx index 583eb70ea..9329ea6b0 100644 --- a/src/lib/layout/Navbar.tsx +++ b/src/lib/layout/Navbar.tsx @@ -166,7 +166,7 @@ const Navbar = observer(() => { mb="4" key={item.category} borderBottom="1px solid" - borderColor="gray.800" + borderColor="pebble.700" sx={{ "&:last-of-type": { borderBottom: "none", @@ -182,7 +182,7 @@ const Navbar = observer(() => { {item.category === "Contracts" && ( , children: "NEW LIST", @@ -196,16 +196,16 @@ const Navbar = observer(() => { gap="2" p={2} cursor="pointer" - _hover={{ bg: "gray.800", borderRadius: "4px" }} + _hover={{ bg: "pebble.800", borderRadius: "4px" }} transition="all .25s ease-in-out" alignItems="center" bgColor={ - isCurrentPage(submenu.slug) ? "gray.800" : "transparent" + isCurrentPage(submenu.slug) ? "pebble.800" : "transparent" } borderRadius={isCurrentPage(submenu.slug) ? "4px" : "0px"} > {submenu.icon && ( - + )} {submenu.logo && ( { const route = type ? getRoute(type) : null; return ( - - + + {text} {route && ( handleSelectResult(type)} > {value} @@ -119,7 +120,7 @@ const Searchbar = () => { h="36px" onChange={handleSearchChange} placeholder="Search by Contract Address / Code ID" - focusBorderColor="primary.main" + focusBorderColor="lilac.main" _placeholder={{ color: "#A9A9A9" }} onFocus={() => setDisplayResults(keyword.length > 0)} onKeyDown={handleOnKeyEnter} diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx index 4c06b1d7c..ff873a3ff 100644 --- a/src/lib/layout/index.tsx +++ b/src/lib/layout/index.tsx @@ -29,10 +29,10 @@ const Layout = ({ children }: LayoutProps) => { overflowX="hidden" bg="background.main" > - +
- + diff --git a/src/lib/pages/code-details/components/table/NoContracts.tsx b/src/lib/pages/code-details/components/table/NoContracts.tsx index 529f04940..4d6d88580 100644 --- a/src/lib/pages/code-details/components/table/NoContracts.tsx +++ b/src/lib/pages/code-details/components/table/NoContracts.tsx @@ -26,7 +26,7 @@ const EmptyState = () => ( export const NoContracts = () => { const { isWalletConnected } = useWallet(); return ( - + {!isWalletConnected ? : } ); diff --git a/src/lib/pages/code-details/components/table/contracts/ContractTable.tsx b/src/lib/pages/code-details/components/table/contracts/ContractTable.tsx index d4e4725f1..f248c5e70 100644 --- a/src/lib/pages/code-details/components/table/contracts/ContractTable.tsx +++ b/src/lib/pages/code-details/components/table/contracts/ContractTable.tsx @@ -79,9 +79,8 @@ export const ContractTable = observer(({ codeId }: ContractTableProps) => { {totalData} diff --git a/src/lib/pages/code-details/components/table/contracts/ContractTableRow.tsx b/src/lib/pages/code-details/components/table/contracts/ContractTableRow.tsx index 273b0a380..6850ea24f 100644 --- a/src/lib/pages/code-details/components/table/contracts/ContractTableRow.tsx +++ b/src/lib/pages/code-details/components/table/contracts/ContractTableRow.tsx @@ -103,7 +103,7 @@ export const ContractTableRow = ({ } variant="ghost-gray" - color="primary.main" + color="violet.light" /> } /> @@ -114,7 +114,7 @@ export const ContractTableRow = ({ } variant="ghost-gray" - color="gray.600" + color="pebble.600" /> } /> diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx index 426b05b0d..db19b7e9f 100644 --- a/src/lib/pages/code-details/index.tsx +++ b/src/lib/pages/code-details/index.tsx @@ -54,7 +54,7 @@ const CodeDetailsBody = ({ codeId }: CodeDetailsBodyProps) => { permissionAddresses={codeData.permissionAddresses ?? []} /> - + diff --git a/src/lib/pages/codes/components/CodesTable.tsx b/src/lib/pages/codes/components/CodesTable.tsx index 36b8b3d49..708456107 100644 --- a/src/lib/pages/codes/components/CodesTable.tsx +++ b/src/lib/pages/codes/components/CodesTable.tsx @@ -67,7 +67,7 @@ const StateContainer = ({ children }: { children: ReactNode }) => ( const NotMatched = () => { return ( - + No matched codes found. ); @@ -108,7 +108,7 @@ const CodeTableHead = () => { px="48px" sx={{ "& div": { color: "text.dark" } }} borderBottom="1px solid" - borderColor="divider.main" + borderColor="pebble.700" > Code ID Code Description @@ -129,12 +129,12 @@ const CodeTableRow = ({ code, isRemovable }: CodesRowProps) => { { contractLocalInfo={contractLocalInfo} triggerElement={ : } @@ -80,10 +80,10 @@ export const ContractTop = ({ contractData }: ContractTopProps) => { }} triggerElement={ } /> } @@ -170,10 +170,10 @@ export const ContractTop = ({ contractData }: ContractTopProps) => { contractLocalInfo={contractLocalInfo} triggerElement={ } /> } diff --git a/src/lib/pages/contract-details/components/InstantiateInfo.tsx b/src/lib/pages/contract-details/components/InstantiateInfo.tsx index 1bf24d52c..dfdc959aa 100644 --- a/src/lib/pages/contract-details/components/InstantiateInfo.tsx +++ b/src/lib/pages/contract-details/components/InstantiateInfo.tsx @@ -103,7 +103,7 @@ export const InstantiateInfo = ({ )} - + {instantiateInfo && (instantiateInfo.createdHeight !== -1 ? ( diff --git a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx index ce7124fa2..9b591d323 100644 --- a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx +++ b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx @@ -46,8 +46,8 @@ export const UserContractDesc = ({ contractData }: UserContractDescProps) => { triggerElement={ ) : null; diff --git a/src/lib/components/ContractCmdButton.tsx b/src/lib/components/ContractCmdButton.tsx index e86b3de86..2f1d45e58 100644 --- a/src/lib/components/ContractCmdButton.tsx +++ b/src/lib/components/ContractCmdButton.tsx @@ -11,11 +11,11 @@ export const ContractCmdButton = ({ return ( diff --git a/src/lib/pages/instantiate/component/code-select/CodeSelect.tsx b/src/lib/pages/instantiate/component/code-select/CodeSelect.tsx index 73e7e2f7b..b94b2084c 100644 --- a/src/lib/pages/instantiate/component/code-select/CodeSelect.tsx +++ b/src/lib/pages/instantiate/component/code-select/CodeSelect.tsx @@ -32,10 +32,10 @@ export const CodeSelect = ({ p="16px" gap="16px" w="100%" - bgColor="gray.900" + bgColor="pebble.900" borderRadius="4px" borderWidth="1px" - borderColor={isError ? "error.main" : "gray.900"} + borderColor={isError ? "error.main" : "pebble.700"} > {codeId ? ( diff --git a/src/lib/pages/instantiate/component/code-select/CodeTableReadOnly.tsx b/src/lib/pages/instantiate/component/code-select/CodeTableReadOnly.tsx index 823bfddec..f772db14f 100644 --- a/src/lib/pages/instantiate/component/code-select/CodeTableReadOnly.tsx +++ b/src/lib/pages/instantiate/component/code-select/CodeTableReadOnly.tsx @@ -15,7 +15,8 @@ const CodeTableRow = ({ onCodeSelect, codeDetail }: TableRowProps) => { return ( onCodeSelect(codeDetail.id.toString())} templateColumns={TEMPLATE_COLUMNS} > diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx index 3d3d25bf0..ed2be12af 100644 --- a/src/lib/pages/migrate/components/MigrateContract.tsx +++ b/src/lib/pages/migrate/components/MigrateContract.tsx @@ -200,9 +200,7 @@ export const MigrateContract = ({ size="md" variant="outline-gray" w="128px" - leftIcon={ - - } + leftIcon={} onClick={handleBack} > Back diff --git a/src/lib/pages/past-txs/components/PastTxRow.tsx b/src/lib/pages/past-txs/components/PastTxRow.tsx index f0217fb5c..7f76d732a 100644 --- a/src/lib/pages/past-txs/components/PastTxRow.tsx +++ b/src/lib/pages/past-txs/components/PastTxRow.tsx @@ -62,7 +62,7 @@ export const PastTxRow = ({ {transaction.isIbc && ( - + IBC )} diff --git a/src/lib/pages/public-project/components/AllProject.tsx b/src/lib/pages/public-project/components/AllProject.tsx index f8fb26219..b0b3e80c3 100644 --- a/src/lib/pages/public-project/components/AllProject.tsx +++ b/src/lib/pages/public-project/components/AllProject.tsx @@ -63,6 +63,7 @@ export const AllProject = observer(() => { value={searchKeyword} setInputState={setSearchKeyword} label="Search for existing public projects" + labelBgColor="pebble.900" size="md" mb={12} /> diff --git a/src/lib/pages/public-project/components/CodesTable.tsx b/src/lib/pages/public-project/components/CodesTable.tsx index 1e94862e7..9cf2d4a22 100644 --- a/src/lib/pages/public-project/components/CodesTable.tsx +++ b/src/lib/pages/public-project/components/CodesTable.tsx @@ -90,9 +90,8 @@ export const CodesTable = ({ "& td:last-of-type": { pr: "48px" }, "> td": { borderColor: "pebble.700" }, }} - _hover={{ - bg: "gray.900", - }} + transition="all .25s ease-in-out" + _hover={{ bg: "pebble.900" }} onClick={() => navigate({ pathname: `/code/${code.id}` })} cursor="pointer" > @@ -114,13 +113,13 @@ export const CodesTable = ({ {/* TODO: add condition for permission tag */} - + Nobody - {/* + {/* OnlyAddress - + AnyOfAddresses @@ -137,7 +136,7 @@ export const CodesTable = ({ diff --git a/src/lib/pages/public-project/components/ContractsTable.tsx b/src/lib/pages/public-project/components/ContractsTable.tsx index 88cb01006..deaf88ed1 100644 --- a/src/lib/pages/public-project/components/ContractsTable.tsx +++ b/src/lib/pages/public-project/components/ContractsTable.tsx @@ -83,7 +83,7 @@ export const ContractsTable = ({ {filteredContracts?.map((item) => ( @@ -150,7 +150,7 @@ export const ContractsTable = ({ } diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx index 42945d80f..7cd6ee82d 100644 --- a/src/lib/pages/public-project/components/DetailHeader.tsx +++ b/src/lib/pages/public-project/components/DetailHeader.tsx @@ -25,7 +25,7 @@ export const DetailHeader = ({ details, slug }: DetailProps) => { } + separator={} > diff --git a/src/lib/pages/public-project/components/PublicProjectCard.tsx b/src/lib/pages/public-project/components/PublicProjectCard.tsx index f68bb06e7..4494c07a6 100644 --- a/src/lib/pages/public-project/components/PublicProjectCard.tsx +++ b/src/lib/pages/public-project/components/PublicProjectCard.tsx @@ -32,8 +32,8 @@ export const PublicProjectCard = observer( pt={4} pb={2} alignItems="center" - bg="pebble.900" - _hover={{ bg: "pebble.800" }} + bg="pebble.800" + _hover={{ bg: "pebble.700" }} transition="all 0.2s" borderRadius={4} gap={4} diff --git a/src/lib/pages/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx index 129abf1ec..6a710b75c 100644 --- a/src/lib/pages/public-project/slug.tsx +++ b/src/lib/pages/public-project/slug.tsx @@ -28,7 +28,7 @@ export const ProjectDetail = observer(() => { - + setTabIndex(0)} @@ -72,7 +72,7 @@ export const ProjectDetail = observer(() => { - + Execute Contract diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx index 1fd8b51f2..be64ab9a0 100644 --- a/src/lib/pages/home/components/QuickMenu.tsx +++ b/src/lib/pages/home/components/QuickMenu.tsx @@ -48,7 +48,7 @@ const secondaryMenu = [ export const QuickMenu = () => { return ( - + Start using Celatone { h="full" > - + Deploy a new contract - + Upload a new wasm code or instantiate a new contract - + @@ -90,14 +90,10 @@ export const QuickMenu = () => { - + {item.title} - + {item.subtitle} diff --git a/src/lib/pages/home/components/RecentActivities.tsx b/src/lib/pages/home/components/RecentActivities.tsx index 0f49669af..1f9285f5e 100644 --- a/src/lib/pages/home/components/RecentActivities.tsx +++ b/src/lib/pages/home/components/RecentActivities.tsx @@ -57,7 +57,6 @@ export const RecentActivities = observer(() => { { /> - + {dayjs(item.timestamp).toNow(true)} ago{" "} {/* TODO - check address as me */} {item.sender && ( <> - - by - + by { return ( - + Instantiate Complete! {title && subtitle && ( - + {title} diff --git a/src/lib/pages/instantiate/component/code-select/CodeSelect.tsx b/src/lib/pages/instantiate/component/code-select/CodeSelect.tsx index 8417abfbf..fbc6373ca 100644 --- a/src/lib/pages/instantiate/component/code-select/CodeSelect.tsx +++ b/src/lib/pages/instantiate/component/code-select/CodeSelect.tsx @@ -42,7 +42,6 @@ export const CodeSelect = ({ ) : ( - + Please select code )} diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx index ad206cabb..b877f4eeb 100644 --- a/src/lib/pages/instantiate/instantiate.tsx +++ b/src/lib/pages/instantiate/instantiate.tsx @@ -296,7 +296,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => { error={validateAdmin(watchAdminAddress)} helperAction={ setValue("adminAddress", address)} @@ -305,13 +305,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => { } /> - + Instantiate Message { setText={(newVal: string) => setValue("initMsg", newVal)} height="120px" /> - + Send asset to contract {fields.map((field, idx) => ( diff --git a/src/lib/pages/not-found/index.tsx b/src/lib/pages/not-found/index.tsx index 2a266c502..e6f9fc3ea 100644 --- a/src/lib/pages/not-found/index.tsx +++ b/src/lib/pages/not-found/index.tsx @@ -20,7 +20,7 @@ const NotFoundPage = () => { 404 - + This page is not found { return ( - + Past Transactions diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx index 7cd6ee82d..563f8ec14 100644 --- a/src/lib/pages/public-project/components/DetailHeader.tsx +++ b/src/lib/pages/public-project/components/DetailHeader.tsx @@ -60,12 +60,7 @@ export const DetailHeader = ({ details, slug }: DetailProps) => { width={8} height={8} /> - + {details?.name} diff --git a/src/lib/pages/public-project/index.tsx b/src/lib/pages/public-project/index.tsx index baa872d00..3842031b5 100644 --- a/src/lib/pages/public-project/index.tsx +++ b/src/lib/pages/public-project/index.tsx @@ -8,7 +8,7 @@ export const AllPublicProjectsPage = () => ( - + Public Projects diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx index 9f05de6ba..dea331688 100644 --- a/src/lib/pages/query/index.tsx +++ b/src/lib/pages/query/index.tsx @@ -97,7 +97,7 @@ const Query = () => { BACK - + Query Contract diff --git a/src/lib/styles/theme/components/heading.ts b/src/lib/styles/theme/components/heading.ts index 2206b3973..74f3993d5 100644 --- a/src/lib/styles/theme/components/heading.ts +++ b/src/lib/styles/theme/components/heading.ts @@ -2,7 +2,7 @@ import type { ComponentStyleConfig } from "@chakra-ui/react"; export const Heading: ComponentStyleConfig = { baseStyle: { - color: "#ffffff", + color: "text.main", "&.ellipsis": { whiteSpace: "nowrap", overflow: "hidden", diff --git a/src/lib/styles/theme/components/text.ts b/src/lib/styles/theme/components/text.ts index 95a041dd9..caa1970e8 100644 --- a/src/lib/styles/theme/components/text.ts +++ b/src/lib/styles/theme/components/text.ts @@ -2,7 +2,7 @@ import type { ComponentStyleConfig } from "@chakra-ui/react"; export const Text: ComponentStyleConfig = { baseStyle: { - color: "#ffffff", + color: "text.main", "&.ellipsis": { whiteSpace: "nowrap", overflow: "hidden", From c36ed9f9a59d6e7a358519a0c738b950e65ab023 Mon Sep 17 00:00:00 2001 From: Ramida J Date: Wed, 1 Feb 2023 17:56:23 +0700 Subject: [PATCH 04/10] feat(components): fix label background color on modal and add transition --- src/lib/components/ExplorerLink.tsx | 1 + src/lib/components/forms/ListSelection.tsx | 10 ++++++---- src/lib/components/forms/SelectInput.tsx | 2 +- src/lib/components/forms/TagSelection.tsx | 8 +++++--- src/lib/components/json/JsonEditor.tsx | 2 +- src/lib/components/json/JsonInput.tsx | 2 +- src/lib/components/json/JsonReadOnly.tsx | 2 +- src/lib/components/json/ViewFullMsgButton.tsx | 2 +- src/lib/components/modal/EditTags.tsx | 2 +- src/lib/components/modal/code/CodeDetailsTemplate.tsx | 2 +- src/lib/components/modal/code/SaveNewCode.tsx | 6 +++--- src/lib/components/modal/contract/AddToOtherList.tsx | 2 +- .../modal/contract/ContractDetailsTemplate.tsx | 2 +- src/lib/components/modal/contract/SaveNewContract.tsx | 6 +++--- src/lib/layout/Header.tsx | 2 +- src/lib/layout/Searchbar.tsx | 1 - src/lib/pages/contract-details/components/JsonInfo.tsx | 4 ++-- .../components/ContractListReadOnlyTable.tsx | 3 ++- src/lib/pages/instantiate/component/Footer.tsx | 2 +- .../public-project/components/PublicProjectCard.tsx | 2 +- .../pages/public-project/components/SocialMedia.tsx | 6 +++--- 21 files changed, 37 insertions(+), 32 deletions(-) diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx index b5ab2a4e1..928cf3c54 100644 --- a/src/lib/components/ExplorerLink.tsx +++ b/src/lib/components/ExplorerLink.tsx @@ -141,6 +141,7 @@ export const ExplorerLink = ({ ( setResult, placeholder, helperText, - labelBgColor = "background.main", + labelBgColor = "pebble.900", ...rest }: ListSelectionProps, ref @@ -200,7 +200,7 @@ export const ListSelection = forwardRef( {displayOptions && ( ( selectOptionFromList(option)} > @@ -239,7 +240,8 @@ export const ListSelection = forwardRef( setEnableOutside(false)} > diff --git a/src/lib/components/forms/SelectInput.tsx b/src/lib/components/forms/SelectInput.tsx index 55f1aa5fc..fd3446b8b 100644 --- a/src/lib/components/forms/SelectInput.tsx +++ b/src/lib/components/forms/SelectInput.tsx @@ -36,7 +36,7 @@ const SelectItem = ({ children, onSelect, disabled }: SelectItemProps) => { p={4} onClick={onSelect} color="text.main" - transition="all .2s" + transition="all .25s ease-in-out" cursor="pointer" aria-disabled={disabled} _hover={{ bg: "pebble.800" }} diff --git a/src/lib/components/forms/TagSelection.tsx b/src/lib/components/forms/TagSelection.tsx index ce4523ba9..bcea292fb 100644 --- a/src/lib/components/forms/TagSelection.tsx +++ b/src/lib/components/forms/TagSelection.tsx @@ -214,7 +214,7 @@ export const TagSelection = observer( {displayOptions && ( selectOptionFromList(option)} > @@ -272,7 +273,8 @@ export const TagSelection = observer( {canCreateOption && inputValue && ( createOption()} > diff --git a/src/lib/components/json/JsonEditor.tsx b/src/lib/components/json/JsonEditor.tsx index 8a009493d..896acf80b 100644 --- a/src/lib/components/json/JsonEditor.tsx +++ b/src/lib/components/json/JsonEditor.tsx @@ -62,7 +62,7 @@ const JsonEditor = ({ height={boxHeight} resize={disableResizing ? "unset" : "vertical"} overflow="auto" - transition="all .15s" + transition="all .25s ease-in-out" > { borderColor="pebble.700" borderRadius="4px" position="relative" - transition="all .2s" + transition="all .25s ease-in-out" _hover={{ borderColor: "pebble.600", }} diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx index 770e8f6fc..99dc3b060 100644 --- a/src/lib/components/json/JsonReadOnly.tsx +++ b/src/lib/components/json/JsonReadOnly.tsx @@ -50,7 +50,7 @@ const JsonReadOnly = ({ borderColor={!isJsonValid ? "error.main" : "pebble.700"} borderRadius="4px" position="relative" - transition="all .2s" + transition="all .25s ease-in-out" _hover={{ borderColor: isJsonValid && "pebble.600", "& .copy-button-box": { display: "block" }, diff --git a/src/lib/components/json/ViewFullMsgButton.tsx b/src/lib/components/json/ViewFullMsgButton.tsx index cf7954e26..6e0d70484 100644 --- a/src/lib/components/json/ViewFullMsgButton.tsx +++ b/src/lib/components/json/ViewFullMsgButton.tsx @@ -20,7 +20,7 @@ export const ViewFullMsgButton = ({ borderTopColor="pebble.700" bg="background.main" borderRadius="0 0 4px 4px" - transition="all .3s" + transition="all .25s ease-in-out" position="absolute" bottom={0} left={0} diff --git a/src/lib/components/modal/EditTags.tsx b/src/lib/components/modal/EditTags.tsx index 0267b2880..f4ceeefb6 100644 --- a/src/lib/components/modal/EditTags.tsx +++ b/src/lib/components/modal/EditTags.tsx @@ -66,7 +66,7 @@ export function EditTags({ contractLocalInfo }: EditTagsProps) { setResult={(selectedOptions: string[]) => { setTagResult(selectedOptions); }} - labelBgColor="pebble.800" + labelBgColor="pebble.900" /> diff --git a/src/lib/components/modal/code/CodeDetailsTemplate.tsx b/src/lib/components/modal/code/CodeDetailsTemplate.tsx index 09b55452d..1228945e1 100644 --- a/src/lib/components/modal/code/CodeDetailsTemplate.tsx +++ b/src/lib/components/modal/code/CodeDetailsTemplate.tsx @@ -118,7 +118,7 @@ export const CodeDetailsTemplate = ({ size="lg" helperText="Fill in code description to define its use as a reminder" label="Code Description" - labelBgColor="pebble.800" + labelBgColor="pebble.900" maxLength={MAX_CODE_DESCRIPTION_LENGTH} /> diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx index e1a268709..eb55e45d3 100644 --- a/src/lib/components/modal/code/SaveNewCode.tsx +++ b/src/lib/components/modal/code/SaveNewCode.tsx @@ -181,14 +181,14 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) { value={codeId} onInputChange={setCodeId} label="Code ID" - labelBgColor="pebble.800" + labelBgColor="pebble.900" status={codeIdStatus} placeholder="ex. 1234" /> {}} status={uploaderStatus} @@ -199,7 +199,7 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) { value={description} setInputState={setDescription} label="Code Description" - labelBgColor="pebble.800" + labelBgColor="pebble.900" placeholder="No Description" helperText="Fill in code description to define its use as a reminder" status={descriptionStatus} diff --git a/src/lib/components/modal/contract/AddToOtherList.tsx b/src/lib/components/modal/contract/AddToOtherList.tsx index 263cc3135..5552c3913 100644 --- a/src/lib/components/modal/contract/AddToOtherList.tsx +++ b/src/lib/components/modal/contract/AddToOtherList.tsx @@ -72,7 +72,7 @@ export const AddToOtherList = observer( helperText="Grouping your contracts by adding to your existing list or create a new list" setResult={setContractLists} - labelBgColor="pebble.800" + labelBgColor="pebble.900" /> diff --git a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx index b0dfe41a5..a2064903f 100644 --- a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx +++ b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx @@ -107,7 +107,7 @@ export const ContractDetailsTemplate = ({ setTagsValue={setTagsValue} setContractListsValue={setContractListsValue} errors={errors} - labelBgColor="pebble.800" + labelBgColor="pebble.900" /> ); diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx index 35a40660a..c67fc979d 100644 --- a/src/lib/components/modal/contract/SaveNewContract.tsx +++ b/src/lib/components/modal/contract/SaveNewContract.tsx @@ -196,7 +196,7 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) { variant="floating" placeholder={`ex. ${exampleContractAddress}`} status={status} - labelBgColor="pebble.800" + labelBgColor="pebble.900" /> @@ -214,7 +214,7 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) { setTagsValue={setTagsValue} setContractListsValue={setContractListsValue} errors={errors} - labelBgColor="pebble.800" + labelBgColor="pebble.900" /> diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx index 5224f0a3a..1e2daab07 100644 --- a/src/lib/layout/Header.tsx +++ b/src/lib/layout/Header.tsx @@ -72,7 +72,7 @@ const Header = () => { { onChange={handleSearchChange} placeholder="Search by Contract Address / Code ID" focusBorderColor="lilac.main" - _placeholder={{ color: "#A9A9A9" }} onFocus={() => setDisplayResults(keyword.length > 0)} onKeyDown={handleOnKeyEnter} /> diff --git a/src/lib/pages/contract-details/components/JsonInfo.tsx b/src/lib/pages/contract-details/components/JsonInfo.tsx index a966c2429..4fb476a44 100644 --- a/src/lib/pages/contract-details/components/JsonInfo.tsx +++ b/src/lib/pages/contract-details/components/JsonInfo.tsx @@ -32,7 +32,7 @@ export const JsonInfo = ({ p="12px 16px" borderRadius="8px" _hover={{ backgroundColor: "pebble.900" }} - transition="all .3s" + transition="all .25s ease-in-out" cursor="pointer" onClick={() => setExpand((prev) => !prev)} > @@ -44,7 +44,7 @@ export const JsonInfo = ({ color="text.dark" boxSize={5} transform={expand ? "rotate(180deg)" : "rotate(0)"} - transition="all .3s" + transition="all .25s ease-in-out" /> ( { onContractSelect(item.contractAddress); diff --git a/src/lib/pages/instantiate/component/Footer.tsx b/src/lib/pages/instantiate/component/Footer.tsx index 303c2cb51..9ff87290d 100644 --- a/src/lib/pages/instantiate/component/Footer.tsx +++ b/src/lib/pages/instantiate/component/Footer.tsx @@ -13,7 +13,7 @@ export const Footer = ({ onInstantiate, disabled, loading }: FooterProps) => { return ( { as={MdLanguage} color="pebble.600" _hover={{ color: iconHover }} - transition="all 0.2s" + transition="all .25s ease-in-out" boxSize="6" /> @@ -56,7 +56,7 @@ export const SocialMedia = ({ details }: SocialMediaProps) => { as={FaGithub} color="pebble.600" _hover={{ color: iconHover }} - transition="all 0.2s" + transition="all .25s ease-in-out" boxSize="5" /> @@ -76,7 +76,7 @@ export const SocialMedia = ({ details }: SocialMediaProps) => { as={renderSocial(social.name)} color="pebble.600" _hover={{ color: iconHover }} - transition="all 0.2s" + transition="all .25s ease-in-out" boxSize="5" /> From b9690fff43f138f5ae23607f634ea68c58dc5afa Mon Sep 17 00:00:00 2001 From: Ramida J Date: Wed, 1 Feb 2023 18:31:17 +0700 Subject: [PATCH 05/10] feat(components): adjust border radius --- src/lib/components/ButtonCard.tsx | 2 +- src/lib/components/ContractSelectSection.tsx | 2 +- src/lib/components/dropzone/index.tsx | 2 +- src/lib/components/forms/ListSelection.tsx | 6 +++--- src/lib/components/forms/SelectInput.tsx | 4 ++-- src/lib/components/forms/TagSelection.tsx | 6 +++--- src/lib/components/json/JsonInput.tsx | 2 +- src/lib/components/json/JsonReadOnly.tsx | 2 +- src/lib/components/json/ViewFullMsgButton.tsx | 4 ++-- src/lib/components/modal/CodeSnippet.tsx | 2 +- src/lib/components/modal/code/SaveOrRemoveCode.tsx | 2 +- .../components/modal/select-contract/ContractListCard.tsx | 5 ++--- src/lib/components/table/EditableCell.tsx | 4 ++-- src/lib/components/upload/components/UploadCard.tsx | 2 +- src/lib/layout/Footer.tsx | 2 +- src/lib/layout/Header.tsx | 5 +++-- src/lib/layout/Navbar.tsx | 4 ++-- src/lib/layout/Searchbar.tsx | 5 +++-- .../components/table/contracts/ContractTableRow.tsx | 1 + src/lib/pages/codes/components/CodesTable.tsx | 1 + .../pages/contract-details/components/InstantiateInfo.tsx | 1 + src/lib/pages/contract-list/components/table/TagsCell.tsx | 2 +- src/lib/pages/home/components/RecentActivities.tsx | 1 + .../pages/instantiate/component/code-select/CodeSelect.tsx | 2 +- src/lib/pages/past-txs/components/FilterSelection.tsx | 6 +++--- src/lib/pages/public-project/components/BookmarkButton.tsx | 2 +- .../pages/public-project/components/PublicProjectCard.tsx | 2 +- src/lib/styles/theme/components/alert.ts | 2 +- src/lib/styles/theme/components/button.ts | 2 +- src/lib/styles/theme/components/input.ts | 2 +- src/lib/styles/theme/components/menu.ts | 2 +- src/lib/styles/theme/components/modal.ts | 2 +- src/lib/styles/theme/components/select.ts | 2 +- src/lib/styles/theme/components/textarea.ts | 2 +- 34 files changed, 49 insertions(+), 44 deletions(-) diff --git a/src/lib/components/ButtonCard.tsx b/src/lib/components/ButtonCard.tsx index 28183e83e..1153185e8 100644 --- a/src/lib/components/ButtonCard.tsx +++ b/src/lib/components/ButtonCard.tsx @@ -23,7 +23,7 @@ export const ButtonCard = ({ justify="space-between" onClick={!disabled ? onClick : undefined} bgColor="pebble.800" - borderRadius="4px" + borderRadius="8px" w="100%" cursor="pointer" _hover={{ bgColor: "pebble.700" }} diff --git a/src/lib/components/ContractSelectSection.tsx b/src/lib/components/ContractSelectSection.tsx index 77de936e5..34a934cec 100644 --- a/src/lib/components/ContractSelectSection.tsx +++ b/src/lib/components/ContractSelectSection.tsx @@ -163,7 +163,7 @@ export const ContractSelectSection = observer( borderWidth="thin" borderColor="pebble.800" p="16px" - borderRadius="4px" + borderRadius="8px" fontSize="12px" justify="space-between" align="center" diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx index ae166f1a0..d4b547a5d 100644 --- a/src/lib/components/dropzone/index.tsx +++ b/src/lib/components/dropzone/index.tsx @@ -34,7 +34,7 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) { borderColor="pebble.700" w="full" p="24px 16px" - borderRadius="4px" + borderRadius="8px" align="center" direction="column" _hover={{ bg: "pebble.900" }} diff --git a/src/lib/components/forms/ListSelection.tsx b/src/lib/components/forms/ListSelection.tsx index cb20d50e4..9d5ea5838 100644 --- a/src/lib/components/forms/ListSelection.tsx +++ b/src/lib/components/forms/ListSelection.tsx @@ -32,7 +32,7 @@ export interface ListSelectionProps extends InputProps { } const listItemProps: CSSProperties = { - borderRadius: "4px", + borderRadius: "8px", margin: "4px 0px", padding: "8px", cursor: "pointer", @@ -129,7 +129,7 @@ export const ListSelection = forwardRef( border="1px solid" borderColor="pebble.700" background="none" - borderRadius="4px" + borderRadius="8px" maxW="100%" overflowX="scroll" > @@ -199,7 +199,7 @@ export const ListSelection = forwardRef( {displayOptions && ( { p={4} onClick={onSelect} color="text.main" - transition="all .25s ease-in-out" cursor="pointer" aria-disabled={disabled} _hover={{ bg: "pebble.800" }} + transition="all .25s ease-in-out" _disabled={{ opacity: 0.4, pointerEvents: "none" }} > {children} @@ -112,7 +112,7 @@ export const SelectInput = ({ w="200px" maxH={`${ITEM_HEIGHT * 4}px`} overflow="scroll" - borderRadius="4px" + borderRadius="8px" _focusVisible={{ outline: "none", }} diff --git a/src/lib/components/forms/TagSelection.tsx b/src/lib/components/forms/TagSelection.tsx index bcea292fb..8a34fb668 100644 --- a/src/lib/components/forms/TagSelection.tsx +++ b/src/lib/components/forms/TagSelection.tsx @@ -35,7 +35,7 @@ export interface TagSelectionProps extends InputProps { } const listItemProps: CSSProperties = { - borderRadius: "4px", + borderRadius: "8px", margin: "4px 0px", padding: "8px", cursor: "pointer", @@ -150,7 +150,7 @@ export const TagSelection = observer( border="1px solid" borderColor="pebble.700" background="none" - borderRadius="4px" + borderRadius="8px" maxW="100%" overflowX="scroll" > @@ -213,7 +213,7 @@ export const TagSelection = observer( {displayOptions && ( { p="16px 12px" borderWidth="thin" borderColor="pebble.700" - borderRadius="4px" + borderRadius="8px" position="relative" transition="all .25s ease-in-out" _hover={{ diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx index 99dc3b060..14efdab72 100644 --- a/src/lib/components/json/JsonReadOnly.tsx +++ b/src/lib/components/json/JsonReadOnly.tsx @@ -48,7 +48,7 @@ const JsonReadOnly = ({ } borderWidth={zeroHeight ? "none" : "thin"} borderColor={!isJsonValid ? "error.main" : "pebble.700"} - borderRadius="4px" + borderRadius="8px" position="relative" transition="all .25s ease-in-out" _hover={{ diff --git a/src/lib/components/json/ViewFullMsgButton.tsx b/src/lib/components/json/ViewFullMsgButton.tsx index 6e0d70484..cf71b636d 100644 --- a/src/lib/components/json/ViewFullMsgButton.tsx +++ b/src/lib/components/json/ViewFullMsgButton.tsx @@ -19,13 +19,13 @@ export const ViewFullMsgButton = ({ borderTop="1px solid" borderTopColor="pebble.700" bg="background.main" - borderRadius="0 0 4px 4px" - transition="all .25s ease-in-out" + borderRadius="0 0 8px 8px" position="absolute" bottom={0} left={0} cursor="pointer" _hover={{ bg: "pebble.900" }} + transition="all .25s ease-in-out" onClick={onClick} zIndex="docked" > diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/CodeSnippet.tsx index a154214c7..3140df321 100644 --- a/src/lib/components/modal/CodeSnippet.tsx +++ b/src/lib/components/modal/CodeSnippet.tsx @@ -223,7 +223,7 @@ execute(); {item.contracts.length} diff --git a/src/lib/components/table/EditableCell.tsx b/src/lib/components/table/EditableCell.tsx index e0eca2fe8..866222893 100644 --- a/src/lib/components/table/EditableCell.tsx +++ b/src/lib/components/table/EditableCell.tsx @@ -69,7 +69,7 @@ export const EditableCell = ({ left="-16px" bg="pebble.800" p={3} - borderRadius="md" + borderRadius="8px" zIndex="sticky" onClick={(e) => e.stopPropagation()} > @@ -114,7 +114,7 @@ export const EditableCell = ({ variant="body2" top="-16px" left="-16px" - borderRadius="md" + borderRadius="8px" bg="pebble.800" p={4} position="absolute" diff --git a/src/lib/components/upload/components/UploadCard.tsx b/src/lib/components/upload/components/UploadCard.tsx index 07917f8b5..ea66a8e83 100644 --- a/src/lib/components/upload/components/UploadCard.tsx +++ b/src/lib/components/upload/components/UploadCard.tsx @@ -63,7 +63,7 @@ export const UploadCard = ({ gap="16px" w="full" bgColor="pebble.900" - borderRadius="4px" + borderRadius="8px" border="1px solid" borderColor={isError ? "error.main" : "pebble.900"} > diff --git a/src/lib/layout/Footer.tsx b/src/lib/layout/Footer.tsx index afdb71043..60f94bf1d 100644 --- a/src/lib/layout/Footer.tsx +++ b/src/lib/layout/Footer.tsx @@ -44,7 +44,7 @@ const Footer = () => { rel="noopener noreferrer" key={`social-${item.slug}`} > - +
+ {" "} +
+ ); }; diff --git a/src/lib/components/button/BackButton.tsx b/src/lib/components/button/BackButton.tsx index 1496e8831..693722fba 100644 --- a/src/lib/components/button/BackButton.tsx +++ b/src/lib/components/button/BackButton.tsx @@ -7,6 +7,8 @@ export const BackButton = () => { return ( + Execute Contract diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx index 563f8ec14..bfc858813 100644 --- a/src/lib/pages/public-project/components/DetailHeader.tsx +++ b/src/lib/pages/public-project/components/DetailHeader.tsx @@ -27,7 +27,10 @@ export const DetailHeader = ({ details, slug }: DetailProps) => { spacing={1} separator={} > - + Public Projects diff --git a/src/lib/pages/query/components/QueryArea.tsx b/src/lib/pages/query/components/QueryArea.tsx index 846c899e3..bc2067036 100644 --- a/src/lib/pages/query/components/QueryArea.tsx +++ b/src/lib/pages/query/components/QueryArea.tsx @@ -85,7 +85,7 @@ export const QueryArea = ({ return ( - + {cmds.length ? ( ) )} - - diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx index dea331688..bc0764638 100644 --- a/src/lib/pages/query/index.tsx +++ b/src/lib/pages/query/index.tsx @@ -1,4 +1,3 @@ -import { ArrowBackIcon } from "@chakra-ui/icons"; import { Heading, Button, Box, Flex } from "@chakra-ui/react"; import { useQuery } from "@tanstack/react-query"; import type { AxiosError } from "axios"; @@ -6,6 +5,7 @@ import { useRouter } from "next/router"; import { useCallback, useEffect, useState } from "react"; import { useInternalNavigate } from "lib/app-provider"; +import { BackButton } from "lib/components/button"; import { ContractSelectSection } from "lib/components/ContractSelectSection"; import { LoadingOverlay } from "lib/components/LoadingOverlay"; import PageContainer from "lib/components/PageContainer"; @@ -89,13 +89,7 @@ const Query = () => { return ( {isFetching && } - + Query Contract From b988a335e9d19ef6fbb2dfc3032a192dbf89722f Mon Sep 17 00:00:00 2001 From: Ramida J Date: Wed, 1 Feb 2023 18:58:33 +0700 Subject: [PATCH 07/10] feat(components): add change log --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a89429c1a..fddf56771 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,7 +38,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased ### Features - +- [#149](https://github.com/alleslabs/celatone-frontend/pull/149) Apply new branding - [#141](https://github.com/alleslabs/celatone-frontend/pull/141) Add 404 not found page, catch network params error - [#134](https://github.com/alleslabs/celatone-frontend/pull/134) Fix un-align sub-page with sidebar - [#144](https://github.com/alleslabs/celatone-frontend/pull/144) Add `Assign me` for admin address on instantiate form From 5f69fadd643494cba326e9d8f62252ea41b55c7c Mon Sep 17 00:00:00 2001 From: Ramida J Date: Thu, 2 Feb 2023 11:57:43 +0700 Subject: [PATCH 08/10] fix(components): create icon button component and adjust styling --- src/lib/components/button/IconButton.tsx | 39 +++++++++++++++ src/lib/components/forms/TagSelection.tsx | 5 +- .../components/modal/list/CreateNewList.tsx | 2 +- .../components/modal/list/EditListName.tsx | 2 +- src/lib/pages/execute/index.tsx | 8 ++- .../past-txs/components/FilterSelection.tsx | 5 +- .../components/BookmarkButton.tsx | 2 +- .../components/PublicProjectCard.tsx | 2 +- .../public-project/components/SocialMedia.tsx | 50 ++++--------------- src/lib/pages/query/index.tsx | 8 ++- src/lib/styles/theme/components/button.ts | 34 ++++--------- 11 files changed, 79 insertions(+), 78 deletions(-) create mode 100644 src/lib/components/button/IconButton.tsx diff --git a/src/lib/components/button/IconButton.tsx b/src/lib/components/button/IconButton.tsx new file mode 100644 index 000000000..2a2f8f178 --- /dev/null +++ b/src/lib/components/button/IconButton.tsx @@ -0,0 +1,39 @@ +import { Button, Icon, Link } from "@chakra-ui/react"; +import type { IconType } from "react-icons/lib"; +import { MdLanguage } from "react-icons/md"; + +interface IconButtonProps { + href: string; + icon: IconType; +} + +const iconHover = "pebble.500"; + +export const IconButton = ({ href, icon }: IconButtonProps) => { + return ( + + ); +}; diff --git a/src/lib/components/forms/TagSelection.tsx b/src/lib/components/forms/TagSelection.tsx index 8a34fb668..67075a3ed 100644 --- a/src/lib/components/forms/TagSelection.tsx +++ b/src/lib/components/forms/TagSelection.tsx @@ -147,8 +147,6 @@ export const TagSelection = observer( {label} diff --git a/src/lib/components/modal/list/CreateNewList.tsx b/src/lib/components/modal/list/CreateNewList.tsx index 05a0f01bd..21332916e 100644 --- a/src/lib/components/modal/list/CreateNewList.tsx +++ b/src/lib/components/modal/list/CreateNewList.tsx @@ -106,7 +106,7 @@ export function CreateNewList({ variant="floating" value={listName} setInputState={setListName} - labelBgColor="pebble.800" + labelBgColor="pebble.900" status={status} label="List Name" /> diff --git a/src/lib/components/modal/list/EditListName.tsx b/src/lib/components/modal/list/EditListName.tsx index 69be8170e..8bfef2bc0 100644 --- a/src/lib/components/modal/list/EditListName.tsx +++ b/src/lib/components/modal/list/EditListName.tsx @@ -77,7 +77,7 @@ export function EditList({ list, menuItemProps }: ModalProps) { variant="floating" value={listName} setInputState={setListName} - labelBgColor="pebble.800" + labelBgColor="pebble.900" status={status} label="List Name" /> diff --git a/src/lib/pages/execute/index.tsx b/src/lib/pages/execute/index.tsx index c81dadb0f..7ac0fdb97 100644 --- a/src/lib/pages/execute/index.tsx +++ b/src/lib/pages/execute/index.tsx @@ -1,3 +1,4 @@ +import { ChevronRightIcon } from "@chakra-ui/icons"; import { Heading, Button, Box, Flex } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { useCallback, useEffect } from "react"; @@ -82,7 +83,12 @@ const Execute = () => { Execute Contract - diff --git a/src/lib/pages/past-txs/components/FilterSelection.tsx b/src/lib/pages/past-txs/components/FilterSelection.tsx index 8b50f8dab..13e5ce8f5 100644 --- a/src/lib/pages/past-txs/components/FilterSelection.tsx +++ b/src/lib/pages/past-txs/components/FilterSelection.tsx @@ -110,8 +110,6 @@ export const FilterSelection = observer( {label} diff --git a/src/lib/pages/public-project/components/BookmarkButton.tsx b/src/lib/pages/public-project/components/BookmarkButton.tsx index 618564bf2..9f5a5646b 100644 --- a/src/lib/pages/public-project/components/BookmarkButton.tsx +++ b/src/lib/pages/public-project/components/BookmarkButton.tsx @@ -56,7 +56,7 @@ const StyledButton = ({ iconColor, }: StyledButtonProps) => ( diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts index 023013bac..88b7299be 100644 --- a/src/lib/styles/theme/components/button.ts +++ b/src/lib/styles/theme/components/button.ts @@ -2,22 +2,10 @@ import type { ComponentStyleConfig } from "@chakra-ui/react"; type Dict = Record; -const pebble400 = "pebble.400"; const pebble600 = "pebble.600"; const pebble700 = "pebble.700"; - const violetLight = "violet.light"; -const violetMain = "violet.main"; -const violetDark = "violet.dark"; - -const honeydewMain = "honeydew.main"; -const honeydewDarker = "honeydew.darker"; const honeydewBg = "honeydew.background"; - -const lilacMain = "lilac.main"; -const lilacBg = "lilac.background"; - -const textMain = "text.main"; const borderDefualt = "1px solid"; const generateStyle = ({ @@ -76,12 +64,12 @@ export const Button: ComponentStyleConfig = { }, variants: { primary: generateStyle({ - basic: { background: violetMain, color: textMain }, + basic: { background: "violet.main", color: "text.main" }, disabled: { background: "violet.background", color: pebble600, }, - hoverBg: violetDark, + hoverBg: "violet.dark", activeBg: violetLight, }), error: generateStyle({ @@ -110,7 +98,7 @@ export const Button: ComponentStyleConfig = { "outline-gray": generateStyle({ basic: { border: borderDefualt, - borderColor: "pebble.600", + borderColor: pebble600, color: "pebble.400", }, disabled: { @@ -125,28 +113,28 @@ export const Button: ComponentStyleConfig = { basic: { border: borderDefualt, borderColor: honeydewBg, - color: honeydewMain, + color: "honeydew.main", }, disabled: { - border: honeydewDarker, - color: honeydewDarker, + border: "honeydew.darker", + color: "honeydew.darker", }, hoverBg: honeydewBg, activeBg: "transparent", }), "ghost-primary": generateStyle({ basic: { - color: lilacMain, + color: "lilac.main", }, disabled: { - color: lilacBg, + color: "lilac.background", }, - hoverBg: lilacBg, + hoverBg: "lilac.background", activeBg: "transparent", }), "ghost-info": generateStyle({ basic: { - color: honeydewMain, + color: "honeydew.main", }, disabled: { color: honeydewBg, @@ -156,7 +144,7 @@ export const Button: ComponentStyleConfig = { }), "ghost-gray": generateStyle({ basic: { - color: pebble400, + color: "pebble.400", }, disabled: { color: "pebble.500", From 88c18374ce3b673b6dafe858454e9bd351e944c5 Mon Sep 17 00:00:00 2001 From: Ramida J Date: Thu, 2 Feb 2023 12:02:00 +0700 Subject: [PATCH 09/10] feat(components): replace color after merge develop --- .../component/code-select/MySavedCodeContent.tsx | 2 +- .../component/code-select/MyStoredCodeContent.tsx | 6 +++--- src/lib/pages/not-found/index.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/pages/instantiate/component/code-select/MySavedCodeContent.tsx b/src/lib/pages/instantiate/component/code-select/MySavedCodeContent.tsx index ceda4a295..de8e37bce 100644 --- a/src/lib/pages/instantiate/component/code-select/MySavedCodeContent.tsx +++ b/src/lib/pages/instantiate/component/code-select/MySavedCodeContent.tsx @@ -20,7 +20,7 @@ export const MySavedCodeContent = ({ py="64px" direction="column" borderY="1px solid" - borderColor="divider.main" + borderColor="pebble.700" > diff --git a/src/lib/pages/instantiate/component/code-select/MyStoredCodeContent.tsx b/src/lib/pages/instantiate/component/code-select/MyStoredCodeContent.tsx index e00cf804a..75352df1f 100644 --- a/src/lib/pages/instantiate/component/code-select/MyStoredCodeContent.tsx +++ b/src/lib/pages/instantiate/component/code-select/MyStoredCodeContent.tsx @@ -25,9 +25,9 @@ export const MyStoredCodeContent = ({ direction="column" gap={2} borderY="1px solid" - borderColor="divider.main" + borderColor="pebble.700" > - + Connect your wallet to upload and see your stored Codes. @@ -41,7 +41,7 @@ export const MyStoredCodeContent = ({ py="64px" direction="column" borderY="1px solid" - borderColor="divider.main" + borderColor="pebble.700" > diff --git a/src/lib/pages/not-found/index.tsx b/src/lib/pages/not-found/index.tsx index e6f9fc3ea..dc622d783 100644 --- a/src/lib/pages/not-found/index.tsx +++ b/src/lib/pages/not-found/index.tsx @@ -9,7 +9,7 @@ const NotFoundPage = () => { Date: Thu, 2 Feb 2023 14:46:43 +0700 Subject: [PATCH 10/10] refactor: remove space in copy button --- src/lib/components/CopyButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/CopyButton.tsx b/src/lib/components/CopyButton.tsx index 94b50e753..bef1672a9 100644 --- a/src/lib/components/CopyButton.tsx +++ b/src/lib/components/CopyButton.tsx @@ -40,7 +40,7 @@ export const CopyButton = ({ leftIcon={} > Copy - {" "} +
);