Updates (#192)

* userAvatar

* Avatar background

* Changes

* Removing unused dependencies

* Count Bag small and for bigger numbers

* decresed bundle size

components/ui/Button/Button.module.css

@@ -7,7 +7,7 @@
 }
 
 .root:focus {
-  @apply shadow-outline outline-none;
+  @apply shadow-outline-normal outline-none;
 }
 
 .root[data-active] {

components/ui/Input/Input.module.css

@@ -3,5 +3,5 @@
 }
 
 .root:focus {
-  @apply outline-none shadow-outline-gray;
+  @apply outline-none shadow-outline-normal;
 }

components/ui/context.tsx

@@ -52,6 +52,10 @@ type Action =
       type: 'SET_MODAL_VIEW'
       view: MODAL_VIEWS
     }
+  | {
+      type: 'SET_USER_AVATAR'
+      value: string
+  }
 
 type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
 type ToastText = string
@@ -123,6 +127,12 @@ function uiReducer(state: State, action: Action) {
         toastText: action.text,
       }
     }
+    case 'SET_USER_AVATAR': {
+      return {
+        ...state,
+        userAvatar: action.value,
+      }
+    }
   }
 }
 
@@ -147,6 +157,8 @@ export const UIProvider: FC = (props) => {
   const openToast = () => dispatch({ type: 'OPEN_TOAST' })
   const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
 
+  const setUserAvatar = (value: string) => dispatch({ type: 'SET_USER_AVATAR', value })
+
   const setModalView = (view: MODAL_VIEWS) =>
     dispatch({ type: 'SET_MODAL_VIEW', view })
 
@@ -164,6 +176,7 @@ export const UIProvider: FC = (props) => {
       setModalView,
       openToast,
       closeToast,
+      setUserAvatar
     }),
     [state]
   )