narrowing sidebar from 120px to 100px and panel from 345px to 335px

src/DefaultEditor.js

@@ -73,13 +73,13 @@ class DefaultEditor extends Component {
         {logo ? logo : null}
         <GraphCreatePanel group={_('Graph')} name={_('Create')} />
         <GraphSubplotsPanel group={_('Graph')} name={_('Subplots')} />
-        {this.hasTransforms() && <GraphTransformsPanel group={_('Graph')} name={_('Transforms')} />}
+        {this.hasTransforms() && <GraphTransformsPanel group={_('Graph')} name={_('Transform')} />}
         <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={_('Annotations')} />
+        <StyleNotesPanel group={_('Style')} name={_('Annotate')} />
         <StyleShapesPanel group={_('Style')} name={_('Shapes')} />
         <StyleImagesPanel group={_('Style')} name={_('Images')} />
         {this.hasSliders() && <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />}

src/components/fields/RectanglePositioner.js

@@ -6,7 +6,7 @@ import ResizableRect from 'react-resizable-rotatable-draggable';
 import RadioBlocks from '../widgets/RadioBlocks';
 import DualNumeric from './DualNumeric';
 
-const maxWidth = 286;
+const maxWidth = 276;
 const gridRes = 8;
 
 class UnconnectedRectanglePositioner extends Component {
@@ -77,94 +77,96 @@ class UnconnectedRectanglePositioner extends Component {
     }
 
     return (
-      <Field {...this.props} attr={attr}>
-        <Field label={_('Snap to Grid')}>
-          <RadioBlocks
-            alignment="center"
-            onOptionChange={snap => this.setState({snap: snap})}
-            activeOption={this.state.snap}
-            options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
-          />
-        </Field>
-        <div
-          className="rect-container"
-          style={{
-            width: fieldWidthPx + 1,
-            height: fieldHeightPx + 1,
-          }}
-        >
-          {Array(gridRes * gridRes)
-            .fill(0)
-            .map((v, i) => (
-              <div
-                key={i}
-                className="rect-grid"
-                style={{
-                  width: fieldWidthPx / gridRes - 1,
-                  height: fieldHeightPx / gridRes - 1,
-                  borderBottom: i < gridRes * (gridRes - 1) ? '0' : '1px solid ',
-                  borderRight: (i + 1) % gridRes ? '0' : '1px solid',
-                }}
-              />
-            ))}
-          <ResizableRect
-            bounds="parent"
-            width={width}
-            height={height}
-            left={left}
-            top={top}
-            rotatable={false}
-            draggable={!this.state.snap}
-            zoomable={zoomable}
-            onResize={style => {
-              this.sendUpdate({
-                fieldWidthPx,
-                fieldHeightPx,
-                width: style.width,
-                height: style.height,
-                x: style.left,
-                y: style.top,
-              });
-            }}
-            onDrag={(deltaX, deltaY) => {
-              this.sendUpdate({
-                fieldWidthPx,
-                fieldHeightPx,
-                width,
-                height,
-                x: left + deltaX,
-                y: top + deltaY,
-              });
+      <div style={{marginRight: 25}}>
+        <Field {...this.props} attr={attr}>
+          <Field label={_('Snap to Grid')}>
+            <RadioBlocks
+              alignment="center"
+              onOptionChange={snap => this.setState({snap: snap})}
+              activeOption={this.state.snap}
+              options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
+            />
+          </Field>
+          <div
+            className="rect-container"
+            style={{
+              width: fieldWidthPx + 1,
+              height: fieldHeightPx + 1,
             }}
-          />
-        </div>
-        {fullContainer.xaxis && fullContainer.xaxis.overlaying ? (
-          ''
-        ) : (
-          <DualNumeric
-            label={_('X')}
-            attr={this.attr.x[0]}
-            attr2={this.attr.x[1]}
-            percentage
-            step={1}
-            min={0}
-            max={100}
-          />
-        )}
-        {fullContainer.yaxis && fullContainer.yaxis.overlaying ? (
-          ''
-        ) : (
-          <DualNumeric
-            label={_('Y')}
-            attr={this.attr.y[0]}
-            attr2={this.attr.y[1]}
-            percentage
-            step={1}
-            min={0}
-            max={100}
-          />
-        )}
-      </Field>
+          >
+            {Array(gridRes * gridRes)
+              .fill(0)
+              .map((v, i) => (
+                <div
+                  key={i}
+                  className="rect-grid"
+                  style={{
+                    width: fieldWidthPx / gridRes - 1,
+                    height: fieldHeightPx / gridRes - 1,
+                    borderBottom: i < gridRes * (gridRes - 1) ? '0' : '1px solid ',
+                    borderRight: (i + 1) % gridRes ? '0' : '1px solid',
+                  }}
+                />
+              ))}
+            <ResizableRect
+              bounds="parent"
+              width={width}
+              height={height}
+              left={left}
+              top={top}
+              rotatable={false}
+              draggable={!this.state.snap}
+              zoomable={zoomable}
+              onResize={style => {
+                this.sendUpdate({
+                  fieldWidthPx,
+                  fieldHeightPx,
+                  width: style.width,
+                  height: style.height,
+                  x: style.left,
+                  y: style.top,
+                });
+              }}
+              onDrag={(deltaX, deltaY) => {
+                this.sendUpdate({
+                  fieldWidthPx,
+                  fieldHeightPx,
+                  width,
+                  height,
+                  x: left + deltaX,
+                  y: top + deltaY,
+                });
+              }}
+            />
+          </div>
+          {fullContainer.xaxis && fullContainer.xaxis.overlaying ? (
+            ''
+          ) : (
+            <DualNumeric
+              label={_('X')}
+              attr={this.attr.x[0]}
+              attr2={this.attr.x[1]}
+              percentage
+              step={1}
+              min={0}
+              max={100}
+            />
+          )}
+          {fullContainer.yaxis && fullContainer.yaxis.overlaying ? (
+            ''
+          ) : (
+            <DualNumeric
+              label={_('Y')}
+              attr={this.attr.y[0]}
+              attr2={this.attr.y[1]}
+              percentage
+              step={1}
+              min={0}
+              max={100}
+            />
+          )}
+        </Field>
+      </div>
     );
   }
 }

src/components/widgets/SymbolSelector.js

@@ -1,7 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import ModalBox from '../containers/ModalBox';
 import {CarretDownIcon} from 'plotly-icons';
 
 export default class SymbolSelector extends Component {
@@ -78,10 +77,7 @@ export default class SymbolSelector extends Component {
         <div
           className="symbol-selector__item"
           key={value}
-          onClick={() => {
-            this.props.onChange(value);
-            this.togglePanel();
-          }}
+          onClick={() => this.props.onChange(value)}
         >
           <svg width="28" height="28" className="symbol-selector__symbol" data-value={value}>
             <g transform="translate(14,14)">
@@ -107,11 +103,7 @@ export default class SymbolSelector extends Component {
             <CarretDownIcon className="symbol-selector__toggle__caret" />
           </span>
         </div>
-        {isOpen ? (
-          <ModalBox onClose={this.togglePanel} backgroundDark={this.props.backgroundDark}>
-            {this.renderOptions()}
-          </ModalBox>
-        ) : null}
+        {isOpen && this.renderOptions()}
       </div>
     );
   }

src/styles/components/fields/_field.scss

@@ -40,7 +40,7 @@
     align-self: center;
   }
   &__title {
-    width: 30%;
+    width: 80px;
     //flex-shrink:0;
     padding-left: var(--spacing-half-unit);
     display: block;
@@ -89,7 +89,7 @@
     border-left: 1px solid;
   }
   .rect-container {
-    margin: var(--spacing-eighth-unit) auto var(--spacing-quarter-unit) auto;
+    margin: 0 auto;
     position: relative;
     max-width: 294px;
   }

src/styles/variables/_layout.scss

@@ -1,5 +1,5 @@
 /*
  * Layout
  */
-$layout-panel-width: 345px;
-$layout-sidebar-width: 120px;
+$layout-panel-width: 335px;
+$layout-sidebar-width: 100px;