Rebrand Governance page

src/components/dropdown/dropdown.module.scss

@@ -24,26 +24,25 @@
 }
 
 .dropdownMenu {
-  background-color: $dropdown-bgd;
-  color: $primary-color;
+  background-color: $color-blue-10;
+  color: $color-dark-blue-50;
   min-width: 100%;
   position: absolute;
-  box-shadow: $dropdown-shadow;
   z-index: 20;
 
   &.top {
     bottom: 100%;
-    border-bottom: 1px solid $secondary-border;
   }
 
   &.bottom {
     top: 100%;
-    border-top: 1px solid $secondary-border;
   }
 }
 
 .dropdownIcon {
   & > img {
+    width: 20px;
+    height: 20px;
     transition: transform 250ms;
   }
 
@@ -55,8 +54,8 @@
 }
 
 .dropdownMenuItem {
-  padding: $space-xs;
-  border-bottom: 1px solid $dropdown-border-color;
+  padding: 8px 16px;
+  border-bottom: 1px solid $color-base-light;
 
   &.clickable {
     cursor: pointer;

src/components/dropdown/dropdown.tsx

@@ -83,7 +83,7 @@ const Dropdown = ({ children, menu, icon, alignIcon = 'center', className }: Dro
       >
         {children}
         <div className={classNames(styles.dropdownIcon, { [styles.open]: open })}>
-          {icon || <img src={images.dropdown} alt="dropdown icon" />}
+          {icon || <img src={images.arrowDropdown} alt="dropdown icon" />}
         </div>
       </div>
       {open && menu}

src/pages/proposal-commons/proposal-list/proposal-list.module.scss

@@ -1,4 +1,5 @@
 @import '../../../styles/variables.module.scss';
+@import '../../../styles/fonts.module.scss';
 
 .proposalItem {
   border-top: 1px solid $black-line-color;
@@ -129,11 +130,18 @@
 }
 
 .noProposals {
-  color: $tertiary-color;
+  display: flex;
+  flex-direction: column;
+  color: $color-dark-blue-400;
+  align-items: center;
+  justify-content: center;
   text-align: center;
-  margin: 15vh $space-md;
-  transform: translateY(-50%);
-  font-size: $text-small;
+  gap: 8px;
+  margin: 32px 0;
+  padding: 120px 0;
+  @include font-body-9;
+  border-top: 1px solid $color-dark-blue-10;
+  border-bottom: 1px solid $color-dark-blue-10;
 
   & > * {
     margin-right: $space-xs;
@@ -143,3 +151,13 @@
     margin-right: 0;
   }
 }
+
+@media (min-width: $md) {
+  .noProposals {
+    flex-direction: row;
+    align-items: baseline;
+    gap: 0;
+    padding: 170px 0;
+    @include font-body-6;
+  }
+}

src/pages/proposal-commons/proposal-list/proposal-list.tsx

@@ -70,7 +70,9 @@ const ProposalList = (props: Props) => {
     return (
       <div className={styles.noProposals}>
         <span>You need to be connected to view proposals</span>
-        <ConnectButton type="link">Connect your wallet</ConnectButton>
+        <ConnectButton type="link-blue" size="sm" md={{ size: 'lg' }}>
+          Connect your wallet
+        </ConnectButton>
       </div>
     );
   } else if (!proposals) {

src/pages/proposal-commons/treasury/treasury.module.scss

@@ -1,45 +1,57 @@
 @import '../../../styles/variables.module.scss';
+@import '../../../styles/fonts.module.scss';
 
 .treasury {
-  max-width: 300px;
   width: 100%;
   display: flex;
   flex-direction: column;
+  margin-top: 56px;
 
-  & > *:first-child {
-    padding-bottom: $space-xs;
-  }
   & > * {
-    border-bottom: 1px solid $black-line-color;
+    border-bottom: 1px solid $color-dark-blue-10;
   }
 }
 
-.label {
+.treasuryTitle {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  gap: 8px;
+  padding-bottom: 8px;
+  color: $color-dark-blue-100;
+  @include font-tagline-9;
 }
 
 .treasuryButton {
   flex: 1;
   display: flex;
   align-items: center;
-  padding: $space-xs 0;
+  padding: 8px 0;
 }
 
 .label {
-  color: $secondary-color;
+  color: $color-dark-blue-100;
   text-transform: capitalize;
+  @include font-body-14;
 }
 
 .treasuryMenuItem {
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  @include font-body-10;
+
+  .menuItemLabel {
+    color: $color-dark-blue-50;
+  }
+
+  .menuItemValue {
+    color: $color-dark-blue-100;
+  }
 }
 
-.copy {
-  margin-left: $space-sm;
+.etherScanLink {
+  margin-left: 8px;
   transition: transform 0.1s;
   &:hover {
     transform: scale(1.1);
@@ -49,3 +61,19 @@
 .dropdownLink {
   display: flex; // to properly draw box shadow when the link is focused
 }
+
+@media (min-width: $md) {
+  .treasury {
+    max-width: 308px;
+    margin-top: 0;
+  }
+
+  .treasuryTitle {
+    justify-content: end;
+    @include font-tagline-6;
+  }
+
+  .label {
+    @include font-body-11;
+  }
+}

src/pages/proposal-commons/treasury/treasury.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import Dropdown, { DropdownMenu, DropdownMenuItem } from '../../../components/dropdown';
 import { FormattedTreasury, useTreasuries } from './hooks';
-import globalStyles from '../../../styles/global-styles.module.scss';
 import styles from './treasury.module.scss';
 import { images } from '../../../utils';
 import { getEtherscanAddressUrl, useApi3AgentAddresses } from '../../../contracts';
@@ -28,23 +27,17 @@ const TreasuryDropdown = (props: TreasuryDropdownProps) => {
         <DropdownMenu>
           {data.map(({ name, amountAndSymbol }) => (
             <DropdownMenuItem className={styles.treasuryMenuItem} key={`${type}${name}`}>
-              <p className={classNames(globalStyles.textSmall, globalStyles.medium)}>{name}</p>
-              <p className={classNames(globalStyles.secondaryColor, globalStyles.textSmall, globalStyles.medium)}>
-                {amountAndSymbol}
-              </p>
+              <p className={styles.menuItemLabel}>{name}</p>
+              <p className={styles.menuItemValue}>{amountAndSymbol}</p>
             </DropdownMenuItem>
           ))}
         </DropdownMenu>
       }
     >
       <div className={styles.treasuryButton}>
-        <p
-          className={classNames(globalStyles.secondaryColor, globalStyles.textSmall, globalStyles.medium, styles.label)}
-        >
-          {type}
-        </p>
+        <p className={styles.label}>{type}</p>
         {etherscanAddressUrl && (
-          <span className={classNames(styles.copy, globalStyles.textSmall)}>
+          <span className={styles.etherScanLink}>
             <Tooltip overlay={etherscanExplainer}>
               <ExternalLink href={etherscanAddressUrl} className={styles.dropdownLink}>
                 <img
@@ -73,18 +66,10 @@ const Treasury = (props: TreasuryProps) => {
 
   return (
     <div className={classNames(styles.treasury, className)}>
-      <p
-        className={classNames(
-          styles.label,
-          globalStyles.secondaryColor,
-          globalStyles.textSmall,
-          globalStyles.uppercase,
-          globalStyles.textRight
-        )}
-      >
+      <p className={styles.treasuryTitle}>
         Treasury
         <Tooltip overlay="The DAO treasury is divided between the primary and secondary agent contracts. To move funds from a particular agent, you need to use the respective proposal type (primary proposal to use primary agent funds, and vice versa).">
-          <img src={images.help} alt="treasury help" className={globalStyles.helpIcon} />
+          <img src={images.helpOutline} alt="treasury help" />
         </Tooltip>
       </p>
       <TreasuryDropdown data={primary} type="primary" />

src/pages/proposals/delegation/delegation.module.scss

@@ -1,7 +1,34 @@
-@import '../../../styles//variables.module.scss';
+@import '../../../styles/variables.module.scss';
+@import '../../../styles/fonts.module.scss';
 
-.proposalsLink {
-  button._normal {
+.delegatedTitle {
+  @include font-body-11;
+  color: $color-dark-blue-100;
+  margin-right: 8px;
+}
+
+.delegatedAddress {
+  @include font-body-12;
+  color: $color-dark-blue-400;
+}
+
+.delegateButton {
+  button {
     padding: 0;
   }
 }
+
+.helpIcon {
+  vertical-align: middle;
+  margin-left: 8px;
+}
+
+@media (min-width: $md) {
+  .delegatedTitle {
+    @include font-body-7;
+  }
+
+  .delegatedAddress {
+    @include font-body-9;
+  }
+}

src/pages/proposals/delegation/delegation.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { abbrStr } from '../../../chain-data/helpers';
 import DelegateVotesForm from '../forms/delegate/delegate-form';
-import globalStyles from '../../../styles/global-styles.module.scss';
 import { useChainData } from '../../../chain-data';
 import Button from '../../../components/button';
 import { Modal } from '../../../components/modal';
@@ -12,12 +11,13 @@ import { handleTransactionError } from '../../../utils';
 import { images } from '../../../utils';
 import { TooltipChecklist } from '../../../components/tooltip';
 import styles from './delegation.module.scss';
-import classNames from 'classnames';
+import { useWindowDimensions } from '../../../hooks/use-window-dimensions';
 
 const Delegation = () => {
   // TODO: Retrieve only "userStaked" from the chain instead of loading all staking data (and remove useLoadDashboardData call)
   const { signer, delegation, dashboardState, setChainData, transactions } = useChainData();
   const api3Pool = useApi3Pool();
+  const { isMobile } = useWindowDimensions();
 
   const [openDelegationModal, setOpenDelegationModal] = useState(false);
   const [openChooseDelegateActionModal, setOpenChooseDelegateActionModal] = useState(false);
@@ -44,19 +44,28 @@ const Delegation = () => {
     <>
       {delegation?.delegate ? (
         <div>
-          <p className={classNames(globalStyles.secondaryColor, globalStyles.bold)} data-cy="delegated-to">
-            Delegated to: {delegation.delegateName ? delegation.delegateName : abbrStr(delegation.delegate)}
+          <p data-cy="delegated-to">
+            <span className={styles.delegatedTitle}>Delegated to: </span>
+            <span className={styles.delegatedAddress}>
+              {delegation.delegateName
+                ? delegation.delegateName
+                : isMobile
+                ? abbrStr(delegation.delegate)
+                : delegation.delegate}
+            </span>
           </p>
           <Button
-            className={styles.proposalsLink}
-            type="text"
+            className={styles.delegateButton}
+            type="link-blue"
+            size="sm"
+            md={{ size: 'lg' }}
             onClick={() => setOpenChooseDelegateActionModal(true)}
             disabled={!canDelegate && !canUndelegate}
           >
             Update delegation
           </Button>
           <TooltipChecklist items={delegateChecklistItems}>
-            <img src={images.help} alt="delegation help" className={globalStyles.helpIcon} />
+            <img src={images.helpOutline} alt="delegation help" className={styles.helpIcon} />
           </TooltipChecklist>
           <Modal open={openChooseDelegateActionModal} onClose={() => setOpenChooseDelegateActionModal(false)}>
             <ChooseDelegateAction
@@ -83,17 +92,19 @@ const Delegation = () => {
         </div>
       ) : (
         <div>
-          <p className={classNames(globalStyles.secondaryColor, globalStyles.bold)}>Undelegated</p>
+          <p className={styles.delegatedTitle}>Undelegated</p>
           <Button
-            className={styles.proposalsLink}
-            type="text"
+            className={styles.delegateButton}
+            type="link-blue"
+            size="sm"
+            md={{ size: 'lg' }}
             onClick={() => setOpenDelegationModal(true)}
             disabled={!canDelegate}
           >
             Delegate
           </Button>
           <TooltipChecklist items={delegateChecklistItems}>
-            <img src={images.help} alt="delegation help" className={globalStyles.helpIcon} />
+            <img src={images.helpOutline} alt="delegation help" className={styles.helpIcon} />
           </TooltipChecklist>
         </div>
       )}