From 939cdd5635834ca2b9b78bf2ba3f0a258ae88737 Mon Sep 17 00:00:00 2001 From: Cody O'Donnell Date: Tue, 23 Jul 2024 13:06:27 -0700 Subject: [PATCH 1/9] Modify navbar icon styles --- src/features/layout/LeftNavBar.module.scss | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/features/layout/LeftNavBar.module.scss b/src/features/layout/LeftNavBar.module.scss index b18787f1..bbd615c4 100644 --- a/src/features/layout/LeftNavBar.module.scss +++ b/src/features/layout/LeftNavBar.module.scss @@ -13,12 +13,17 @@ ul.nav_list { li.nav_item { align-items: center; background: use-color("white"); + border-radius: 4px; + color: use-color("base-darker"); display: flex; flex-flow: column nowrap; - margin: 3px 0; - padding: 3px; + margin-top: 1rem; + margin-left: 0.25rem; + margin-right: 0.25rem; + padding: 0.25rem; position: relative; text-align: center; + transition: 0.25s; // Items contain links, so lets remove the default link styles a { @@ -28,20 +33,20 @@ ul.nav_list { } &.active { - background: use-rgba-color("silver", 0.5); + background: use-color("base-lighter"); } - &:hover { - background: use-rgba-color("silver", 0.7); + &:hover:not(.active) { + background: use-rgba-color("silver", 0.5); } .nav_icon { - font-size: 42px; + font-size: 2rem; width: 100%; } .nav_desc { - font-size: 14px; + font-size: 0.75rem; } .nav_notifs { From f607cfe0ea6b5b9346c7cf8079c1b86b24abf5de Mon Sep 17 00:00:00 2001 From: Cody O'Donnell Date: Tue, 23 Jul 2024 14:01:37 -0700 Subject: [PATCH 2/9] Modify top navbar --- src/app/App.module.scss | 2 +- src/features/layout/LeftNavBar.module.scss | 2 +- src/features/layout/TopBar.module.scss | 23 ++- src/features/layout/TopBar.tsx | 180 ++++++++++----------- 4 files changed, 105 insertions(+), 102 deletions(-) diff --git a/src/app/App.module.scss b/src/app/App.module.scss index 4d5a5181..eaf6f08a 100644 --- a/src/app/App.module.scss +++ b/src/app/App.module.scss @@ -21,7 +21,7 @@ background-color: use-color("white"); flex-grow: 0; flex-shrink: 0; - height: 70px; + height: 50px; position: relative; width: 100%; } diff --git a/src/features/layout/LeftNavBar.module.scss b/src/features/layout/LeftNavBar.module.scss index bbd615c4..6ea8ae6c 100644 --- a/src/features/layout/LeftNavBar.module.scss +++ b/src/features/layout/LeftNavBar.module.scss @@ -17,9 +17,9 @@ ul.nav_list { color: use-color("base-darker"); display: flex; flex-flow: column nowrap; - margin-top: 1rem; margin-left: 0.25rem; margin-right: 0.25rem; + margin-top: 1rem; padding: 0.25rem; position: relative; text-align: center; diff --git a/src/features/layout/TopBar.module.scss b/src/features/layout/TopBar.module.scss index ecbeccd3..da10a5dc 100644 --- a/src/features/layout/TopBar.module.scss +++ b/src/features/layout/TopBar.module.scss @@ -2,25 +2,33 @@ .topbar { align-items: center; - border-bottom: 5px solid #e0e0e0; + border-bottom: 1px solid; + border-bottom-color: use-color("silver"); display: flex; height: 100%; justify-content: stretch; + padding: 0 1rem; position: relative; z-index: 100; .topbar_item { + display: flex; flex-grow: 0; flex-shrink: 0; height: auto; position: relative; vertical-align: middle; + white-space: nowrap; &.stretch { flex-grow: 1; flex-shrink: 1; overflow: hidden; } + + img { + height: 40px; + } } } @@ -39,11 +47,13 @@ } .page_title { + border-left: 1px solid; + border-left-color: use-color("silver"); color: use-color("black"); - font-size: 2rem; - font-weight: bold; + font-size: 1.5rem; + margin-left: 1rem; overflow: hidden; - padding-left: 10px; + padding-left: 1rem; text-overflow: ellipsis; white-space: nowrap; } @@ -52,13 +62,14 @@ align-items: center; display: flex; flex-flow: column nowrap; + font-size: 0.75rem; font-weight: bold; justify-content: center; - padding: 0 12px 0 5px; + padding: 0 1rem 0 5px; >svg { color: use-color("mid-blue"); - font-size: 2rem; + font-size: 1.5rem; } } diff --git a/src/features/layout/TopBar.tsx b/src/features/layout/TopBar.tsx index 49df4584..ee95feed 100644 --- a/src/features/layout/TopBar.tsx +++ b/src/features/layout/TopBar.tsx @@ -1,31 +1,21 @@ import { - faBars, - faEnvelope, - faFile, faFlask, faIdCard, - faInfo, - faPlus, - faQuestion, faQuestionCircle, - faSearch, - faServer, - faSignIn, faSignOutAlt, faSortDown, faUser, faWrench, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon as FAIcon } from '@fortawesome/react-fontawesome'; +import { Button, Stack } from '@mui/material'; import { FC, useMemo } from 'react'; -import { useNavigate } from 'react-router-dom'; - import { toast } from 'react-hot-toast'; -import { Link } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; import { resetStateAction } from '../../app/store'; import { revokeToken } from '../../common/api/authService'; import { getUserProfile } from '../../common/api/userProfileApi'; -import logo from '../../common/assets/logo/46_square.png'; +import logo from '../../common/assets/logo/circles.png'; import { Dropdown } from '../../common/components'; import { useAppDispatch, useAppSelector } from '../../common/hooks'; import { authUsername, setAuth } from '../auth/authSlice'; @@ -38,9 +28,7 @@ export default function TopBar() { return (
- -
-
+ {/* TODO: replace with recntagular logo without tagline */}
@@ -57,10 +45,14 @@ export default function TopBar() { } const LoginPrompt: FC = () => ( - - - Sign In - + + + + + + + + ); const UserMenu: FC = () => { @@ -166,80 +158,80 @@ const useLogout = () => { }; }; -const HamburgerMenu: FC = () => { - const navigate = useNavigate(); - return ( -
- , - label: 'Narrative Interface', - }, - { - value: '/legacy/narrativemanager/new', - icon: , - label: 'New Narrative', - }, - { - value: '/legacy/jgi-search', - icon: , - label: 'JGI Search', - }, - { - value: '/legacy/biochem-search', - icon: , - label: 'Biochem Search', - }, - ], - }, - { - options: [ - { - value: '/legacy/about/services', - icon: , - label: 'KBase Services Status', - }, - ], - }, - { - options: [ - { - value: '/legacy/about', - icon: , - label: 'About', - }, - { - value: 'https://kbase.us/contact-us', - icon: , - label: 'Contact KBase', - }, - { - value: 'https://kbase.us/narrative-guide/', - icon: , - label: 'Support', - }, - ], - }, - ]} - onChange={(opt) => { - if (typeof opt?.[0]?.value === 'string') { - if (opt[0].value.startsWith('http')) { - window.location.href = opt[0].value; - } else { - navigate(opt[0].value, { relative: 'path' }); - } - } - }} - > - - -
- ); -}; +// const HamburgerMenu: FC = () => { +// const navigate = useNavigate(); +// return ( +//
+// , +// label: 'Narrative Interface', +// }, +// { +// value: '/legacy/narrativemanager/new', +// icon: , +// label: 'New Narrative', +// }, +// { +// value: '/legacy/jgi-search', +// icon: , +// label: 'JGI Search', +// }, +// { +// value: '/legacy/biochem-search', +// icon: , +// label: 'Biochem Search', +// }, +// ], +// }, +// { +// options: [ +// { +// value: '/legacy/about/services', +// icon: , +// label: 'KBase Services Status', +// }, +// ], +// }, +// { +// options: [ +// { +// value: '/legacy/about', +// icon: , +// label: 'About', +// }, +// { +// value: 'https://kbase.us/contact-us', +// icon: , +// label: 'Contact KBase', +// }, +// { +// value: 'https://kbase.us/narrative-guide/', +// icon: , +// label: 'Support', +// }, +// ], +// }, +// ]} +// onChange={(opt) => { +// if (typeof opt?.[0]?.value === 'string') { +// if (opt[0].value.startsWith('http')) { +// window.location.href = opt[0].value; +// } else { +// navigate(opt[0].value, { relative: 'path' }); +// } +// } +// }} +// > +// +// +//
+// ); +// }; const UserAvatar = () => { const username = useAppSelector(authUsername); From c33fd1c78df848e5538d0daddd0a5ab551619896 Mon Sep 17 00:00:00 2001 From: Cody O'Donnell Date: Fri, 26 Jul 2024 14:44:26 -0400 Subject: [PATCH 3/9] Add shortened rectangular logo to top bar --- src/common/assets/logo/rectangle_short.png | Bin 0 -> 14264 bytes src/features/layout/TopBar.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 src/common/assets/logo/rectangle_short.png diff --git a/src/common/assets/logo/rectangle_short.png b/src/common/assets/logo/rectangle_short.png new file mode 100644 index 0000000000000000000000000000000000000000..bf49913ca188434f73f134c05f3165b79856f20b GIT binary patch literal 14264 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 z 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 a-tzyzy+&AnwZ|3!0000 Date: Fri, 26 Jul 2024 14:47:09 -0400 Subject: [PATCH 4/9] Increase top bar height --- src/app/App.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/App.module.scss b/src/app/App.module.scss index eaf6f08a..20a760d1 100644 --- a/src/app/App.module.scss +++ b/src/app/App.module.scss @@ -21,7 +21,7 @@ background-color: use-color("white"); flex-grow: 0; flex-shrink: 0; - height: 50px; + height: 60px; position: relative; width: 100%; } From 2710081040acfe34332f3a88966f3d62a6707c47 Mon Sep 17 00:00:00 2001 From: Cody O'Donnell Date: Fri, 26 Jul 2024 14:49:47 -0400 Subject: [PATCH 5/9] Add proper page titles to new pages --- src/features/account/Account.tsx | 2 ++ src/features/login/LogIn.tsx | 2 ++ src/features/signup/SignUp.tsx | 2 ++ 3 files changed, 6 insertions(+) diff --git a/src/features/account/Account.tsx b/src/features/account/Account.tsx index 843045bc..2fce0e4c 100644 --- a/src/features/account/Account.tsx +++ b/src/features/account/Account.tsx @@ -1,11 +1,13 @@ import { Container, Stack, Tab, Tabs } from '@mui/material'; import { FC, useEffect, useState } from 'react'; import { Outlet, useLocation, useNavigate } from 'react-router-dom'; +import { usePageTitle } from '../layout/layoutSlice'; /** * Main Account page with four subpages represented as tabs. */ export const Account: FC = () => { + usePageTitle('Account'); const navigate = useNavigate(); const location = useLocation(); const [activeTab, setActiveTab] = useState(() => { diff --git a/src/features/login/LogIn.tsx b/src/features/login/LogIn.tsx index dabab062..43967283 100644 --- a/src/features/login/LogIn.tsx +++ b/src/features/login/LogIn.tsx @@ -13,8 +13,10 @@ import orcidLogo from '../../common/assets/orcid.png'; import globusLogo from '../../common/assets/globus.png'; import googleLogo from '../../common/assets/google.webp'; import classes from './LogIn.module.scss'; +import { usePageTitle } from '../layout/layoutSlice'; export const LogIn: FC = () => { + usePageTitle('Log In'); return ( diff --git a/src/features/signup/SignUp.tsx b/src/features/signup/SignUp.tsx index 9c674e9e..293167ae 100644 --- a/src/features/signup/SignUp.tsx +++ b/src/features/signup/SignUp.tsx @@ -10,6 +10,7 @@ import { FC, useEffect, useState } from 'react'; import { AccountInformation } from './AccountInformation'; import { ProviderSelect } from './ProviderSelect'; import { UsePolicies } from './UsePolicies'; +import { usePageTitle } from '../layout/layoutSlice'; const signUpSteps = [ 'Sign up with a supported provider', @@ -22,6 +23,7 @@ const signUpSteps = [ * and accepting the KBase use policies. */ export const SignUp: FC = () => { + usePageTitle('Sign Up'); const [activeStep, setActiveStep] = useState(0); useEffect(() => { From 0814a90b4fd68a312ce1022a89ca5027109f3c5d Mon Sep 17 00:00:00 2001 From: Cody O'Donnell Date: Tue, 30 Jul 2024 12:33:30 -0700 Subject: [PATCH 6/9] Add more links menu to sidebar --- src/features/layout/LeftNavBar.module.scss | 19 ++++- src/features/layout/LeftNavBar.tsx | 90 +++++++++++++++++++++- 2 files changed, 107 insertions(+), 2 deletions(-) diff --git a/src/features/layout/LeftNavBar.module.scss b/src/features/layout/LeftNavBar.module.scss index 6ea8ae6c..d5573918 100644 --- a/src/features/layout/LeftNavBar.module.scss +++ b/src/features/layout/LeftNavBar.module.scss @@ -10,7 +10,12 @@ ul.nav_list { padding: 3px 0 0; width: 100%; - li.nav_item { + &:first-of-type:not(:last-of-type) { + border-bottom: 1px solid use-color("silver"); + padding-bottom: 1rem; + } + + .nav_item { align-items: center; background: use-color("white"); border-radius: 4px; @@ -64,6 +69,18 @@ ul.nav_list { } } +.more_menu_item { + a { + color: inherit; + text-decoration: none; + } + + .more_menu_icon { + color: use-color("base-darker"); + margin-right: 0.5rem; + } +} + @each $state, $_ in $palette { ul.nav_list li.nav_item .nav_notifs.nav_notifs-bg--#{$state} { background-color: use-color($state); diff --git a/src/features/layout/LeftNavBar.tsx b/src/features/layout/LeftNavBar.tsx index 88ba3a09..c63c4e71 100644 --- a/src/features/layout/LeftNavBar.tsx +++ b/src/features/layout/LeftNavBar.tsx @@ -9,15 +9,21 @@ import { faSuitcase, faUsers, IconDefinition, + faEllipsis, + faInfoCircle, + faQuestionCircle, + faServer, + faNoteSticky, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon as FAIcon } from '@fortawesome/react-fontawesome'; -import { FC } from 'react'; +import { FC, useState } from 'react'; import { Link, useLocation } from 'react-router-dom'; import { getFeedsUnseenCount } from '../../common/api/feedsService'; import { useAppSelector } from '../../common/hooks'; import { authMe, authToken } from '../auth/authSlice'; import { useAuthMe } from '../auth/hooks'; import classes from './LeftNavBar.module.scss'; +import { Button, Menu, MenuItem } from '@mui/material'; const LeftNavBar: FC = () => { const token = useAppSelector(authToken); @@ -27,6 +33,14 @@ const LeftNavBar: FC = () => { refetchOnFocus: true, refetchOnReconnect: true, }); + const [anchorEl, setAnchorEl] = useState(null); + const moreMenuOpen = Boolean(anchorEl); + const handleClickMoreMenu = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + const handleCloseMoreMenu = () => { + setAnchorEl(null); + }; return ( ); }; From a785c05a8b41d538ecb25f0a254777365b4afb6e Mon Sep 17 00:00:00 2001 From: Cody O'Donnell Date: Tue, 30 Jul 2024 13:56:01 -0700 Subject: [PATCH 7/9] Update user dropdown menu to use mui --- src/features/layout/LeftNavBar.module.scss | 2 +- src/features/layout/TopBar.module.scss | 40 ++-- src/features/layout/TopBar.tsx | 210 ++++++++------------- 3 files changed, 101 insertions(+), 151 deletions(-) diff --git a/src/features/layout/LeftNavBar.module.scss b/src/features/layout/LeftNavBar.module.scss index d5573918..a79a15eb 100644 --- a/src/features/layout/LeftNavBar.module.scss +++ b/src/features/layout/LeftNavBar.module.scss @@ -77,7 +77,7 @@ ul.nav_list { .more_menu_icon { color: use-color("base-darker"); - margin-right: 0.5rem; + margin-right: 1rem; } } diff --git a/src/features/layout/TopBar.module.scss b/src/features/layout/TopBar.module.scss index da10a5dc..e67c930e 100644 --- a/src/features/layout/TopBar.module.scss +++ b/src/features/layout/TopBar.module.scss @@ -65,7 +65,7 @@ font-size: 0.75rem; font-weight: bold; justify-content: center; - padding: 0 1rem 0 5px; + padding: 0 1rem; >svg { color: use-color("mid-blue"); @@ -87,14 +87,8 @@ } } -.login_menu { +.login_menu_container { display: block; - padding: 4px; - width: 77px; - - .login_menu_username { - font-style: italic; - } .login_menu_button { align-items: center; @@ -102,12 +96,6 @@ display: flex; gap: 5px; justify-content: left; - - .login_menu_icon { - color: use_color("mid-blue"); - font-size: 30px; - margin-right: 5px; - } } .name_item { @@ -115,3 +103,27 @@ width: 100%; } } + +.login_menu { + a { + color: inherit; + text-decoration: none; + } + + .login_menu_username { + color: use-color("base"); + font-style: italic; + margin: 0.5rem 0; + text-align: center; + } + + .login_menu_icon { + color: use_color("base-darker"); + margin-right: 1rem; + width: 18px; + } +} + +.narrative_link { + margin-right: 0.5rem; +} diff --git a/src/features/layout/TopBar.tsx b/src/features/layout/TopBar.tsx index 6161c2ce..1fa885d9 100644 --- a/src/features/layout/TopBar.tsx +++ b/src/features/layout/TopBar.tsx @@ -6,17 +6,17 @@ import { faSortDown, faUser, faWrench, + faPlus, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon as FAIcon } from '@fortawesome/react-fontawesome'; -import { Button, Stack } from '@mui/material'; -import { FC, useMemo } from 'react'; +import { Button, Menu, MenuItem, Stack, Typography } from '@mui/material'; +import { FC, useMemo, useState } from 'react'; import { toast } from 'react-hot-toast'; import { Link, useNavigate } from 'react-router-dom'; import { resetStateAction } from '../../app/store'; import { revokeToken } from '../../common/api/authService'; import { getUserProfile } from '../../common/api/userProfileApi'; import logo from '../../common/assets/logo/rectangle_short.png'; -import { Dropdown } from '../../common/components'; import { useAppDispatch, useAppSelector } from '../../common/hooks'; import { authUsername, setAuth } from '../auth/authSlice'; import { noOp } from '../common'; @@ -34,6 +34,19 @@ export default function TopBar() {
+
+ {username && ( + + + + )} +
@@ -67,69 +80,69 @@ const UserMenu: FC = () => { { skip: !username } ); const realname = profData?.[0]?.[0]?.user.realname; - const navigate = useNavigate(); const logout = useLogout(); + const [anchorEl, setAnchorEl] = useState(null); + const menuOpen = Boolean(anchorEl); + const handleClickMenu = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + const handleCloseMenu = () => { + setAnchorEl(null); + }; return ( -
- -
{realname}
-
- {username} -
-
- ), - }, - ], - }, - { - options: [ - { - value: '/legacy/people', - icon: , - label: 'Your Profile', - }, - { - value: '/legacy/account', - icon: , - label: 'Your Account', - }, - ], - }, - { - options: [ - { - value: 'LOGOUT', - icon: , - label: 'Sign Out', - }, - ], - }, - ]} - onChange={(opt) => { - if (opt?.[0]) { - if (opt[0].value === 'LOGOUT') { - logout(); - } else { - navigate(opt[0].value as string); - } - } - }} +
+ + + + {realname} + + + + + My Profile + + + + + + My Account + + + logout()}> + + Log out + +
); }; @@ -158,81 +171,6 @@ const useLogout = () => { }; }; -// const HamburgerMenu: FC = () => { -// const navigate = useNavigate(); -// return ( -//
-// , -// label: 'Narrative Interface', -// }, -// { -// value: '/legacy/narrativemanager/new', -// icon: , -// label: 'New Narrative', -// }, -// { -// value: '/legacy/jgi-search', -// icon: , -// label: 'JGI Search', -// }, -// { -// value: '/legacy/biochem-search', -// icon: , -// label: 'Biochem Search', -// }, -// ], -// }, -// { -// options: [ -// { -// value: '/legacy/about/services', -// icon: , -// label: 'KBase Services Status', -// }, -// ], -// }, -// { -// options: [ -// { -// value: '/legacy/about', -// icon: , -// label: 'About', -// }, -// { -// value: 'https://kbase.us/contact-us', -// icon: , -// label: 'Contact KBase', -// }, -// { -// value: 'https://kbase.us/narrative-guide/', -// icon: , -// label: 'Support', -// }, -// ], -// }, -// ]} -// onChange={(opt) => { -// if (typeof opt?.[0]?.value === 'string') { -// if (opt[0].value.startsWith('http')) { -// window.location.href = opt[0].value; -// } else { -// navigate(opt[0].value, { relative: 'path' }); -// } -// } -// }} -// > -// -// -//
-// ); -// }; - const UserAvatar = () => { const username = useAppSelector(authUsername); const { data: profData } = getUserProfile.useQuery( From 914a4a2050d730a5be3a9a71fc3c9993b2931f94 Mon Sep 17 00:00:00 2001 From: Cody O'Donnell Date: Tue, 13 Aug 2024 13:07:40 -0700 Subject: [PATCH 8/9] Add consistent padding across feature pages --- src/app/App.module.scss | 2 -- src/features/collections/Collections.module.scss | 7 +++---- src/features/collections/CollectionsList.tsx | 10 +++++----- src/features/login/LogIn.module.scss | 5 +++++ src/features/login/LogIn.tsx | 2 +- src/features/navigator/Navigator.module.scss | 2 +- src/features/signup/SignUp.module.scss | 5 +++++ src/features/signup/SignUp.tsx | 3 ++- 8 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/app/App.module.scss b/src/app/App.module.scss index 20a760d1..999a7333 100644 --- a/src/app/App.module.scss +++ b/src/app/App.module.scss @@ -54,8 +54,6 @@ flex-shrink: 1; max-height: 100%; overflow-y: auto; - padding-bottom: 1rem; - padding-top: 1rem; position: relative; } } diff --git a/src/features/collections/Collections.module.scss b/src/features/collections/Collections.module.scss index 00ac28d7..d4466fa7 100644 --- a/src/features/collections/Collections.module.scss +++ b/src/features/collections/Collections.module.scss @@ -4,23 +4,22 @@ $border: 1px solid use-color("base-lighter"); .collections-main { min-height: 100%; + padding: 1rem; } .collections-main .inner-container { margin-left: 0; - padding-left: 1rem; } .collections-list { overflow: scroll; - padding: 1rem; } .collections-subtitle { + border-bottom: 1px solid use-color("silver"); font-size: 1.25rem; font-weight: 500; - margin: 0; - padding: 1rem; + padding-bottom: 1rem; } .collection-card { diff --git a/src/features/collections/CollectionsList.tsx b/src/features/collections/CollectionsList.tsx index 1bb96b43..137c548f 100644 --- a/src/features/collections/CollectionsList.tsx +++ b/src/features/collections/CollectionsList.tsx @@ -13,11 +13,11 @@ export const CollectionsList = () => { const collections = listCollections.useQuery(); return ( -
-

