From 8476be5838a9d53e0452915c88aecd73978ce585 Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Thu, 22 Aug 2024 13:06:44 +0800
Subject: [PATCH] fix(chain-template): change text and styles

---
 .../components/common/Sidebar/NavItems.tsx    |  4 +-
 .../components/staking/StakingSection.tsx     |  4 +-
 .../components/voting/Voting.tsx              | 76 ++++++++++---------
 examples/chain-template/hooks/common/useTx.ts |  2 +-
 .../pages/{documents.tsx => docs.tsx}         |  2 +-
 5 files changed, 45 insertions(+), 43 deletions(-)
 rename examples/chain-template/pages/{documents.tsx => docs.tsx} (98%)

diff --git a/examples/chain-template/components/common/Sidebar/NavItems.tsx b/examples/chain-template/components/common/Sidebar/NavItems.tsx
index 0c90db987..164234b2a 100644
--- a/examples/chain-template/components/common/Sidebar/NavItems.tsx
+++ b/examples/chain-template/components/common/Sidebar/NavItems.tsx
@@ -46,8 +46,8 @@ const navItems: NavItem[] = [
   },
   {
     icon: 'document',
-    label: 'Documents',
-    href: '/documents',
+    label: 'Docs',
+    href: '/docs',
   },
 ];
 
