From 793d12b8de536341229b265e1064798192345a14 Mon Sep 17 00:00:00 2001
From: pluvio72 <maksjl01@gmail.com>
Date: Sun, 7 Aug 2022 09:51:17 +0100
Subject: [PATCH] fixed select search blur and stylings in compare and
 favourite views.

---
 src/components/SelectSearch/selectsearch.jsx |  3 ++-
 src/views/Compare/compare.jsx                |  2 +-
 src/views/Favourites/favourites.jsx          | 23 ++++++++++++--------
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/SelectSearch/selectsearch.jsx b/src/components/SelectSearch/selectsearch.jsx
index 46d730f..e8aa083 100644
--- a/src/components/SelectSearch/selectsearch.jsx
+++ b/src/components/SelectSearch/selectsearch.jsx
@@ -30,7 +30,7 @@ function SelectSearch({ data, onSelect, onInputChange }){
     }
 
     return(
-        <div onMouseLeave={onInputBlur}>
+        <div>
             <FormControl
                 type="text"
                 ref={inputRef}
@@ -38,6 +38,7 @@ function SelectSearch({ data, onSelect, onInputChange }){
                 className={`select-search ${showSuggestions ? "open":""}`}
                 onFocus={onInputFocus}
                 onChange={onInputChangeLocal}
+                onBlur={onInputBlur}
                 value={filter}
             />
             {showSuggestions &&
diff --git a/src/views/Compare/compare.jsx b/src/views/Compare/compare.jsx
index 1c550e6..ba858da 100644
--- a/src/views/Compare/compare.jsx
+++ b/src/views/Compare/compare.jsx
@@ -54,7 +54,7 @@ function Compare(){
                             <PokemonCard pokemon={pokemon1}/>
                         </div>
                     </Col>
-                    <Col className="col-2 fw-bold fs-3 text-center vs">VS</Col>
+                    <Col className="col-2 fw-bold fs-1 text-center vs">VS</Col>
                     <Col className="col-5 d-flex">
                         <div className="w-100 search-parent">
                             <SelectSearch data={pokemon} onSelect={onSelectNewPokemon2} onInputChange={onInputChange}/>
diff --git a/src/views/Favourites/favourites.jsx b/src/views/Favourites/favourites.jsx
index 96414a9..2ac10f6 100644
--- a/src/views/Favourites/favourites.jsx
+++ b/src/views/Favourites/favourites.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { getFavourites, removePokemonFromFavourites } from "../../services/favourites";
 import Layout from "../../components/Layout";
-import { Col, Container, Row } from "react-bootstrap";
+import { Badge, Col, Container, Row } from "react-bootstrap";
 import "./favourites.scss";
 
 function Favourites() {
@@ -30,14 +30,19 @@ function Favourites() {
               <Col className="col-3">
                 <div className="favourites-item">
                   <span>{favourite}</span>
-                  <img
-                    width={16}
-                    height={16}
-                    className="align-self-center ms-auto remove-favourite"
-                    src="/images/cross.png"
-                    alt="remove favourite"
-                    onClick={() => removeFavourite(favourite)}
-                  />
+                  <div className="ms-auto">
+                    {favourites[favourite].types.map((_type) => (
+                        <Badge className={_type+" ms-1"}>{_type}</Badge>
+                    ))}
+                    <img
+                        width={16}
+                        height={16}
+                        className="align-self-center remove-favourite ms-2"
+                        src="/images/cross.png"
+                        alt="remove favourite"
+                        onClick={() => removeFavourite(favourite)}
+                    />
+                  </div>
                 </div>
               </Col>
             ))