style tweaks to node form and dyad census

Author: jthrilly

src/containers/Interfaces/DyadCensus/DyadCensus.js

@@ -26,8 +26,8 @@ const fadeVariants = {
 };
 
 const optionsVariants = {
-  show: { opacity: 1, transition: { delay: 0.25, duration: 0.25 } },
-  hide: { opacity: 0, transition: { delay: 0.25, duration: 0.25 } },
+  show: { opacity: 1, transition: { delay: 0.15, duration: 0.25 } },
+  hide: { opacity: 0, transition: { delay: 0.15, duration: 0.25 } },
 };
 
 const choiceVariants = {

src/containers/Interfaces/DyadCensus/Pair.js

@@ -8,7 +8,7 @@ const animationTarget = -50;
 
 const pairTransition = {
   duration: 0.5,
-  delay: 0.35,
+  delay: 0.15,
   when: 'afterChildren',
 };
 

src/containers/Interfaces/Narrative.js

@@ -193,23 +193,23 @@ class Narrative extends Component {
                 allowPositioning={allowRepositioning}
               />
             </Canvas>
+            <PresetSwitcher
+              id="drop-obstacle"
+              presets={presets}
+              activePreset={presetIndex}
+              highlightIndex={highlightIndex}
+              isFrozen={isFrozen}
+              shouldShowResetButton={shouldShowResetButton}
+              shouldShowFreezeButton={freeDraw}
+              onResetInteractions={this.handleResetInteractions}
+              onChangePreset={this.handleChangePreset}
+              onToggleFreeze={this.handleToggleFreeze}
+              onToggleHulls={this.handleToggleHulls}
+              onToggleEdges={this.handleToggleEdges}
+              onChangeHighlightIndex={this.handleChangeHighlightIndex}
+              onToggleHighlighting={this.handleToggleHighlighting}
+            />
           </LayoutProvider>
-          <PresetSwitcher
-            id="drop-obstacle"
-            presets={presets}
-            activePreset={presetIndex}
-            highlightIndex={highlightIndex}
-            isFrozen={isFrozen}
-            shouldShowResetButton={shouldShowResetButton}
-            shouldShowFreezeButton={freeDraw}
-            onResetInteractions={this.handleResetInteractions}
-            onChangePreset={this.handleChangePreset}
-            onToggleFreeze={this.handleToggleFreeze}
-            onToggleHulls={this.handleToggleHulls}
-            onToggleEdges={this.handleToggleEdges}
-            onChangeHighlightIndex={this.handleChangeHighlightIndex}
-            onToggleHighlighting={this.handleToggleHighlighting}
-          />
         </div>
       </div>
     );

src/styles/components/_node-form.scss

@@ -10,7 +10,7 @@
 
       .overlay__content {
         .scrollable {
-          padding: unit(2) unit(4);
+          padding: 0 unit(4);
         }
       }
     }

src/styles/components/_overlay.scss

@@ -16,8 +16,7 @@ $close-button-size: 1rem;
   margin: unit(4);
 
   &__title {
-    padding: 0 unit(4);
-    margin: unit(4);
+    padding: unit(4);
     flex: 0 0 auto;
     display: flex;
     align-items: center;
@@ -39,7 +38,6 @@ $close-button-size: 1rem;
     overflow-x: hidden;
     overflow-y: auto;
     padding: 0 unit(4);
-    margin-bottom: unit(4);
   }
 
   &__footer {