From b15f860b513f4db4108bbfee4dc31fca124af032 Mon Sep 17 00:00:00 2001
From: Ashutosh Kumar <ashutosh@w3dev.in>
Date: Fri, 14 Jun 2024 17:22:10 +0530
Subject: [PATCH 1/3] Fixed UI for Proposal List Display and Ui for links in
 full proposal display

---
 src/App.css                                       | 13 ++++++++++---
 src/modules/explorer/components/ProposalsList.tsx |  3 ++-
 .../explorer/components/ProposalDetailCard.tsx    |  2 +-
 .../lite/explorer/components/ProposalTableRow.tsx | 15 ++++++++++++---
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index 652722d6..f186d365 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,7 +11,8 @@ a {
   z-index: 1000000;
 }
 
-[data-rsbs-overlay], [data-rsbs-root]:after {
+[data-rsbs-overlay],
+[data-rsbs-root]:after {
   background: #1C1F23;
   z-index: 1000001;
   max-height: 90vh;
@@ -24,7 +25,7 @@ a {
 
 /* Hide scrollbar for IE, Edge and Firefox */
 * {
-  scrollbar-width: none; 
+  scrollbar-width: none;
 }
 
 /* width */
@@ -47,4 +48,10 @@ a {
 /* Handle on hover */
 /* ::-webkit-scrollbar-thumb:hover {
   background: #4a5055;
-} */
\ No newline at end of file
+} */
+.proposal-details a {
+  color: #80bcf4;
+}
+.proposal-details a:hover {
+  border-bottom: 1px solid #80bcf4;
+}
\ No newline at end of file
diff --git a/src/modules/explorer/components/ProposalsList.tsx b/src/modules/explorer/components/ProposalsList.tsx
index 9fed9044..c9049ff9 100644
--- a/src/modules/explorer/components/ProposalsList.tsx
+++ b/src/modules/explorer/components/ProposalsList.tsx
@@ -57,8 +57,8 @@ export const ProposalsList: React.FC<Props> = ({
 }) => {
   const [currentPage, setCurrentPage] = useState(0)
   const [offset, setOffset] = useState(0)
-  const [open, setopen] = useState(true)
   const [filteredProposals, setFilteredProposals] = useState<ProposalObj[]>([])
+  // TODO: next two lines can be safely removed
   const [filter, setFilter] = useState<number>(0)
   const [filterOnchain, setFilterOnchain] = useState<string>()
   const [isLoading, setIsLoading] = useState(false)
@@ -133,6 +133,7 @@ export const ProposalsList: React.FC<Props> = ({
     []
   )
 
+  // TODO: this can be probably removed as not in use
   const orderedList = (state: Order) => {
     if (state === "recent") {
       return listOfProposals
diff --git a/src/modules/lite/explorer/components/ProposalDetailCard.tsx b/src/modules/lite/explorer/components/ProposalDetailCard.tsx
index 78154080..e520666e 100644
--- a/src/modules/lite/explorer/components/ProposalDetailCard.tsx
+++ b/src/modules/lite/explorer/components/ProposalDetailCard.tsx
@@ -200,7 +200,7 @@ export const ProposalDetailCard: React.FC<{ poll: Poll | undefined; daoId: strin
           </Grid>
 
           <Grid container>
-            <Typography variant="body2" color="textPrimary">
+            <Typography variant="body2" color="textPrimary" className="proposal-details">
               {ReactHtmlParser(poll?.description ? poll?.description : "")}
             </Typography>
           </Grid>
diff --git a/src/modules/lite/explorer/components/ProposalTableRow.tsx b/src/modules/lite/explorer/components/ProposalTableRow.tsx
index 7397dbe1..c34b5eaf 100644
--- a/src/modules/lite/explorer/components/ProposalTableRow.tsx
+++ b/src/modules/lite/explorer/components/ProposalTableRow.tsx
@@ -37,12 +37,17 @@ const DescriptionText = styled(Typography)(({ theme }) => ({
   }
 }))
 
+const stripHtmlTags = (input: string) => {
+  const div = document.createElement("div")
+  div.innerHTML = input
+  return div.textContent || div.innerText || ""
+}
+
 export const ProposalTableRow: React.FC<{ poll: Poll | any; daoId?: string }> = ({ poll, daoId }) => {
   const navigate = useHistory()
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down("xs"))
   const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"))
-
   return (
     <RowContainer
       style={{ background: "#2F3438", borderRadius: 8 }}
@@ -55,11 +60,15 @@ export const ProposalTableRow: React.FC<{ poll: Poll | any; daoId?: string }> =
     >
       <Grid container item style={{ gap: 16 }} xs={12} md={12} justifyContent={isMobile ? "center" : "flex-start"}>
         <Title color="textPrimary" align={isMobile ? "center" : "left"}>
-          {poll.name}
+          {poll.name.length > 100 ? poll.name.slice(0, 100) + "..." : poll.name}
         </Title>
 
         <Grid container direction="row">
-          <DescriptionText>{ReactHtmlParser(poll.description)}</DescriptionText>
+          <DescriptionText>
+            {poll.description.length > 200
+              ? stripHtmlTags(poll.description).slice(0, 200) + "..."
+              : ReactHtmlParser(poll.description)}
+          </DescriptionText>
         </Grid>
 
         <Grid

From 30dff931385688c1462c2deab1be9b0a7074b838 Mon Sep 17 00:00:00 2001
From: Ashutosh Kumar <ashutosh@w3dev.in>
Date: Fri, 14 Jun 2024 17:47:56 +0530
Subject: [PATCH 2/3] Updated the link color

---
 src/App.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index f186d365..40733b7a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -50,8 +50,8 @@ a {
   background: #4a5055;
 } */
 .proposal-details a {
-  color: #80bcf4;
+  color: #81feb7;
 }
 .proposal-details a:hover {
-  border-bottom: 1px solid #80bcf4;
+  border-bottom: 1px solid #81feb7;
 }
\ No newline at end of file

From 7adfc840a2a06e6060c6a91fdc51f6db0bf421e6 Mon Sep 17 00:00:00 2001
From: Ashutosh Kumar <ashutosh@w3dev.in>
Date: Fri, 14 Jun 2024 17:50:45 +0530
Subject: [PATCH 3/3] Changed the hover effect to underline with
 text-decoration

---
 src/App.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index 40733b7a..a30d21d2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -51,7 +51,9 @@ a {
 } */
 .proposal-details a {
   color: #81feb7;
+  cursor: pointer;
 }
 .proposal-details a:hover {
-  border-bottom: 1px solid #81feb7;
+  text-decoration: underline;
+  /* border-bottom: 1px solid #81feb7; */
 }
\ No newline at end of file