Commit 95587ba9 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner

Iterate and improve design and UX on help/tutorial panel

- Tighten panel subheader and sub-panel navigation links
- Make vertical and horizontal rhythm consistent
parent b9fcd72f
...@@ -97,41 +97,49 @@ function HelpPanel({ auth, session }) { ...@@ -97,41 +97,49 @@ function HelpPanel({ auth, session }) {
return ( return (
<SidebarPanel <SidebarPanel
title="Need some help?" title="Help"
panelName={uiConstants.PANEL_HELP} panelName={uiConstants.PANEL_HELP}
onActiveChanged={onActiveChanged} onActiveChanged={onActiveChanged}
> >
<div className="u-layout-row">
<h3 className="help-panel__sub-panel-title"> <h3 className="help-panel__sub-panel-title">
{subPanelTitles[activeSubPanel]} {subPanelTitles[activeSubPanel]}
</h3> </h3>
<div className="help-panel__content">
{activeSubPanel === 'tutorial' && <Tutorial />}
{activeSubPanel === 'versionInfo' && (
<VersionInfo versionData={versionData} />
)}
<div className="help-panel__footer"> <div className="help-panel__footer">
{activeSubPanel === 'versionInfo' && ( {activeSubPanel === 'versionInfo' && (
<a <a
href="#" href="#"
className="help-panel__sub-panel-link help-panel__sub-panel-link--left" className="help-panel__sub-panel-link"
onClick={e => openSubPanel(e, 'tutorial')} onClick={e => openSubPanel(e, 'tutorial')}
> >
<SvgIcon name="arrow-left" className="help-panel__icon" />
<div>Getting started</div> <div>Getting started</div>
<SvgIcon
name="arrow-right"
className="help-panel__sub-panel-link-icon"
/>
</a> </a>
)} )}
{activeSubPanel === 'tutorial' && ( {activeSubPanel === 'tutorial' && (
<a <a
href="#" href="#"
className="help-panel__sub-panel-link help-panel__sub-panel-link--right" className="help-panel__sub-panel-link"
onClick={e => openSubPanel(e, 'versionInfo')} onClick={e => openSubPanel(e, 'versionInfo')}
> >
<div>About this version</div> <div>About this version</div>
<SvgIcon name="arrow-right" className="help-panel__icon" /> <SvgIcon
name="arrow-right"
className="help-panel__sub-panel-link-icon"
/>
</a> </a>
)} )}
</div> </div>
</div> </div>
<div className="help-panel__content">
{activeSubPanel === 'tutorial' && <Tutorial />}
{activeSubPanel === 'versionInfo' && (
<VersionInfo versionData={versionData} />
)}
</div>
<div className="help-panel-tabs"> <div className="help-panel-tabs">
<HelpPanelTab <HelpPanelTab
linkText="Help topics" linkText="Help topics"
......
.help-panel { .help-panel {
&__sub-panel-title { &__sub-panel-title {
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em 0;
text-align: center;
font-size: 1.25em; font-size: 1.25em;
font-weight: 600; font-weight: 500;
} }
&__content { &__content {
...@@ -22,6 +21,7 @@ ...@@ -22,6 +21,7 @@
&__footer { &__footer {
padding: 0.5em 0; padding: 0.5em 0;
margin-left: auto;
display: flex; display: flex;
align-items: center; align-items: center;
} }
...@@ -29,14 +29,11 @@ ...@@ -29,14 +29,11 @@
&__sub-panel-link { &__sub-panel-link {
display: flex; display: flex;
align-items: center; align-items: center;
color: $brand;
&--right {
margin-left: auto; margin-left: auto;
} color: $brand;
&-icon { &-icon {
margin: 5px; margin-left: 2px;
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
......
.tutorial { .tutorial {
&__list { &__list {
margin-top: 1em; margin-top: 0em;
padding-left: 2em; padding-left: 2em;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment