updates to toast + toast for preferences

- fixes for modals with more than one step needed

web/src/components/DeleteProjectModal/DeleteProjectModal.tsx

@@ -52,7 +52,7 @@ const DeleteProjectModal: React.FC<DeleteProjectModalProps> = ({
         <ProjectModalHeading title="Delete project" />
         <ProjectModalContentSpacer>
           <ProjectModalContent>
-            Are you sure you want to delete the project '{projectName}'? This
+            Are you sure you want to delete the project <b>'{projectName}'</b>? This
             action will delete all the project data and can’t be undone.
           </ProjectModalContent>
         </ProjectModalContentSpacer>

web/src/components/Modal/Modal.scss

@@ -54,16 +54,21 @@
   position: absolute;
   width: 32.5rem;
   box-sizing: border-box;
-  padding: 4rem;
+
   background-color: #ffff;
   border-radius: 1rem;
   box-shadow: 0px 0px 1rem var(--shadow-color);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   transition: 0.2s all;
-  overflow-y: scroll;
   max-height: calc(100vh - 2rem);
+  overflow-y: hidden;
+
+  .modal-scrollable-content {
+    padding: 4rem 4rem 3rem 4rem ;
+    overflow-y: auto;    // change to auto so the scrollbar only appears when necessary
+  }
 
   .modal-button-close {
     position: absolute;

web/src/components/Modal/Modal.tsx

@@ -115,7 +115,9 @@ const Modal: React.FC<ModalProps> = ({
               <ButtonClose onClick={onClose} size="medium" />
             </div>
           )}
+          <div className='modal-scrollable-content'>
           {children}
+          </div>
         </div>
         {/* </OnClickOutside> */}
       </div>

web/src/components/PreferenceSelect/PreferenceSelect.scss

@@ -1,7 +1,7 @@
 /* PreferenceSelect */
 
 .preference-select {
-  padding: 20px 0;
+  padding: 1.5rem 0;
   /* border-bottom: 1px solid #e3e3e3; */
 }
 
@@ -39,7 +39,7 @@
 .preference-select-options-wrapper {
   display: flex;
   flex-direction: row;
-  padding: 0 30px;
+  // padding: 0 30px;
   margin-bottom: 1rem;
 }
 
@@ -51,12 +51,15 @@
   text-align: center;
   border: 1px solid #e3e3e3;
   border-radius: 10px;
-  width: 150px;
+  width: 180px;
   height: 120px;
-  margin: 0 auto;
   display: block;
   cursor: pointer;
   transition: border 0.2s ease-in-out;
+
+  &:first-child {
+    margin-right: 1rem;
+  }
 }
 
 .preference-select-option:hover,
@@ -66,7 +69,7 @@
 }
 
 .preference-select-option-content {
-  width: 150px;
+  width: 180px;
   height: 120px;
   display: table-cell;
   vertical-align: middle;

web/src/components/Preferences/Preferences.scss

@@ -1,35 +1,119 @@
-.preferences-title {
-  font-size: 24px;
-  line-height: 32px;
-  color: #4d4d4d;
-  font-family: 'gilroyextrabold', 'gilroyextrabold', Helvetica, sans-serif;
-  text-align: center;
-  margin-bottom: 20px;
+.preferences-modal {
 }
 
-.navigation-mode-option-icon-trackpad .icon {
-  height: 49px;
-  width: 47px;
-  margin-bottom: -8px;
+// Preferences Modal animation
+.preferences-modal-enter {
+  opacity: 0;
 }
 
-.navigation-mode-option-icon-mouse .icon {
-  height: 45px;
-  width: 40px;
-  margin-bottom: -5px;
+.preferences-modal-enter-active {
+  opacity: 1;
+  transition: 0.2s all;
+}
+
+.preferences-modal-exit {
+  opacity: 1;
+}
+
+.preferences-modal-exit-active {
+  opacity: 0;
+  transition: 0.2s all;
+}
+
+.preferences {
+  background-color: var(--bg-color-secondary);
+  width: calc(100vw);
+  height: calc(100vh);
+  overflow-y: hidden;
+  box-sizing: border-box;
+  position: absolute;
+  // left: 3rem;
+  // top: 4rem;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  // border-radius: 1rem;
+
+  .preferences-close {
+    position: absolute;
+    right: 2.5rem;
+    top: 2.5rem;
+  }
+
+  .preferences-save-button {
+    border-top: 1.5px solid var(--border-color-timberwolf);
+    width: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem 0 2rem 0;
+  }
+
+  .preferences-scrollable {
+    overflow-y: scroll;
+    height: 100%;
+    width: 100%;
+    // max-width: 30rem;
+    // padding: 4rem 0;
+    // box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .preferences-title {
+    font-size: 24px;
+    line-height: 1.5;
+    font-family: var(--font-family-primary-bold);
+    text-align: center;
+    border-bottom: 1.5px solid var(--border-color-timberwolf);
+    width: 100%;
+    padding: 2.75rem 0 2rem;
+  }
+
+  .preferences-content {
+    height: 100%;
+    max-width: 30rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 3rem;
+  }
+}
+
+.navigation-mode-option-icon-trackpad {
+  .icon {
+    height: 49px;
+    width: 47px;
+    margin-bottom: -8px;
+  }
+}
+
+.navigation-mode-option-icon-mouse {
+  .icon {
+    height: 45px;
+    width: 40px;
+    margin-bottom: -5px;
+  }
 }
 
 .navigation-mode-description-title-wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 10px;
-}
 
-.navigation-mode-description-title-wrapper .icon {
-  height: 12px;
-  cursor: unset;
-  padding: 0;
+  .icon {
+    height: 12px;
+    cursor: unset;
+    padding: 0;
+  }
 }
 
 .navigation-mode-description-title {
@@ -46,12 +130,3 @@
   color: #3b3b3b;
   margin-left: 26px;
 }
-
-.preferences-save-button {
-  text-align: center;
-  margin-top: 40px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}

web/src/components/Preferences/Preferences.tsx

@@ -1,9 +1,8 @@
-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
 import './Preferences.scss'
 
 import Icon from '../Icon/Icon'
 import Button from '../Button/Button'
-import Modal from '../Modal/Modal'
 import {
   COORDINATES,
   KeyboardNavigationPreference,
@@ -17,6 +16,9 @@ import PreferenceSelect, {
   PreferenceSelectOption,
 } from '../PreferenceSelect/PreferenceSelect'
 import { ModalState, OpenModal } from '../../context/ModalContexts'
+import ButtonClose from '../ButtonClose/ButtonClose'
+import { CSSTransition } from 'react-transition-group'
+import ToastContext, { ShowToast } from '../../context/ToastContext'
 
 function Descriptions({ navigation }) {
   return (
@@ -101,19 +103,19 @@ function KeyboardNavigationModeInternal({
 }) {
   const options = (
     <>
-      <PreferenceSelectOption
-        active={keyboardNavigation === MODAL}
-        onClick={() => setKeyboardNavigationSelected(MODAL)}
-        iconName="trackpad.svg"
-        iconExtraClassName="navigation-mode-option-icon-trackpad"
-        title="Use a Modal"
-      />
       <PreferenceSelectOption
         active={keyboardNavigation === COORDINATES}
         onClick={() => setKeyboardNavigationSelected(COORDINATES)}
-        iconName="mouse.svg"
+        iconName="arrow-down-left.svg"
         iconExtraClassName="navigation-mode-option-icon-mouse"
-        title="Use Coordinates"
+        title="The most left"
+      />
+      <PreferenceSelectOption
+        active={keyboardNavigation === MODAL}
+        onClick={() => setKeyboardNavigationSelected(MODAL)}
+        iconName="aspect-ratio.svg"
+        iconExtraClassName="navigation-mode-option-icon-trackpad"
+        title="Show a modal"
       />
     </>
   )
@@ -150,15 +152,25 @@ export default function Preferences({
   setModalState,
 }: PreferencesProps) {
   // hold an internal version of the preferences state, so that we can toggle it, before saving it
-  const [navigationSelected, setNavigationSelected] = useState(navigationPreference)
+  const [navigationSelected, setNavigationSelected] = useState(
+    navigationPreference
+  )
   const [keyboardNavigationSelected, setKeyboardNavigationSelected] = useState(
     keyboardNavigationPreference
   )
 
+   // pull in the toast context
+   const { setToastState } = useContext(ToastContext)
+
   const save = () => {
     setNavigationPreference(navigationSelected)
     setKeyboardNavigationPreference(keyboardNavigationSelected)
     setModalState({ id: OpenModal.None })
+    setToastState({
+      id: ShowToast.Yes,
+      text: 'Preferences saved',
+      type: 'confirmation',
+    })
   }
   const close = () => {
     // reset navigation selected to
@@ -170,24 +182,35 @@ export default function Preferences({
   }
 
   return (
-    <Modal
-      white
-      active={modalState.id === OpenModal.Preferences}
-      onClose={close}
+    <CSSTransition
+      in={modalState.id === OpenModal.Preferences}
+      timeout={100}
+      unmountOnExit
+      classNames="preferences-modal"
     >
-      <div className="preferences-title">Preferences</div>
-      <NavigationModeInternal
-        navigation={navigationSelected}
-        setNavigationSelected={setNavigationSelected}
-      />
-      <KeyboardNavigationModeInternal
-        keyboardNavigation={keyboardNavigationSelected}
-        setKeyboardNavigationSelected={setKeyboardNavigationSelected}
-      />
-
-      <div className="preferences-save-button">
-        <Button onClick={save} text="Save Changes" />
+      <div className="preferences">
+        <div className="preferences-close">
+           <ButtonClose size={'medium'} onClick={close} />
+        </div>
+        <div className="preferences-title">Preferences</div>
+        <div className="preferences-scrollable">
+          <div className="preferences-content">
+            <NavigationModeInternal
+              navigation={navigationSelected}
+              setNavigationSelected={setNavigationSelected}
+            />
+            <KeyboardNavigationModeInternal
+              keyboardNavigation={keyboardNavigationSelected}
+              setKeyboardNavigationSelected={setKeyboardNavigationSelected}
+            />
+          </div>
+        </div>
+        <div className="preferences-save-button">
+          <Button onClick={save} text="Save Changes" />
+        </div>
       </div>
-    </Modal>
+    </CSSTransition>
   )
 }
+
+

web/src/components/RemoveSelfProjectModal/RemoveSelfProjectModal.tsx

@@ -52,7 +52,7 @@ const RemoveSelfProjectModal: React.FC<RemoveSelfProjectModalProps> = ({
         <ProjectModalContentSpacer>
           <ProjectModalContent>
             Are you sure you want to remove yourself from the shared project '
-            {projectName}'? If you remove yourself from this project you won’t
+            <b>{projectName}</b>'? If you remove yourself from this project you won’t
             have access to it anymore.
             <p />
             You can join this project again later, as long as it still has