fix: text style

defi-wonderland · Apr 24, 2024 · 89647d4 · 89647d4
1 parent 55e44c4
commit 89647d4
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 15 deletions.
diff --git a/src/containers/ProposalCard/ProposalDetail.tsx b/src/containers/ProposalCard/ProposalDetail.tsx
@@ -17,7 +17,7 @@ export const ProposalDetail = () => {
   return (
     <DetailContainer>
       <TitleContainer>
-        <Typography variant='h6'>Proposal</Typography>
+        <STitle variant='h6'>Proposal</STitle>
       </TitleContainer>
       <Divider sx={{ my: 2 }} />
       <StyledTabs value={tabValue} onChange={handleChange} aria-label='proposal detail tabs'>
@@ -111,3 +111,7 @@ const CodeSnippet = styled(Typography)(() => {
 const SParagraph = styled(Typography)({
   textAlign: 'justify',
 });
+
+const STitle = styled(Typography)({
+  fontWeight: 800,
+});
diff --git a/src/containers/ProposalCard/ProposalPoll.tsx b/src/containers/ProposalCard/ProposalPoll.tsx
@@ -56,22 +56,22 @@ export const ProposalPoll = () => {
   return (
     <PollContainer>
       <TitleContainer>
-        <Typography variant='h6'>Current Votes</Typography>
+        <STitle variant='h6'>Current Votes</STitle>
       </TitleContainer>
       <Divider sx={{ my: 2 }} />
       <StatsContainer>
         <StatsInfoContainer>
           <CheckCircleIcon />
           <Typography>Quorum</Typography>
         </StatsInfoContainer>
-        <Typography>{quorum}</Typography>
+        <SText>{quorum}</SText>
       </StatsContainer>
       <StatsContainer>
         <StatsInfoContainer>
           <CheckCircleIcon />
           <Typography>Majority support</Typography>
         </StatsInfoContainer>
-        <Typography>{majoritySupport}</Typography>
+        <SText>{majoritySupport}</SText>
       </StatsContainer>
       <OverallProgressContainer>
         {voteOffsets.map((vote, index) => (
@@ -83,7 +83,7 @@ export const ProposalPoll = () => {
           <SBox key={vote.type}>
             <StyledCircleIcon sx={{ color: vote.color }} />
             <StyledTypography color={vote.color}>{vote.type}</StyledTypography>
-            <Typography>{vote.count}</Typography>
+            <SText>{vote.count}</SText>
           </SBox>
         ))}
       </VoteStatsContainer>
@@ -103,6 +103,7 @@ const PollContainer = styled(Box)(() => {
     padding: '2rem',
     boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
     gap: '0.5rem',
+    fontWeight: 800,
   };
 });
 
@@ -140,6 +141,21 @@ const SBox = styled(Box)({
   padding: '4px',
 });
 
+const STitle = styled(Typography)({
+  fontWeight: 800,
+});
+
+const SText = styled(Typography)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    fontWeight: 800,
+    color: currentTheme.textSecondary,
+    '@media (max-width: 1200px)': {
+      fontSize: '0.75rem',
+    },
+  };
+});
+
 const StyledTypography = styled(Typography)<StyledTypographyProps>(({ color }) => ({
   color: color,
   marginRight: 'auto',

diff --git a/src/containers/ProposalCard/ProposalStatus.tsx b/src/containers/ProposalCard/ProposalStatus.tsx
@@ -9,8 +9,6 @@ import { useCustomTheme } from '~/hooks';
 import { MoreButton } from '~/components';
 
 export const ProposalStatus = () => {
-  const { currentTheme } = useCustomTheme();
-
   const handleExplorer = (url: string) => {
     //navigate to block scan
     if (typeof window !== 'undefined') {
@@ -22,13 +20,13 @@ export const ProposalStatus = () => {
     {
       icon: <AddCircleOutlineIcon />,
       primary: 'Draft created',
-      secondary: 'Wed Apr 3, 02:50 pm - cattin.seedlatam.eth',
+      secondary: 'Wed Apr 3, 02:50 pm',
       state: 'done',
     },
     {
       icon: <PublishedWithChangesIcon />,
       primary: 'Published onchain',
-      secondary: 'Wed Apr 3, 02:50 pm - cattin.seedlatam.eth',
+      secondary: 'Wed Apr 3, 02:50 pm',
       state: 'active',
       menuItems: [
         { label: 'View on block explorer', onClick: () => handleExplorer('https://optimistic.etherscan.io/') },
@@ -37,7 +35,7 @@ export const ProposalStatus = () => {
     {
       icon: <PlayCircleOutlineIcon />,
       primary: 'Voting period started',
-      secondary: 'Sat Apr 6, 03:22 pm - cattin.seedlatam.eth',
+      secondary: 'Sat Apr 6, 03:22 pm',
       state: 'pending',
       menuItems: [
         { label: 'View on block explorer', onClick: () => handleExplorer('https://optimistic.etherscan.io/') },
@@ -61,9 +59,9 @@ export const ProposalStatus = () => {
 
   return (
     <StatusContainer>
-      <Typography variant='h6' sx={{ color: currentTheme.textPrimary }}>
-        Status
-      </Typography>
+      <TitleContainer>
+        <STitle variant='h6'>Status</STitle>
+      </TitleContainer>
       <Divider sx={{ my: 2 }} />
       <List>
         {statusItems.map((item, index) => (
@@ -87,8 +85,8 @@ const StatusContainer = styled(Box)(() => {
     backgroundColor: currentTheme.backgroundSecondary,
     borderRadius: currentTheme.borderRadius,
     boxShadow: currentTheme.boxShadow,
-    padding: '1rem',
-    margin: '0 0 2rem 0',
+    margin: '0 0 1rem 0',
+    padding: '2rem',
   };
 });
 
@@ -118,3 +116,11 @@ const StatusListItem = styled(ListItem)(() => {
     },
   };
 });
+
+const TitleContainer = styled(Box)({
+  paddingBottom: '0.5rem',
+});
+
+const STitle = styled(Typography)({
+  fontWeight: 800,
+});