- Explore, relate, and integrate curated data collections. -

+
+

+ Explore, relate, and integrate curated data collections. +

{collections.isSuccess && collections.data?.data.map((collection) => ( @@ -27,7 +27,7 @@ export const CollectionsList = () => { ))} -
+ ); }; diff --git a/src/features/login/LogIn.module.scss b/src/features/login/LogIn.module.scss index 31975577..055ed6fa 100644 --- a/src/features/login/LogIn.module.scss +++ b/src/features/login/LogIn.module.scss @@ -1,5 +1,10 @@ @import "../../common/colors"; +.login { + padding-bottom: 1rem; + padding-top: 1rem; +} + .logo { height: 150px; width: auto; diff --git a/src/features/login/LogIn.tsx b/src/features/login/LogIn.tsx index 43967283..665be2a5 100644 --- a/src/features/login/LogIn.tsx +++ b/src/features/login/LogIn.tsx @@ -18,7 +18,7 @@ import { usePageTitle } from '../layout/layoutSlice'; export const LogIn: FC = () => { usePageTitle('Log In'); return ( - + { }, [activeStep]); return ( - + Sign up for KBase From 416c60d60fa8d7b8060be2d61c97db2e5de95ae9 Mon Sep 17 00:00:00 2001 From: Cody O'Donnell Date: Tue, 13 Aug 2024 13:36:00 -0700 Subject: [PATCH 9/9] Remove todo and add alt text --- src/features/layout/TopBar.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/features/layout/TopBar.tsx b/src/features/layout/TopBar.tsx index 1fa885d9..b740efba 100644 --- a/src/features/layout/TopBar.tsx +++ b/src/features/layout/TopBar.tsx @@ -28,8 +28,10 @@ export default function TopBar() { return (
- {/* TODO: replace with recntagular logo without tagline */} - + KBase: Predictive Biology logo with three circles