From 9e98ebe750825c9a610aeebd3fd0cbee252d5359 Mon Sep 17 00:00:00 2001
From: Francis Rodriguez <39339295+Freshenext@users.noreply.github.com>
Date: Mon, 7 Oct 2024 09:09:46 -0400
Subject: [PATCH] Dao 717 Implemented gradient (#246)

* DAO-710 feat: added HeaderTitle.tsx which is the typography that will be used for section titles.
BREAKING CHANGE: changed background color and foreground color
fix: removed plus icon from create proposal button.
fix: will now use HeaderTitle in the HeaderSection for proposals page
fix: will use HeaderTitle in the proposals page where latest proposals is
fix: edited columns name
fix: edited date output format
feat: edited MetricsCard.tsx to account for new style changes.
fix: My voting power in proposals is not a metric card anymore; this component was created there.
fix: adjusted width of metrics card of proposals created to 272 pixels
fix: camel case my voting power
fix: proposal name column will not wrap, and the text will be white due to new changes in the table design.
BREAKING CHANGE: table header will now contain new style changes.
BREAKING CHANGE: the table will have no rounded borders anymore due to design change.
BREAKING CHANGE: table head color has changed to the foreground per new design changes
fix: exported Typography type so it can be used.

* fix: will now use variant light for span

* DAO-715 fix: metrics card will now use span instead of paragraph to better reflect its purpose for the fiatAmount.
fix: the contractAddress link will have a margin top
fix: MetricsSection.tsx will now use HeaderTitle
fix: TotalTokenHoldingsSection.tsx will now use HeaderTitle
fix: TreasurySection.tsx will use HeaderTitle. The metrics card will be borderless to reflect new design changes.

* DAO-717
feat: added new button variant (sidebar-active)
feat: added new component DivWithGradient.tsx
feat: added gradient classes in the globals.css
feat: added GradientHeader.tsx
fix: removed classes from Header as design changes required it.
fix: the sidebar will now have the ConnectedComponent prop which will be used to render that component.
feat: added gradient header to sidebar
feat: added gradient border to sidebar buttons
fix: useful links added padding left
feat: created SidebarButton component to implement DRY.
---
 src/app/globals.css                           | 21 +++++
 src/app/treasury/MetricsSection.tsx           |  4 +-
 .../treasury/TotalTokenHoldingsSection.tsx    |  4 +-
 src/app/treasury/TreasurySection.tsx          |  8 +-
 src/components/Button/Button.tsx              |  2 +
 src/components/Button/DivWithGradient.tsx     |  3 +
 src/components/Button/types.ts                |  9 +-
 .../GradientHeader/GradientHeader.tsx         |  7 ++
 src/components/Header/Header.tsx              |  2 +-
 src/components/LeftSidebar/LeftSidebar.tsx    | 15 ++--
 src/components/LeftSidebar/SidebarButtons.tsx | 83 +++++++++----------
 src/components/LeftSidebar/UsefulLinks.tsx    |  2 +-
 src/components/LeftSidebar/types.ts           |  3 +
 .../MainContainer/MainContainer.tsx           | 59 +++++++------
 .../MainContainer/StatefulSidebar.tsx         | 14 +++-
 src/components/MetricsCard/MetricsCard.tsx    | 10 +--
 16 files changed, 148 insertions(+), 98 deletions(-)
 create mode 100644 src/components/Button/DivWithGradient.tsx
 create mode 100644 src/components/GradientHeader/GradientHeader.tsx

diff --git a/src/app/globals.css b/src/app/globals.css
index 7bf3cd58..673ed112 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -8,6 +8,27 @@
   .underline-thick {
     text-decoration-thickness: 0.5px;
   }
+
+  div.div-with-gradient::after {
+    background: linear-gradient(270deg, #FFFEE3 -30.96%, #F9E1FF 43.65%, #BE5B0F 77.22%, #932309 110.79%, #010101 155.56%);
+    content: "";
+    width: 100%;
+    height: 1px;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .gradient-header {
+    background: linear-gradient(270deg, #FFFEE3 -30.96%, #F9E1FF 43.65%, #BE5B0F 77.22%, #932309 110.79%, #010101 155.56%);
+    width: 100%;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    padding-left: 25px;
+  }
+  
 }
 
 * {
diff --git a/src/app/treasury/MetricsSection.tsx b/src/app/treasury/MetricsSection.tsx
index d277cafc..023bbae3 100644
--- a/src/app/treasury/MetricsSection.tsx
+++ b/src/app/treasury/MetricsSection.tsx
@@ -1,4 +1,4 @@
-import { Paragraph } from '@/components/Typography'
+import { HeaderTitle } from '@/components/Typography'
 import { Table } from '@/components/Table'
 import { TokenHoldingsStRIF } from '@/app/treasury/TokenHoldingsStRIF'
 
@@ -12,7 +12,7 @@ const tableData = [
 ]
 export const MetricsSection = () => (
   <div>
-    <Paragraph className="font-semibold text-[18px] mb-[17px]">Metrics</Paragraph>
+    <HeaderTitle className="mb-4">Metrics</HeaderTitle>
     <Table data={tableData} />
   </div>
 )
diff --git a/src/app/treasury/TotalTokenHoldingsSection.tsx b/src/app/treasury/TotalTokenHoldingsSection.tsx
index 70069331..663ef3ab 100644
--- a/src/app/treasury/TotalTokenHoldingsSection.tsx
+++ b/src/app/treasury/TotalTokenHoldingsSection.tsx
@@ -1,4 +1,4 @@
-import { Paragraph } from '@/components/Typography'
+import { HeaderTitle } from '@/components/Typography'
 import { Table } from '@/components/Table'
 import { RenderTokenPrice } from '@/app/user/Balances/RenderTokenPrice'
 import { TokenHoldings } from '@/app/treasury/TokenHoldings'
@@ -20,7 +20,7 @@ const tableData = [
 
 export const TotalTokenHoldingsSection = () => (
   <div>
-    <Paragraph className="font-semibold text-[18px] mb-[17px]">Total token holdings</Paragraph>
+    <HeaderTitle className="mb-4">Total token holdings</HeaderTitle>
     <Table data={tableData} />
   </div>
 )
diff --git a/src/app/treasury/TreasurySection.tsx b/src/app/treasury/TreasurySection.tsx
index e5d0a13a..f3655efd 100644
--- a/src/app/treasury/TreasurySection.tsx
+++ b/src/app/treasury/TreasurySection.tsx
@@ -1,5 +1,5 @@
 import { useTreasuryContext } from '@/app/treasury/TreasuryContext'
-import { Paragraph } from '@/components/Typography'
+import { HeaderTitle } from '@/components/Typography'
 import { MetricsCard } from '@/components/MetricsCard'
 import { toFixed } from '@/lib/utils'
 import { treasuryContracts } from '@/lib/contracts'
@@ -8,17 +8,18 @@ export const TreasurySection = () => {
   const { buckets } = useTreasuryContext()
   return (
     <div>
-      <Paragraph className="font-semibold text-[18px] mb-[17px]">Treasury</Paragraph>
+      <HeaderTitle className="mb-4">Treasury</HeaderTitle>
       <div className="grid grid-cols-2 xl:grid-cols-4 gap-[24px]">
         {/* RIF Holdings */}
         {treasuryContracts.map((contract, index) => (
           <MetricsCard
             key={`${contract.name}-RIF`}
             title={`${contract.name} RIF Holdings`}
-            amount={toFixed(buckets[index].RIF.amount)}
+            amount={`${toFixed(buckets[index].RIF.amount)} RIF`}
             fiatAmount={`= USD ${buckets[index].RIF.fiatAmount}`}
             contractAddress={contract.address}
             data-testid={`${contract.name}-RIF`}
+            borderless
           />
         ))}
         {/* RBTC Holdings */}
@@ -29,6 +30,7 @@ export const TreasurySection = () => {
             amount={toFixed(buckets[index].RBTC.amount)}
             fiatAmount={`= USD ${buckets[index].RBTC.fiatAmount}`}
             data-testid={`${contract.name}-RBTC`}
+            borderless
           />
         ))}
       </div>
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index a2418b59..c72ba886 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -3,6 +3,7 @@ import { cn } from '@/lib/utils'
 import { FC, JSX, MouseEvent, ReactNode } from 'react'
 import { FaSpinner } from 'react-icons/fa6'
 import { Span } from '../Typography'
+import { DivWithGradient } from '@/components/Button/DivWithGradient'
 
 export const BUTTON_DEFAULT_CLASSES = 'px-[24px] py-[12px] flex gap-x-1 items-center relative'
 
@@ -78,6 +79,7 @@ export const Button: FC<Props> = ({
         <span className={cn('absolute left-[-20px] top-[4px]', startIconClasses)}>{startIcon}</span>
         <Span>{text}</Span>
       </span>
+      {variant === 'sidebar-active' && <DivWithGradient />}
     </button>
   )
 }
diff --git a/src/components/Button/DivWithGradient.tsx b/src/components/Button/DivWithGradient.tsx
new file mode 100644
index 00000000..f2bcdd00
--- /dev/null
+++ b/src/components/Button/DivWithGradient.tsx
@@ -0,0 +1,3 @@
+export const DivWithGradient = () => (
+  <div className="div-with-gradient" style={{ width: '100%', position: 'absolute', bottom: 0, left: 0 }} />
+)
diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts
index 8a86ce08..47f3603f 100644
--- a/src/components/Button/types.ts
+++ b/src/components/Button/types.ts
@@ -1 +1,8 @@
-export type ButtonVariants = 'primary' | 'secondary' | 'secondary-full' | 'borderless' | 'outlined' | 'white'
+export type ButtonVariants =
+  | 'primary'
+  | 'secondary'
+  | 'secondary-full'
+  | 'borderless'
+  | 'outlined'
+  | 'white'
+  | 'sidebar-active'
diff --git a/src/components/GradientHeader/GradientHeader.tsx b/src/components/GradientHeader/GradientHeader.tsx
new file mode 100644
index 00000000..286ec3f9
--- /dev/null
+++ b/src/components/GradientHeader/GradientHeader.tsx
@@ -0,0 +1,7 @@
+import { Logo } from '@/components/Header/Logo'
+
+export const GradientHeader = () => (
+  <div className="gradient-header">
+    <Logo />
+  </div>
+)
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index a389a902..53405b2a 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -7,7 +7,7 @@ interface Props {
 export const Header = ({ children }: Props) => {
   return (
     <header className="container my-8">
-      <div className="flex justify-end">{children}</div>
+      <div className="flex">{children}</div>
     </header>
   )
 }
diff --git a/src/components/LeftSidebar/LeftSidebar.tsx b/src/components/LeftSidebar/LeftSidebar.tsx
index 45296e25..63532227 100644
--- a/src/components/LeftSidebar/LeftSidebar.tsx
+++ b/src/components/LeftSidebar/LeftSidebar.tsx
@@ -1,19 +1,20 @@
-import { Logo } from '@/components/Header/Logo'
 import { SidebarButtons } from '@/components/LeftSidebar/SidebarButtons'
 import { UsefulLinks } from '@/components/LeftSidebar/UsefulLinks'
 import { LeftSidebarProps } from '@/components/LeftSidebar/types'
-import { CopyrightInfo } from './CopyrightInfo'
 
-export const LeftSidebar = ({ activeButton = 'communities', onSidebarButtonClick }: LeftSidebarProps) => {
+export const LeftSidebar = ({
+  activeButton = 'communities',
+  onSidebarButtonClick,
+  ConnectedComponent,
+}: LeftSidebarProps) => {
   return (
-    <aside className="min-h-screen w-[327px] border border-input-bg px-8 border-b-0 flex flex-col justify-between whitespace-nowrap">
-      <div>
-        <Logo className="mb-[56px] mt-[47px]" />
+    <aside className="min-h-screen w-[300px] border border-input-bg px-6 border-b-0 flex flex-col justify-between whitespace-nowrap bg-foreground">
+      <div className="mt-[42px]">
         <SidebarButtons onClick={onSidebarButtonClick} activeButton={activeButton} />
       </div>
       <div className="mb-4">
         <UsefulLinks />
-        <CopyrightInfo />
+        {ConnectedComponent && ConnectedComponent}
       </div>
     </aside>
   )
diff --git a/src/components/LeftSidebar/SidebarButtons.tsx b/src/components/LeftSidebar/SidebarButtons.tsx
index fa5a124c..7c8fbf7d 100644
--- a/src/components/LeftSidebar/SidebarButtons.tsx
+++ b/src/components/LeftSidebar/SidebarButtons.tsx
@@ -1,64 +1,57 @@
 import { Button } from '@/components/Button'
 import { SidebarButtonsProps } from '@/components/LeftSidebar/types'
-import Image from 'next/image'
-
-const ImageAsIcon = ({ src, alt }: { src: string; alt: string }) => (
-  <Image src={src} alt={alt} width={20} height={20} />
-)
 
 const DEFAULT_BUTTON_CLASSNAME = 'mb-[32px] pl-11'
 
 const START_ICON_CLASSES = 'left-[-28px] top-[2px]'
 
+interface SidebarButtonProps {
+  text: string
+  isActive: boolean
+  onClick?: () => void
+  buttonProps: {
+    id: string
+    name: string
+  }
+}
+const SidebarButton = ({ text, onClick, isActive, buttonProps }: SidebarButtonProps) => (
+  <Button
+    fullWidth
+    centerContent={false}
+    startIconClasses={START_ICON_CLASSES}
+    onClick={onClick}
+    className={DEFAULT_BUTTON_CLASSNAME}
+    variant={isActive ? 'sidebar-active' : 'borderless'}
+    buttonProps={buttonProps}
+  >
+    {text}
+  </Button>
+)
 export const SidebarButtons = ({ onClick, activeButton = 'communities' }: SidebarButtonsProps) => (
   <>
-    <Button
-      startIcon={<ImageAsIcon src="/images/sidemenu/user.svg" alt="User" />}
+    <SidebarButton
       onClick={() => onClick?.('user')}
-      fullWidth
-      variant={!activeButton || activeButton.startsWith('user') ? 'primary' : 'borderless'}
-      centerContent={false}
-      className={DEFAULT_BUTTON_CLASSNAME}
+      isActive={!activeButton || activeButton.startsWith('user')}
       buttonProps={{ id: 'Button_User', name: 'user' }}
-      startIconClasses={START_ICON_CLASSES}
-    >
-      My Collective
-    </Button>
-    <Button
-      startIcon={<ImageAsIcon src="/images/sidemenu/treasury.svg" alt="Treasury" />}
+      text="My Collective"
+    />
+    <SidebarButton
       onClick={() => onClick?.('treasury')}
-      fullWidth
-      variant={activeButton.startsWith('treasury') ? 'primary' : 'borderless'}
-      centerContent={false}
-      className={DEFAULT_BUTTON_CLASSNAME}
+      isActive={activeButton.startsWith('treasury')}
       buttonProps={{ id: 'Button_Treasury', name: 'treasury' }}
-      startIconClasses={START_ICON_CLASSES}
-    >
-      Treasury
-    </Button>
-    <Button
-      startIcon={<ImageAsIcon src="/images/sidemenu/proposals.svg" alt="Proposals" />}
+      text="Treasury"
+    />
+    <SidebarButton
       onClick={() => onClick?.('proposals')}
-      fullWidth
-      variant={activeButton.startsWith('proposals') ? 'primary' : 'borderless'}
-      centerContent={false}
-      className={DEFAULT_BUTTON_CLASSNAME}
+      isActive={activeButton.startsWith('proposals')}
       buttonProps={{ id: 'Button_Proposals', name: 'proposals' }}
-      startIconClasses={START_ICON_CLASSES}
-    >
-      Proposals
-    </Button>
-    <Button
-      startIcon={<ImageAsIcon src="/images/sidemenu/communities.svg" alt="Communities" />}
+      text="Proposals"
+    />
+    <SidebarButton
       onClick={() => onClick?.('communities')}
-      fullWidth
-      centerContent={false}
-      className={DEFAULT_BUTTON_CLASSNAME}
+      isActive={activeButton.startsWith('communities')}
       buttonProps={{ id: 'Button_Communities', name: 'communities' }}
-      variant={activeButton.startsWith('communities') ? 'primary' : 'borderless'}
-      startIconClasses={START_ICON_CLASSES}
-    >
-      Communities
-    </Button>
+      text="Communities"
+    />
   </>
 )
diff --git a/src/components/LeftSidebar/UsefulLinks.tsx b/src/components/LeftSidebar/UsefulLinks.tsx
index 23da67e0..fbf409c7 100644
--- a/src/components/LeftSidebar/UsefulLinks.tsx
+++ b/src/components/LeftSidebar/UsefulLinks.tsx
@@ -5,7 +5,7 @@ import { currentLinks } from '@/components/LeftSidebar/links'
 export const UsefulLinks = () => (
   <div className="mt-[4rem]">
     <Paragraph className="mb-[24px] text-[16px]">Useful links</Paragraph>
-    <div className="flex flex-col">
+    <div className="flex flex-col pl-[16px]">
       <Link href={currentLinks.rif} variant="menu" className="mb-[16px] text-[16px]" target="_blank">
         RIF
       </Link>
diff --git a/src/components/LeftSidebar/types.ts b/src/components/LeftSidebar/types.ts
index 714dfc05..f812af7b 100644
--- a/src/components/LeftSidebar/types.ts
+++ b/src/components/LeftSidebar/types.ts
@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 export type SidebarButtonType = 'communities' | 'treasury' | 'proposals' | 'user'
 
 export interface SidebarButtonsProps {
@@ -8,4 +10,5 @@ export interface SidebarButtonsProps {
 export interface LeftSidebarProps {
   activeButton?: SidebarButtonType
   onSidebarButtonClick?: (activeButton: SidebarButtonType) => void
+  ConnectedComponent?: ReactNode
 }
diff --git a/src/components/MainContainer/MainContainer.tsx b/src/components/MainContainer/MainContainer.tsx
index c26196c2..b7514084 100644
--- a/src/components/MainContainer/MainContainer.tsx
+++ b/src/components/MainContainer/MainContainer.tsx
@@ -5,14 +5,14 @@ import { Footer } from '@/components/Footer'
 import { ConnectButton, Header } from '@/components/Header'
 import { StatefulSidebar } from '@/components/MainContainer/StatefulSidebar'
 import { shortAddress } from '@/lib/utils'
-import { usePathname, useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation'
 import { FC, ReactNode, useEffect, useState } from 'react'
 import { useAccount, useDisconnect } from 'wagmi'
 import { Alert } from '../Alert'
 import { AccountAddress } from '../Header/AccountAddress'
 import { DisconnectWalletModal } from '../Modal/DisconnectWalletModal'
-import { ProtectedContent } from '../ProtectedContent/ProtectedContent'
 import { MainContainerContent } from './MainContainerContent'
+import { GradientHeader } from '@/components/GradientHeader/GradientHeader'
 
 interface Props {
   children: ReactNode
@@ -39,35 +39,40 @@ export const MainContainer: FC<Props> = ({ children, notProtected = false }) =>
     setHasMounted(true)
   }, [])
 
+  const ConnectedComponent = () => (
+    <>
+      {hasMounted && (
+        <>
+          <Header>
+            {isConnected ? (
+              <AccountAddress
+                address={address}
+                shortAddress={shortAddress(address)}
+                onLogoutClick={modal.openModal}
+              />
+            ) : (
+              <ConnectButton />
+            )}
+          </Header>
+          {modal.isModalOpened && (
+            <DisconnectWalletModal
+              onClose={modal.closeModal}
+              onConfirm={handleDisconnect}
+              onCancel={modal.closeModal}
+              address={address}
+            />
+          )}
+        </>
+      )}
+    </>
+  )
   return (
     <>
+      <GradientHeader />
       <div className="flex">
-        <StatefulSidebar />
+        <StatefulSidebar ConnectedComponent={<ConnectedComponent />} />
         <div className="flex flex-1 flex-col justify-between">
-          <main className="px-[24px] mb-[100px]">
-            {hasMounted && (
-              <>
-                <Header>
-                  {isConnected ? (
-                    <AccountAddress
-                      address={address}
-                      shortAddress={shortAddress(address)}
-                      onLogoutClick={modal.openModal}
-                    />
-                  ) : (
-                    <ConnectButton />
-                  )}
-                </Header>
-                {modal.isModalOpened && (
-                  <DisconnectWalletModal
-                    onClose={modal.closeModal}
-                    onConfirm={handleDisconnect}
-                    onCancel={modal.closeModal}
-                    address={address}
-                  />
-                )}
-              </>
-            )}
+          <main className="px-[32px] py-[34px] mb-[100px]">
             {message && (
               <Alert {...message} onDismiss={message.onDismiss === null ? null : () => setMessage(null)} />
             )}
diff --git a/src/components/MainContainer/StatefulSidebar.tsx b/src/components/MainContainer/StatefulSidebar.tsx
index 516a9544..3c577147 100644
--- a/src/components/MainContainer/StatefulSidebar.tsx
+++ b/src/components/MainContainer/StatefulSidebar.tsx
@@ -1,12 +1,22 @@
 import { LeftSidebar } from '@/components/LeftSidebar/LeftSidebar'
 import { SidebarButtonType } from '@/components/LeftSidebar/types'
 import { usePathname, useRouter } from 'next/navigation'
+import { ReactNode } from 'react'
 
+interface Props {
+  ConnectedComponent?: ReactNode
+}
 // @TODO we need to confirm the navigation part because it might have subpaths like /proposals/create
-export const StatefulSidebar = () => {
+export const StatefulSidebar = ({ ConnectedComponent }: Props) => {
   const router = useRouter()
   const pathname = usePathname()?.substring(1) as SidebarButtonType
   const onSidebarNavigate = (activeButton: SidebarButtonType) => router.push(`/${activeButton}`)
 
-  return <LeftSidebar onSidebarButtonClick={onSidebarNavigate} activeButton={pathname} />
+  return (
+    <LeftSidebar
+      onSidebarButtonClick={onSidebarNavigate}
+      activeButton={pathname}
+      ConnectedComponent={ConnectedComponent}
+    />
+  )
 }
diff --git a/src/components/MetricsCard/MetricsCard.tsx b/src/components/MetricsCard/MetricsCard.tsx
index f33a6595..3585bbff 100644
--- a/src/components/MetricsCard/MetricsCard.tsx
+++ b/src/components/MetricsCard/MetricsCard.tsx
@@ -67,16 +67,12 @@ export const MetricsCard: FC<MetricsCardProps> = ({
         </Paragraph>
       </div>
       {fiatAmount && (
-        <Paragraph
-          variant="normal"
-          className="text-[13px] text-white text-opacity-80 leading-4"
-          data-testid="FiatAmount"
-        >
+        <Span variant="light" className="text-[13px] text-opacity-80 leading-4" data-testid="FiatAmount">
           {fiatAmount}
-        </Paragraph>
+        </Span>
       )}
       {contractAddress && (
-        <a href={`${EXPLORER_URL}/address/${contractAddress}`} target="_blank">
+        <a href={`${EXPLORER_URL}/address/${contractAddress}`} target="_blank" className="mt-2">
           <BoxIcon size={20} className="inline-block mr-1" />
           <Span className="underline" size="small">
             {shortAddress(contractAddress)}