Add Netlify badge and improve code readability

Added Netlify badge to the footer of the left navigation bar across multiple pages as a mark of acknowledgement for the service. This was achieved by creating a new `LeftNavFooter` component and importing it in necessary files. Additionally, minor indentation and syntax adjustments have been made in these files for improved code readability and overall code quality.
finos · Nov 8, 2023 · 2661f07 · 2661f07
1 parent 7c2927b
commit 2661f07
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 11 deletions.
diff --git a/code/src/ui/src/components/LeftNavFooter.tsx b/code/src/ui/src/components/LeftNavFooter.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const LeftNavFooter: React.FC = () => {
+    return (
+        <div className="design-system-editor-left-nav-footer">
+            <a href="https://www.netlify.com">
+                <img src="https://www.netlify.com/v3/img/components/netlify-color-bg.svg"
+                     alt="Deploys by Netlify"/>
+            </a>
+        </div>
+    )
+}
+
diff --git a/code/src/ui/src/pages/DesignSystemPage.css b/code/src/ui/src/pages/DesignSystemPage.css
@@ -23,6 +23,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    gap: 8px
 }
 
 .design-system-editor-left-nav-footer {
@@ -62,7 +63,7 @@
 }
 
 .darkmode.design-system-editor-right-content {
-    background-color: var(--dm-background) !;
+    background-color: var(--dm-background) !important;
     color: var(--dm-on-background);
     min-height: 80vh;
 }

diff --git a/code/src/ui/src/pages/WelcomePage.tsx b/code/src/ui/src/pages/WelcomePage.tsx
@@ -13,6 +13,7 @@ import {themes} from "../mui-a11y-tb/themes/Theme";
 import {LeftNavHeader, LeftNavItem} from '../components/LeftNavTabs';
 import {MeasureDiv} from './MeasureDiv';
 import {Storage} from '@finos/a11y-theme-builder-sdk';
+import { LeftNavFooter } from "../components/LeftNavFooter";
 
 interface Props {
     user: any;
@@ -69,14 +70,7 @@ const WelcomePage: React.FC<Props> = ({user, storage, themeName}) => {
                                 }}/>
                             </List>
                         </div>
-                        {/* Netlify Badge  */}
-                        <div className="design-system-editor-left-nav-footer">
-                            <a href="https://www.netlify.com">
-                                <img src="https://www.netlify.com/v3/img/components/netlify-color-bg.svg"
-                                     alt="Deploys by Netlify"/>
-                            </a>
-                        </div>
-                        {/* End Netlify Badge */}
+                        <LeftNavFooter />
                     </div>
                     <div className="design-system-editor-right-content">
                         <div className="design-system-editor-right-content-scrollable">

diff --git a/code/src/ui/src/pages/content/atoms/AtomContent.tsx b/code/src/ui/src/pages/content/atoms/AtomContent.tsx
@@ -23,6 +23,7 @@ import { HotlinksAtom } from '../../atoms/HotlinksAtom';
 import { FocusStateAtom } from '../../atoms/FocusStateAtom';
 import { DesignSystem, Event, EventType, Atom } from '@finos/a11y-theme-builder-sdk';
 import { LeftNavHeader, LeftNavItem } from '../../../components/LeftNavTabs';
+import {LeftNavFooter} from "../../../components/LeftNavFooter";
 import { ErrorHandler } from '../../../ErrorHandler';
 import { List, Collapse } from '@mui/material';
 import ExpandLess from '@mui/icons-material/ExpandLess';
