106vp application form layout

README.md

@@ -91,6 +91,8 @@ Checkmarks back-end repository can be seen [here](https://github.com/BCIT-SSD-20
 
 ```
 REACT_APP_BASE_URL=https://checkmarkswebapirev.azurewebsites.net/
+REACT_APP_AFFINIPAY_PUBLIC_KEY={Affinipay_hostedFieldsConfiguration_public_key}
+REACT_APP_TRUST_ACCOUNT_ID={Trust_Account_Id}
 ```
 
 </details>

src/components/AppBar.js

@@ -99,6 +99,10 @@ export const navbarStyles = makeStyles((theme) => ({
         flexShrink: 0,
     },
     drawerPaper: {
+        backgroundColor: checkmarksTheme.bgAppBarOpq70,
+        width: drawerWidth,
+    },
+    drawerPaperDark: {
         backgroundColor: checkmarksTheme.bgAppBarOpq70Dark,
         width: drawerWidth,
     },
@@ -292,10 +296,10 @@ export default function MenuAppBar({
                             className={classes.menuItem}
                             target="blank"
                             component="a"
-                            href="https://calendly.com/golbey_justin/15mins?month=2021-05"
+                            href="https://calendly.com/golbey_justin/checkmarks"
                         >
                             <EventIcon className={classes.menuItemIcon} />
-                            Book 15 Minutes Through Calendly
+                            Book Appointment
                         </MenuItem>
                         <MenuItem
                             className={classes.menuItem}
@@ -314,13 +318,15 @@ export default function MenuAppBar({
                 variant="persistent"
                 anchor="left"
                 open={drawerOpen}
-                style={{
-                    backgroundColor: darkMode
-                        ? checkmarksTheme.bgAppBarOpq70Dark
-                        : checkmarksTheme.bgAppBarOpq70,
-                }}
+                // style={{
+                //     backgroundColor: darkMode
+                //         ? checkmarksTheme.bgOpaque70Dark
+                //         : checkmarksTheme.bgOpaque70,
+                // }}
                 classes={{
-                    paper: classes.drawerPaper,
+                    paper: darkMode
+                        ? classes.drawerPaperDark
+                        : classes.drawerPaper,
                 }}
             >
                 <div className={classes.drawerHeader}>

src/components/Checkmark.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import { checkmarksTheme } from '../styles/Themes';
 import CheckCircleOutlinedIcon from '@material-ui/icons/CheckCircleOutlined';
 import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 import PriorityHighIcon from '@material-ui/icons/PriorityHigh';
@@ -23,14 +24,14 @@ export default function Checkmark({ value }) {
 
 const useStyles = makeStyles((theme) => ({
     container: {
-        // backgroundColor: 'blue',
+        backgroundColor: checkmarksTheme.bgPrimary,
         alignItems: 'center',
         borderRadius: '50px',
         display: 'flex',
         justifyContent: 'center',
-        height: '30px',
-        marginLeft: '12px',
-        width: '30px',
+        height: '40px',
+        margin: '0 12px',
+        width: '40px',
     },
     checkmarkBad: {
         color: 'red',

src/components/LandingPage/SearchResults.js

@@ -3,71 +3,6 @@ import { checkmarksTheme } from '../../styles/Themes';
 import { Paper } from '@material-ui/core';
 import ResultDetail from './ResultDetail';
 import MuiVirtualizedTable from '../VirtualizedTable';
-// const styles = (theme) => ({
-//     flexContainer: {
-//         display: 'flex',
-//         alignItems: 'center',
-//         boxSizing: 'border-box',
-//         backgroundColor: checkmarksTheme.bgDrawer,
-//         // padding: '5%',
-//     },
-//     table: {
-//         // temporary right-to-left patch, waiting for
-//         // https://github.com/bvaughn/react-virtualized/issues/454
-//         backgroundColor: checkmarksTheme.bgTransparent,
-//         // padding: '2%',
-//         // opacity: 0,
-//         // borderRadius: '25px',
-//         '& .ReactVirtualized__Table__headerRow': {
-//             flip: false,
-//             paddingRight:
-//                 theme.direction === 'rtl' ? '0 !important' : undefined,
-//         },
-//         // backgroundColor: checkmarksTheme.bgDrawer,
-//     },
-//     tableRow: {
-//         backgroundColor: checkmarksTheme.bgTransparent,
-//         cursor: 'pointer',
-//     },
-//     tableRowHover: {
-//         '&:hover': {
-//             backgroundColor: theme.palette.grey[200],
-//         },
-//     },
-//     tableCell: {
-//         // backgroundColor: 'red',
-//         backgroundColor: checkmarksTheme.bgPrimary,
-//         // margin: 'auto',
-//         display: 'flex',
-//         padding: '2px',
-//         justifyContent: 'center',
-//         fontSize: '10px',
-//         textAlign: 'center',
-//         flex: 1,
-//     },
-//     noClick: {
-//         cursor: 'initial',
-//     },
-// });
-
-// MuiVirtualizedTable.propTypes = {
-//     classes: PropTypes.object.isRequired,
-//     columns: PropTypes.arrayOf(
-//         PropTypes.shape({
-//             dataKey: PropTypes.string.isRequired,
-//             label: PropTypes.string.isRequired,
-//             numeric: PropTypes.bool,
-//             width: PropTypes.number.isRequired,
-//         })
-//     ).isRequired,
-//     headerHeight: PropTypes.number,
-//     onRowClick: PropTypes.func,
-//     rowHeight: PropTypes.number,
-// };
-
-// const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
-
-// ---
 
 export default function SearchResults({ data }) {
     // const [detailedView, setDetailedView] = useState(false);

src/components/LandingPage/TrademarkSearch.js

@@ -50,7 +50,7 @@ export default function TrademarkSearch({ searching, setSearching }) {
         if (
             searchTerm !== '' &&
             searchResults?.length === 0 &&
-            numberOfRepeatSearches < 2
+            numberOfRepeatSearches < 3
         ) {
             setLoading(true);
             instance.delayTimer = setTimeout(() => {
@@ -93,15 +93,22 @@ export default function TrademarkSearch({ searching, setSearching }) {
                     placeholder="Check if your Trademark exists..."
                     setInputTo={searchTrademark}
                 />
-                <IconButton
+                <Button
                     style={{
                         display: searching ? 'block' : 'none',
                     }}
                     className={classes.edgeButton}
                     onClick={() => history.push('/application')}
                 >
-                    <PlayArrowTwoToneIcon />
-                </IconButton>
+                    <Box>
+                        <PlayArrowTwoToneIcon />
+                        <PlayArrowTwoToneIcon />
+                        <PlayArrowTwoToneIcon />
+                    </Box>
+                    <Typography className={classes.edgeButtonText}>
+                        Start
+                    </Typography>
+                </Button>
             </Box>
             {/* </Fade> */}
             {searchTerm.length > 2 && (
@@ -169,12 +176,16 @@ export const searchBoxStyles = makeStyles(() => ({
         // },
     },
     edgeButton: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
         animation: '1s $edgeButtonFadeIn',
-        width: '10px',
-        height: '54px',
+        width: '120px',
+        fontSize: '12px',
+        height: '100%',
         // height: '100%',
         color: 'white',
-        opacity: 0.6,
+        opacity: 0.9,
         borderRadius: '0 100px 100px 0',
         backgroundColor: 'red',
         position: 'absolute',
@@ -184,13 +195,14 @@ export const searchBoxStyles = makeStyles(() => ({
         // transitionDelay: '1s',
         // transitionTimingFunction: 'linear',
         transition: 'opacity 1s linear',
+        transitionDelay: '3s',
     },
     searchBoxShifted: {
         animation: '$shiftUp-searchBox-mobile 1s',
         transform: 'translateY(-360%)',
         ['@media (min-width:768px)']: {
             animation: '$shiftUp-searchBox-tablet 1s',
-            transform: 'translateY(-300%)',
+            transform: 'translateY(-350%)',
         },
         ['@media (min-width:1280px)']: {
             animation: '$shiftUp-searchBox-generic 1s',
@@ -249,8 +261,6 @@ export const searchBoxStyles = makeStyles(() => ({
         border: '0.5px solid #FFFFFF00',
         '&.Mui-focused': {
             border: '0.5px solid red',
-            // animation: '$shiftUp-searchBox 1s',
-            // transform: 'translateY(-200%)'
         },
     },
     adornment: {},
@@ -306,7 +316,7 @@ export const searchBoxStyles = makeStyles(() => ({
     },
     '@keyframes shiftUp-searchBox-tablet': {
         from: { transform: 'translateY(0px)' },
-        to: { transform: 'translateY(-300%)' },
+        to: { transform: 'translateY(-350%)' },
     },
     '@keyframes shiftUp-searchBox-generic': {
         from: { transform: 'translateY(0px)' },
@@ -317,7 +327,7 @@ export const searchBoxStyles = makeStyles(() => ({
         to: { transform: 'translateY(0px)' },
     },
     '@keyframes shiftDown-searchBox-tablet': {
-        from: { transform: 'translateY(-300%)' },
+        from: { transform: 'translateY(-350%)' },
         to: { transform: 'translateY(0px)' },
     },
     '@keyframes shiftDown-searchBox-generic': {