From 60ea64a577eb4226d048e981caaee0caa3f478d3 Mon Sep 17 00:00:00 2001
From: Mirlan <m.maksitaliev@gmail.com>
Date: Wed, 8 Jul 2020 12:40:22 +0600
Subject: [PATCH] fix(#189): registration step micro bug fixes (#28)

Co-authored-by: mirlan.maksitaliev <mirlan.maksitaliev@instatsport.com>
---
 src/features/Combobox/hooks/index.tsx         |  7 +------
 src/features/Combobox/index.tsx               |  3 ++-
 src/features/Combobox/styled.tsx              | 20 +++++++++++--------
 src/features/Combobox/types.tsx               |  1 +
 src/features/Login/index.tsx                  |  2 +-
 .../components/RegistrationStep/index.tsx     |  1 +
 src/features/UserAccount/index.tsx            |  2 ++
 7 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/features/Combobox/hooks/index.tsx b/src/features/Combobox/hooks/index.tsx
index 80e64915..dc3ccd53 100644
--- a/src/features/Combobox/hooks/index.tsx
+++ b/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(
-      results,
-      0,
-      20,
-    ),
+    options: results,
     query,
   }
 }
diff --git a/src/features/Combobox/index.tsx b/src/features/Combobox/index.tsx
index 9081d22d..515eebe1 100644
--- a/src/features/Combobox/index.tsx
+++ b/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}
diff --git a/src/features/Combobox/styled.tsx b/src/features/Combobox/styled.tsx
index ccf6de46..ee108522 100644
--- a/src/features/Combobox/styled.tsx
+++ b/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;
-  height: 12px;
+  width: 20px;
+  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;
-  left: 0;
-  transform: translate(-126px, 9px);
+  top: 9px;
+  left: -164px;
   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 {
diff --git a/src/features/Combobox/types.tsx b/src/features/Combobox/types.tsx
index 32d97caf..52c46e71 100644
--- a/src/features/Combobox/types.tsx
+++ b/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,
 }
diff --git a/src/features/Login/index.tsx b/src/features/Login/index.tsx
index 26d30feb..e3f6bd34 100644
--- a/src/features/Login/index.tsx
+++ b/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()
diff --git a/src/features/Register/components/RegistrationStep/index.tsx b/src/features/Register/components/RegistrationStep/index.tsx
index 132c313d..a056cf43 100644
--- a/src/features/Register/components/RegistrationStep/index.tsx
+++ b/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}
diff --git a/src/features/UserAccount/index.tsx b/src/features/UserAccount/index.tsx
index 1a23a8b5..5a993901 100644
--- a/src/features/UserAccount/index.tsx
+++ b/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: 'Латвия' },