Merge pull request #509 from alleslabs/fix/bug-bash-minor

Fix/bug bash minor
alleslabs · Aug 29, 2023 · b869658 · b869658
2 parents 21ec814 + 152c350
commit b869658
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -91,6 +91,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#499](https://github.com/alleslabs/celatone-frontend/pull/499) Fix responsive for icns and add cl pool icon
 - [#506](https://github.com/alleslabs/celatone-frontend/pull/506) Fix simulation bugs
 - [#504](https://github.com/alleslabs/celatone-frontend/pull/504) Fix response Json schema UI
 - [#503](https://github.com/alleslabs/celatone-frontend/pull/503) Fix assets `view more` button in account detail and fix txs row

diff --git a/src/lib/pages/account-details/components/AccountHeader.tsx b/src/lib/pages/account-details/components/AccountHeader.tsx
@@ -22,7 +22,7 @@ export const AccountHeader = ({
   const displayName = icnsName?.primary_name || "Account Details";
 
   return (
-    <Flex direction="column" gap={2}>
+    <Flex direction="column" gap={1}>
       <Flex gap={1} minH="36px" align="center">
         {publicDetail?.logo || icnsName?.primary_name ? (
           <Image
@@ -57,14 +57,19 @@ export const AccountHeader = ({
         />
       </Flex>
       {icnsName?.primary_name && (
-        <Flex gap={2} align="center">
+        <Flex
+          gap={{ base: 0, md: 2 }}
+          align={{ base: "flex-start", md: "center" }}
+          direction={{ base: "column", md: "row" }}
+        >
           <Text fontWeight={500} color="text.dark" variant="body2">
             Registered ICNS names:
           </Text>
-          <Flex gap={1} align="center">
+          <Flex align="center">
             {icnsName.names.map((name) => (
               <Flex
                 key={name}
+                display="inline-flex"
                 align="center"
                 direction="row"
                 _after={{
@@ -77,6 +82,7 @@ export const AccountHeader = ({
                   },
                 }}
                 gap={1}
+                mr={1}
               >
                 {name === icnsName.primary_name && <PrimaryNameMark />}
                 <CopyLink value={name} type="icns_names" withoutIcon />

diff --git a/src/lib/pages/pools/components/FilterByPoolType.tsx b/src/lib/pages/pools/components/FilterByPoolType.tsx
@@ -1,6 +1,11 @@
 import { Grid } from "@chakra-ui/react";
 
-import { BALANCER_ICON, COSMWASM_ICON, STABLESWAP_ICON } from "../constant";
+import {
+  BALANCER_ICON,
+  COSMWASM_ICON,
+  STABLESWAP_ICON,
+  CLP_ICON,
+} from "../constant";
 import { SelectInput } from "lib/components/forms";
 import { AmpEvent, AmpTrackUseFilter } from "lib/services/amplitude";
 import type { PoolTypeFilter } from "lib/types";
@@ -40,7 +45,7 @@ const options: PoolTypeOption[] = [
   {
     label: "Concentrated Liquidity Pools",
     value: PoolType.CL,
-    image: BALANCER_ICON,
+    image: CLP_ICON,
     disabled: false,
   },
   {

diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -5,6 +5,7 @@ import {
   COSMWASM_ICON,
   STABLESWAP_ICON,
   SUPERFLUID_ICON,
+  CLP_ICON,
 } from "../constant";
 import type { PoolDetail } from "lib/types/pool";
 import { PoolType } from "lib/types/pool";
@@ -38,7 +39,7 @@ const poolTypeRender = (type: PoolDetail["type"]) => {
     case PoolType.CL:
       return {
         text: "Concentrated Liquidity Pool",
-        icon: BALANCER_ICON,
+        icon: CLP_ICON,
       };
     default:
       return {};
@@ -128,7 +129,7 @@ export const PoolHeader = ({
                 />
                 <Flex alignItems="center" gap={1}>
                   <Image boxSize={4} src={SUPERFLUID_ICON} />
-                  <Text variant="body2" color="text.dark">
+                  <Text variant="body2" color="#ee64e8">
                     Superfluid
                   </Text>
                 </Flex>

diff --git a/src/lib/pages/pools/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx
@@ -163,7 +163,7 @@ export const SupportedSection = ({
                 <Text display="flex" gap={2} alignItems="center">
                   Show only
                   <Image boxSize={4} src={SUPERFLUID_ICON} />
-                  Superfluid
+                  <Text color="#ee64e8">Superfluid</Text>
                 </Text>
               </FormLabel>
             </FormControl>

diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -141,7 +141,7 @@ export const UnsupportedSection = ({
                 <Text display="flex" gap={2} alignItems="center">
                   Show only
                   <Image boxSize={4} src={SUPERFLUID_ICON} />
-                  Superfluid
+                  <Text color="#ee64e8">Superfluid</Text>
                 </Text>
               </FormLabel>
             </FormControl>

diff --git a/src/lib/pages/pools/constant.ts b/src/lib/pages/pools/constant.ts
@@ -12,3 +12,5 @@ export const STABLESWAP_ICON =
   "https://assets.alleslabs.dev/webapp-assets/pool/pool-stableswap.svg";
 export const COSMWASM_ICON =
   "https://assets.alleslabs.dev/webapp-assets/pool/pool-cosmwasm.svg";
+export const CLP_ICON =
+  "https://assets.alleslabs.dev/webapp-assets/pool/pool-clp.svg";