fix(governance): network paramater change in batch proposals (#5869)

apps/governance/src/components/collapsible-toggle/collapsible-toggle.tsx

@@ -15,19 +15,16 @@ export const CollapsibleToggle = ({
   dataTestId,
   children,
 }: CollapsibleToggleProps) => {
-  const classes = classnames(
-    'mb-4 transition-transform ease-in-out duration-300',
-    {
-      'rotate-180': toggleState,
-    }
-  );
+  const classes = classnames('transition-transform ease-in-out duration-300', {
+    'rotate-180': toggleState,
+  });
 
   return (
     <button
       onClick={() => setToggleState(!toggleState)}
       data-testid={dataTestId}
     >
-      <div className="flex items-center gap-3">
+      <div className="flex items-baseline gap-3">
         {children}
         <div className={classes} data-testid="toggle-icon-wrapper">
           <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={20} />

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.tsx

@@ -36,8 +36,8 @@ import { type Proposal, type BatchProposal } from '../../types';
 import { type ProposalTermsFieldsFragment } from '../../__generated__/Proposals';
 import { differenceInHours, format, formatDistanceToNowStrict } from 'date-fns';
 import { DATE_FORMAT_DETAILED } from '../../../../lib/date-formats';
-import { getIndicatorStyle } from '../proposal/colours';
 import { MarketName } from '../proposal/market-name';
+import { Indicator } from '../proposal/indicator';
 
 const ProposalTypeTags = ({
   proposal,
@@ -250,7 +250,7 @@ const ProposalDetails = ({
             }}
             components={{
               // @ts-ignore children passed by i18next
-              lozenge: <Lozenge />,
+              lozenge: <Lozenge className="text-xs" />,
             }}
           />
         );
@@ -312,8 +312,11 @@ const ProposalDetails = ({
           {proposal.subProposals.map((p, i) => {
             if (!p?.terms) return null;
             return (
-              <li key={i} className="flex gap-3 items-center">
-                <span className={getIndicatorStyle(i + 1)}>{i + 1}</span>
+              <li
+                key={i}
+                className="grid grid-cols-[40px_minmax(0,1fr)] grid-rows-1 gap-3 items-center"
+              >
+                <Indicator indicator={i + 1} />
                 <span>
                   <div>{renderDetails(p.terms)}</div>
                   <SubProposalStateText

apps/governance/src/routes/proposals/components/proposal-json/proposal-json.tsx

@@ -18,7 +18,7 @@ export const ProposalJson = ({ proposal }: { proposal?: unknown }) => {
         <SubHeading title={t('proposalJson')} />
       </CollapsibleToggle>
 
-      {showDetails && <SyntaxHighlighter data={proposal} />}
+      {showDetails && <SyntaxHighlighter size="smaller" data={proposal} />}
     </section>
   );
 };

apps/governance/src/routes/proposals/components/proposal-market-changes/proposal-market-changes.tsx

@@ -143,14 +143,14 @@ export const ProposalMarketChanges = ({
         <SubHeading
           title={
             <>
-              {t('UpdateToMarket')}: <MarketName marketId={marketId} />
+              {t('UpdateToMarket')}: <MarketName marketId={marketId} truncate />
             </>
           }
         />
       </CollapsibleToggle>
 
       {showChanges && (
-        <div className="mb-6">
+        <div className="mb-6 bg-vega-cdark-900 p-2 rounded-lg">
           <JsonDiff left={left as JsonValue} right={right as JsonValue} />
         </div>
       )}

apps/governance/src/routes/proposals/components/proposal/colours.ts

@@ -16,21 +16,21 @@ const getColour = (indicator: number, max = COLOURS.length) => {
 
 export const getStyle = (indicator: number, max = COLOURS.length) =>
   classNames({
-    'bg-vega-yellow-400 after:bg-vega-yellow-400':
+    'bg-vega-yellow-400 before:bg-vega-yellow-400':
       'yellow' === getColour(indicator, max),
-    'bg-vega-green-400 after:bg-vega-green-400':
+    'bg-vega-green-400 before:bg-vega-green-400':
       'green' === getColour(indicator, max),
-    'bg-vega-blue-400 after:bg-vega-blue-400':
+    'bg-vega-blue-400 before:bg-vega-blue-400':
       'blue' === getColour(indicator, max),
-    'bg-vega-purple-400 after:bg-vega-purple-400':
+    'bg-vega-purple-400 before:bg-vega-purple-400':
       'purple' === getColour(indicator, max),
-    'bg-vega-pink-400 after:bg-vega-pink-400':
+    'bg-vega-pink-400 before:bg-vega-pink-400':
       'pink' === getColour(indicator, max),
-    'bg-vega-orange-400 after:bg-vega-orange-400':
+    'bg-vega-orange-400 before:bg-vega-orange-400':
       'orange' === getColour(indicator, max),
-    'bg-vega-red-400 after:bg-vega-red-400':
+    'bg-vega-red-400 before:bg-vega-red-400':
       'red' === getColour(indicator, max),
-    'bg-vega-clight-600 after:bg-vega-clight-600':
+    'bg-vega-clight-600 before:bg-vega-clight-600':
       'none' === getColour(indicator, max),
   });
 
@@ -40,7 +40,7 @@ export const getIndicatorStyle = (indicator: number) =>
     'text-border-1',
     getStyle(indicator),
     // Comment below if you want to remove the "chevron"
-    'relative mr-[11px]',
-    'after:absolute after:z-[-1] after:top-1 after:right-[-11px] after:rounded-sm',
-    "after:w-[22.62px] after:h-[22.62px] after:rotate-45 after:content-['']"
+    'relative mr-[11px] z-1',
+    'before:absolute before:z-0 before:top-1 before:right-[-11px] before:rounded-sm',
+    "before:w-[22.62px] before:h-[22.62px] before:rotate-45 before:content-['']"
   );

apps/governance/src/routes/proposals/components/proposal/indicator.tsx

@@ -0,0 +1,9 @@
+import { getIndicatorStyle } from './colours';
+
+export const Indicator = ({ indicator }: { indicator: number }) => (
+  <div className={getIndicatorStyle(indicator)}>
+    <span className="absolute top-0 left-0 p-1 w-full text-center z-1">
+      {indicator}
+    </span>
+  </div>
+);

apps/governance/src/routes/proposals/components/proposal/market-name.tsx

@@ -1,6 +1,13 @@
 import { useMarketInfoQuery } from '@vegaprotocol/markets';
+import { truncateMiddle } from '@vegaprotocol/ui-toolkit';
 
-export const MarketName = ({ marketId }: { marketId?: string }) => {
+export const MarketName = ({
+  marketId,
+  truncate,
+}: {
+  marketId?: string;
+  truncate?: boolean;
+}) => {
   const { data } = useMarketInfoQuery({
     variables: {
       marketId: marketId || '',
@@ -8,7 +15,7 @@ export const MarketName = ({ marketId }: { marketId?: string }) => {
     skip: !marketId,
   });
 
-  return (
-    <span>{data?.market?.tradableInstrument.instrument.code || marketId}</span>
-  );
+  const id = truncate ? truncateMiddle(marketId || '') : marketId;
+
+  return <span>{data?.market?.tradableInstrument.instrument.code || id}</span>;
 };

apps/governance/src/routes/proposals/components/proposal/proposal-change-details.tsx

@@ -1,3 +1,4 @@
+import { Trans, useTranslation } from 'react-i18next';
 import { type ProposalTermsFieldsFragment } from '../../__generated__/Proposals';
 import { type Proposal, type BatchProposal } from '../../types';
 import { ListAsset } from '../list-asset';
@@ -12,8 +13,10 @@ import {
 import { ProposalUpdateBenefitTiers } from '../proposal-update-benefit-tiers';
 import { ProposalUpdateMarketState } from '../proposal-update-market-state';
 import { ProposalVolumeDiscountProgramDetails } from '../proposal-volume-discount-program-details';
-import { getIndicatorStyle } from './colours';
 import { type ProposalNode } from './proposal-utils';
+import { Lozenge } from '@vegaprotocol/ui-toolkit';
+import { Indicator } from './indicator';
+import { SubHeading } from '../../../../components/heading';
 
 export const ProposalChangeDetails = ({
   proposal,
@@ -26,6 +29,7 @@ export const ProposalChangeDetails = ({
   restData: ProposalNode | null;
   indicator?: number;
 }) => {
+  const { t } = useTranslation();
   let details = null;
 
   switch (terms.change.__typename) {
@@ -108,6 +112,25 @@ export const ProposalChangeDetails = ({
           'rewards.activityStreak.benefitTiers'
       ) {
         details = <ProposalUpdateBenefitTiers change={terms.change} />;
+      } else {
+        details = (
+          <div className="mb-4">
+            <SubHeading title={t(terms.change.__typename as string)} />
+            <span>
+              <Trans
+                i18nKey="Change <lozenge>{{key}}</lozenge> to <lozenge>{{value}}</lozenge>"
+                values={{
+                  key: terms.change.networkParameter.key,
+                  value: terms.change.networkParameter.value,
+                }}
+                components={{
+                  // @ts-ignore children passed by i18next
+                  lozenge: <Lozenge />,
+                }}
+              />
+            </span>
+          </div>
+        );
       }
 
       break;
@@ -120,10 +143,12 @@ export const ProposalChangeDetails = ({
     }
   }
 
-  if (indicator != null) {
+  if (indicator != null && details != null) {
     details = (
-      <div className="flex gap-3 mb-3">
-        <div className={getIndicatorStyle(indicator)}>{indicator}</div>
+      <div className="grid grid-cols-[40px_minmax(0,1fr)] grid-rows-1 gap-3 mb-3">
+        <div className="w-10">
+          <Indicator indicator={indicator} />
+        </div>
         <div>{details}</div>
       </div>
     );

apps/governance/src/routes/proposals/components/proposal/proposal.tsx

@@ -60,7 +60,7 @@ export const Proposal = ({ proposal, restData }: ProposalProps) => {
         <ProposalDescription description={proposal.rationale.description} />
       </div>
 
-      <div className="mb-4">
+      <div className="mb-4 flex flex-col gap-0">
         {proposal.__typename === 'Proposal' ? (
           <ProposalChangeDetails
             proposal={proposal}

apps/governance/src/routes/proposals/components/proposals-list/proposals-list.tsx

@@ -206,7 +206,7 @@ export const ProposalsList = ({
         />
       )}
 
-      <section className="-mx-4 p-4 mb-8 bg-vega-dark-100">
+      <section className="-mx-4 p-4 mb-8 bg-vega-cdark-900 rounded-l-sm">
         <SubHeading title={t('openProposals')} />
 
         {sortedProposals.open.length > 0 ||

apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.tsx

@@ -15,8 +15,8 @@ import {
   type VoteFieldsFragment,
 } from '../../__generated__/Proposals';
 import { useBatchVoteInformation } from '../../hooks/use-vote-information';
-import { getIndicatorStyle } from '../proposal/colours';
 import { MarketName } from '../proposal/market-name';
+import { Indicator } from '../proposal/indicator';
 
 export const CompactVotes = ({ number }: { number: BigNumber }) => (
   <CompactNumber
@@ -300,13 +300,11 @@ const VoteBreakdownBatchSubProposal = ({
     </>
   ) : null;
 
-  const indicatorElement = indicator && (
-    <span className={getIndicatorStyle(indicator)}>{indicator}</span>
-  );
+  const indicatorElement = indicator && <Indicator indicator={indicator} />;
 
   return (
     <div className="mb-6">
-      <div className="flex items-baseline gap-3 mb-3">
+      <div className="flex items-center gap-3 mb-3">
         {indicatorElement}
         <h4>
           {t(terms.change.__typename)} {marketName}

libs/tailwindcss-config/src/vega-custom-classes.js

@@ -23,13 +23,14 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
       background: colors.white,
       color: colors.neutral[700],
       border: `1px solid ${colors.neutral[300]}`,
+      borderRadius: '0.5rem',
     },
     '.syntax-highlighter-wrapper-sm .hljs': {
-      fontSize: '0.875rem',
-      lineHeight: '1.25rem',
+      fontSize: '0.75rem',
+      lineHeight: '1rem',
     },
     '.dark .syntax-highlighter-wrapper .hljs': {
-      background: colors.neutral[800],
+      background: theme.colors.vega.cdark[900],
       color: theme.colors.vega.green.DEFAULT,
       border: 0,
     },