fix base styles

Author: alexjs-dev

components/Forms/parts/BaseVehicleFields.tsx

@@ -64,7 +64,7 @@ const BaseVehicleFields: React.FunctionComponent<Props> = ({
         <Select
           label={t('label.make')}
           fluid
-          searchable
+          searchable={false}
           loading={loadingMakes}
           placeholder={t('placeholder.make')}
           isRequired={includes(requiredFields, fieldTypes.make)}
@@ -76,7 +76,7 @@ const BaseVehicleFields: React.FunctionComponent<Props> = ({
         <Select
           label={t('label.model')}
           fluid
-          searchable
+          searchable={false}
           loading={loadingModels}
           placeholder={t('placeholder.model')}
           name={fieldTypes.model}

components/Input/Select.js

@@ -116,20 +116,24 @@ const SelectComponent = ({
   const ref = useRef(null)
   const searchInputRef = useRef(null)
 
+  const debouncedValue = useDebounce(value, 500)
+
   const isActive = (key) => (multiple ? includes(value, key) : value === key)
   const handleOnChange = (val) => {
     if (input.onChange) input.onChange(val)
     if (onChange) onChange(val)
   }
 
   useEffect(() => {
-    if (value === '' && searchable) {
-      setSearchValue('')
-    }
-    if (searchable && searchValue === '' && value && value !== '') {
-      handleOnChange('')
+    if (searchable) {
+      if (debouncedValue === '') {
+        setSearchValue('')
+      }
+      // if (searchValue === '' && debouncedValue && debouncedValue !== '') {
+      //   handleOnChange('')
+      // }
     }
-  }, [value, searchable])
+  }, [debouncedValue, searchable])
 
   useOutsideClick({ ref, isOpen: open, setOpen })
   const handleOptionClick = (key, label) => {
@@ -239,7 +243,6 @@ const SelectComponent = ({
             />
           </div>
         )}
-
         <InputErrorText error={active ? null : error} />
       </div>
       <div className={styles.wrapper}>

components/User/Avatar.module.scss

@@ -9,8 +9,8 @@
     grid-gap: spacing(1);
     align-items: center;
     img {
-      width: 44px;
-      height: 44px;
+      width: 34px;
+      height: 34px;
       object-fit: cover;
       border-radius: 50%;
     }

components/VehicleOfTheDay/VehicleOfTheDay.module.scss

@@ -125,6 +125,14 @@
   }
 }
 
+.restContent {
+  height: 60%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-top: auto;
+}
+
 .vehicleDetails {
   display: grid;
   grid-template-columns: 50% 50%;
@@ -143,7 +151,7 @@
     font-size: $font-size-span !important;
   }
   @media (max-width: $tablet) {
-    max-height: 118px;
+    // max-height: 118px;
     overflow: auto;
   }
   span {

components/VehicleOfTheDay/VehicleOfTheDay.tsx

@@ -89,6 +89,7 @@ const VehicleContent: React.FunctionComponent<VehicleOfTheDayProps> = ({
         </h3>
       </div>
       <VehicleDetails listing={listing} />
+      <div className={styles.restContent}>
       <Avatar
         userId={listing.userId}
         avatarSrc={listing.user.profile?.image?.url}
@@ -112,6 +113,8 @@ const VehicleContent: React.FunctionComponent<VehicleOfTheDayProps> = ({
           0
         }
       />
+      </div>
+
     </>
   )
 }

hocs/withAuth.js

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
 // import get from 'lodash/get'
 
-const withAuth = (WrappedComponent) => {
+const withAuth = (WrappedComponent, { loginRequired = true }) => {
   return (props) => {
     // checks whether we are on client / browser or server.
     if (typeof window !== 'undefined') {
@@ -12,7 +12,11 @@ const withAuth = (WrappedComponent) => {
       //  const isProtected = get(args, 'isProtected', true)
 
       // If there is no access token we redirect to "/" page.
-      if (!accessToken) {
+      if (!accessToken && loginRequired) {
+        Router.replace('/')
+        return null
+      }
+      if (accessToken && !loginRequired) {
         Router.replace('/')
         return null
       }

pages/sign-up/index.tsx

@@ -11,4 +11,4 @@ const SignInPage: React.FunctionComponent = () => {
   )
 }
 
-export default withAuth(SignInPage)
+export default withAuth(SignInPage, { loginRequired: false })