cleanup build & ui issues

Author: ShMcK

web-app/package-lock.json

@@ -59,6 +59,7 @@
     "@types/node": "^13.7.7",
     "@types/prismjs": "^1.16.0",
     "@types/react": "^16.9.23",
+    "@types/react-addons-css-transition-group": "^15.0.5",
     "@types/react-dom": "^16.9.5",
     "@typescript-eslint/eslint-plugin": "^2.21.0",
     "@typescript-eslint/parser": "^2.21.0",

web-app/package.json

@@ -7,22 +7,22 @@ const Panel = Collapse.Panel
 
 const styles = {
   container: {
-    position: 'relative',
+    position: 'relative' as 'relative',
     transition: 'all .35s',
   },
   header: {
-    display: 'flex',
+    display: 'flex' as 'flex',
     backgroundColor: '#6a67ce',
     color: 'white',
     padding: '0.5rem',
   },
   title: {
-    marginLeft: '.6rem',
     fontSize: '1rem',
   },
   toggle: {
-    display: 'flex',
-    alignItems: 'center',
+    display: 'flex' as 'flex',
+    alignItems: 'center' as 'center',
+    width: '1.5rem',
   },
 }
 
@@ -113,10 +113,8 @@ const NewUserExperienceTutorial = (props: Props) => {
   return (
     <div css={{ ...styles.container, ...props.css }}>
       <div css={styles.header} onClick={onToggle} style={{ cursor: 'pointer' }}>
-        <div css={styles.toggle}>
-          {isOpen ? <Icon type="close" size="xs" /> : <Icon type="help" size="small" />}
-          <span css={styles.title}>Help</span>
-        </div>
+        <span css={styles.toggle}>{isOpen ? <Icon type="close" size="xs" /> : <Icon type="help" size="small" />}</span>
+        <span css={styles.title}>Help</span>
       </div>
       <ReactCSSTransitionGroup transitionName="slide" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
         {isOpen && <NewUserExperienceTutorialCollapsible />}

web-app/src/components/NewUserExperience/NuxTutorial.tsx

@@ -15,7 +15,7 @@ const styles = {
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
     padding: 0,
-    paddingBottom: '4.5rem',
+    paddingBottom: '5rem',
     height: 'auto',
     width: '100%',
   },
@@ -44,7 +44,7 @@ const styles = {
   processes: {
     padding: '0 1rem',
     position: 'fixed' as 'fixed',
-    bottom: '2rem',
+    bottom: '4rem',
     left: 0,
     right: 0,
   },