- Cleaned up the imports in WelcomePage.tsx to enhance readability.

- Introduced a netlify badge at the footer of the left navigation bar to acknowledge the service. - Indentation and syntax improvements in JSX for better readability and code quality.
finos · Nov 7, 2023 · 7c2927b · 7c2927b
1 parent 5574685
commit 7c2927b
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 36 deletions.
diff --git a/code/src/ui/src/pages/DesignSystemPage.css b/code/src/ui/src/pages/DesignSystemPage.css
@@ -19,10 +19,18 @@
     color: var(--on-background);
     overflow-y: scroll;
     margin-left: 0px;
-    visibility: hidden;
+    visibility: hidden;    
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.design-system-editor-left-nav-footer {
+    padding-left: 1em;
 }
 
 .design-system-editor-left-nav-scrollable,
+.design-system-editor-left-nav-footer,
 .design-system-editor-left-nav:hover,
 .design-system-editor-left-nav:focus {
     visibility: visible;

diff --git a/code/src/ui/src/pages/WelcomePage.tsx b/code/src/ui/src/pages/WelcomePage.tsx
@@ -2,27 +2,25 @@
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
-import React, { useEffect, useState } from 'react';
-import { Tab, Tabs, List } from "@mui/material";
-import { styled } from '@mui/material';
+import React, {useEffect, useState} from 'react';
+import {List, ThemeProvider} from "@mui/material";
 import Welcome from './Welcome';
 import JumpStart from './JumpStart';
 import GetStarted from './GetStarted';
 import './WelcomePage.css';
 import WelcomeNavbar from '../components/WelcomeNavbar';
-import { themes } from "../mui-a11y-tb/themes/Theme";
-import { ThemeProvider } from '@mui/material';
-import { LeftNavHeader, LeftNavItem } from '../components/LeftNavTabs';
-import { MeasureDiv } from './MeasureDiv';
-import { Storage } from '@finos/a11y-theme-builder-sdk';
+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';
 
 interface Props {
     user: any;
     storage: Storage;
     themeName: string;
 }
 
-const WelcomePage: React.FC<Props> = ({ user, storage, themeName }) => {
+const WelcomePage: React.FC<Props> = ({user, storage, themeName}) => {
 
     const [showItem, setShowItem] = useState<string>(localStorage.getItem("themebuilder-welcome-selected") || "welcome");
     useEffect(() => {
@@ -45,36 +43,53 @@ const WelcomePage: React.FC<Props> = ({ user, storage, themeName }) => {
         <ThemeProvider theme={(themes as any)[themeName]}>
             <div className="design-system-container">
                 <MeasureDiv setHeight={setDivHeight}>
-                    <WelcomeNavbar />
+                    <WelcomeNavbar/>
                 </MeasureDiv>
                 <div className="design-system-editor-content" style={divStyle}>
-                    <div className="design-system-editor-left-nav"  data-background="alt">
-                    <div className="design-system-editor-left-nav-scrollable">
-                        <List
-                            sx={{
-                                '& ul': { padding: 0 },
-                                paddingTop: "0px",
-                            }}
-                        >
-                            <LeftNavHeader>Design Systems</LeftNavHeader>
-                            <LeftNavItem text={"Welcome"} value="welcome" indent={1} selected={showItem} onClick={() => { setShowItem("welcome") }} />
-                            <LeftNavItem text={"Sample and Template Design Systems"} value="jumpStart" indent={1} selected={showItem} onClick={() => { setShowItem("jumpStart") }} />
-                            <LeftNavItem text={"Your Design Systems"} value="getStarted" indent={1} selected={showItem} onClick={() => { setShowItem("getStarted") }} />
-                        </List>
-                    </div>
+                    <div className="design-system-editor-left-nav" data-background="alt">
+                        <div className="design-system-editor-left-nav-scrollable">
+                            <List
+                                sx={{
+                                    '& ul': {padding: 0},
+                                    paddingTop: "0px",
+                                }}
+                            >
+                                <LeftNavHeader>Design Systems</LeftNavHeader>
+                                <LeftNavItem text={"Welcome"} value="welcome" indent={1} selected={showItem}
+                                             onClick={() => {
+                                                 setShowItem("welcome")
+                                             }}/>
+                                <LeftNavItem text={"Sample and Template Design Systems"} value="jumpStart" indent={1}
+                                             selected={showItem} onClick={() => {
+                                    setShowItem("jumpStart")
+                                }}/>
+                                <LeftNavItem text={"Your Design Systems"} value="getStarted" indent={1}
+                                             selected={showItem} onClick={() => {
+                                    setShowItem("getStarted")
+                                }}/>
+                            </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 */}
                     </div>
                     <div className="design-system-editor-right-content">
-                    <div className="design-system-editor-right-content-scrollable">
-                        {showItem === "welcome" && (
-                            <Welcome user={user} changeTab={handleTabChange} />
-                        )}
-                        {showItem === "jumpStart" && (
-                            <JumpStart user={user} storage={storage}/>
-                        )}
-                        {showItem === "getStarted" && (
-                            <GetStarted user={user} storage={storage}/>
-                        )}
-                    </div>
+                        <div className="design-system-editor-right-content-scrollable">
+                            {showItem === "welcome" && (
+                                <Welcome user={user} changeTab={handleTabChange}/>
+                            )}
+                            {showItem === "jumpStart" && (
+                                <JumpStart user={user} storage={storage}/>
+                            )}
+                            {showItem === "getStarted" && (
+                                <GetStarted user={user} storage={storage}/>
+                            )}
+                        </div>
                     </div>
                 </div>
             </div>