fix(ui): Footer - use I18N file

relative-ci · Sep 22, 2023 · 526b0e6 · 526b0e6
1 parent 6d253f1
commit 526b0e6
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git a/packages/ui/src/app/header/header.tsx b/packages/ui/src/app/header/header.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 import cx from 'classnames';
 
 import config from '../../config.json';
+import I18N from '../../i18n';
 import { Container } from '../../ui/container';
+import { Icon } from '../../ui/icon';
 import { FlexStack } from '../../layout/flex-stack';
 import { JobsHeader } from '../../components/jobs-header';
 import css from './header.module.css';
-import { Icon } from '../../ui';
 
 interface HeaderProps {
   jobs: React.ComponentProps<typeof JobsHeader>['jobs'];
@@ -17,7 +18,13 @@ export const Header = ({ className = '', jobs }: HeaderProps & React.ComponentPr
     <FlexStack space="small" alignItems="center">
       <JobsHeader className={css.jobs} jobs={jobs} />
       <div className={css.tools}>
-        <a href={config.gitHubUrl} target="_blank" rel="noopener noreferrer" className={css.toolsGitHub}>
+        <a
+          href={config.gitHubUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={css.toolsGitHub}
+          title={I18N.GITHUB_LINK_TITLE}
+        >
           <Icon glyph={Icon.ICONS.GITHUB} size="large" className={css.toolsGitHubIcon} />
         </a>
       </div>

diff --git a/packages/ui/src/components/summary/summary.tsx b/packages/ui/src/components/summary/summary.tsx
@@ -98,6 +98,7 @@ export const Summary = ({
             className={css.item}
             metricId={metricId}
             data={data}
+            size="large"
             loading={loading}
             customLink={summaryItemLink}
             showDelta={showSummaryItemDelta}
@@ -115,7 +116,6 @@ export const Summary = ({
             metricId={metricId}
             data={data}
             customLink={summaryItemLink}
-            size="small"
             loading={loading}
             showDelta={showSummaryItemDelta}
             showBaseline={false}

diff --git a/packages/ui/src/i18n.js b/packages/ui/src/i18n.js
@@ -21,4 +21,9 @@ export default {
 
   RESET_FILTERS: 'Reset filters',
   VIEW_ALL: 'View all entries',
+
+  GITHUB_LINK_TITLE: 'View BundleStats project on GitHub',
+  REPORT_ISSUE: 'Report issue',
+  REPORT_ISSUE_LINK_TITLE: 'Open issue on GitHub',
+  APP_LINK_TITLE: 'Visit RelativeCI - In-depth bundle stats analysis and monitoring',
 };
diff --git a/packages/ui/src/layout/footer/footer.jsx b/packages/ui/src/layout/footer/footer.jsx
@@ -4,6 +4,7 @@ import cx from 'classnames';
 
 import config from '../../config.json';
 import { Container } from '../../ui/container';
+import I18N from '../../i18n';
 import { Box } from '../box';
 import { Stack } from '../stack';
 import css from './footer.module.css';
@@ -26,27 +27,27 @@ export const Footer = ({ className, version }) => (
             <ExternalLink
               href={config.gitHubUrl}
               className={cx(css.navItem, css.navLink)}
-              title="In-depth bundle analyzer for webpack(bundle size, assets, modules, packages)"
+              title={I18N.GITHUB_LINK_TITLE}
             >
               {`BundleStats ${version}`}
             </ExternalLink>
             <span className={css.navItem}>
               <ExternalLink
                 href={`${config.gitHubUrl}/issues`}
                 className={css.navLink}
-                title="Navigate to GitHub and open issue"
+                title={I18N.REPORT_ISSUE_LINK_TITLE}
               >
-                Report issue
+                {I18N.REPORT_ISSUE}
               </ExternalLink>
             </span>
             <span className={css.navItem}>
               <span>Made by </span>
               <ExternalLink
                 className={css.navLink}
                 href={config.siteUrl}
-                title="Go to RelativeCI - Specialized insights for web bundles"
+                title={I18N.APP_LINK_TITLE}
               >
-                RelativeCI
+                {config.appName}
               </ExternalLink>
             </span>
           </nav>