Fix/css bugs

CHANGELOG.md

@@ -131,6 +131,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#175](https://github.com/alleslabs/celatone-frontend/pull/175) Fix css related issue and tag selection input
 - [#165](https://github.com/alleslabs/celatone-frontend/pull/165) Fix messages type
 - [#172](https://github.com/alleslabs/celatone-frontend/pull/172) Fix infinite loop dep, wrong fallback validation
 - [#157](https://github.com/alleslabs/celatone-frontend/pull/157) Fix chain path bug when mixed up with query params

src/lib/components/ExplorerLink.tsx

@@ -92,6 +92,8 @@ const LinkRender = ({
     <Text
       variant="body2"
       color="lilac.main"
+      transition="all .25s ease-in-out"
+      _hover={{ color: "lilac.light" }}
       className={isEllipsis ? "ellipsis" : undefined}
       maxW={maxWidth}
       pointerEvents={hrefLink ? "auto" : "none"}
@@ -145,7 +147,7 @@ export const ExplorerLink = ({
       _hover={{
         ...(!readOnly && {
           textDecoration: "underline",
-          textDecorationColor: "lilac.main",
+          textDecorationColor: "lilac.light",
         }),
         "& .copy-button": {
           display: "flex",

src/lib/components/Loading.tsx

@@ -7,6 +7,7 @@ export const Loading = () => {
       borderColor="pebble.700"
       width="full"
       py={12}
+      my={12}
       flexDirection="column"
       alignItems="center"
     >

src/lib/components/dropzone/index.tsx

@@ -49,6 +49,8 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
         <Text
           variant="body1"
           color="lilac.main"
+          transition="all .25s ease-in-out"
+          _hover={{ color: "lilac.light" }}
           style={{ textDecoration: "underline" }}
         >
           Click to upload

src/lib/components/forms/TagSelection.tsx

@@ -150,6 +150,8 @@ export const TagSelection = observer(
               background="none"
               borderRadius="8px"
               maxW="100%"
+              border="1px solid"
+              borderColor="pebble.700"
               overflowX="scroll"
             >
               {result.length > 0 && (
@@ -187,6 +189,7 @@ export const TagSelection = observer(
                 ref={mergeRefs([inputRef, ref])}
                 maxLength={36}
                 {...rest}
+                style={{ border: 0, maxHeight: "54px" }}
               />
               <FormLabel
                 position="absolute"

src/lib/components/json/JsonEditor.tsx

@@ -62,7 +62,6 @@ const JsonEditor = ({
       height={boxHeight}
       resize={disableResizing ? "unset" : "vertical"}
       overflow="auto"
-      transition="all .25s ease-in-out"
     >
       <AceEditor
         ref={editorRef}

src/lib/components/modal/UnsupportedTokensModal.tsx

@@ -48,9 +48,10 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
   return (
     <Flex
       borderRadius="8px"
-      bg="pebble.900"
+      bg="pebble.800"
       justify="space-between"
-      p={4}
+      px={4}
+      py={3}
       role="group"
     >
       <Flex direction="column" maxW="70%">
@@ -102,15 +103,15 @@ export const UnsupportedTokensModal = ({
           </ModalHeader>
 
           <ModalCloseButton color="pebble.600" />
-          <ModalBody maxH="400px" overflow="overlay">
+          <ModalBody maxH="400px" overflow="overlay" pb={6}>
             <Flex direction="column" gap={5}>
               <Flex direction="row" gap={4}>
                 <Text variant="body2" fontWeight="700">
                   Contract Address
                 </Text>
                 <ExplorerLink value={contractAddress} type="contract_address" />
               </Flex>
-              <Flex gap={2} direction="column">
+              <Flex gap={3} direction="column">
                 {unsupportedAssets.map((asset) => (
                   <UnsupportedToken
                     balance={asset.balance}

src/lib/components/modal/code/SaveNewCode.tsx

@@ -184,6 +184,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
           placeholder="ex. 1234"
         />
         <TextInput
+          variant="floating"
           value={uploader}
           label="Uploader"
           labelBgColor="pebble.900"

src/lib/components/modal/select-contract/AllContractLists.tsx

@@ -37,7 +37,7 @@ export const AllContractLists = ({
         variant="floating"
         value={searchKeyword}
         setInputState={setSearchKeyword}
-        label="Search for your lists"
+        placeholder="Search for your lists"
         labelBgColor={formLabelBgColor}
         size="md"
         mb={isReadOnly ? 4 : 12}

src/lib/components/modal/tx/ButtonSection.tsx

@@ -47,7 +47,7 @@ export const ButtonSection = ({
               onClose?.();
             }}
           >
-            Go to Code List
+            See my codes list
           </Button>
           <Button
             variant="primary"

src/lib/layout/Footer.tsx

@@ -97,7 +97,12 @@ const Footer = () => {
               <Text variant="body3" color="text.dark">
                 Made by
               </Text>
-              <Text variant="body3" color="lilac.main">
+              <Text
+                variant="body3"
+                color="lilac.main"
+                transition="all .25s ease-in-out"
+                _hover={{ color: "lilac.light" }}
+              >
                 Alles Labs
               </Text>
             </Flex>

src/lib/layout/Header.tsx

@@ -59,14 +59,18 @@ const Header = () => {
       mb={1}
       gap="48px"
     >
-      <Image
-        src="/celatone-logo.svg"
-        alt="Celatone"
-        width="152px"
-        mr="36px"
-        _hover={{ cursor: "pointer" }}
-        onClick={() => navigate({ pathname: "/" })}
-      />
+      <a href="/" target="_blank" rel="noopener noreferrer">
+        <Image
+          src="https://assets.alleslabs.dev/branding/logo/logo.svg"
+          alt="Celatone"
+          minWidth="152px"
+          width="152px"
+          maxWidth="152px"
+          mr="36px"
+          transition="all 0.25s ease-in-out"
+          _hover={{ cursor: "pointer", opacity: 0.85 }}
+        />
+      </a>
       <Searchbar />
       <Flex gap={2}>
         <Menu>

src/lib/layout/Navbar.tsx

@@ -67,7 +67,7 @@ const Navbar = observer(() => {
       category: "Quick Actions",
       submenu: [
         {
-          name: "Deploy contract",
+          name: "Deploy Contract",
           slug: "/deploy",
           icon: MdOutlineAdd,
         },
@@ -118,7 +118,7 @@ const Navbar = observer(() => {
             icon: getListIcon(list.name),
           })),
         {
-          name: "View All",
+          name: "View All Lists",
           slug: "/contract-list",
           icon: MdMoreHoriz,
         },
@@ -133,7 +133,7 @@ const Navbar = observer(() => {
           logo: list.logo,
         })),
         {
-          name: "View All",
+          name: "View All Projects",
           slug: "/public-project",
           icon: MdMoreHoriz,
         },
@@ -197,6 +197,7 @@ const Navbar = observer(() => {
                   p={2}
                   cursor="pointer"
                   _hover={{ bg: "pebble.800", borderRadius: "8px" }}
+                  my="1px"
                   transition="all .25s ease-in-out"
                   alignItems="center"
                   bgColor={

src/lib/pages/codes/components/CodesTable.tsx

@@ -58,7 +58,7 @@ const StateContainer = ({ children }: { children: ReactNode }) => (
     borderBottomWidth={1}
     minH="128px"
     justifyContent="center"
-    gap={2}
+    py={8}
   >
     {children}
   </VStack>

src/lib/pages/codes/index.tsx

@@ -46,17 +46,22 @@ const Codes = observer(() => {
     <Box>
       <Box pt="48px" px="48px">
         <Heading as="h1" size="lg" color="white" mb={4}>
-          Code Lists
+          My Codes
         </Heading>
       </Box>
       <Tabs>
-        <Box px="48px">
-          <TabList border="none" mb="32px">
+        <Box py={4}>
+          <TabList
+            mb="32px"
+            borderBottom="1px"
+            px={12}
+            borderColor="pebble.800"
+          >
             <CustomTab count={allCodesCount}>All Codes</CustomTab>
             <CustomTab count={storedCodesCount}>My Stored Codes</CustomTab>
             <CustomTab count={savedCodesCount}>My Saved Codes </CustomTab>
           </TabList>
-          <Flex gap={2}>
+          <Flex gap={2} px="48px">
             <InputWithIcon
               placeholder="Search with code ID or code name"
               value={keyword}
@@ -74,8 +79,8 @@ const Codes = observer(() => {
             />
           </Flex>
         </Box>
-        <TabPanels mt="48px">
-          <TabPanel p="0px">
+        <TabPanels>
+          <TabPanel p={0}>
             <CodesTable
               type="stored"
               tableName="My Stored Codes"

src/lib/pages/contract-details/components/JsonInfo.tsx

@@ -31,7 +31,8 @@ export const JsonInfo = ({
         align="center"
         p="12px 16px"
         borderRadius="8px"
-        _hover={{ backgroundColor: "pebble.900" }}
+        background="pebble.900"
+        _hover={{ backgroundColor: "pebble.800" }}
         transition="all .25s ease-in-out"
         cursor="pointer"
         onClick={() => setExpand((prev) => !prev)}

src/lib/pages/contract-details/index.tsx

@@ -74,7 +74,7 @@ const ContractDetailsBody = observer(
                   contractData.instantiateInfo?.raw.contract_info ?? {}
                 )
               )}
-              jsonAreaHeight="180px"
+              jsonAreaHeight="230px"
             />
             <JsonInfo
               header="Instantiate Message"

src/lib/pages/contract-list/components/ContractListTable.tsx

@@ -220,7 +220,6 @@ export const ContractListTable = ({
                             contractLocalInfo={item}
                             contractRemovalInfo={contractRemovalInfo}
                             menuItemProps={{
-                              fontSize: "16px",
                               icon: (
                                 <StyledIcon as={MdDelete} color="error.light" />
                               ),

src/lib/pages/home/components/PastTransaction.tsx

@@ -22,7 +22,13 @@ export const PastTransaction = () => {
           Your past transactions will display here. You also able can view all
         </Text>
         <AppLink href="/past-txs">
-          <Text color="lilac.main">Past Transactions</Text>
+          <Text
+            color="lilac.main"
+            _hover={{ color: "lilac.light" }}
+            transition="all .25s ease-in-out"
+          >
+            Past Transactions
+          </Text>
         </AppLink>
       </Flex>
     </Box>

src/lib/pages/home/components/RecentActivities.tsx

@@ -47,10 +47,10 @@ export const RecentActivities = observer(() => {
               <Flex alignItems="center" gap={1}>
                 <Icon
                   as={item.type === "query" ? MdSearch : MdInput}
-                  color="pebble.600"
+                  color="honeydew.main"
                   boxSize={4}
                 />
-                <Text variant="body2" color="text.dark">
+                <Text variant="body2" color="honeydew.main">
                   {item.type === "query" ? "Query" : "Execute"}
                 </Text>
               </Flex>

src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx

@@ -77,7 +77,7 @@ export const InstantiateOffChainForm = observer(
     };
 
     return (
-      <Flex direction="column" gap={8}>
+      <Flex direction="column" gap={8} width="full">
         {title && subtitle && (
           <Flex direction="column" gap={1}>
             <Heading as="h6" variant="h6">

src/lib/pages/instantiate/instantiate.tsx

@@ -296,7 +296,8 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             error={validateAdmin(watchAdminAddress)}
             helperAction={
               <Text
-                color="lilac.main"
+                color="honeydew.main"
+                fontWeight="600"
                 variant="body3"
                 cursor="pointer"
                 onClick={() => setValue("adminAddress", address)}

src/lib/pages/past-txs/components/FilterSelection.tsx

@@ -112,6 +112,8 @@ export const FilterSelection = observer(
               color="text.main"
               background="none"
               borderRadius="8px"
+              border="1px solid"
+              borderColor="pebble.700"
               maxW="100%"
               overflowX="scroll"
             >
@@ -150,6 +152,7 @@ export const FilterSelection = observer(
                 }}
                 ref={mergeRefs([inputRef, ref])}
                 maxLength={36}
+                style={{ border: 0, maxHeight: "54px" }}
                 {...rest}
               />
               <FormLabel

src/lib/pages/public-project/components/AllProject.tsx

@@ -62,8 +62,8 @@ export const AllProject = observer(() => {
         variant="floating"
         value={searchKeyword}
         setInputState={setSearchKeyword}
-        label="Search for existing public projects"
-        labelBgColor="pebble.900"
+        labelBgColor="background"
+        placeholder="Search for existing public projects by project name"
         size="md"
         mb={12}
       />

src/lib/pages/public-project/components/CodesTable.tsx

@@ -47,7 +47,7 @@ export const CodesTable = ({
             variant="floating"
             value={searchKeyword}
             setInputState={setSearchKeyword}
-            label="Search with code ID or code name"
+            placeholder="Search with code ID or code name"
             size="md"
             mb={6}
           />

src/lib/pages/public-project/components/ContractsTable.tsx

@@ -49,7 +49,7 @@ export const ContractsTable = ({
             variant="floating"
             value={searchKeyword}
             setInputState={setSearchKeyword}
-            label="Search with contract address or contract description"
+            placeholder="Search with contract address, name, or description"
             size="md"
             mb={6}
           />

src/lib/styles/theme/colors.ts

@@ -63,6 +63,7 @@ const extendedColors: BasicColor = {
   },
   lilac: {
     main: "#D8BEFC",
+    light: "#E8D8FD",
     dark: "#A28FBD",
     darker: "#6C5F7E",
     background: "#36303F",

src/lib/styles/theme/components/input.ts

@@ -27,7 +27,7 @@ export const Input: ComponentStyleConfig = {
         _invalid: {
           borderColor: "error.main",
         },
-        _placeholder: { color: "text.dark" },
+        _placeholder: { color: "pebble.600" },
       },
     },
   },

src/lib/styles/theme/components/textarea.ts

@@ -28,7 +28,7 @@ export const Textarea: ComponentStyleConfig = {
       _invalid: {
         borderColor: "error.main",
       },
-      _placeholder: { color: "text.dark" },
+      _placeholder: { color: "pebble.600" },
     },
   },
   defaultProps: {