Add LFAI logo to sidebar (machine-learning-exchange#119)

* Add lfai logo to sidebar Signed-off-by: Andrew-Butler <[email protected]> * Add LFAI branding and legal Signed-off-by: Andrew-Butler <[email protected]> * Align text and remove redundant branding Signed-off-by: Andrew-Butler <[email protected]> * Change link color, add branding Signed-off-by: Andrew-Butler <[email protected]> * Change landing page text Signed-off-by: Andrew-Butler <[email protected]>
ckadner · Jul 6, 2021 · 0a539e8 · 0a539e8
1 parent ee36211
commit 0a539e8
Show file tree

Hide file tree

Showing 16 changed files with 208 additions and 59 deletions.
diff --git a/dashboard/origin-mlx/src/App.tsx b/dashboard/origin-mlx/src/App.tsx
@@ -33,6 +33,7 @@ import './App.css';
 
 import { SettingsPage } from './pages/SettingsPage';
 import LandingPage from './pages/LandingPage'
+import ExternalLinksPage from './pages/ExternalLinksPage'
 import MetaDeletePage from './pages/MetaDeletePage';
 import MetaFeaturedPage from './pages/MetaFeaturedPage';
 import KFServingFeaturedPage from './pages/KFServingFeaturedPage';
@@ -120,6 +121,7 @@ function AppRouterSwitch(props: AppRouterSwitchProps) {
   return (
     <Switch>
       <Route exact path="/" component={LandingPage} />
+      <Route exact path="/external-links" component={ExternalLinksPage} />
       <Route exact path="/pipelines"
         render={routeProps =>
           <MetaFeaturedPage

diff --git a/dashboard/origin-mlx/src/components/Link.tsx b/dashboard/origin-mlx/src/components/Link.tsx
@@ -22,7 +22,7 @@ function Link(props: LinkProps) {
   const isExternal = /^https?:\/\//.test(destination)
 
   return isExternal
-    ? <a href={destination} {...props}>{props.children}</a>
+    ? <a className="external-link" href={destination} {...props}>{props.children}</a>
     : <RouterLink {...props}>{props.children}</RouterLink>
 }
 

diff --git a/dashboard/origin-mlx/src/components/PageFooter.tsx b/dashboard/origin-mlx/src/components/PageFooter.tsx
@@ -0,0 +1,32 @@
+/* 
+*  Copyright 2021 IBM Corporation
+* 
+*  Licensed under the Apache License, Version 2.0 (the "License"); 
+*  you may not use this file except in compliance with the License. 
+*  You may obtain a copy of the License at 
+* 
+*      http://www.apache.org/licenses/LICENSE-2.0 
+* 
+*  Unless required by applicable law or agreed to in writing, software 
+*  distributed under the License is distributed on an "AS IS" BASIS, 
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
+*  See the License for the specific language governing permissions and 
+*  limitations under the License. 
+*/ 
+import React from 'react';
+import Link from './Link'
+
+export default function PageFooter() {
+    return (
+        <h5 className="footer-text"> 
+          Copyright © 2021 Machine Learning eXchange The Linux Foundation®. 
+          All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. 
+          For a list of trademarks of The Linux Foundation, please see our <Link to="https://www.linuxfoundation.org/trademark-usage"> Trademark Usage </Link> 
+          page. 
+          Linux is a registered trademark of Linus Torvalds. 
+          <Link to="https://www.linuxfoundation.org/privacy"> Privacy Policy </Link> 
+          and 
+          <Link to="https://www.linuxfoundation.org/terms"> Terms of Use </Link>.
+        </h5>
+    )
+}
diff --git a/dashboard/origin-mlx/src/components/Sidebar/SideBarHeader.tsx b/dashboard/origin-mlx/src/components/Sidebar/SideBarHeader.tsx
@@ -13,48 +13,26 @@
 *  See the License for the specific language governing permissions and 
 *  limitations under the License. 
 */ 
-import React, { useContext } from 'react'
-import StoreContext from '../../lib/stores/context'
-import MLXLogo from "../../images/mlx-logo-white.png";
-import { Link } from 'react-router-dom';
+import React from 'react'
+import MLXLogo from "../../images/mlx-logo-name-white.png";
+import Link from '../Link'
+import LFAILogo from "../../images/lfaidata.png";
 
 interface SideBarHeaderProps {
   name: string;
   active: boolean;
 }
 
-const SideBarHeader: React.FunctionComponent<SideBarHeaderProps> = (props) => {
-  const { active: isActive } = props
-
-  const { store } = useContext(StoreContext)
-  const { value, default: defaultValue } = store.settings.branding.name
-
-  const shortenBrand = (brand: string) => {
-    if (brand.length <= 10)
-      return brand;
-
-    const split = brand.split(' ')
-    let brandAbrev = ""
-    split.forEach((word: string) => {
-      if (word.toLowerCase() === "exchange")
-        brandAbrev += "X"
-      else
-       brandAbrev += word[0].toUpperCase()
-    })
-    return brandAbrev
-  }
-
-
+const SideBarHeader: React.FunctionComponent<SideBarHeaderProps> = (props) => {  
   return (
     <div className="sidebar-header-wrap">
       <Link to="/">
         <img alt="MLX Logo" className="sidebar-img" src={MLXLogo} />
-        <h2 
-          className={`sidebar-list-item header ${isActive ? 'active' : 'not-active'}`}>
-          {shortenBrand(value || defaultValue)}
-        </h2>
       </Link>
       <hr className="sidebar-divider"/>
+      <Link to="https://lfaidata.foundation/"> 
+        <img alt="LFAI Logo" className="lfai-logo above-secret" src={LFAILogo} /> 
+      </Link> 
     </div>
   );
 };

diff --git a/dashboard/origin-mlx/src/components/Sidebar/SidebarList.tsx b/dashboard/origin-mlx/src/components/Sidebar/SidebarList.tsx
@@ -21,6 +21,7 @@ import '../../styles/Sidebar.css'
 import Icon from '@material-ui/core/Icon';
 import SecretMenu from '../SecretMenu';
 import { capitalize, getUserInfo, hasRole } from '../../lib/util';
+import { Link } from 'react-router-dom';
 
 const sideNavColors = {
   bg: '#303030',
@@ -83,15 +84,25 @@ function SidebarList() {
           </ul>
         }
       </div>
-      { isAdmin && (secretVisible ?
-        <div className="secret-tab-open" onClick={() => setSecretVisible(false)}>
-          <SecretMenu />
+      <div className="bottom-sidebar">
+        <div className="sidebar-list-wrap footer-list-wrap">
+          <Link to="/external-links">
+            <h3 className={`sidebar-list-item footer-list-item ${false ? 'active' : 'not-active'}`}>
+              <Icon className="sidebar-icon">chat</Icon>
+              Join the Conversation
+            </h3>
+          </Link>
         </div>
-      :
-        <div onClick={() => setSecretVisible(true)} className={`secret-tab`}>
-          <Icon>more_horiz</Icon>
-        </div>
-      )}
+        { isAdmin && (secretVisible ?
+            <div className="secret-tab-open" onClick={() => setSecretVisible(false)}>
+              <SecretMenu/>
+            </div>
+          :
+          <div className="secret-tab" onClick={() => setSecretVisible(true)}>
+            <Icon>more_horiz</Icon>
+          </div>
+        )}
+      </div>
     </div>
   )
 }

diff --git a/dashboard/origin-mlx/src/images/landing-page.png b/dashboard/origin-mlx/src/images/landing-page.png
diff --git a/dashboard/origin-mlx/src/images/lfaidata.png b/dashboard/origin-mlx/src/images/lfaidata.png
diff --git a/dashboard/origin-mlx/src/images/mlx-logo-name-white.png b/dashboard/origin-mlx/src/images/mlx-logo-name-white.png
diff --git a/dashboard/origin-mlx/src/pages/ExternalLinksPage.tsx b/dashboard/origin-mlx/src/pages/ExternalLinksPage.tsx
@@ -0,0 +1,50 @@
+/* 
+*  Copyright 2021 IBM Corporation
+* 
+*  Licensed under the Apache License, Version 2.0 (the "License"); 
+*  you may not use this file except in compliance with the License. 
+*  You may obtain a copy of the License at 
+* 
+*      http://www.apache.org/licenses/LICENSE-2.0 
+* 
+*  Unless required by applicable law or agreed to in writing, software 
+*  distributed under the License is distributed on an "AS IS" BASIS, 
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
+*  See the License for the specific language governing permissions and 
+*  limitations under the License. 
+*/ 
+import React, { useContext } from 'react';
+import StoreContext from '../lib/stores/context'
+import Hero from '../components/Hero'
+import { SET_ACTIVE_PAGE } from '../lib/stores/pages';
+import Link from '../components/Link'
+import PageFooter from '../components/PageFooter';
+import Paper from '@material-ui/core/Paper'
+
+export default function LandingPage() {
+  const { store, dispatch } = useContext(StoreContext)
+  const { active } = store.pages
+
+  if (active !== 'external-links')
+    dispatch({ type: SET_ACTIVE_PAGE, page: 'external-links' })
+
+  return (
+    <div className="links-page">
+      <Hero
+        title={"Join the Conversation"} 
+        subtitle=" "
+      >
+      </Hero>
+      <div className="upload-wrapper">
+        <Paper className="upload-form-wrapper">
+        <h3 className="links-page-text">
+          Slack: <Link to="https://lfaifoundation.slack.com/archives/C0264LKNH63"> ml-exchange </Link>
+          <br/> 
+          Github: <Link to="https://github.com/machine-learning-exchange"> Machine Learning eXchange (MLX) </Link> 
+        </h3>
+        </Paper>
+      </div>
+      <PageFooter/>
+    </div>
+  );
+}
diff --git a/dashboard/origin-mlx/src/pages/LandingPage.tsx b/dashboard/origin-mlx/src/pages/LandingPage.tsx
@@ -18,6 +18,9 @@ import StoreContext from '../lib/stores/context'
 import Hero from '../components/Hero'
 import introPic from "../images/landing-page.png";
 import { SET_ACTIVE_PAGE } from '../lib/stores/pages';
+import Link from '../components/Link'
+import PageFooter from '../components/PageFooter';
+import Button from '../components/Button'
 
 export default function LandingPage() {
   const { store, dispatch } = useContext(StoreContext)
@@ -35,11 +38,27 @@ export default function LandingPage() {
         title={name} 
         subtitle=" "
       >
+      <Link to="https://github.com/machine-learning-exchange/mlx">
+        <Button
+          className="hero-buttons-outline"
+          variant="outlined"
+          color="primary"
+        >
+          Github
+        </Button>
+      </Link>
       </Hero>
       <div className="landing-page-wrapper">
-        <h2 className="landing-page-text"> &nbsp;&nbsp;&nbsp;MLX - Data and AI Assets Catalog and Execution Engine</h2>
+        <h4 className="landing-page-text">
+          Machine Learning eXchange (MLX) is an open source Data and AI assets catalog and execution engine, hosted in the 
+          <Link to="https://lfaidata.foundation/"> LF AI & Data Foundation </Link>. 
+          It allows the upload, registration, execution, and deployment of AI pipelines, pipeline components, models, datasets, and notebooks. 
+          Please join our community on 
+          <Link to="https://github.com/machine-learning-exchange"> Github </Link>!
+        </h4>
         <img alt="MLX View" className="slide-img" src={introPic} />
       </div>
+      <PageFooter/>
     </div>
   );
 }
diff --git a/dashboard/origin-mlx/src/pages/MetaAllPage.tsx b/dashboard/origin-mlx/src/pages/MetaAllPage.tsx
@@ -25,6 +25,7 @@ import Hero from '../components/Hero'
 import Button from '../components/Button'
 import Icon from '@material-ui/core/Icon'
 import Link from '../components/Link'
+import PageFooter from '../components/PageFooter';
 import {
   Checkbox, Paper, TableHead, TableRow, TableCell, TableSortLabel,
   Table, TableBody, Toolbar, Typography, withStyles, WithStyles
@@ -242,6 +243,7 @@ function MetaAllPage(props: MetaAllPageProps) {
           </Table>
         </Paper>
       </div>
+      <PageFooter/>
     </>
   )
 }

diff --git a/dashboard/origin-mlx/src/pages/MetaDetailPage.tsx b/dashboard/origin-mlx/src/pages/MetaDetailPage.tsx
@@ -24,6 +24,7 @@ import Icon from '@material-ui/core/Icon'
 import Hero from '../components/Hero';
 import Link from '../components/Link';
 import LoadingMessage from '../components/LoadingMessage';
+import PageFooter from '../components/PageFooter';
 
 interface MetaDetailPageProps {
   children: ReactNode,
@@ -171,6 +172,7 @@ function MetaDetailPage(props: MetaDetailPageProps) {
             height="100%"
           />
       }
+      <PageFooter/>
     </div>
   )
 }

diff --git a/dashboard/origin-mlx/src/pages/MetaFeaturedPage/MetaFeatured.tsx b/dashboard/origin-mlx/src/pages/MetaFeaturedPage/MetaFeatured.tsx
@@ -18,6 +18,7 @@ import { withStyles, WithStyles } from '@material-ui/core'
 
 import Grid from '@material-ui/core/Grid'
 import MetaCard from './MetaCard'
+import PageFooter from '../../components/PageFooter';
 
 
 interface MetaFeaturedProps extends WithStyles<typeof styles> {
@@ -105,6 +106,7 @@ function MetaFeatured(props: MetaFeaturedProps) {
             </Grid>
           )
         })}
+        <PageFooter/>
       </Grid>
     </div>
   )