@@ -226,6 +227,7 @@ export const AtomContent: React.FC<Props> = ({ user, designSystem }) => {
 
                     </List>
                 </div>
+                <LeftNavFooter />
             </div>
             <div className="design-system-editor-right-content">
                 <div className="design-system-editor-right-content-scrollable">

diff --git a/code/src/ui/src/pages/content/code/CodeContent.tsx b/code/src/ui/src/pages/content/code/CodeContent.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import { useEffect, useState } from 'react';
 import { List, Button, InputLabel, Grid } from '@mui/material';
 import { LeftNavHeader, LeftNavItem } from '../../../components/LeftNavTabs';
+import {LeftNavFooter} from "../../../components/LeftNavFooter";
 import { DesignSystem, Event, EventType } from '@finos/a11y-theme-builder-sdk';
 import { HeadingSection } from '../HeadingSection';
 import FileSaver from 'file-saver';
@@ -126,6 +127,7 @@ export const CodeContent: React.FC<Props> = ({ user, designSystem }) => {
                         <LeftNavItem text={"JSON"} value="json" indent={1} selected={showItem} onClick={()=> {setShowItem("json")}} disabled={disabled}/>
                 </List>
                 </div>
+                <LeftNavFooter />
             </div>
             <div className="design-system-editor-right-content">
                 <div className="design-system-editor-right-content-scrollable">

diff --git a/code/src/ui/src/pages/content/components/ComponentsContent.tsx b/code/src/ui/src/pages/content/components/ComponentsContent.tsx
@@ -7,6 +7,7 @@ import { useEffect, useState } from 'react';
 import { DesignSystem, Event, EventType } from '@finos/a11y-theme-builder-sdk';
 import { List, Collapse } from '@mui/material';
 import { LeftNavHeader, LeftNavItem } from '../../../components/LeftNavTabs';
+import {LeftNavFooter} from "../../../components/LeftNavFooter";
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import { NavSwitch } from '../../../components/NavSwitch';
@@ -144,7 +145,7 @@ export const ComponentsContent: React.FC<Props> = ({ user, designSystem }) => {
     return (
         <>
             <div className="design-system-editor-left-nav" >
-            <div className="design-system-editor-left-nav-scrollable">
+                <div className="design-system-editor-left-nav-scrollable">
                 <List
                     sx={{
                         '& ul': {padding:0},
@@ -265,6 +266,7 @@ export const ComponentsContent: React.FC<Props> = ({ user, designSystem }) => {
 
                 </List>
             </div>
+                <LeftNavFooter/>
             </div>
             <div className="design-system-editor-right-content"  data-mode={darkMode ? "dark" : "light"}>
             <div className="design-system-editor-right-content-scrollable">

diff --git a/code/src/ui/src/pages/content/molecules/MoleculeContent.tsx b/code/src/ui/src/pages/content/molecules/MoleculeContent.tsx
@@ -9,6 +9,7 @@ import MoleculeIntro from './MoleculeIntro';
 import { ErrorHandler } from '../../../ErrorHandler';
 import { List, ListItemButton, ListItemText, ListSubheader, styled, Collapse, Button, InputLabel, TextField, InputAdornment } from '@mui/material';
 import { LeftNavHeader, LeftNavItem } from '../../../components/LeftNavTabs';
+import {LeftNavFooter} from "../../../components/LeftNavFooter";
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import { AvatarsMolecule } from '../../molecules/AvatarsMolecule';
@@ -178,7 +179,7 @@ export const MoleculeContent: React.FC<Props> = ({ user, designSystem }) => {
     return (
         <>
             <div className="design-system-editor-left-nav" >
-            <div className="design-system-editor-left-nav-scrollable">
+                <div className="design-system-editor-left-nav-scrollable">
                 <List
                     sx={{
                         '& ul': {padding:0},
@@ -223,6 +224,7 @@ export const MoleculeContent: React.FC<Props> = ({ user, designSystem }) => {
 
                 </List>
             </div>
+                <LeftNavFooter />
             </div>
             <div className="design-system-editor-right-content">
             <div className="design-system-editor-right-content-scrollable">

diff --git a/code/src/ui/src/pages/content/organisms/OrganismContent.tsx b/code/src/ui/src/pages/content/organisms/OrganismContent.tsx
@@ -9,6 +9,7 @@ import OrganismIntro from './OrganismIntro';
 import { ErrorHandler } from '../../../ErrorHandler';
 import { List, ListItemButton, ListItemText, ListSubheader, styled, Collapse, Button, InputLabel, TextField, InputAdornment } from '@mui/material';
 import { LeftNavHeader, LeftNavItem } from '../../../components/LeftNavTabs';
+import {LeftNavFooter} from "../../../components/LeftNavFooter";
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import { NavSwitch } from '../../../components/NavSwitch';
@@ -329,6 +330,7 @@ export const OrganismContent: React.FC<Props> = ({ user, designSystem }) => {
                     </Collapse>
                 </List>
             </div>
+                <LeftNavFooter />
             </div>
             <div className="design-system-editor-right-content" data-mode={darkMode ? "dark" : "light"}>
             <div className="design-system-editor-right-content-scrollable">