fix: amendments pages styling updates (#878)

## High Level Overview of Change  Address #875 - [x] Align dropdown items in the NavBar to the left. - [x] Increase font weight for the right labels of the Amendment Summary page. - [x] Fix vnull issue on Amendment Summary rippled version. - [x] Add an ETA to indicate the time amendment would be enabled for ones that has more than 80% votes. - [x] Highlight color for amendments more than 80% on Amendments List page - [x] Reduce the font size for Yays Nays to match the top of the page. - [x] The y-axis of the graph should show percentage instead of count. - [x] Make Enabled column all caps. - [x] Rename Voters column to UNL Voters. - [x] Rename Enabled (on) to Enabled on. - [x] rippled version linked to rippled release for that version. - [x] The details link should open a new tab. - [x] Yays and Nays validators should link to the validator page on the Explorer. - [x] Capitalize the labels on Validator's Voting page. - [x] Fix loader timing issue on Amendments List page. - [x] tx column renamed to Enable tx - [x] sort to have amendments with eta on top of the amendments list ### Context of Change  ### Type of Change  - [x] Bug fix (non-breaking change which fixes an issue) - [x] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Refactor (non-breaking change that only restructures code) - [ ] Tests (You added tests for code that already exists, or your new feature included in this PR) - [ ] Documentation Updates - [ ] Translation Updates - [ ] Release ## Before / After ### Amendments List Page ![Screenshot 2023-11-20 at 8 18 30 PM](https://github.com/ripple/explorer/assets/71317875/6b0bd5dd-c698-49a3-8260-deb9a8b182b0) ### Amendment Summary Page #### Simple ![Screenshot 2023-11-20 at 8 32 43 PM](https://github.com/ripple/explorer/assets/71317875/b0af8ca7-b98f-40d5-9142-d17a83ae7ebb) #### Graph ![Screenshot 2023-11-27 at 2 18 58 PM](https://github.com/ripple/explorer/assets/71317875/b9468589-9ee0-46a7-892a-2c215dae7486) #### Yeas/Nays ![Screenshot 2023-11-20 at 8 33 31 PM](https://github.com/ripple/explorer/assets/71317875/7d67965b-3f4c-489e-b83f-ebf98d0b9df1) ### Validator's Voting Tab ![Screenshot 2023-11-20 at 8 55 27 PM](https://github.com/ripple/explorer/assets/71317875/961bb090-e150-4ec8-9c6e-5fc9dd050342)
ripple · Nov 28, 2023 · 5c3150e · 5c3150e
1 parent aa2df01
commit 5c3150e
Show file tree

Hide file tree

Showing 20 changed files with 175 additions and 61 deletions.
diff --git a/public/locales/en-US/translations.json b/public/locales/en-US/translations.json
@@ -509,11 +509,13 @@
   "eta": "eta",
   "amendment_summary": "Amendment Summary",
   "not": "not",
-  "tx": "tx",
+  "enable_tx": "Enable tx",
   "all": "all",
   "yeas_count": "# of Yea Votes: {{yeas_count}}",
   "nays_count": "# of Nay Votes: {{nays_count}}",
-  "no_of_validators": "# of Validators",
+  "yeas_percent": "% of Yea Votes: {{yeas_percent}}%",
+  "nays_percent": "% of Nay Votes: {{nays_percent}}%",
+  "%_of_validators": "% of Validators",
   "amendment_not_found": "Amendment not found",
   "check_amendment_key": "Please check your amendment key",
   "did_document": "DID Document",

diff --git a/public/locales/es-ES/translations.json b/public/locales/es-ES/translations.json
@@ -506,14 +506,16 @@
   "amendment_summary": null,
   "not_enabled": null,
   "enabled_on": null,
-  "tx": null,
+  "enable_tx": null,
   "yeas_all": null,
   "nays_all": null,
   "yeas_unl": null,
   "nays_unl": null,
   "yeas_count": null,
   "nays_count": null,
-  "no_of_validators": null,
+  "yeas_percent": null,
+  "nays_percent": null,
+  "%_of_validators": null,
   "amendment_not_found": null,
   "check_amendment_key": null,
   "note": null,

diff --git a/public/locales/fr-FR/translations.json b/public/locales/fr-FR/translations.json
@@ -508,11 +508,13 @@
   "eta": null,
   "amendment_summary": null,
   "not": null,
-  "tx": null,
+  "enable_tx": null,
   "all": null,
   "yeas_count": null,
   "nays_count": null,
-  "no_of_validators": null,
+  "yeas_percent": null,
+  "nays_percent": null,
+  "%_of_validators": null,
   "amendment_not_found": null,
   "check_amendment_key": null,
   "note": null,

diff --git a/public/locales/ja-JP/translations.json b/public/locales/ja-JP/translations.json
@@ -507,11 +507,13 @@
   "eta": null,
   "amendment_summary": null,
   "not": null,
-  "tx": null,
+  "enable_tx": null,
   "all": null,
   "yeas_count": null,
   "nays_count": null,
-  "no_of_validators": null,
+  "yeas_percent": null,
+  "nays_percent": null,
+  "%_of_validators": null,
   "amendment_not_found": null,
   "check_amendment_key": null,
   "note": null,

diff --git a/public/locales/ko-KR/translations.json b/public/locales/ko-KR/translations.json
@@ -505,11 +505,13 @@
   "eta": null,
   "amendment_summary": null,
   "not": null,
-  "tx": null,
+  "enable_tx": null,
   "all": null,
   "yeas_count": null,
   "nays_count": null,
-  "no_of_validators": null,
+  "yeas_percent": null,
+  "nays_percent": null,
+  "%_of_validators": null,
   "amendment_not_found": null,
   "check_amendment_key": null,
   "note": null,

diff --git a/src/containers/Amendment/BarChartVoting.tsx b/src/containers/Amendment/BarChartVoting.tsx
@@ -18,7 +18,7 @@ import {
   GREY_0,
   GREY_600,
   GREY_800,
-  MAGENTA_500,
+  MAGENTA_700,
 } from '../shared/utils'
 
 interface Props {
@@ -43,11 +43,25 @@ const CustomTooltip = ({
             yeas_count: payload ? payload[0].payload.yeas : 0,
           })}
         </p>
+        <p className="value">
+          {t('yeas_percent', {
+            yeas_percent: payload
+              ? payload[0].payload.yeas_percent.toFixed(2)
+              : 0,
+          })}
+        </p>
         <p className="value">
           {t('nays_count', {
             nays_count: payload ? payload[0].payload.nays : 0,
           })}
         </p>
+        <p className="value">
+          {t('nays_percent', {
+            nays_percent: payload
+              ? payload[0].payload.nays_percent.toFixed(2)
+              : 0,
+          })}
+        </p>
       </div>
     )
   }