diff --git a/dashboard/origin-mlx/src/pages/UploadPage.tsx b/dashboard/origin-mlx/src/pages/UploadPage.tsx
@@ -17,8 +17,9 @@ import React, { useContext, useState, ChangeEvent, FormEvent } from 'react'
 import StoreContext from '../lib/stores/context'
 import { Link } from 'react-router-dom'
 import { RouteComponentProps } from 'react-router';
-import { capitalize, formatTitle } from '../lib/util'
+import { capitalize } from '../lib/util'
 import { upload } from '../lib/api/upload'
+import PageFooter from '../components/PageFooter';
 
 import Button from '../components/Button'
 import Icon from '@material-ui/core/Icon'
@@ -224,6 +225,7 @@ function UploadPage(props: RouteComponentProps<MatchProps>) {
           }
         </Paper>
       </div>
+      <PageFooter/>
     </div>
   )
 }

diff --git a/dashboard/origin-mlx/src/styles/Models.css b/dashboard/origin-mlx/src/styles/Models.css
@@ -81,24 +81,49 @@ td>span.checked {
   flex-direction: column;
 }
 
+.landing-page div {
+  width: 100%;
+}
+
 .landing-page {
-  height: 100vh;
+  min-height: 100vh;
   background-color: #595959;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  align-items: center;
 }
 
 .landing-page-wrapper {
-  margin-top: 2%;
+  max-width: 900px;
+  margin: 1% 4%;
   display: flex;
   flex-direction: column;
   flex: 1;
 }
 
 .landing-page-text {
+  margin-top: 0%;
   text-align: center;
-  color: #dddddd;
+  color: #fff;
+}
+
+.links-page {
+  min-height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.links-page-wrapper {
+  margin: 1% 4%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.links-page-text {
+  margin-top: 0%;
+  color: #fff;
 }
 
 .form-list {
@@ -138,6 +163,14 @@ td>span.checked {
   display: flex;
 }
 
+.footer-text {
+  color: #ddd;
+  margin-top: 2%;
+  margin-bottom: 0%;
+  margin-left: 0.5%;
+  margin-right: 0.5%;
+}
+
 /******************
  * General Styles *
  ******************/
@@ -167,6 +200,10 @@ td>span.checked {
   width: 100%;
 }
 
+.external-link {
+  color: #1ccdc7;
+}
+
 /******************
  * Header Content *
  ******************/