diff --git a/examples/chain-template/components/staking/StakingSection.tsx b/examples/chain-template/components/staking/StakingSection.tsx
index ca809c0d2..e807a51b5 100644
--- a/examples/chain-template/components/staking/StakingSection.tsx
+++ b/examples/chain-template/components/staking/StakingSection.tsx
@@ -16,7 +16,7 @@ export const StakingSection = ({ chainName }: { chainName: ChainName }) => {
   );
 
   return (
-    <Box my="$16">
+    <Box my="$16" maxWidth="$containerLg" mx="auto">
       {!isWalletConnected ? (
         <Box
           height="$28"
@@ -25,7 +25,7 @@ export const StakingSection = ({ chainName }: { chainName: ChainName }) => {
           alignItems="center"
         >
           <Text fontWeight="$semibold" fontSize="$xl">
-            Please connect the wallet
+            Please connect your wallet
           </Text>
         </Box>
       ) : isLoading || isFetchingLogos || !data ? (
diff --git a/examples/chain-template/components/voting/Voting.tsx b/examples/chain-template/components/voting/Voting.tsx
index 39d8cb950..5e142df5b 100644
--- a/examples/chain-template/components/voting/Voting.tsx
+++ b/examples/chain-template/components/voting/Voting.tsx
@@ -1,10 +1,10 @@
-import { useState } from "react";
-import { useChain } from "@cosmos-kit/react";
+import { useState } from 'react';
+import { useChain } from '@cosmos-kit/react';
 import {
   Proposal as IProposal,
   ProposalStatus,
   TallyResult,
-} from "interchain-query/cosmos/gov/v1/gov";
+} from 'interchain-query/cosmos/gov/v1/gov';
 import {
   BasicModal,
   Box,
@@ -12,27 +12,27 @@ import {
   Spinner,
   Text,
   useColorModeValue,
-} from "@interchain-ui/react";
-import { useModal, useVotingData } from "@/hooks";
-import { Proposal } from "@/components";
-import { formatDate } from "@/utils";
+} from '@interchain-ui/react';
+import { useModal, useVotingData } from '@/hooks';
+import { Proposal } from '@/components';
+import { formatDate } from '@/utils';
 
 function status(s: ProposalStatus) {
   switch (s) {
     case ProposalStatus.PROPOSAL_STATUS_UNSPECIFIED:
-      return "pending";
+      return 'pending';
     case ProposalStatus.PROPOSAL_STATUS_DEPOSIT_PERIOD:
-      return "pending";
+      return 'pending';
     case ProposalStatus.PROPOSAL_STATUS_VOTING_PERIOD:
-      return "pending";
+      return 'pending';
     case ProposalStatus.PROPOSAL_STATUS_PASSED:
-      return "passed";
+      return 'passed';
     case ProposalStatus.PROPOSAL_STATUS_REJECTED:
-      return "rejected";
+      return 'rejected';
     case ProposalStatus.PROPOSAL_STATUS_FAILED:
-      return "rejected";
+      return 'rejected';
     default:
-      return "pending";
+      return 'pending';
   }
 }
 
@@ -53,7 +53,7 @@ export function Voting({ chainName }: VotingProps) {
   const { address } = useChain(chainName);
   const [proposal, setProposal] = useState<IProposal>();
   const { data, isLoading, refetch } = useVotingData(chainName);
-  const { modal, open: openModal, close: closeModal, setTitle } = useModal("");
+  const { modal, open: openModal, close: closeModal, setTitle } = useModal('');
 
   function onClickProposal(index: number) {
     const proposal = data.proposals![index];
@@ -72,23 +72,21 @@ export function Voting({ chainName }: VotingProps) {
           position="relative"
           attributes={{ onClick: () => onClickProposal(index) }}
         >
-          {data.votes[proposal.id.toString()]
-            ? (
-              <Box
-                position="absolute"
-                px="$4"
-                py="$2"
-                top="$4"
-                right="$6"
-                borderRadius="$md"
-                backgroundColor="$green400"
-              >
-                <Text color="$white" fontSize="$xs" fontWeight="$bold">
-                  Voted
-                </Text>
-              </Box>
-            )
-            : null}
+          {data.votes[proposal.id.toString()] ? (
+            <Box
+              position="absolute"
+              px="$4"
+              py="$2"
+              top="$4"
+              right="$6"
+              borderRadius="$md"
+              backgroundColor="$green400"
+            >
+              <Text color="$white" fontSize="$xs" fontWeight="$bold">
+                Voted
+              </Text>
+            </Box>
+          ) : null}
           <GovernanceProposalItem
             id={`# ${proposal.id?.toString()}`}
             key={proposal.submitTime?.getTime()}
@@ -116,18 +114,20 @@ export function Voting({ chainName }: VotingProps) {
       p="$8"
       borderRadius="$md"
       justifyContent="center"
-      display={isLoading ? "flex" : "none"}
+      display={isLoading ? 'flex' : 'none'}
     >
       <Spinner
         size="$5xl"
-        color={useColorModeValue("$blackAlpha800", "$whiteAlpha900")}
+        color={useColorModeValue('$blackAlpha800', '$whiteAlpha900')}
       />
     </Box>
   );
 
   return (
-    <Box mb="$20" position="relative">
-      <Text fontWeight="600" fontSize="$2xl">Proposals</Text>
+    <Box mb="$20" position="relative" maxWidth="$containerLg" mx="auto">
+      <Text fontWeight="600" fontSize="$2xl">
+        Proposals
+      </Text>
 
       {address ? Loading : null}
 
@@ -136,7 +136,9 @@ export function Voting({ chainName }: VotingProps) {
       <BasicModal
         title={
           <Box maxWidth="40rem">
-            <Text fontSize="$xl" fontWeight="$bold">{modal.title}</Text>
+            <Text fontSize="$xl" fontWeight="$bold">
+              {modal.title}
+            </Text>
           </Box>
         }
         isOpen={modal.open}
diff --git a/examples/chain-template/hooks/common/useTx.ts b/examples/chain-template/hooks/common/useTx.ts
index 06f1f64fc..d1d68ed19 100644
--- a/examples/chain-template/hooks/common/useTx.ts
+++ b/examples/chain-template/hooks/common/useTx.ts
@@ -33,7 +33,7 @@ export const useTx = (chainName: string) => {
       toast({
         type: 'error',
         title: 'Wallet not connected',
-        description: 'Please connect the wallet',
+        description: 'Please connect your wallet',
       });
       return;
     }
diff --git a/examples/chain-template/pages/documents.tsx b/examples/chain-template/pages/docs.tsx
similarity index 98%
rename from examples/chain-template/pages/documents.tsx
rename to examples/chain-template/pages/docs.tsx
index 9860335b4..a400279d0 100644
--- a/examples/chain-template/pages/documents.tsx
+++ b/examples/chain-template/pages/docs.tsx
@@ -34,7 +34,7 @@ const tabs: Tab[] = [
   },
 ];
 
-export default function SidebarHomePage() {
+export default function DocsPage() {
   const [activeTab, setActiveTab] = useState(0);
 
   const { isTablet, isMobile } = useDetectBreakpoints();