Skip to content

Commit

Permalink
Icons reformatted for Nav Bar.
Browse files Browse the repository at this point in the history
fix #164
  • Loading branch information
tianywan819 authored and HadleyKing committed Aug 25, 2023
1 parent 86ec393 commit 5be4d5a
Show file tree
Hide file tree
Showing 8 changed files with 361 additions and 115 deletions.
21 changes: 20 additions & 1 deletion client/src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -88,4 +88,23 @@
justify-content: space-between;
flex-wrap: wrap;
margin: 0 -15px;
}
}

.nav-link {
text-decoration: none;
color: inherit; /* Inherits the color from its parent */
/* Add any additional styling you want */
}

.hover-background {
color: inherit;
transition: background-color 0.3s ease;
}

.white-icon {
color: white;
}

.hover-background:hover {
background-color: inherit; /* Change to the desired background color on hover */
}
1 change: 0 additions & 1 deletion client/src/components/builder/usabilityDomain.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ export const UsabilityDomain = ({onSave}) => {
</div>
)}
</FieldArray>
<div>
<Next />
</Form>
)
Expand Down
7 changes: 3 additions & 4 deletions client/src/components/home/Documentation.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
} from "@material-ui/core";

import mediaWiki from "../../images/mediawikiwiki.svg";
import api from "../../images/api.jpeg";

