Merge branch 'fix-insight-search' of github.com:MicahMaphet/bitcore

Author: kajoseph

packages/insight/src/components/pill.tsx

@@ -1,27 +1,75 @@
-import { FC } from 'react';
+import {FC} from 'react';
 import styled from 'styled-components';
 import CloseLightSvg from 'src/assets/images/close-light.svg'
-import {Black, Slate30} from '../assets/styles/colors';
+import {Black, White, Slate30} from '../assets/styles/colors';
+import {size} from 'src/utilities/constants';
 
 const PillBubble = styled.div`
-  padding: 7px;
-  margin-right: 10px;
   display: flex;
   align-items: center;
-  height: 40px;
+  height: 38px;
+  padding-left: 5px;
+  margin-right: 10px;
+  
+  @media screen and (max-width: ${size.mobileL}) {
+    height: 25px;
+    padding-left: 6px;
+    margin-right: 5px;
+    margin-left: -3px;
+  }
   border-radius: 25px;
-  background: ${Slate30};
+  background: ${({theme: {dark}}) => dark ? '#333' : Slate30};
 `;
 
 const PillCloseButtonCircle = styled.div`
-  background-color: #D1D4D7;
+  background-color: ${({theme: {dark}}) => dark ? '#888' : '#D1D4D7'};
+  border-radius: 100%;
+  height: 75%;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  aspect-ratio: 1;
+  cursor: pointer;
+
+  @media screen and (max-width: ${size.mobileL}) {
+    height: 60%;
+  }
+`;
+
+const PillCloseButtonScope = styled.div`
+  background-color: transparent;
   border-radius: 100%;
-  height: 32px;
-  width: 32px;
+  height: 100%;
   cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  display: flex;
 
   &:hover {
-    background-color: #B1B4B7;
+    background-color: ${({theme: {dark}}) => dark ? '#222' : '#D8DBDD'};
+  }
+
+  &:hover ${PillCloseButtonCircle} {
+    background-color: ${({theme: {dark}}) => dark ? '#B1B4B7' : '#ECEFF2'};
+  }
+`;
+
+const NetworkLabel = styled.span`
+  text-transform: capitalize;
+  padding-left: 4px;
+  color: ${({theme: {dark}}) => dark ? White : Black};
+  font-size: 16px;
+
+  @media screen and (max-width: ${size.mobileL}) {
+    font-size: 12px;
+  }
+`;
+
+const CurrencyImg = styled.img`
+  height: 75%;
+  @media screen and (max-width: ${size.mobileL}) {
+    height: 60%;
   }
 `;
 
@@ -35,11 +83,13 @@ export const Pill: FC<PillProps> = ({ currency, network, onCloseClick }) => {
   return (
     currency ?
       <PillBubble>
-        <img src={`https://bitpay.com/img/icon/currencies/${currency}.svg`} alt={currency} style={{height: '120%'}} />
-        <p style={{textTransform: 'capitalize', color: Black, padding: '5px'}}>{network}</p>
-        <PillCloseButtonCircle onClick={onCloseClick}>
-          <img src={CloseLightSvg} alt='Close' style={{height: '100%', padding: '9px'}} />
-        </PillCloseButtonCircle>
+        <CurrencyImg src={`https://bitpay.com/img/icon/currencies/${currency}.svg`} alt={currency} />
+        <NetworkLabel>{network}</NetworkLabel>
+        <PillCloseButtonScope onClick={onCloseClick}>
+          <PillCloseButtonCircle>
+            <img src={CloseLightSvg} alt='Close' style={{height: '50%'}} />
+          </PillCloseButtonCircle>
+        </PillCloseButtonScope>
       </PillBubble>
     : null
   );

packages/insight/src/components/search.tsx

@@ -1,4 +1,4 @@
-import {FC, memo, useMemo} from 'react';
+import {FC, memo, useEffect, useMemo, useState} from 'react';
 import {determineInputType, searchValue} from 'src/utilities/search-helper-methods';
 import {useNavigate} from 'react-router-dom';
 import styled, {useTheme} from 'styled-components';
@@ -8,6 +8,7 @@ import {LightBlack, Slate} from '../assets/styles/colors';
 import {useAppDispatch, useAppSelector} from '../utilities/hooks';
 import {changeCurrency, changeNetwork} from 'src/store/app.actions';
 import {Pill} from './pill';
+import {size} from 'src/utilities/constants';
 
 const SearchInput = styled.input`
   background: none;
@@ -33,6 +34,13 @@ const SearchForm = styled.form<{ borderBottom?: boolean }>`
     borderBottom ? `1px solid ${colors.borderColor}` : 'none'};
 `;
 
+const SearchImg = styled.img`
+  padding: 7px;
+  @media screen and (max-width: ${size.mobileL}) {
+    margin-left: -8px;
+  }
+`;
+
 interface SearchProps {
   borderBottom?: boolean;
   id?: string;
@@ -44,15 +52,21 @@ const Search: FC<SearchProps> = ({borderBottom, id, setErrorMessage}) => {
   const theme = useTheme();
   const dispatch = useAppDispatch();
   const {currency, network} = useAppSelector(({APP}) => APP);
+  const [isMobile, setIsMobile] = useState(window.innerWidth < Number(size.mobileL.slice(0, -2)));
 
   const searchIcon = theme.dark ? SearchDarkSvg : SearchLightSvg;
   const searchId = id || 'search';
 
+  useEffect(() => {
+    window.addEventListener('resize', () => {
+      setIsMobile(window.innerWidth < Number(size.mobileL.slice(0, -2)));
+    });
+  }, []);
+
   const search = async (event: any) => {
     event.preventDefault();
     setErrorMessage('');
     const searchVal = event.target[searchId].value.replace(/\s/g, '');
-
     const searchInputs = await determineInputType(searchVal);
     if (searchInputs.length) {
       try {
@@ -155,15 +169,18 @@ const Search: FC<SearchProps> = ({borderBottom, id, setErrorMessage}) => {
   const searchInputPlaceholder = useMemo(() => {
     let placeholder = 'Search for block, transaction, or address';
     if (currency && network) {
+      if (isMobile) {
+        placeholder = 'Search';
+      }
       placeholder = `${placeholder} on ${currency} ${network}`;
     }
     return placeholder;
-  }, [currency, network]);
+  }, [currency, network, isMobile]);
 
   return (
     <SearchForm onSubmit={search} borderBottom={borderBottom}>
       <span style={{display: 'flex', alignItems: 'center' }}>
-        <img src={searchIcon} alt='Search' style={{padding: 7}}></img>
+        <SearchImg src={searchIcon} alt='Search'/>
         <Pill currency={currency} network={network} onCloseClick={handlePillCloseButtonClick} />
         <SearchInput
           id={id || 'search'}