improve rendering of information interface and introduction boxes

Author: jthrilly

src/containers/Interfaces/DyadCensus/DyadCensus.js

@@ -26,12 +26,12 @@ const fadeVariants = {
 };
 
 const optionsVariants = {
-  show: { opacity: 1, transition: { delay: 0.35, duration: 0.25 } },
-  hide: { opacity: 0, transition: { delay: 0.35, duration: 0.25 } },
+  show: { opacity: 1, transition: { delay: 0.25, duration: 0.25 } },
+  hide: { opacity: 0, transition: { delay: 0.25, duration: 0.25 } },
 };
 
 const choiceVariants = {
-  show: { opacity: 1, translateY: '0%', transition: { delay: 0.25, type: 'spring' } },
+  show: { opacity: 1, translateY: '0%', transition: { delay: 0.15, type: 'spring' } },
   hide: { opacity: 0, translateY: '120%' },
 };
 

src/styles/components/_information-interface.scss

@@ -1,7 +1,7 @@
 $asset-size-large: 64vh;
 $asset-size-medium: 32vh;
-$asset-size-small: 16vh;
-$asset-size-default: 16vh;
+$asset-size-small: 17vh;
+$asset-size-default: 17vh;
 
 .information-interface {
   @include interface-centering;
@@ -12,8 +12,7 @@ $asset-size-default: 16vh;
   align-items: center;
 
   &__frame {
-    width: 80%;
-    max-width: 50rem;
+    max-width: 55rem;
   }
 
   &__title {
@@ -22,7 +21,7 @@ $asset-size-default: 16vh;
 
   &__items {
     margin-top: spacing('large');
-    max-height: calc($asset-size-large + #{spacing('medium') * 4});
+    max-height: calc(#{$asset-size-large} + #{spacing('medium') * 4});
     overflow: hidden;
   }
 
@@ -63,6 +62,7 @@ $asset-size-default: 16vh;
         overflow-y: auto;
         height: auto;
         max-height: $asset-size-small;
+        margin-top: 0; // Text paragraphs have their own margin
 
         &.information-interface__item--size-SMALL {
           max-height: $asset-size-small;

src/styles/containers/_dyad-census.scss

@@ -65,8 +65,11 @@
     background: var(--light-background);
     border-radius: var(--border-radius);
     padding: unit(2) unit(4);
-    min-width: 50vw;
-    text-align: center;
+    max-width: 55rem;
+
+    h1 {
+      text-align: center;
+    }
   }
 
   &__layout {

src/styles/containers/_tie-strength-census.scss

@@ -53,8 +53,11 @@
     background: var(--light-background);
     border-radius: var(--border-radius);
     padding: unit(2) unit(4);
-    min-width: 50vw;
-    text-align: center;
+    max-width: 55rem; // Same as ego form for readability
+
+    h1 {
+      text-align: center;
+    }
   }
 
   &__layout {