@@ -102,7 +116,7 @@ export const BarChartVoting = ({ data }: Props) => {
           >
             <Label
               className="y-label"
-              value={t('no_of_validators')}
+              value={t('%_of_validators')}
               angle={-90}
               position="insideTop"
               dx={45}
@@ -111,7 +125,7 @@ export const BarChartVoting = ({ data }: Props) => {
             />
           </YAxis>
           <Bar
-            dataKey="yeas"
+            dataKey="yeas_percent"
             barSize={30}
             fill={GREEN_400}
             radius={[4, 4, 0, 0]}
@@ -120,9 +134,9 @@ export const BarChartVoting = ({ data }: Props) => {
             onMouseLeave={() => setShowTooltips(false)}
           />
           <Bar
-            dataKey="nays"
+            dataKey="nays_percent"
             barSize={30}
-            fill={MAGENTA_500}
+            fill={MAGENTA_700}
             radius={[4, 4, 0, 0]}
             isAnimationActive={false}
             onMouseOver={() => setShowTooltips(true)}

diff --git a/src/containers/Amendment/Simple.tsx b/src/containers/Amendment/Simple.tsx
@@ -20,10 +20,14 @@ interface SimpleProps {
   width: number
 }
 
-const DATE_OPTIONS_AMENDMEND = {
+const DATE_OPTIONS_AMENDMENT = {
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
   year: 'numeric',
   month: 'numeric',
   day: 'numeric',
+  hour12: true,
   timeZone: 'UTC',
 }
 
@@ -48,7 +52,7 @@ export const Simple = ({ data, validators, width }: SimpleProps) => {
 
   const renderDate = (date: string | null) =>
     date
-      ? localizeDate(new Date(date), language, DATE_OPTIONS_AMENDMEND)
+      ? localizeDate(new Date(date), language, DATE_OPTIONS_AMENDMENT)
       : DEFAULT_EMPTY_VALUE
 
   const renderRowIndex = () =>
@@ -73,15 +77,22 @@ export const Simple = ({ data, validators, width }: SimpleProps) => {
             </SimpleRow>
           </>
         )}
-        <SimpleRow label={t('eta')} className="eta">
-          {t('voting')}
-        </SimpleRow>
+        {data.eta ? (
+          <SimpleRow label={`${t('eta')} (UTC)`} className="eta yes">
+            {localizeDate(new Date(data.eta), language, DATE_OPTIONS_AMENDMENT)}
+          </SimpleRow>
+        ) : (
+          <SimpleRow label={t('eta')} className="eta no">
+            {t('voting')}
+          </SimpleRow>
+        )}
+
         <SimpleRow label={t('consensus')} className="badge consensus">
           {data.consensus}
         </SimpleRow>
       </>
     ) : data.tx_hash ? (
-      <SimpleRow label={`${t('enabled')} (${t('on')})`.trim()}>
+      <SimpleRow label={`${t('enabled')} ${t('on')} (UTC)`.trim()}>
         <RouteLink to={TRANSACTION_ROUTE} params={{ identifier: data.tx_hash }}>
           {' '}
           {renderDate(data.date)}
@@ -103,13 +114,22 @@ export const Simple = ({ data, validators, width }: SimpleProps) => {
         <SimpleRow label={t('name')}>{data.name}</SimpleRow>
         <SimpleRow label={t('amendment_id')}>{data.id}</SimpleRow>
         <SimpleRow label={t('introduced_in')}>
-          {`v${data.rippled_version}`}
+          {data.rippled_version ? (
+            <Link
+              to={`https://github.com/XRPLF/rippled/releases/tag/${data.rippled_version}`}
+              target="_blank"
+            >
+              {`v${data.rippled_version}`}
+            </Link>
+          ) : (
+            t('n_a')
+          )}
         </SimpleRow>
         {voting ? (
           <SimpleRow label={t('threshold')}>{data.threshold}</SimpleRow>
         ) : (
           data.tx_hash && (
-            <SimpleRow label={t('tx')}>
+            <SimpleRow label={t('enable_tx')}>
               <RouteLink
                 to={TRANSACTION_ROUTE}
                 params={{ identifier: data.tx_hash }}
@@ -121,7 +141,9 @@ export const Simple = ({ data, validators, width }: SimpleProps) => {
           )
         )}
         <SimpleRow label={t('details')}>
-          <Link to={details}>{details}</Link>
+          <Link to={details} target="_blank">
+            {details}
+          </Link>
         </SimpleRow>
         <SimpleRow label={t('status')}>{renderStatus()}</SimpleRow>
         {width < BREAKPOINTS.landscape && rowIndex}

diff --git a/src/containers/Amendment/Votes.tsx b/src/containers/Amendment/Votes.tsx
@@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { AmendmentData } from '../shared/vhsTypes'
 import SuccessIcon from '../shared/images/success.svg'
-import DomainLink from '../shared/components/DomainLink'
 import { RouteLink } from '../shared/routing'
 import { VALIDATOR_ROUTE } from '../App/routes'
 import { BarChartVoting } from './BarChartVoting'
@@ -45,24 +44,20 @@ export const Votes = ({ data, validators }: VotesProps) => {
   const voting = data.voted !== undefined
 
   const renderColumn = (label: string, validatorsList: Array<validatorUNL>) => (
-    <div className="votes-column">
+    <div className={`votes-column ${label}`}>
       <div className="label">{t(label)}</div>
       <div className="vals">
         {validatorsList.map((validator, index) => (
           <div className="row" key={validator.pubkey}>
             <span className="index">{index + 1}</span>
             <span className="val">
-              {validator.domain ? (
-                <DomainLink domain={validator.domain} />
-              ) : (
-                <RouteLink
-                  to={VALIDATOR_ROUTE}
-                  params={{ identifier: validator.pubkey }}
-                  className="key-link"
-                >
-                  {validator.pubkey}
-                </RouteLink>
-              )}
+              <RouteLink
+                to={VALIDATOR_ROUTE}
+                params={{ identifier: validator.pubkey }}
+                className="key-link"
+              >
+                {validator.domain ? validator.domain : validator.pubkey}
+              </RouteLink>
             </span>
             {validator.unl && (
               <span className="unl">
@@ -97,17 +92,37 @@ export const Votes = ({ data, validators }: VotesProps) => {
 
   const yeas = getYeas()
   const nays = getNays()
+  const validatorsUNLCount = validators.filter(
+    (val) => val.unl !== false,
+  ).length
+  const validatorsNonUNLCount = validators.filter(
+    (val) => val.unl === false,
+  ).length
 
   const aggregateVoting = () => [
     {
       label: 'UNL',
       yeas: yeas.filter((val) => val.unl !== false).length,
       nays: nays.filter((val) => val.unl !== false).length,
+      yeas_percent:
+        (yeas.filter((val) => val.unl !== false).length / validatorsUNLCount) *
+        100,
+      nays_percent:
+        (nays.filter((val) => val.unl !== false).length / validatorsUNLCount) *
+        100,
     },
     {
       label: 'non-UNL',
       yeas: yeas.filter((val) => val.unl === false).length,
       nays: nays.filter((val) => val.unl === false).length,
+      yeas_percent:
+        (yeas.filter((val) => val.unl === false).length /
+          validatorsNonUNLCount) *
+        100,
+      nays_percent:
+        (nays.filter((val) => val.unl === false).length /
+          validatorsNonUNLCount) *
+        100,
     },
   ]
 

diff --git a/src/containers/Amendment/amendment.scss b/src/containers/Amendment/amendment.scss
@@ -32,10 +32,11 @@
 
   .label {
     margin-bottom: 0;
+    font-weight: 600;
   }
 
   .index {
-    width: 150px;
+    width: 220px;
   }
 
   .badge {
@@ -61,7 +62,9 @@
 
   .value {
     &.eta {
-      color: $yellow-50 !important;
+      &.no{
+        color: $yellow-50 !important;
+      }
     }
   }
 
@@ -115,6 +118,7 @@
               overflow: hidden;
               max-width: fit-content;
               flex: 1;
+              font-size: 14px;
               text-overflow: ellipsis;
             }
 

diff --git a/src/containers/Amendment/test/amendment-summary.test.js b/src/containers/Amendment/test/amendment-summary.test.js
@@ -100,7 +100,9 @@ describe('Amendments Page container', () => {
         .at(2)
         .find('.value')
         .html(),
-    ).toBe('<div class="value">v1.12.0</div>')
+    ).toBe(
+      '<div class="value"><a href="https://github.com/XRPLF/rippled/releases/tag/1.12.0" target="_blank">v1.12.0</a></div>',
+    )
 
     expect(
       wrapper
@@ -117,7 +119,7 @@ describe('Amendments Page container', () => {
         .find('.value a')
         .html(),
     ).toBe(
-      '<a href="https://xrpl.org/known-amendments.html#mock-name">https://xrpl.org/known-amendments.html#mock-name</a>',
+      '<a href="https://xrpl.org/known-amendments.html#mock-name" target="_blank">https://xrpl.org/known-amendments.html#mock-name</a>',
     )
 
     expect(
@@ -166,7 +168,7 @@ describe('Amendments Page container', () => {
         .at(10)
         .find('.value')
         .html(),
-    ).toBe('<div class="value eta">voting</div>')
+    ).toBe('<div class="value eta no">voting</div>')
 
     expect(
       wrapper