Skip to content

styling cleanup and remove lingering focus state on homepage button #650

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
interim17 wants to merge 2 commits into
base: feature/homepage
Choose a base branch
from
Open

styling cleanup and remove lingering focus state on homepage button #650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5fe95d4
styling cleanup and remove lingering focus state on homepge button
interim17 Jul 8, 2025
e7b6a93
Update src/components/TutorialPage/index.tsx
interim17 Jul 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/AboutPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const AboutPage = (): JSX.Element => {

<ContentPagePanel isDark={true}>
<h2>Future plans for Simularium</h2>
<h3>
<h3 className={styles.headerSpacing}>
Create, modify, run, experiment, share, interoperate, & grow
as a community
</h3>
Expand Down Expand Up @@ -124,7 +124,7 @@ const AboutPage = (): JSX.Element => {
engines that generated them for use in building an
integrated, mechanistic understanding of human cells. We
will also work with educators at all levels of science
teaching to integrate and test Simularium`&apos;`s potential
teaching to integrate and test Simularium&apos;s potential
for use in active learning classroom/lab/homework
activities.
</p>
Expand Down
3 changes: 3 additions & 0 deletions src/components/AboutPage/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,6 @@
padding: 16px 16px 6px 16px;
}

.header-spacing {
margin-bottom: 16px;
}
12 changes: 9 additions & 3 deletions src/components/ContactPanel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,16 @@ import React from "react";
import { CONTACT_FORM_URL } from "../../constants";
import ContentPagePanel from "../ContentPagePanel";

const ContactPanel = (): JSX.Element => {
import styles from "./style.css";

interface ContactPanelProps {
isDark?: boolean;
}

const ContactPanel = ({ isDark }: ContactPanelProps): JSX.Element => {
return (
<ContentPagePanel>
<h2>Contact us</h2>
<ContentPagePanel isDark={isDark}>
<h2 className={styles.headerSpacing}>Contact us</h2>
<p>
We are collecting user feedback to improve this application. To
find tutorials, seek technical support, report bugs or request
Expand Down
3 changes: 3 additions & 0 deletions src/components/ContactPanel/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.header-spacing {
margin-bottom: 16px;
}
Comment on lines +1 to +3
Copy link
Contributor

@ShrimpCryptid ShrimpCryptid Jul 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this class is being used in multiple places, can you define it once in a global stylesheet and import it wherever it's being used?
https://developer.mozilla.org/en-US/docs/Web/CSS/@import

4 changes: 3 additions & 1 deletion src/components/ContentPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,20 @@ const { Content } = Layout;
interface ContentPageProps {
children: React.ReactNode;
className?: string;
contactPanelIsDark?: boolean;
}

const ContentPage: React.FC<ContentPageProps> = ({
children,
className = "",
contactPanelIsDark = false,
}) => {
return (
<>
<Content className={`${styles.pageContent} ${className}`}>
{children}
</Content>
<ContactPanel />
<ContactPanel isDark={contactPanelIsDark} />
<Divider className={styles.divider} />
<Footer />
</>
Expand Down
10 changes: 6 additions & 4 deletions src/components/LandingPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@ const LandingPage = (): JSX.Element => {
</div>
</ContentPagePanel>
<ContentPagePanel isDark={true} isWide={true}>
<h1>Load an example to explore Simularium now</h1>
<h2 className={styles.headerSpacing}>
Load an example to explore Simularium now
</h2>
<div className={styles.cards}>
{TRAJECTORIES.slice(0, NUM_CARDS_PER_ROW - 1).map(
(trajectory) => {
Expand All @@ -85,7 +87,7 @@ const LandingPage = (): JSX.Element => {
</div>
</ContentPagePanel>
<ContentPagePanel>
<h1>Cite Simularium</h1>
<h2 className={styles.headerSpacing}>Cite Simularium</h2>
<div className={styles.citationText}>
<div className={styles.articleTitle}>
<a
Expand All @@ -109,8 +111,8 @@ const LandingPage = (): JSX.Element => {
</div>
</ContentPagePanel>
<ContentPagePanel isDark={true}>
<h1>Acknowledgments</h1>
<h3>
<h2>Acknowledgments</h2>
<h3 className={styles.headerSpacing}>
We&apos;d like to thank the following people for their
contributions to Simularium
</h3>
Expand Down
4 changes: 4 additions & 0 deletions src/components/LandingPage/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@
margin-right: 1em;
}

.header-spacing {
margin-bottom: 16px;
}

.citation-text {
display: flex;
flex-direction: column;
Expand Down
45 changes: 21 additions & 24 deletions src/components/TutorialPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from "react";
import { Link } from "react-router-dom";
import { Typography } from "antd";
import classNames from "classnames";
import dragDropImage from "../../assets/drag-drop.gif";
import { VIEWER_PATHNAME } from "../../routes";
import { SUPPORTED_ENGINES, DOWNLOAD_URL } from "../../constants";
Expand All @@ -11,14 +12,14 @@ import styles from "./style.css";
const { Text } = Typography;
const TutorialPage = (): JSX.Element => {
return (
<ContentPage>
<ContentPage contactPanelIsDark={true}>
<ContentPagePanel>
<h1>Getting Started with Simularium</h1>
<p>
<h3>
To get started with the{" "}
<Link to={VIEWER_PATHNAME}>Simularium Viewer</Link>, either
download example data or convert your own data.
</p>
</h3>
Comment on lines +18 to +22
Copy link
Contributor

@ShrimpCryptid ShrimpCryptid Jul 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally use the h1 > h2 > h3 page layout hierarchy

</ContentPagePanel>
<ContentPagePanel isDark={true}>
<ul className={styles.list}>
Expand Down Expand Up @@ -107,7 +108,7 @@ const TutorialPage = (): JSX.Element => {
</li>
<li>
We support the following simulators:
<ul>
<ul className={styles.disc}>
{SUPPORTED_ENGINES.map(
(engine: string[]) => {
const [name, url] = engine;
Expand All @@ -132,7 +133,7 @@ const TutorialPage = (): JSX.Element => {
If you used one of our supported simulators
to generate your data, choose the notebook
for that simulator:
<ul>
<ul className={styles.disc}>
{SUPPORTED_ENGINES.map(
(engine: string[]) => {
const name = engine[0];
Expand Down Expand Up @@ -228,7 +229,7 @@ const TutorialPage = (): JSX.Element => {
dialog, provide the URL to your Simularium file and
choose Load.
</li>
<ul>
<ul className={styles.disc}>
<li>
If your file uses geometry files, like .obj or
.pdb files, make sure you&apos;ve provided the
Expand All @@ -246,24 +247,20 @@ const TutorialPage = (): JSX.Element => {
</ul>
</ContentPagePanel>
<ContentPagePanel>
<ul className={styles.list}>
<h3 className={styles.listHeader}>Browser support</h3>
<ul className={styles.disc}>
<li>
Currently, Simularium supports Chrome, Safari, Edge,
and Firefox. Some features may not work on other
browsers.
</li>
<li>
If using Safari on a Mac, please enable WebGL 2.0 by
choosing Develop &gt; Experimental Features and
enabling &quot;WebGL 2.0&quot; (If you do not have a
Develop menu in your menu bar, first choose Safari
&gt; Preferences &gt; Advanced and enable &quot;Show
Develop menu in menu bar&quot;.) Then reload the
viewer.
</li>
</ul>
<h2 className={styles.headerSpacing}>Browser support</h2>
<ul className={classNames(styles.disc, styles.list)}>
<li>
Currently, Simularium supports Chrome, Safari, Edge, and
Firefox. Some features may not work on other browsers.
</li>
<li>
If using Safari on a Mac, please enable WebGL 2.0 by
choosing Develop &gt; Experimental Features and enabling
&quot;WebGL 2.0&quot; (if you do not have a Develop menu
in your menu bar, first choose Safari &gt; Preferences
&gt; Advanced and enable &quot;Show Develop menu in menu
bar&quot;). Then reload the viewer.
</li>
</ul>
</ContentPagePanel>
</ContentPage>
Expand Down
4 changes: 4 additions & 0 deletions src/components/TutorialPage/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@
box-shadow: 3px 3px 20px var(--text-gray);
}

.header-spacing {
margin-bottom: 16px;
}

/* Prevents image from being huge on larger screens */
@media screen and (min-width: 576px) {
.drag-drop-image {
Expand Down
4 changes: 4 additions & 0 deletions src/containers/AppHeader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,10 @@ const AppHeader: React.FC<AppHeaderProps> = ({
onClick={() => {
history.push("/");
}}
// prevent lingering default focus style after following link
onMouseUp={(e) => {
(e.currentTarget as HTMLButtonElement).blur();
}}
/>
</div>
<ViewerTitle
Expand Down