fix(#189): registration step micro bug fixes (#28)

Co-authored-by: mirlan.maksitaliev <mirlan.maksitaliev@instatsport.com>

src/features/Combobox/hooks/index.tsx

@@ -3,7 +3,6 @@ import { useState, useCallback } from 'react'
 
 import isUndefined from 'lodash/isUndefined'
 import toLower from 'lodash/toLower'
-import slice from 'lodash/slice'
 import find from 'lodash/find'
 import trim from 'lodash/trim'
 
@@ -71,11 +70,7 @@ export const useCombobox = <T extends Option>(props: Props<T>) => {
     onInputBlur,
     onOptionSelect,
     onQueryChange,
-    options: slice(
+    options: results,
-      results,
-      0,
-      20,
-    ),
     query,
   }
 }

src/features/Combobox/index.tsx

@@ -29,6 +29,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
     pattern,
     required,
     title,
+    withArrow,
   } = props
   const {
     onInputBlur,
@@ -51,7 +52,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
             ? <T9n t={labelLexic} />
             : label
         }
-        <Arrow />
+        {withArrow && <Arrow />}
       </Label>
       <ComboboxInputStyled
         id={id}

src/features/Combobox/styled.tsx

@@ -22,14 +22,19 @@ export const ComboboxInputStyled = styled(ComboboxInput)`
 
 export const Arrow = styled.div`
   position: absolute;
-  right: 20px;
+  right: 16px;
   top: 50%;
   transform: translateY(-50%);
-  width: 12px;
+  width: 20px;
-  height: 12px;
+  height: 20px;
+  background-size: 12px 12px;
   background-image: url(/images/arrowDown.svg);
   background-position: center;
   background-repeat: no-repeat;
+
+  :hover {
+    cursor: pointer;
+  }
 `
 
 export const ComboboxPopoverStyled = styled(ComboboxPopover)`
@@ -44,15 +49,14 @@ export const ComboboxListStyled = styled(ComboboxList)`
   border-radius: 2px;
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   position: absolute;
-  top: 0;
+  top: 9px;
-  left: 0;
+  left: -164px;
-  transform: translate(-126px, 9px);
   overflow: auto;
 
   ::-webkit-scrollbar {
     width: 8px;
   }
-  
+
   ::-webkit-scrollbar-track {
     background: transparent;
   }
@@ -76,7 +80,7 @@ export const ComboboxOptionStyled = styled(ComboboxOption)`
 
   &[aria-selected="true"] {
     background: #999;
-    color: #fff; 
+    color: #fff;
   }
 
   &:hover {

src/features/Combobox/types.tsx

@@ -21,4 +21,5 @@ export type Props<T> = Pick<InputHTMLAttributes<HTMLInputElement>, (
   openOnFocus?: boolean,
   options: Array<T>,
   value?: string,
+  withArrow?: boolean,
 }

src/features/Login/index.tsx

@@ -17,7 +17,7 @@ import {
   RegisterButton,
 } from './styled'
 
-const labelWidth = 60
+const labelWidth = 75
 
 export const Login = () => {
   const { handleSubmit } = useForm()

src/features/Register/components/RegistrationStep/index.tsx

@@ -85,6 +85,7 @@ export const RegistrationStep = () => {
       <Combobox
         required
         openOnFocus
+        withArrow
         id={formIds.country}
         labelLexic='form_country'
         labelWidth={labelWidth}

src/features/UserAccount/index.tsx

@@ -52,6 +52,7 @@ export const UserAccount = () => (
                 labelWidth={labelWidth}
               />
               <Combobox
+                withArrow
                 options={[
                   { id: 1, name: 'Армения' },
                   { id: 2, name: 'Латвия' },
@@ -139,6 +140,7 @@ export const UserAccount = () => (
                 labelWidth={labelWidth}
               />
               <Combobox
+                withArrow
                 options={[
                   { id: 1, name: 'Армения' },
                   { id: 2, name: 'Латвия' },