Skip to content

Commit

Permalink
Add Netlify badge and refactor import statements in WelcomePage.tsx
Browse files Browse the repository at this point in the history 
The commit consolidates multiple import statements in the WelcomePage.tsx file for better code readability. This could potentially lead to improved performance during the Docker build process due to reduced lines of code - but it primarily aids in making the code cleaner and more manageable. Furthermore, a Netlify badge has been added to the DesignSystemPage.css file. This credits the deployment platform and adds credibility to the project. Minor changes in UI styling have also been implemented for improved user experience.
  • Loading branch information
@alfkonee @turnalfred
alfkonee authored and turnalfred committed Nov 7, 2023
1 parent 5574685 commit 0a11bcf
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 36 deletions.
10 changes: 9 additions & 1 deletion code/src/ui/src/pages/DesignSystemPage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
85 changes: 50 additions & 35 deletions code/src/ui/src/pages/WelcomePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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>
Expand Down

0 comments on commit 0a11bcf

Please sign in to comment.