feat: Wide pages (#1287)

* feat: Home wide (#1282)

* feat: home wide

* fix: chevron css bug

* requested changes

* feat: Wide profile page (#1286)

* fix: vote pagination bug

* wide profile page

* fix: use WiderContainer

* feat: proposal hero (#1288)

* feat: proposal hero colored layers WIP

* feat: white status pill, transparent category pill

* feat: grants hero

* feat: catalyst hero

* feat: ban name hero

* feat: proposal hero colors

* feat: finished proposals hero banner

* feat: add navigation to proposal page

* feat: adjust hero banner to match navigation on max width

* feat: proposal hero text display improvements

* feat: hide floating bar on smaller screen resolutions

* refactor: address pr comments

* feat: wider transparency page (#1293)

* feat: add wider container to transparency

* fix: monthly total shadows

* feat: wider proposal view (#1289)

* feat: proposal hero colored layers WIP

* feat: hide floating bar on smaller screen resolutions

* fix: hide floating bar under competing proposals sidebar, align text with proposal view components

* feat: break-lines for addresses and links

* feat: responsive proposal view without grid

* refactor: use wider container for proposal view

* feat: align comments icon, so it is at the left of the view box

* feat: align navigation with WiderContainer

* refactor: group navigation css

* refactor: address pr comments, remove (min-width: 320px)

* feat: 3-column proposal view (#1300)

* feat: proposal hero colored layers WIP

* feat: align navigation with WiderContainer

* refactor: group navigation css

* feat: 3-column proposal view on 1440 or higher res

* feat: minor position tweak for proposal detail section

* refactor: address pr comments, minor tweaks

* feat: font resizing for different breakpoints, improve font family consistence, proposal detail section sticky on the top

* feat: Wide proposals list (#1296)

* column sizes

* wide container

* ProposalPreviewCard

* requested changes

* card style tweaks

* margin fix

* feat: proposal scroll down heading (#1303)

* feat: adjust paddings

* fix: fix pills misalignment on smaller resolutions

* feat: floating header on scroll for desktop

* fix: floating header misbehaving in tablet

* fix: hide floating bar reactions on tablet

* fix: make proposal hero title a h1 element

* chore: address pr comments

* feat: proposal breadcrumbs (#1305)

* feat: breadcrumbs for single proposal view on mobile

* fix: add types for layout components

* feat: add opacity to breadcrumb arrow

* chore: address pr comments

* chore: use custom classnames for breadcrumb

* refactor: extract breadcrumb component & internationalization

* fix: import useTabletMediaQuery from dist instead of src (#1307)

* fix: proposal view render (#1309)

* fix: add react-responsive

* fix: weird proposal detail rendering & use one loader for proposal page

* fix: remove grid in proposals page

* fix: remove grid from transparency page and improve css (#1310)

* feat: footer is now wide on all pages (#1311)

* feat: add max-width to navbar (#1312)

* feat: add max-width to navbar

* feat: add wider container to debug

* feat: remove grid from projects page (#1313)

* feat: improve list and text item styles (#1314)

* fix: proposal cards (#1316)

* fix: proposal cards

* bids added

---------

Co-authored-by: lemu <[email protected]>
Co-authored-by: Andy Espagnolo <[email protected]>

package.json

@@ -107,6 +107,7 @@
     "react-intl": "^6.4.4",
     "react-loading-skeleton": "^3.1.0",
     "react-markdown": "^7.1.2",
+    "react-responsive": "^9.0.2",
     "react-select": "^5.3.2",
     "remark-parse": "^9.0.0",
     "remark-stringify": "^9.0.1",

src/back/routes/votes.ts

@@ -76,8 +76,11 @@ export async function getCachedVotes(req: Request) {
 
 async function getAddressVotesWithProposals(req: Request) {
   const address = validateAddress(req.params.address)
-  const first = Number(req.query.first) || undefined
-  const skip = Number(req.query.skip) || undefined
+  const numFirst = Number(req.query.first)
+  const numSkip = Number(req.query.skip)
+
+  const first = Number.isInteger(numFirst) ? numFirst : undefined
+  const skip = Number.isInteger(numSkip) ? numSkip : undefined
 
   const votes = await SnapshotService.getAddressesVotes([address], first, skip)
 

src/components/Category/CategoryOption.css

@@ -88,11 +88,26 @@
   color: var(--white-900);
 }
 
+.CategoryOption__IconContainer {
+  display: flex;
+}
+
 .CategoryOption__TitleContainer {
   width: 100%;
   justify-content: space-between;
 }
 
+.FilterHeader__Title,
+.CategoryOption__Title,
+.CategoryOption__SubcategoryItem:not(.CategoryOption__SubcategoryItem--active) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: initial;
+  display: -webkit-box !important;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
 .CategoryOption__Arrow svg {
   transition: all 0.5s ease 0s;
   transform: rotate(90deg);
@@ -131,6 +146,7 @@
 
 .CategoryOption__SubcategoryItem--active {
   position: relative;
+  overflow: unset;
 }
 
 .CategoryOption__SubcategoryItem--active::after {

src/components/Category/CategoryOption.tsx

@@ -54,7 +54,11 @@ export const getCategoryIcon = (type: string, variant?: CategoryIconVariant, siz
 
   const Icon = icons[type]
 
-  return <Icon size="24" />
+  return (
+    <div className="CategoryOption__IconContainer">
+      <Icon size="24" />
+    </div>
+  )
 }
 
 const getHref = (href: string | undefined, subtype: SubtypeOptions) => {
@@ -118,7 +122,7 @@ export default function CategoryOption({ active, type, className, count, subtype
         <span className="CategoryOption__TitleContainer">
           <span>
             {getCategoryIcon(type, CategoryIconVariant.Circled)}
-            <Text>{t(`category.${type}_title`)}</Text>
+            <Text className="CategoryOption__Title">{t(`category.${type}_title`)}</Text>
           </span>
           {hasSubtypes && (
             <span

src/components/Category/CategoryPill.tsx

@@ -8,7 +8,7 @@ import locations from '../../utils/locations'
 import Pill, { PillColor } from '../Common/Pill'
 import Link from '../Common/Typography/Link'
 
-const ColorsConfig: Record<ProposalType, PillColor> = {
+export const ColorsConfig: Record<ProposalType, PillColor> = {
   [ProposalType.POI]: PillColor.Green,
   [ProposalType.Catalyst]: PillColor.Blue,
   [ProposalType.BanName]: PillColor.Fuchsia,
@@ -28,6 +28,7 @@ type Props = {
   proposalType: ProposalType
   size?: 'sm' | 'md'
   isLink?: boolean
+  color?: PillColor
 }
 
 function getProposalTypeShortLabel(proposalType: ProposalType) {
@@ -38,22 +39,26 @@ function getProposalTypeLabel(proposalType: ProposalType) {
   return proposalType.replaceAll('_', ' ')
 }
 
-export default function CategoryPill({ className, proposalType, size = 'md', isLink = false }: Props) {
+export default function CategoryPill({ className, proposalType, size = 'md', isLink = false, color }: Props) {
   const isMobile = useMobileMediaQuery()
   const label = isMobile ? getProposalTypeShortLabel(proposalType) : getProposalTypeLabel(proposalType)
-  const colorsConfig = ColorsConfig[proposalType]
+  const pillColor = color || ColorsConfig[proposalType]
   const pillClassNames = classNames('CategoryPill', className)
   const href = isLink ? locations.proposals({ type: proposalType }) : undefined
   const pillSize = isMobile ? 'sm' : size
 
   const component = (
-    <Pill style="light" color={colorsConfig} className={pillClassNames} size={pillSize}>
+    <Pill style="light" color={pillColor} className={pillClassNames} size={pillSize}>
       {label}
     </Pill>
   )
 
   if (isLink) {
-    return <Link href={href}>{component}</Link>
+    return (
+      <Link href={href} className="Pill__Link">
+        {component}
+      </Link>
+    )
   }
 
   return component

src/components/Charts/LineChart.tsx

@@ -61,6 +61,7 @@ function LineChart({ label, data, unit, colors }: Props) {
 
   const options = {
     responsive: true,
+    aspectRatio: 2.5,
     plugins: {
       legend: {
         display: false,

src/components/Common/BoxTabs.css

@@ -1,3 +1,7 @@
+.BoxTabs .dcl.tabs .ui.container {
+  width: 100%;
+}
+
 .BoxTabs .dcl.tabs {
   display: flex !important;
   padding: 0 18px;

src/components/Common/Pill.css

@@ -10,6 +10,10 @@
   text-transform: uppercase;
 }
 
+.Pill__Link {
+  display: flex;
+}
+
 .Pill svg {
   margin-right: 0.25em;
 }
@@ -242,3 +246,21 @@
   border-color: var(--aqua-800);
   color: var(--aqua-800);
 }
+
+.Pill--light-white,
+.Pill--medium-white,
+.Pill--shiny-white,
+.Pill--outline-white {
+  background-color: transparent;
+  border-color: var(--white-900);
+  color: var(--white-900);
+}
+
+.Pill--light-transparent,
+.Pill--medium-transparent,
+.Pill--shiny-transparent,
+.Pill--outline-transparent {
+  border-color: transparent;
+  color: var(--white-900);
+  background: rgba(255, 255, 255, 0.16);
+}

src/components/Common/Pill.tsx

@@ -14,6 +14,8 @@ export enum PillColor {
   Orange = 'orange',
   Yellow = 'yellow',
   Aqua = 'aqua',
+  White = 'white',
+  Transparent = 'transparent',
 }
 
 export type Props = {

src/components/Common/ProposalPreviewCard/CategoryModule.css

@@ -0,0 +1,34 @@
+.ProposalPreviewCard__Section.CategoryModule {
+  display: flex;
+  justify-content: space-between;
+}
+
+.CategoryModule__Container {
+  display: flex;
+  gap: 16px;
+  justify-content: flex-start;
+  align-items: center;
+  min-width: 300px;
+  white-space: nowrap;
+}
+
+.CategoryModule__StatusPill {
+  display: flex;
+  min-width: 118px;
+  justify-content: flex-end;
+}
+
+.CategoryModule__GrantSize {
+  color: var(--black-400);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: var(--weight-medium);
+}
+
+.CategoryModule__Chevron {
+  visibility: hidden;
+}
+
+.CategoryModule__Chevron--visible {
+  visibility: visible;
+}

src/components/Common/ProposalPreviewCard/CategoryModule.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames'
+
+import { ProposalAttributes, ProposalType } from '../../../entities/Proposal/types'
+import useFormatMessage from '../../../hooks/useFormatMessage'
+import CategoryPill from '../../Category/CategoryPill'
+import ChevronRight from '../../Icon/ChevronRight'
+import StatusPill from '../../Status/StatusPill'
+
+import './CategoryModule.css'
+import ProposalPreviewCardSection from './ProposalPreviewCardSection'
+
+interface Props {
+  proposal: ProposalAttributes
+  isHovered?: boolean
+}
+
+function CategoryModule({ proposal, isHovered }: Props) {
+  const t = useFormatMessage()
+  const isGrant = proposal.type === ProposalType.Grant
+  const isBid = proposal.type === ProposalType.Bid
+  return (
+    <ProposalPreviewCardSection className="CategoryModule">
+      <div className="CategoryModule__Container">
+        <div className="CategoryModule__StatusPill">
+          <StatusPill status={proposal.status} />
+        </div>
+        <CategoryPill proposalType={proposal.type} />
+        {(isGrant || isBid) && (
+          <span className="CategoryModule__GrantSize">{`$${t('general.number', {
+            value: isGrant ? proposal.configuration.size : proposal.configuration.funding,
+          })}`}</span>
+        )}
+      </div>
+      <ChevronRight
+        className={classNames('CategoryModule__Chevron', isHovered && 'CategoryModule__Chevron--visible')}
+        color="var(--black-400)"
+      />
+    </ProposalPreviewCardSection>
+  )
+}
+
+export default CategoryModule