const useStyles = makeStyles({
bullet: {
Expand Down Expand Up @@ -54,12 +55,10 @@ export default function Documentation() {
<CardActionArea onClick={() => global.window.open(docsLink)}>
<CardContent>
<Typography className={classes.subtitle}>
BCO Docs Site
<img src={api} height={25} alt="MediaWiki logo" />
API
<br />
</Typography>
<Typography className={classes.bullet}>
User Guide, Best Practices, tutorial
</Typography>
</CardContent>
</CardActionArea>
<br />
Expand Down
Binary file added client/src/images/api.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 66 additions & 0 deletions client/src/layouts/MainLayout/AppDropDown.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import * as React from "react";
import MenuButton from "@mui/joy/MenuButton";
import Menu from "@mui/joy/Menu";
import MenuItem from "@mui/joy/MenuItem";
import Apps from "@mui/icons-material/Apps";
import Dropdown from "@mui/joy/Dropdown";
// import AppRegistrationOutlinedIcon from "@mui/icons-material/AppRegistrationOutlined";
import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import { ListItemDecorator } from "@mui/joy";
import GroupOutlinedIcon from '@mui/icons-material/GroupOutlined';
import IconButton from "@mui/joy/IconButton";
import { Tooltip } from "@material-ui/core";
// import { Mode } from "@mui/icons-material";
import ArrowDropDown from '@mui/icons-material/ArrowDropDown';

export default function APP() {
return (
<Dropdown>
<MenuButton
slots={{ root: IconButton }}
slotProps={{ root: { color: "secondary" } }}
title="Apps"
endDecorator={<ArrowDropDown className="white-icon"/>}>
<Tooltip title="App">
<Apps className="hover-background white-icon" title="App" fontSize="18px"/>
</Tooltip>
</MenuButton>
<Menu>
<MenuItem
component="a"
href="/builder"
target="_blank"
rel="noopener noreferrer"
>
<ListItemDecorator>
<ModeEditOutlineOutlinedIcon />
</ListItemDecorator>
Builder
</MenuItem>
<MenuItem
component="a"
href="/prefix"
target="_blank"
rel="noopener noreferrer"
>
<ListItemDecorator>
<GroupOutlinedIcon />
</ListItemDecorator>
Prefix Registry
</MenuItem>
<MenuItem
component="a"
href="/bcodbs"
target="_blank"
rel="noopener noreferrer"
>
<ListItemDecorator>
<SearchOutlinedIcon />
</ListItemDecorator>
BCODB
</MenuItem>
</Menu>
</Dropdown>
);
}
77 changes: 77 additions & 0 deletions client/src/layouts/MainLayout/DocDropDown.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import * as React from "react";
import IconButton from "@mui/joy/IconButton";
import Menu from "@mui/joy/Menu";
import MenuItem from "@mui/joy/MenuItem";
import MenuButton from "@mui/joy/MenuButton";
import Dropdown from "@mui/joy/Dropdown";
import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
import { Tooltip } from "@material-ui/core";
import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
import ApiOutlinedIcon from '@mui/icons-material/ApiOutlined';
import WebhookOutlinedIcon from '@mui/icons-material/WebhookOutlined';
import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
import { ListItemDecorator } from "@mui/joy";
import AutoStoriesOutlinedIcon from '@mui/icons-material/AutoStoriesOutlined';

export default function DocDropDown() {
return (
<Dropdown>
<MenuButton
slots={{ root: IconButton }}
slotProps={{ root: { color: "secondary" } }}
title="Documentation"
endDecorator={<ArrowDropDown className="white-icon"/>}
>
<Tooltip title="Documentation">
<DescriptionOutlinedIcon className="hover-background white-icon" title="Documentation" />
</Tooltip>
</MenuButton>
<Menu placement="bottom-end">
<MenuItem
component="a"
href="https://wiki.biocomputeobject.org/index.php?title=Quick_Start_Guide"
target="_blank"
rel="noopener noreferrer"
>
<ListItemDecorator>
<AutoStoriesOutlinedIcon />
</ListItemDecorator>
Quick Start Guide
</MenuItem>
<MenuItem
component="a"
href="https://biocomputeobject.org/api/docs/"
target="_blank"
rel="noopener noreferrer"
>
<ListItemDecorator>
<ApiOutlinedIcon />
</ListItemDecorator>
BioCompute API
</MenuItem>
<MenuItem
component="a"
href="https://wiki.biocomputeobject.org/index.php?title=Main_Page"
target="_blank"
rel="noopener noreferrer"
>
<ListItemDecorator>
<WebhookOutlinedIcon />
</ListItemDecorator>
Wiki
</MenuItem>
<MenuItem
component="a"
href="/resources"
target="_blank"
rel="noopener noreferrer"
>
<ListItemDecorator>
<SettingsInputAntennaIcon />
</ListItemDecorator>
BCO Resources
</MenuItem>
</Menu>
</Dropdown>
);
}
58 changes: 58 additions & 0 deletions client/src/layouts/MainLayout/HelpDropDown.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import * as React from "react";
import MenuButton from "@mui/joy/MenuButton";
import Menu from "@mui/joy/Menu";
import MenuItem from "@mui/joy/MenuItem";
import Apps from "@mui/icons-material/Apps";
import Dropdown from "@mui/joy/Dropdown";
// import AppRegistrationOutlinedIcon from "@mui/icons-material/AppRegistrationOutlined";
import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import { ListItemDecorator } from "@mui/joy";
import GroupOutlinedIcon from '@mui/icons-material/GroupOutlined';
import IconButton from "@mui/joy/IconButton";
import { Tooltip } from "@material-ui/core";
// import { Mode } from "@mui/icons-material";
import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
import BugReportOutlinedIcon from '@mui/icons-material/BugReportOutlined';
import ContactPageOutlinedIcon from '@mui/icons-material/ContactPageOutlined';

export default function APP() {
return (
<Dropdown>
<MenuButton
slots={{ root: IconButton }}
slotProps={{ root: { color: "secondary" } }}
title="Apps"
endDecorator={<ArrowDropDown className="white-icon"/>}>
<Tooltip title="Help">
<HelpOutlineOutlinedIcon className="hover-background white-icon" title="Help" fontSize="18px"/>
</Tooltip>
</MenuButton>
<Menu>
<MenuItem
component="a"
href="https://github.com/biocompute-objects/portal_userdb/issues/new/choose"
target="_blank"
rel="noopener noreferrer"
>
<ListItemDecorator>
<BugReportOutlinedIcon />
</ListItemDecorator>
Report an issue
</MenuItem>
<MenuItem
component="a"
href="https://docs.biocomputeobject.org/contact"
target="_blank"
rel="noopener noreferrer"
>
<ListItemDecorator>
<ContactPageOutlinedIcon />
</ListItemDecorator>
Contact Us
</MenuItem>
</Menu>
</Dropdown>
);
}
Loading

0 comments on commit 5be4d5a

Please sign in to comment.