Cards update

src/modules/explorer/components/DAOStatsRow.tsx

@@ -116,7 +116,7 @@ export const DAOStatsRow: React.FC = () => {
               <ItemTitle color="textPrimary">{symbol} Locked</ItemTitle>
             </ItemContent>
             <Grid item container direction="row">
-              <ItemValue color="textPrimary">{numbro(amountLockedWithoutDecimals).format(formatConfig)}</ItemValue>
+              <ItemValue color="textPrimary">{numbro(amountLocked).format(formatConfig)}</ItemValue>
               <Percentage color="textPrimary">{numbro(amountLockedPercentage).format(formatConfig)}%</Percentage>
             </Grid>
           </Item>

src/modules/explorer/components/ProposalsList.tsx

@@ -122,7 +122,9 @@ export const ProposalsList: React.FC<Props> = ({
           renderOnZeroPageCount={null}
           containerClassName={"pagination"}
           activeClassName={"active"}
+          nextClassName="nextButton"
           forcePage={currentPage}
+          previousClassName="nextButton"
         />
       </Grid>
     </TableContainer>

src/modules/explorer/components/UsersTable.tsx

@@ -126,6 +126,8 @@ const MobileUsersTable: React.FC<UserTable> = ({ data, symbol, handlePageClick,
             containerClassName={"pagination"}
             activeClassName={"active"}
             forcePage={currentPage}
+            nextClassName="nextButton"
+            previousClassName="nextButton"
           />
         </Grid>
       </Grid>
@@ -203,6 +205,8 @@ const DesktopUsersTable: React.FC<UserTable> = ({ data, symbol, handlePageClick,
             containerClassName={"pagination"}
             activeClassName={"active"}
             forcePage={currentPage}
+            nextClassName="nextButton"
+            previousClassName="nextButton"
           />
         </Grid>
       </Grid>

src/modules/explorer/components/VotesTable.tsx

@@ -124,6 +124,8 @@ export const VotesTable: React.FC<{ data: RowData[] }> = ({ data }) => {
           containerClassName={"pagination"}
           activeClassName={"active"}
           forcePage={currentPage}
+          nextClassName="nextButton"
+          previousClassName="nextButton"
         />
       </Grid>
     </>

src/modules/explorer/pages/DAOList/components/DAOItem.tsx

@@ -13,10 +13,10 @@ const Container = styled(Grid)(({ theme }: { theme: Theme }) => ({
   "boxSizing": "border-box",
   "cursor": "pointer",
   "transition": "0.15s ease-out",
-  "padding": "42px 48px",
+  "padding": "40px 48px",
   "minWidth": "340px",
   "alignContent": "baseline",
-  "gap": 30,
+  "gap": 24,
   // "maxHeight": 282,
 
   ["@media (max-width:760px)"]: {
@@ -64,7 +64,7 @@ const NameText = styled(Typography)(({ theme }) => ({
   textOverflow: "ellipsis",
   color: theme.palette.text.primary,
   overflow: "hidden",
-  fontSize: 36,
+  fontSize: 24,
   maxWidth: 245,
   fontWeight: 600,
 
@@ -90,13 +90,13 @@ const DescriptionText = styled(Typography)({
 })
 
 const ItemTextSmall = styled(Typography)({
-  fontWeight: 600,
+  fontWeight: 500,
   fontSize: 16
 })
 
 const Badge = styled(Grid)(({ theme, dao_type }: { theme: Theme; dao_type: string }) => ({
   "borderRadius": "50px",
-  "padding": "8px 16px",
+  "padding": "7px 14px",
   "height": "auto",
   "boxSizing": "border-box",
   "width": "fit-content",

src/modules/explorer/pages/DAOList/index.tsx

@@ -230,7 +230,10 @@ export const DAOList: React.FC = () => {
                   <Grid item>
                     <Grid container justifyContent="center" alignItems="center" style={{ height: "100%" }}>
                       <Grid item>
-                        <Typography style={{ fontSize: "18px" }} color="textPrimary">
+                        <Typography
+                          style={{ fontSize: "18px", letterSpacing: "-0.18px !important" }}
+                          color="textPrimary"
+                        >
                           {daos?.length || 0} DAOs
                         </Typography>
                       </Grid>
@@ -299,6 +302,8 @@ export const DAOList: React.FC = () => {
                     containerClassName={"pagination"}
                     activeClassName={"active"}
                     forcePage={currentPage}
+                    nextClassName="nextButton"
+                    previousClassName="nextButton"
                   />
                 </Grid>
 

src/modules/explorer/pages/DAOList/styles.css

@@ -3,11 +3,18 @@
   list-style: none;
   outline: none;
   font-family: "Roboto Flex";
+
+  next {
+    color: red !important;
+  }
 }
 .pagination > .active > a {
-  background-color: rgba(129, 254, 183, 0.2);
+  background-color: #24282D;
   color: rgba(129, 254, 183, 1);
 }
+.pagination > .next > li > a {
+    color: red !important;
+}
 .pagination > li > a {
   border: none;
   padding: 5px 10px;
@@ -31,14 +38,19 @@
 .pagination > .active > span:hover,
 .pagination > .active > a:focus,
 .pagination > .active > span:focus {
-  background-color: rgba(129, 254, 183, 0.2);
+  background-color: #24282D;
   border-color: none;
   outline: none;
 }
 .pagination > li > a,
 .pagination > li > span {
   color: #fff;
 }
+
+.pagination > .nextButton > a {
+  font-weight: 600;
+}
+
 .pagination > li:first-child > a,
 .pagination > li:first-child > span,
 .pagination > li:last-child > a,

src/modules/explorer/pages/NFTs/index.tsx

@@ -209,6 +209,8 @@ export const NFTs: React.FC = () => {
                     containerClassName={"pagination"}
                     activeClassName={"active"}
                     forcePage={currentPage}
+                    nextClassName="nextButton"
+                    previousClassName="nextButton"
                   />
                 </Grid>
               </>

src/modules/explorer/pages/Treasury/components/BalancesTable.tsx

@@ -183,6 +183,8 @@ const BalancesList: React.FC<TableProps> = ({
           containerClassName={"pagination"}
           activeClassName={"active"}
           forcePage={currentPage}
+          nextClassName="nextButton"
+          previousClassName="nextButton"
         />
       </Grid>
     </Grid>

src/modules/explorer/pages/Treasury/components/TransfersTable.tsx

@@ -175,6 +175,8 @@ const MobileTransfersTable: React.FC<{ data: RowData[]; network: Network }> = ({
           containerClassName={"pagination"}
           activeClassName={"active"}
           forcePage={currentPage}
+          nextClassName="nextButton"
+          previousClassName="nextButton"
         />
       </Grid>
     </Grid>
@@ -247,6 +249,8 @@ const DesktopTransfersTable: React.FC<{ data: RowData[]; network: Network }> = (
           containerClassName={"pagination"}
           activeClassName={"active"}
           forcePage={currentPage}
+          nextClassName="nextButton"
+          previousClassName="nextButton"
         />
       </Grid>
     </>

src/modules/explorer/pages/User/components/UserMovements.tsx

@@ -505,6 +505,8 @@ export const UserMovements: React.FC<{
                     containerClassName={"pagination"}
                     activeClassName={"active"}
                     forcePage={currentPage}
+                    nextClassName="nextButton"
+                    previousClassName="nextButton"
                   />
                 </Grid>
               </Grid>
@@ -537,6 +539,8 @@ export const UserMovements: React.FC<{
                     containerClassName={"pagination"}
                     activeClassName={"active"}
                     forcePage={currentPage}
+                    nextClassName="nextButton"
+                    previousClassName="nextButton"
                   />
                 </Grid>
               </Grid>
@@ -569,6 +573,8 @@ export const UserMovements: React.FC<{
                     containerClassName={"pagination"}
                     activeClassName={"active"}
                     forcePage={currentPage}
+                    nextClassName="nextButton"
+                    previousClassName="nextButton"
                   />
                 </Grid>
               </Grid>