diff --git a/CHANGELOG.md b/CHANGELOG.md index e4be46508..690b88f98 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Features +- [#149](https://github.com/alleslabs/celatone-frontend/pull/149) Apply new branding + - [#93](https://github.com/alleslabs/celatone-frontend/pull/93) Add filter code by instantiate permission in all codes page - [#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 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/public/favicon.ico b/public/favicon.ico index e06648328..1c33309ea 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/lib/app-fns/tx/common/sending.tsx b/src/lib/app-fns/tx/common/sending.tsx index 80c6581f7..c42cf02f0 100644 --- a/src/lib/app-fns/tx/common/sending.tsx +++ b/src/lib/app-fns/tx/common/sending.tsx @@ -19,7 +19,7 @@ export const sendingTx = (fee: StdFee) => { ], receiptInfo: { header: "Sending Transaction", - headerIcon: , + headerIcon: , }, actionVariant: "sending", } as TxResultRendering; 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..1153185e8 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="8px" 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..6a902bb41 100644 --- a/src/lib/components/ConnectWalletAlert.tsx +++ b/src/lib/components/ConnectWalletAlert.tsx @@ -34,7 +34,7 @@ export const ConnectWalletAlert = ({ return !address ? ( - + {title} - + {subtitle} -
{ // TODO: revisit useClipboard later - const { onCopy, setValue } = useClipboard(value); + const { onCopy, hasCopied, setValue } = useClipboard(value); useEffect(() => setValue(value), [value, setValue]); return ( - +
+ +
+ ); }; diff --git a/src/lib/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx index 2805eb948..858b1b755 100644 --- a/src/lib/components/CustomTab.tsx +++ b/src/lib/components/CustomTab.tsx @@ -23,7 +23,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => { 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/EstimatedFeeRender.tsx b/src/lib/components/EstimatedFeeRender.tsx index 5aa4d5d6c..715b445d4 100644 --- a/src/lib/components/EstimatedFeeRender.tsx +++ b/src/lib/components/EstimatedFeeRender.tsx @@ -13,7 +13,7 @@ export const EstimatedFeeRender = ({ if (loading) { return ( <> - Estimating ... + Estimating ... ); } diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx index f41d07091..928cf3c54 100644 --- a/src/lib/components/ExplorerLink.tsx +++ b/src/lib/components/ExplorerLink.tsx @@ -91,7 +91,7 @@ const LinkRender = ({ const textElement = ( { return ( { align="center" direction="column" gap={3} - bgColor="overlay.main" + bgColor="background.overlay" position="absolute" top={0} left={0} zIndex="overlay" > - - - Loading ... - + + Loading ... ); }; diff --git a/src/lib/components/PermissionChip.tsx b/src/lib/components/PermissionChip.tsx index ee357e625..1edef751b 100644 --- a/src/lib/components/PermissionChip.tsx +++ b/src/lib/components/PermissionChip.tsx @@ -31,8 +31,8 @@ export const PermissionChip = ({ instantiatePermission === InstantiatePermission.EVERYBODY; const tagBgColor: CSSProperties["backgroundColor"] = isAllowed - ? "rgba(161, 230, 143, 0.5)" - : "rgba(173, 173, 173, 0.6)"; + ? "honeydew.darker" + : "pebble.700"; return {instantiatePermission}; }; diff --git a/src/lib/components/Wallet.tsx b/src/lib/components/Wallet.tsx index 3ff8fc1e3..adfd1215e 100644 --- a/src/lib/components/Wallet.tsx +++ b/src/lib/components/Wallet.tsx @@ -40,7 +40,7 @@ export const WalletSection = () => { 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..4a2be5735 100644 --- a/src/lib/components/action-msg/SingleMsg.tsx +++ b/src/lib/components/action-msg/SingleMsg.tsx @@ -69,10 +69,10 @@ 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..fb2cc0271 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} > @@ -65,7 +65,7 @@ export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => { } + icon={} onClick={() => { navigate({ pathname: "/migrate", @@ -76,7 +76,7 @@ export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => { Migrate } + icon={} onClick={() => { navigate({ pathname: "/admin", @@ -90,7 +90,7 @@ export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => { contractAddress={contractAddress} triggerElement={ } + icon={} > Clear Admin 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 ( ); }; 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/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..d4b547a5d 100644 --- a/src/lib/components/dropzone/index.tsx +++ b/src/lib/components/dropzone/index.tsx @@ -31,24 +31,30 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) { return ( - - + + Click to upload - {" "} - or drag Wasm file here - + + or drag Wasm file here + .wasm (max. 800KB) 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 274db13c7..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", @@ -45,7 +45,7 @@ export const ListSelection = forwardRef( setResult, placeholder, helperText, - labelBgColor = "background.main", + labelBgColor = "pebble.900", ...rest }: ListSelectionProps, ref @@ -127,9 +127,9 @@ export const ListSelection = forwardRef( alignItems="center" color="text.main" border="1px solid" - borderColor="divider.main" + borderColor="pebble.700" background="none" - borderRadius="4px" + borderRadius="8px" maxW="100%" overflowX="scroll" > @@ -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} - + ))} @@ -199,8 +199,8 @@ 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 d3d44697f..58fff12a9 100644 --- a/src/lib/components/forms/SelectInput.tsx +++ b/src/lib/components/forms/SelectInput.tsx @@ -48,11 +48,11 @@ const SelectItem = ({ children, onSelect, disabled }: SelectItemProps) => { py={2} onClick={onSelect} color="text.main" - transition="all .2s" cursor="pointer" gap={2} aria-disabled={disabled} - _hover={{ bg: "gray.800" }} + _hover={{ bg: "pebble.800" }} + transition="all .25s ease-in-out" _disabled={{ opacity: 0.4, pointerEvents: "none" }} > {children} @@ -95,7 +95,7 @@ export const SelectInput = ({ "&[aria-expanded=true]": { "> input": { border: "2px solid", - borderColor: "primary.main", + borderColor: "lilac.main", }, }, "& .form-label": { @@ -132,25 +132,25 @@ export const SelectInput = ({ pl={selectedOption?.icon ? 9 : 4} /> - + div:not(:last-of-type)": { borderBottom: hasDivider && "1px solid", - borderBottomColor: hasDivider && "divider.main", + borderBottomColor: hasDivider && "pebble.700", }, }} > diff --git a/src/lib/components/forms/TagSelection.tsx b/src/lib/components/forms/TagSelection.tsx index 5cab02676..67075a3ed 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", @@ -58,7 +58,7 @@ export const TagSelection = observer( result, setResult, placeholder, - badgeBgColor = "info.dark", + badgeBgColor = "honeydew.darker", helperText, labelBgColor = "background.main", label = "Tags", @@ -147,10 +147,8 @@ export const TagSelection = observer( @@ -188,7 +186,6 @@ export const TagSelection = observer( }} ref={mergeRefs([inputRef, ref])} maxLength={36} - style={{ border: "0" }} {...rest} /> {label} @@ -213,8 +210,8 @@ export const TagSelection = observer( {displayOptions && ( {noResultAndUncreatable ? ( @@ -246,7 +243,8 @@ export const TagSelection = observer( selectOptionFromList(option)} > @@ -272,7 +270,8 @@ 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/JsonEditor.tsx b/src/lib/components/json/JsonEditor.tsx index 00d1ee89a..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" > { 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" - borderRadius="4px" + borderColor="pebble.700" + borderRadius="8px" position="relative" - transition="all .2s" + transition="all .25s ease-in-out" _hover={{ - borderColor: "gray.600", + borderColor: "pebble.600", }} > { top="-10px" w="fit-content" background="background.main" - textColor="gray.500" + color="text.dark" fontSize="12px" position="absolute" > diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx index ec91cd9c0..14efdab72 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"} - borderRadius="4px" + borderColor={!isJsonValid ? "error.main" : "pebble.700"} + borderRadius="8px" position="relative" - transition="all .2s" + transition="all .25s ease-in-out" _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..cf71b636d 100644 --- a/src/lib/components/json/ViewFullMsgButton.tsx +++ b/src/lib/components/json/ViewFullMsgButton.tsx @@ -17,15 +17,15 @@ 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" + borderRadius="0 0 8px 8px" position="absolute" bottom={0} left={0} cursor="pointer" - _hover={{ bg: "gray.800" }} + _hover={{ bg: "pebble.900" }} + transition="all .25s ease-in-out" onClick={onClick} zIndex="docked" > diff --git a/src/lib/components/modal/ActionModal.tsx b/src/lib/components/modal/ActionModal.tsx index f16158522..ff1eb0d38 100644 --- a/src/lib/components/modal/ActionModal.tsx +++ b/src/lib/components/modal/ActionModal.tsx @@ -39,7 +39,7 @@ export interface ActionModalProps { } export function ActionModal({ icon = MdMode, - iconColor = "gray.600", + iconColor = "pebble.600", title, subtitle, trigger, @@ -82,7 +82,7 @@ export function ActionModal({ @@ -90,14 +90,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..3140df321 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,9 +221,9 @@ execute(); {codeSnippets[type].map((item) => ( + } headerContent={ - + Contract Name - + Contract Address - + {contractLocalInfo.name ?? contractLocalInfo.label} { setTagResult(selectedOptions); }} - labelBgColor="gray.800" + labelBgColor="pebble.900" /> diff --git a/src/lib/components/modal/RedoModal.tsx b/src/lib/components/modal/RedoModal.tsx index 047e8cdbe..77d0f1f4a 100644 --- a/src/lib/components/modal/RedoModal.tsx +++ b/src/lib/components/modal/RedoModal.tsx @@ -47,13 +47,13 @@ export const RedoModal = ({ message }: RedoModalProps) => { - + Redo Instantiate - + @@ -82,9 +82,8 @@ export const RedoModal = ({ message }: RedoModalProps) => { > diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx index 2ac47667e..fb0480240 100644 --- a/src/lib/components/modal/UnsupportedTokensModal.tsx +++ b/src/lib/components/modal/UnsupportedTokensModal.tsx @@ -48,7 +48,7 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => { return ( - + Unsupported Assets - + diff --git a/src/lib/components/modal/code/CodeDetailsTemplate.tsx b/src/lib/components/modal/code/CodeDetailsTemplate.tsx index 349c7f11c..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="gray.800" + labelBgColor="pebble.900" maxLength={MAX_CODE_DESCRIPTION_LENGTH} /> diff --git a/src/lib/components/modal/code/RemoveCode.tsx b/src/lib/components/modal/code/RemoveCode.tsx index 83ca1252f..256db8869 100644 --- a/src/lib/components/modal/code/RemoveCode.tsx +++ b/src/lib/components/modal/code/RemoveCode.tsx @@ -28,7 +28,7 @@ export function RemoveCode({ } variant="ghost-gray" - color="gray.600" + color="pebble.600" /> ), }: RemoveCodeModalProps) { diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx index 3d8c18ec9..8a1fddc25 100644 --- a/src/lib/components/modal/code/SaveNewCode.tsx +++ b/src/lib/components/modal/code/SaveNewCode.tsx @@ -182,14 +182,14 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) { value={codeId} onInputChange={setCodeId} label="Code ID" - labelBgColor="gray.800" + labelBgColor="pebble.900" status={codeIdStatus} placeholder="ex. 1234" /> {}} status={uploaderStatus} @@ -200,7 +200,7 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) { value={description} setInputState={setDescription} label="Code Description" - labelBgColor="gray.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/code/SaveOrRemoveCode.tsx b/src/lib/components/modal/code/SaveOrRemoveCode.tsx index f1d2790b7..f33566294 100644 --- a/src/lib/components/modal/code/SaveOrRemoveCode.tsx +++ b/src/lib/components/modal/code/SaveOrRemoveCode.tsx @@ -11,7 +11,7 @@ const StyledIconButton = chakra(IconButton, { display: "flex", alignItems: "center", fontSize: "22px", - borderRadius: "36px", + borderRadius: "full", }, }); @@ -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/contract/AddToOtherList.tsx b/src/lib/components/modal/contract/AddToOtherList.tsx index 57cc999ca..5552c3913 100644 --- a/src/lib/components/modal/contract/AddToOtherList.tsx +++ b/src/lib/components/modal/contract/AddToOtherList.tsx @@ -41,16 +41,16 @@ export const AddToOtherList = observer( headerContent={ - + Contract Name - + Contract Address - + {contractLocalInfo.name ?? contractLocalInfo.label} diff --git a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx index 581ad9437..7507eda81 100644 --- a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx +++ b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx @@ -84,7 +84,7 @@ export const ContractDetailsTemplate = ({ subtitle={subtitle} headerContent={ - + Contract Address ); diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx index d698da465..acb6861a7 100644 --- a/src/lib/components/modal/contract/SaveNewContract.tsx +++ b/src/lib/components/modal/contract/SaveNewContract.tsx @@ -197,7 +197,7 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) { variant="floating" placeholder={`ex. ${exampleContractAddress}`} status={status} - labelBgColor="gray.800" + labelBgColor="pebble.900" /> @@ -215,7 +215,7 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) { setTagsValue={setTagsValue} setContractListsValue={setContractListsValue} errors={errors} - labelBgColor="gray.800" + labelBgColor="pebble.900" /> diff --git a/src/lib/components/modal/list/CreateNewList.tsx b/src/lib/components/modal/list/CreateNewList.tsx index 530fc6d19..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="gray.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 66cbf22f5..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="gray.800" + labelBgColor="pebble.900" status={status} label="List Name" /> diff --git a/src/lib/components/modal/select-contract/ContractListCard.tsx b/src/lib/components/modal/select-contract/ContractListCard.tsx index 363f7674c..c7a770e23 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 f44e9e789..5bed1dd88 100644 --- a/src/lib/components/modal/select-contract/SelectContractAdmin.tsx +++ b/src/lib/components/modal/select-contract/SelectContractAdmin.tsx @@ -60,7 +60,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..f4e0d78b9 100644 --- a/src/lib/layout/Header.tsx +++ b/src/lib/layout/Header.tsx @@ -61,7 +61,7 @@ const Header = () => { Celatone navigate({ pathname: "/" })} @@ -72,10 +72,10 @@ const Header = () => { { flexDirection="column" alignItems="flex-start" _hover={{ - backgroundColor: "hover.dark", + backgroundColor: "pebble.800", }} + transition="all .25s ease-in-out" > @@ -118,7 +119,7 @@ const Header = () => { {chainName === currentChainName && ( - + )} diff --git a/src/lib/layout/Navbar.tsx b/src/lib/layout/Navbar.tsx index 583eb70ea..07d63c3e9 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: "8px" }} 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"} + borderRadius={isCurrentPage(submenu.slug) ? "8px" : "0px"} > {submenu.icon && ( - + )} {submenu.logo && ( { const route = type ? getRoute(type) : null; return ( - - + + {text} {route && ( handleSelectResult(type)} > {value} @@ -119,19 +121,18 @@ const Searchbar = () => { h="36px" onChange={handleSearchChange} placeholder="Search by Contract Address / Code ID" - focusBorderColor="primary.main" - _placeholder={{ color: "#A9A9A9" }} + focusBorderColor="lilac.main" onFocus={() => setDisplayResults(keyword.length > 0)} onKeyDown={handleOnKeyEnter} /> - + {displayResults && ( { overflowX="hidden" bg="background.main" > - +
- + diff --git a/src/lib/pages/all-codes/index.tsx b/src/lib/pages/all-codes/index.tsx index c254d7c86..fdcc3ad49 100644 --- a/src/lib/pages/all-codes/index.tsx +++ b/src/lib/pages/all-codes/index.tsx @@ -29,7 +29,7 @@ const AllCodes = observer(() => { return ( - + All Codes 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..1fc041048 100644 --- a/src/lib/pages/code-details/components/table/contracts/ContractTableRow.tsx +++ b/src/lib/pages/code-details/components/table/contracts/ContractTableRow.tsx @@ -38,7 +38,8 @@ export const ContractTableRow = ({ pathname: `/contract/${contractInfo.contractAddress}`, }) } - _hover={{ bg: "gray.900" }} + _hover={{ bg: "pebble.900" }} + transition="all .25s ease-in-out" cursor="pointer" minW="min-content" > @@ -103,7 +104,7 @@ export const ContractTableRow = ({ } variant="ghost-gray" - color="primary.main" + color="violet.light" /> } /> @@ -114,7 +115,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..9133cac34 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,13 @@ const CodeTableRow = ({ code, isRemovable }: CodesRowProps) => { {type !== "all" && ( - + {tableName} )} diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx index 47794f8c1..855d417d2 100644 --- a/src/lib/pages/contract-details/components/CommandSection.tsx +++ b/src/lib/pages/contract-details/components/CommandSection.tsx @@ -29,7 +29,7 @@ export const CommandSection = () => { type: string ) => { if (isFetching) { - return ; + return ; } if (cmds.length) { return ( @@ -73,7 +73,7 @@ export const CommandSection = () => { { { contractLocalInfo={contractLocalInfo} triggerElement={ : } @@ -80,10 +80,10 @@ export const ContractTop = ({ contractData }: ContractTopProps) => { }} triggerElement={ } /> } @@ -106,7 +106,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => { height={7} /> )} - + {displayName} @@ -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 ba0e171e5..4cb30c73a 100644 --- a/src/lib/pages/contract-details/components/InstantiateInfo.tsx +++ b/src/lib/pages/contract-details/components/InstantiateInfo.tsx @@ -31,6 +31,7 @@ const RenderPortId = ({ portId }: { portId: string }) => { display: "flex", }, }} + transition="all .25s ease-in-out" > {charArray?.map((line, idx) => idx === charArray.length - 1 ? ( @@ -116,7 +117,7 @@ export const InstantiateInfo = ({ )} - + {instantiateInfo && (instantiateInfo.createdHeight !== -1 ? ( diff --git a/src/lib/pages/contract-details/components/JsonInfo.tsx b/src/lib/pages/contract-details/components/JsonInfo.tsx index dcaad98dd..4fb476a44 100644 --- a/src/lib/pages/contract-details/components/JsonInfo.tsx +++ b/src/lib/pages/contract-details/components/JsonInfo.tsx @@ -31,8 +31,8 @@ export const JsonInfo = ({ align="center" p="12px 16px" borderRadius="8px" - _hover={{ backgroundColor: "gray.900" }} - transition="all .3s" + _hover={{ backgroundColor: "pebble.900" }} + 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" /> { triggerElement={ + - + Execute Contract - diff --git a/src/lib/pages/home/components/PastTransaction.tsx b/src/lib/pages/home/components/PastTransaction.tsx index 94871e4e1..c5ee51091 100644 --- a/src/lib/pages/home/components/PastTransaction.tsx +++ b/src/lib/pages/home/components/PastTransaction.tsx @@ -22,7 +22,7 @@ export const PastTransaction = () => { Your past transactions will display here. You also able can view all - Past Transactions + Past Transactions diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx index 4236215b1..be64ab9a0 100644 --- a/src/lib/pages/home/components/QuickMenu.tsx +++ b/src/lib/pages/home/components/QuickMenu.tsx @@ -13,7 +13,7 @@ import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert"; const cardProps = { width: "100%", padding: "16px", - borderRadius: "4px", + borderRadius: "8px", justifyContent: "space-between", height: "100%", }; @@ -47,8 +47,8 @@ const secondaryMenu = [ export const QuickMenu = () => { return ( - - + + Start using Celatone { - + Deploy a new contract - + Upload a new wasm code or instantiate a new contract - + @@ -82,27 +82,23 @@ 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 e966e1e21..50ca7b202 100644 --- a/src/lib/pages/home/components/RecentActivities.tsx +++ b/src/lib/pages/home/components/RecentActivities.tsx @@ -32,9 +32,9 @@ export const RecentActivities = observer(() => { minW="360px" cursor="pointer" p={6} - bg="gray.900" + bg="pebble.900" borderRadius="8px" - _hover={{ bg: "hover.main" }} + _hover={{ bg: "pebble.800" }} transition="all .25s ease-in-out" key={item.type + item.contractAddress + item.timestamp} onClick={() => @@ -47,7 +47,7 @@ export const RecentActivities = observer(() => { @@ -57,9 +57,8 @@ export const RecentActivities = observer(() => { {item.action} @@ -72,15 +71,13 @@ export const RecentActivities = observer(() => { /> - + {dayjs(item.timestamp).toNow(true)} ago{" "} {/* TODO - check address as me */} {item.sender && ( <> - - by - + by { px={12} borderTopWidth={1} borderBottomWidth={1} + borderColor="pebble.700" justifyContent="center" alignItems="center" minH="128px" diff --git a/src/lib/pages/instantiate/completed.tsx b/src/lib/pages/instantiate/completed.tsx index 7bb40421e..b0790ab20 100644 --- a/src/lib/pages/instantiate/completed.tsx +++ b/src/lib/pages/instantiate/completed.tsx @@ -21,7 +21,7 @@ const Completed = ({ txInfo }: CompletedProps) => { return ( - + Instantiate Complete! { gap={6} w="full" borderBottomWidth={1} - borderBottomColor="divider.main" + borderBottomColor="pebble.700" pb={8} my={8} > diff --git a/src/lib/pages/instantiate/component/Footer.tsx b/src/lib/pages/instantiate/component/Footer.tsx index 37085f065..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 ( { diff --git a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx index 46773229b..5f06ce585 100644 --- a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx +++ b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx @@ -80,7 +80,7 @@ export const InstantiateOffChainForm = observer( {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 6463edbbe..947284caf 100644 --- a/src/lib/pages/instantiate/component/code-select/CodeSelect.tsx +++ b/src/lib/pages/instantiate/component/code-select/CodeSelect.tsx @@ -32,17 +32,16 @@ export const CodeSelect = ({ p="16px" gap="16px" w="100%" - bgColor="gray.900" - borderRadius="4px" + bgColor="pebble.900" + borderRadius="8px" borderWidth="1px" - borderColor={isError ? "error.main" : "gray.900"} + borderColor={isError ? "error.main" : "pebble.700"} > {codeId ? ( ) : ( - + Please select code )} diff --git a/src/lib/pages/instantiate/component/code-select/CodeTableReadOnly.tsx b/src/lib/pages/instantiate/component/code-select/CodeTableReadOnly.tsx index 0f0cda4fd..f772db14f 100644 --- a/src/lib/pages/instantiate/component/code-select/CodeTableReadOnly.tsx +++ b/src/lib/pages/instantiate/component/code-select/CodeTableReadOnly.tsx @@ -15,19 +15,30 @@ const CodeTableRow = ({ onCodeSelect, codeDetail }: TableRowProps) => { return ( onCodeSelect(codeDetail.id.toString())} templateColumns={TEMPLATE_COLUMNS} > {codeDetail.id} - + {codeDetail?.description ?? "No Description"} - {codeDetail.contracts} + 0 ? "text.main" : "text.disabled"} + > + {codeDetail.contracts} + 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/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/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/not-found/index.tsx b/src/lib/pages/not-found/index.tsx index 2a266c502..dc622d783 100644 --- a/src/lib/pages/not-found/index.tsx +++ b/src/lib/pages/not-found/index.tsx @@ -9,7 +9,7 @@ const NotFoundPage = () => { { 404 - + This page is not found @@ -128,8 +126,8 @@ export const FilterSelection = observer( {displayActionValue(option)} @@ -152,7 +150,6 @@ export const FilterSelection = observer( }} ref={mergeRefs([inputRef, ref])} maxLength={36} - style={{ border: "0" }} {...rest} /> {label} @@ -177,8 +174,8 @@ export const FilterSelection = observer( {displayOptions && ( selectOption(option)} > diff --git a/src/lib/pages/past-txs/components/PastTxRow.tsx b/src/lib/pages/past-txs/components/PastTxRow.tsx index f6e9e29eb..7f76d732a 100644 --- a/src/lib/pages/past-txs/components/PastTxRow.tsx +++ b/src/lib/pages/past-txs/components/PastTxRow.tsx @@ -40,7 +40,8 @@ export const PastTxRow = ({ @@ -61,7 +62,7 @@ export const PastTxRow = ({ {transaction.isIbc && ( - + IBC )} @@ -85,13 +86,14 @@ export const PastTxRow = ({ )} {isAccordion && ( - diff --git a/src/lib/pages/public-project/components/ContractsTable.tsx b/src/lib/pages/public-project/components/ContractsTable.tsx index 5009b4440..deaf88ed1 100644 --- a/src/lib/pages/public-project/components/ContractsTable.tsx +++ b/src/lib/pages/public-project/components/ContractsTable.tsx @@ -67,7 +67,7 @@ export const ContractsTable = ({ sx={{ "& th:first-of-type": { pl: "48px" }, "> th": { - borderColor: "divider.main", + borderColor: "pebble.700", textTransform: "capitalize", }, }} @@ -83,12 +83,12 @@ export const ContractsTable = ({ {filteredContracts?.map((item) => ( td": { borderColor: "divider.main" }, + "> td": { borderColor: "pebble.700" }, }} onClick={() => navigate({ pathname: `/contract/${item.contractAddress}` }) @@ -112,11 +112,11 @@ export const ContractsTable = ({ @@ -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 cac2aace7..bfc858813 100644 --- a/src/lib/pages/public-project/components/DetailHeader.tsx +++ b/src/lib/pages/public-project/components/DetailHeader.tsx @@ -25,9 +25,12 @@ export const DetailHeader = ({ details, slug }: DetailProps) => { } + separator={} > - + Public Projects @@ -60,12 +63,7 @@ export const DetailHeader = ({ details, slug }: DetailProps) => { width={8} height={8} /> - + {details?.name} diff --git a/src/lib/pages/public-project/components/PublicProjectCard.tsx b/src/lib/pages/public-project/components/PublicProjectCard.tsx index b5744ac3e..98febebd9 100644 --- a/src/lib/pages/public-project/components/PublicProjectCard.tsx +++ b/src/lib/pages/public-project/components/PublicProjectCard.tsx @@ -32,10 +32,10 @@ export const PublicProjectCard = observer( pt={4} pb={2} alignItems="center" - bg="gray.900" - _hover={{ bg: "gray.800" }} - transition="all 0.2s" - borderRadius={4} + bg="pebble.800" + _hover={{ bg: "pebble.700" }} + transition="all .25s ease-in-out" + borderRadius="8px" gap={4} height="full" onClick={handleOnClick} @@ -54,7 +54,7 @@ export const PublicProjectCard = observer( w="full" alignItems="flex-start" > - + {item.name} @@ -77,7 +77,7 @@ export const PublicProjectCard = observer( } variant="body3" - color="text.primary" + color="text.dark" pt={3} > {clampedText} diff --git a/src/lib/pages/public-project/components/SocialMedia.tsx b/src/lib/pages/public-project/components/SocialMedia.tsx index 7ad8e7ef3..f68510bfd 100644 --- a/src/lib/pages/public-project/components/SocialMedia.tsx +++ b/src/lib/pages/public-project/components/SocialMedia.tsx @@ -1,4 +1,4 @@ -import { Flex, Link, Icon } from "@chakra-ui/react"; +import { Flex } from "@chakra-ui/react"; import { FaTwitter, FaGithub, @@ -8,6 +8,7 @@ import { } from "react-icons/fa"; import { MdLanguage } from "react-icons/md"; +import { IconButton } from "lib/components/button/IconButton"; import type { Option, Detail } from "lib/types"; export const renderSocial = (name: string) => { @@ -31,53 +32,22 @@ export const SocialMedia = ({ details }: SocialMediaProps) => { return ( e.stopPropagation()} + minHeight="32px" > {details.website && ( - // todos: create ExternalLink component later - - - - )} - {details.github && ( - // todos: create ExternalLink component later - - - + )} + {details.github && } {details.socials.length && details.socials.map( (social) => social.url !== "" && ( - // todos: create ExternalLink component later - - - + href={social.url} + icon={renderSocial(social.name)} + /> ) )} diff --git a/src/lib/pages/public-project/index.tsx b/src/lib/pages/public-project/index.tsx index fc08cb1a1..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/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx index a1ae687dd..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(() => { + - + Query Contract - diff --git a/src/lib/styles/theme/colors.ts b/src/lib/styles/theme/colors.ts index 4598ece94..a5334f829 100644 --- a/src/lib/styles/theme/colors.ts +++ b/src/lib/styles/theme/colors.ts @@ -1,80 +1,83 @@ -import type { DeepPartial, Theme } from "@chakra-ui/react"; - type BasicColor = Record< string, Partial<{ main: string; light: string; dark: string; + lighter: string; + darker: string; disabled: string; - button: string; + background: string; + overlay: string; + 100: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; }> >; /** extend additional color here */ const extendedColors: BasicColor = { - primary: { - main: "#f48fb1", - light: "#f6a5c0", - dark: "#aa647b", - }, error: { - main: "#f44336", - light: "#e57373", - dark: "#d32f2f", + main: "#FF666E", + light: "#FF8086", + dark: "#b43e44", }, warning: { - main: "#ffa726", - light: "#ffb74d", - dark: "#f57c00", - }, - info: { - main: "#29b6f6", - light: "#4fc3f7", - dark: "#0288d1", + main: "#FFBB33", + light: "#FFCC66", + dark: "#CC8800", }, success: { - main: "#66bb6a", - light: "#81c784", - dark: "#388e3c", + main: "#42BEA6", + light: "#67CBB7", + dark: "#207966", }, background: { - main: "#121212", + main: "#111117", + overlay: "rgba(17, 17, 23, 0.7)", }, text: { - main: "#fff", - dark: "rgba(255,255,255,0.7)", - disabled: "rgba(255,255,255,0.5)", + main: "#F7F2FE", + dark: "#ADADC2", + disabled: "#8A8AA5", }, - divider: { - main: "rgba(255,255,255,0.12)", + violet: { + main: "#5942F3", + light: "#9793F3", + lighter: "#DCDBFB", + dark: "#3E38B0", + darker: "#292676", + background: "rgba(41, 38, 118,0.7)", }, - overlay: { - main: "rgba(23,23,23,0.6)", + honeydew: { + main: "#C6E141", + light: "#DDED8D", + lighter: "#E8F3B3", + dark: "#95A931", + darker: "#637121", + background: "rgba(198, 225, 65, 0.2)", }, - hover: { - main: "rgba(255,255,255,0.20)", - dark: "rgba(255,255,255,0.10)", + lilac: { + main: "#D8BEFC", + dark: "#A28FBD", + darker: "#6C5F7E", + background: "#36303F", }, -}; - -/** override chakra colors here */ -const overridenChakraColors: DeepPartial = { - gray: { - 50: "#fafafa", - 100: "f5f5f5", - 200: "#eeeeee", - 300: "#e0e0e0", - 400: "#bdbdbd", - 500: "#9e9e9e", - 600: "#757575", - 700: "#616161", - 800: "#2E2E2E", - 900: "#212121", + pebble: { + 100: "#F7F2FE", + 400: "#ADADC2", + 500: "#8A8AA5", + 600: "#68688A", + 700: "#343445", + 800: "#272734", + 900: "#1A1A22", }, }; export const colors = { - ...overridenChakraColors, ...extendedColors, }; diff --git a/src/lib/styles/theme/components/alert.ts b/src/lib/styles/theme/components/alert.ts index 73841c30b..39a1bf90a 100644 --- a/src/lib/styles/theme/components/alert.ts +++ b/src/lib/styles/theme/components/alert.ts @@ -6,23 +6,22 @@ export const Alert: ComponentStyleConfig = { color: "white", }, container: { - bg: "gray.800", + bg: "pebble.800", }, }, variants: { - info: { + honeydew: { title: { - color: "info.main", fontSize: "16px", fontWeight: 600, letterSpacing: "0.4px", }, container: { - bg: "rgba(41,182,246,0.2)", + bg: "honeydew.background", border: "1px solid", - borderColor: "info.main", - borderRadius: "4px", - color: "info.main", + borderColor: "honeydew.main", + borderRadius: "8px", + color: "honeydew.main", }, description: { fontSize: "12px", diff --git a/src/lib/styles/theme/components/badge.ts b/src/lib/styles/theme/components/badge.ts index 301514c8d..31296f630 100644 --- a/src/lib/styles/theme/components/badge.ts +++ b/src/lib/styles/theme/components/badge.ts @@ -2,18 +2,18 @@ import type { ComponentStyleConfig } from "@chakra-ui/react"; export const Badge: ComponentStyleConfig = { baseStyle: { - p: "2px 8px", + p: "4px 8px ", borderRadius: "16px", fontWeight: "400", fontSize: "12px", - lineHeight: "143%", + lineHeight: "100%", letterSpacing: "0.17px", }, variants: { - primary: { background: "primary.dark", color: "rgba(255, 255, 255, 1)" }, + violet: { background: "violet.darker", color: "text.main" }, gray: { - background: "rgba(255, 255, 255, 0.12)", - color: "rgba(255, 255, 255, 0.5)", + background: "pebble.700", + color: "text.dark", }, }, }; diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts index 2c86ed2e4..88b7299be 100644 --- a/src/lib/styles/theme/components/button.ts +++ b/src/lib/styles/theme/components/button.ts @@ -2,10 +2,11 @@ import type { ComponentStyleConfig } from "@chakra-ui/react"; type Dict = Record; -const primaryMain = "primary.main"; -const white12 = "rgba(255, 255, 255, 0.12)"; -const white50 = "rgba(255, 255, 255, 0.50)"; -const borderWhite12 = "1px solid rgba(255, 255, 255, 0.12)"; +const pebble600 = "pebble.600"; +const pebble700 = "pebble.700"; +const violetLight = "violet.light"; +const honeydewBg = "honeydew.background"; +const borderDefualt = "1px solid"; const generateStyle = ({ basic, @@ -39,7 +40,7 @@ export const Button: ComponentStyleConfig = { flexDir: "row", justifyContent: "center", alignItems: "center", - borderRadius: "4px", + borderRadius: "8px", _active: { transform: "scale(0.98)", }, @@ -63,84 +64,98 @@ export const Button: ComponentStyleConfig = { }, variants: { primary: generateStyle({ - basic: { background: primaryMain, color: "rgba(0, 0, 0, 0.87)" }, + basic: { background: "violet.main", color: "text.main" }, disabled: { - background: white12, - color: white50, + background: "violet.background", + color: pebble600, }, - hoverBg: "primary.dark", - activeBg: "primary.light", + hoverBg: "violet.dark", + activeBg: violetLight, }), error: generateStyle({ basic: { background: "error.main", color: "black" }, disabled: { - background: white12, - color: white50, + background: "error.dark", + color: "black", }, hoverBg: "error.dark", activeBg: "error.light", }), "outline-primary": generateStyle({ basic: { - border: "1px solid", - borderColor: primaryMain, - color: primaryMain, + border: borderDefualt, + borderColor: violetLight, + color: violetLight, }, disabled: { - border: borderWhite12, - color: white50, + border: borderDefualt, + borderColor: pebble700, + color: pebble600, }, - hoverBg: "rgba(244, 143, 177, 0.08)", + hoverBg: "violet.background", activeBg: "transparent", }), "outline-gray": generateStyle({ basic: { - border: "1px solid rgba(255, 255, 255, 0.7)", - color: "rgba(255, 255, 255, 0.7)", + border: borderDefualt, + borderColor: pebble600, + color: "pebble.400", }, disabled: { - border: borderWhite12, - color: white50, + border: borderDefualt, + borderColor: pebble700, + color: pebble600, }, - hoverBg: white12, + hoverBg: pebble700, activeBg: "transparent", }), "outline-info": generateStyle({ basic: { - border: "1px solid rgba(2, 136, 209, 0.5)", - color: "info.main", + border: borderDefualt, + borderColor: honeydewBg, + color: "honeydew.main", }, disabled: { - border: borderWhite12, - color: white50, + border: "honeydew.darker", + color: "honeydew.darker", }, - hoverBg: "rgba(41, 182, 246, 0.12)", + hoverBg: honeydewBg, activeBg: "transparent", }), "ghost-primary": generateStyle({ basic: { - color: primaryMain, + color: "lilac.main", }, disabled: { - color: white50, + color: "lilac.background", }, - hoverBg: "rgba(87, 56, 66, 0.3)", + hoverBg: "lilac.background", + activeBg: "transparent", + }), + "ghost-info": generateStyle({ + basic: { + color: "honeydew.main", + }, + disabled: { + color: honeydewBg, + }, + hoverBg: honeydewBg, activeBg: "transparent", }), "ghost-gray": generateStyle({ basic: { - color: "rgba(255, 255, 255, 0.7)", + color: "pebble.400", }, disabled: { - color: white50, + color: "pebble.500", }, - hoverBg: white12, + hoverBg: pebble700, activeBg: "transparent", }), unstyled: { boxShadow: "none", bgColor: "inherit", - border: "0px solid #aa647b", + border: "0px solid transparent", ".chakra-stack": { p: "0", }, diff --git a/src/lib/styles/theme/components/form.ts b/src/lib/styles/theme/components/form.ts index d3809686a..e73b0b51a 100644 --- a/src/lib/styles/theme/components/form.ts +++ b/src/lib/styles/theme/components/form.ts @@ -27,7 +27,7 @@ export const Form: ComponentStyleConfig = { color: "text.disabled", }, _active: { - color: "primary.main", + color: "lilac.main", }, "&.md-label, &.textarea-label": { transform: "scale(0.75) translateY(-20px)", 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/input.ts b/src/lib/styles/theme/components/input.ts index 04c73190d..e997eab68 100644 --- a/src/lib/styles/theme/components/input.ts +++ b/src/lib/styles/theme/components/input.ts @@ -5,18 +5,19 @@ export const Input: ComponentStyleConfig = { "custom-outline": { field: { color: "text.main", - border: "1px solid rgba(255,255,255,0.12)", + border: "1px solid", + borderColor: "pebble.700", background: "none", - borderRadius: "4px", + borderRadius: "8px", _hover: { - borderColor: "gray.600", + borderColor: "pebble.600", }, _focusWithin: { - borderColor: "primary.main", + borderColor: "lilac.main", borderWidth: "2px", }, _active: { - borderColor: "primary.main", + borderColor: "lilac.main", borderWidth: "2px", }, _disabled: { diff --git a/src/lib/styles/theme/components/link.ts b/src/lib/styles/theme/components/link.ts index 09baa5f32..b3520858a 100644 --- a/src/lib/styles/theme/components/link.ts +++ b/src/lib/styles/theme/components/link.ts @@ -2,7 +2,7 @@ import type { ComponentStyleConfig } from "@chakra-ui/react"; export const Link: ComponentStyleConfig = { baseStyle: { - color: "primary.main", + color: "lilac.main", fontSize: "14px", "&.ellipsis": { whiteSpace: "nowrap", diff --git a/src/lib/styles/theme/components/menu.ts b/src/lib/styles/theme/components/menu.ts index da663366e..a9fae5b21 100644 --- a/src/lib/styles/theme/components/menu.ts +++ b/src/lib/styles/theme/components/menu.ts @@ -7,21 +7,21 @@ const { definePartsStyle, defineMultiStyleConfig } = const baseStyle = definePartsStyle({ list: { py: "2", - borderRadius: "base", + borderRadius: "8px", border: "none", - bg: "gray.900", + bg: "pebble.900", }, item: { - color: "gray.200", + color: "text.main", _hover: { - bg: "gray.800", + bg: "pebble.800", }, _focus: { - bg: "gray.800", + bg: "pebble.800", }, }, divider: { - borderColor: "rgba(255,255,255,0.12)", + borderColor: "pebble.700", }, }); diff --git a/src/lib/styles/theme/components/modal.ts b/src/lib/styles/theme/components/modal.ts index 60d21b303..fc73a935f 100644 --- a/src/lib/styles/theme/components/modal.ts +++ b/src/lib/styles/theme/components/modal.ts @@ -18,11 +18,11 @@ const baseStyle = definePartsStyle({ py: "16px", }, overlay: { - bg: "overlay.main", + bg: "background.overlay", }, dialog: { - borderRadius: "md", - bg: `gray.800`, + borderRadius: "8px", + bg: "pebble.900", }, closeButton: { top: "14px", diff --git a/src/lib/styles/theme/components/radio.ts b/src/lib/styles/theme/components/radio.ts index 51f902a9c..0290ddd77 100644 --- a/src/lib/styles/theme/components/radio.ts +++ b/src/lib/styles/theme/components/radio.ts @@ -11,9 +11,9 @@ export const Radio: ComponentStyleConfig = { control: { borderColor: "text.dark", _checked: { - borderColor: "primary.main", + borderColor: "violet.light", background: "transparent", - color: "primary.main", + color: "violet.light", _before: { w: "10px", h: "10px", diff --git a/src/lib/styles/theme/components/select.ts b/src/lib/styles/theme/components/select.ts index ceae28661..6df5f7b41 100644 --- a/src/lib/styles/theme/components/select.ts +++ b/src/lib/styles/theme/components/select.ts @@ -5,16 +5,20 @@ export const Select: ComponentStyleConfig = { "custom-select": { field: { color: "text.main", - borderRadius: "4px", + borderRadius: "8px", border: "1px solid", - borderColor: "divider.main", + borderColor: "pebble.700", fontSize: "16px", letterSpacing: "0.15px", height: "56px", bg: "background.main", _focus: { borderWidth: "2px", - borderColor: "primary.main", + borderColor: "lilac.main", + }, + _active: { + borderWidth: "2px", + borderColor: "lilac.main", }, }, icon: { 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", diff --git a/src/lib/styles/theme/components/textarea.ts b/src/lib/styles/theme/components/textarea.ts index 7d3989060..0df9ec576 100644 --- a/src/lib/styles/theme/components/textarea.ts +++ b/src/lib/styles/theme/components/textarea.ts @@ -4,20 +4,21 @@ export const Textarea: ComponentStyleConfig = { variants: { "custom-outline": { color: "text.main", - border: "1px solid rgba(255,255,255,0.12)", + border: "1px solid", + borderColor: "pebble.700", background: "none", - borderRadius: "4px", + borderRadius: "8px", p: "16px 12px", height: "112px", _hover: { - borderColor: "gray.600", + borderColor: "pebble.700", }, _focusWithin: { - borderColor: "primary.main", + borderColor: "lilac.main", borderWidth: "2px", }, _active: { - borderColor: "primary.main", + borderColor: "lilac.main", borderWidth: "2px", }, _disabled: {