sidebar tweaks

Author: nicolaskruchten

src/DefaultEditor.js

@@ -71,15 +71,17 @@ class DefaultEditor extends Component {
     return (
       <PanelMenuWrapper>
         {logo ? logo : null}
-        <GraphCreatePanel group={_('Graph')} name={_('Create')} />
-        <GraphSubplotsPanel group={_('Graph')} name={_('Subplots')} />
-        {this.hasTransforms() && <GraphTransformsPanel group={_('Graph')} name={_('Transform')} />}
+        <GraphCreatePanel group={_('Structure')} name={_('Traces')} />
+        <GraphSubplotsPanel group={_('Structure')} name={_('Subplots')} />
+        {this.hasTransforms() && (
+          <GraphTransformsPanel group={_('Structure')} name={_('Transforms')} />
+        )}
         <StyleTracesPanel group={_('Style')} name={_('Traces')} />
         <StyleLayoutPanel group={_('Style')} name={_('Layout')} />
         {this.hasAxes() && <StyleAxesPanel group={_('Style')} name={_('Axes')} />}
         <StyleLegendPanel group={_('Style')} name={_('Legend')} />
         {this.hasColorbars() && <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />}
-        <StyleNotesPanel group={_('Style')} name={_('Annotate')} />
+        <StyleNotesPanel group={_('Style')} name={_('Annotation')} />
         <StyleShapesPanel group={_('Style')} name={_('Shapes')} />
         <StyleImagesPanel group={_('Style')} name={_('Images')} />
         {this.hasSliders() && <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />}

src/components/containers/TraceRequiredPanel.js

@@ -22,7 +22,7 @@ class TraceRequiredPanel extends Component {
       <PanelEmpty heading={_("Looks like there aren't any traces defined yet.")}>
         <p>
           {_('Go to the ')}
-          <a onClick={() => this.context.setPanel('Graph', 'Create')}>{_('Create')}</a>
+          <a onClick={() => this.context.setPanel('Structure', 'Traces')}>{_('Traces')}</a>
           {_(' panel to define traces.')}
         </p>
       </PanelEmpty>

src/components/fields/AxesCreator.js

@@ -152,7 +152,7 @@ class UnconnectedAxesCreator extends Component {
         {controls}
         <Info>
           {_('You can style and position your axes in the ')}
-          <a onClick={() => this.context.setPanel('Graph', 'Subplots')}>{_('Subplots')}</a>
+          <a onClick={() => this.context.setPanel('Structure', 'Subplots')}>{_('Subplots')}</a>
           {_(' panel.')}
         </Info>
       </PlotlySection>

src/components/fields/SubplotCreator.js

@@ -133,7 +133,7 @@ class UnconnectedSubplotCreator extends Component {
         />
         <Info>
           {_('You can style and position your subplots in the ')}
-          <a onClick={() => this.context.setPanel('Graph', 'Subplots')}>{_('Subplots')}</a>
+          <a onClick={() => this.context.setPanel('Structure', 'Subplots')}>{_('Subplots')}</a>
           {_(' panel.')}
         </Info>
       </PlotlySection>

src/styles/components/sidebar/_main.scss

@@ -10,7 +10,7 @@
   float: left;
   border-right: var(--border-default);
   flex-grow: 1;
-  @include scrollbar();
+  @include scrollbar(0px);
 
   &__group {
     background-color: var(--sidebar-group-background-base);
@@ -102,8 +102,8 @@
     line-height: var(--font-size-medium);
     text-transform: capitalize;
     background-color: var(--sidebar-item-background-base);
-    padding: var(--spacing-half-unit);
-    padding-left: var(--spacing-base-unit);
+    padding: 10px;
+    padding-left: 16px;
     padding-right: var(--spacing-quarter-unit);
     text-align: left;
     border-bottom: var(--border-light);