fix ui: some fixes for filters ui, playicn hover, etc

* fix ui: some fixes for filters ui, playicn hover, etc

* remove focus styles for inputs in search

frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import FilterOperator from '../FilterOperator';
 import FilterSelection from '../FilterSelection';
 import FilterValue from '../FilterValue';
-import { Button } from 'UI';
+import { Button } from 'antd';
 import FilterSource from '../FilterSource';
 import { FilterKey, FilterType } from 'App/types/filter/filterType';
 import SubFilterItem from '../SubFilterItem';
-import {toJS} from "mobx";
+import { CircleMinus } from 'lucide-react';
 
 interface Props {
   filterIndex?: number;
@@ -153,12 +153,12 @@ function FilterItem(props: Props) {
         <div className="flex flex-shrink-0 self-start ml-auto">
           <Button
             disabled={disableDelete}
-            variant="text"
-            icon="trash"
+            type="text"
             onClick={props.onRemoveFilter}
             size="small"
-            iconSize={14}
-          />
+          >
+            <CircleMinus size={14} />
+          </Button>
         </div>
       }
     </div>

frontend/app/components/shared/Filters/FilterList/FilterList.tsx

@@ -124,6 +124,8 @@ function FilterList(props: Props) {
       disabled: eventsOrderSupport && !eventsOrderSupport.includes('or'),
     },
   ];
+
+  const eventsNum = filters.filter((i: any) => i.isEvent).size
   return (
     <div className="flex flex-col">
       {hasEvents && (
@@ -174,16 +176,18 @@ function FilterList(props: Props) {
                       hoveredItem.position === 'bottom'
                         ? '1.5rem'
                         : '0.5rem',
+                    marginLeft: '-1.25rem',
+                    width: 'calc(100% + 2.5rem)',
                   }}
                   className={
-                    'hover:bg-active-blue -mx-5 px-5 gap-2 items-center flex w-full'
+                    'hover:bg-active-blue px-5 gap-2 items-center flex'
                   }
                   id={`${filter.key}-${filterIndex}`}
                   onDragOver={(e) => handleDragOverEv(e, filterIndex)}
                   onDrop={(e) => handleDrop(e)}
                   key={`${filter.key}-${filterIndex}`}
                 >
-                  {!!props.onFilterMove ? (
+                  {!!props.onFilterMove && eventsNum > 1 ? (
                     <div
                       className={'p-2 cursor-grab'}
                       draggable={!!props.onFilterMove}

frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
 import { useHistory } from 'react-router';
 
 import {
@@ -7,7 +8,6 @@ import {
   withSiteId,
 } from 'App/routes';
 import { Icon, Link } from 'UI';
-import { connect } from 'react-redux';
 
 const PLAY_ICON_NAMES = {
   notPlayed: 'play-fill',
@@ -49,17 +49,26 @@ function PlayLink(props: Props) {
   const handleBeforeOpen = () => {
     if (props.beforeOpen) {
       props.beforeOpen();
-      history.push(withSiteId(link + (props.query ? props.query : ''), props.siteId));
+      history.push(
+        withSiteId(link + (props.query ? props.query : ''), props.siteId)
+      );
     }
   };
 
   const onLinkClick = props.beforeOpen ? handleBeforeOpen : onClick;
+
+  const onLeave = () => {
+    toggleHover(false);
+  };
+  const onOver = () => {
+    toggleHover(true);
+  };
   return (
     <Link
       onClick={onLinkClick}
       to={link + (props.query ? props.query : '')}
-      onMouseEnter={() => toggleHover(true)}
-      onMouseLeave={() => toggleHover(false)}
+      onMouseOver={onOver}
+      onMouseOut={onLeave}
       target={props.newTab ? '_blank' : undefined}
       rel={props.newTab ? 'noopener noreferrer' : undefined}
     >
@@ -68,7 +77,6 @@ function PlayLink(props: Props) {
   );
 }
 
-
 export default connect((state: any, props: Props) => ({
-    siteId: props.siteId || state.getIn([ 'site', 'siteId' ])
-}))(PlayLink);
+  siteId: props.siteId || state.getIn(['site', 'siteId']),
+}))(PlayLink);

frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx

@@ -33,6 +33,7 @@ interface Props {
   appliedFilter: any;
   edit: typeof edit;
   clearSearch: typeof clearSearch;
+  setFocused?: (focused: boolean) => void;
 }
 
 function SessionSearchField(props: Props) {
@@ -63,10 +64,12 @@ function SessionSearchField(props: Props) {
 
   const onFocus = () => {
     setShowModal(true);
+    props.setFocused?.(true);
   };
   const onBlur = () => {
     setTimeout(() => {
       setShowModal(false);
+      props.setFocused?.(false);
     }, 200);
   };
   return (
@@ -82,7 +85,7 @@ function SessionSearchField(props: Props) {
         id="search"
         type="search"
         autoComplete="off"
-        className="px-2 py-1 text-lg placeholder-lg !border-0 rounded-r-lg focus:!border-0 focus:ring-0"
+        className="px-2 py-1 text-lg placeholder-lg !border-0 rounded-r-lg nofocus"
       />
 
       {showModal && (
@@ -143,7 +146,7 @@ const AiSearchField = observer(
           value={searchQuery}
           style={{ minWidth: 360, height: 33 }}
           autoComplete="off"
-          className="px-2 py-1 text-lg placeholder-lg !border-0 rounded-r-lg focus:!border-0 focus:ring-0"
+          className="px-2 py-1 text-lg placeholder-lg !border-0 rounded-r-lg nofocus"
           leadingButton={
             searchQuery !== '' ? (
               <div
@@ -169,6 +172,7 @@ function AiSessionSearchField(props: Props) {
   const isTourShown = localStorage.getItem(askTourKey) !== null;
   const [tab, setTab] = useState(localStorage.getItem(tabKey) || 'search');
   const [touring, setTouring] = useState(!isTourShown);
+  const [isFocused, setFocused] = React.useState(false);
   const askAiRef = React.useRef(null);
 
   const closeTour = () => {
@@ -180,11 +184,15 @@ function AiSessionSearchField(props: Props) {
     setTab(newTab);
     localStorage.setItem(tabKey, newTab);
   };
+
+  const boxStyle = tab === 'ask'
+                   ? gradientBox
+                   : isFocused ? regularBoxFocused : regularBoxUnfocused;
   return (
     <div className={'bg-white rounded-lg'}>
       <div
         className={aiFiltersStore.isLoading ? 'animate-bg-spin' : ''}
-        style={tab === 'ask' ? gradientBox : gradientBoxUnfocused}
+        style={boxStyle}
       >
         <div ref={askAiRef} className={'px-2'}>
           <AskAiSwitchToggle
@@ -196,7 +204,7 @@ function AiSessionSearchField(props: Props) {
         {tab === 'ask' ? (
           <AiSearchField {...props} />
         ) : (
-          <SessionSearchField {...props} />
+          <SessionSearchField {...props} setFocused={setFocused} />
         )}
         <Tour
           open={touring}
@@ -319,7 +327,7 @@ const gradientBox = {
   width: '100%',
 };
 
-const gradientBoxUnfocused = {
+const regularBoxUnfocused = {
   borderRadius: '6px',
   border: 'solid 1.5px #BFBFBF',
   background: '#fffff',
@@ -329,6 +337,16 @@ const gradientBoxUnfocused = {
   width: '100%',
 };
 
+const regularBoxFocused = {
+  borderRadius: '6px',
+  border: 'solid 1.5px #394EFF',
+  background: '#fffff',
+  display: 'flex',
+  gap: '0.25rem',
+  alignItems: 'center',
+  width: '100%',
+}
+
 export default connect(
   (state: any) => ({
     appliedFilter: state.getIn(['search', 'instance']),

frontend/app/constants/countries.js

@@ -1,5 +1,18 @@
 export const threeLetter = {BD: 'BGD', BE: 'BEL', BF: 'BFA', BG: 'BGR', BA: 'BIH', BB: 'BRB', WF: 'WLF', BL: 'BLM', BM: 'BMU', BN: 'BRN', BO: 'BOL', BH: 'BHR', BI: 'BDI', BJ: 'BEN', BT: 'BTN', JM: 'JAM', BV: 'BVT', BW: 'BWA', WS: 'WSM', BQ: 'BES', BR: 'BRA', BS: 'BHS', JE: 'JEY', BY: 'BLR', BZ: 'BLZ', RU: 'RUS', RW: 'RWA', RS: 'SRB', TL: 'TLS', RE: 'REU', TM: 'TKM', TJ: 'TJK', RO: 'ROU', TK: 'TKL', GW: 'GNB', GU: 'GUM', GT: 'GTM', GS: 'SGS', GR: 'GRC', GQ: 'GNQ', GP: 'GLP', JP: 'JPN', GY: 'GUY', GG: 'GGY', GF: 'GUF', GE: 'GEO', GD: 'GRD', GB: 'GBR', GA: 'GAB', SV: 'SLV', GN: 'GIN', GM: 'GMB', GL: 'GRL', GI: 'GIB', GH: 'GHA', OM: 'OMN', TN: 'TUN', JO: 'JOR', HR: 'HRV', HT: 'HTI', HU: 'HUN', HK: 'HKG', HN: 'HND', HM: 'HMD', VE: 'VEN', PR: 'PRI', PS: 'PSE', PW: 'PLW', PT: 'PRT', SJ: 'SJM', PY: 'PRY', IQ: 'IRQ', PA: 'PAN', PF: 'PYF', PG: 'PNG', PE: 'PER', PK: 'PAK', PH: 'PHL', PN: 'PCN', PL: 'POL', PM: 'SPM', ZM: 'ZMB', EH: 'ESH', EE: 'EST', EG: 'EGY', ZA: 'ZAF', EC: 'ECU', IT: 'ITA', VN: 'VNM', SB: 'SLB', ET: 'ETH', SO: 'SOM', ZW: 'ZWE', SA: 'SAU', ES: 'ESP', ER: 'ERI', ME: 'MNE', MD: 'MDA', MG: 'MDG', MF: 'MAF', MA: 'MAR', MC: 'MCO', UZ: 'UZB', MM: 'MMR', ML: 'MLI', MO: 'MAC', MN: 'MNG', MH: 'MHL', MK: 'MKD', MU: 'MUS', MT: 'MLT', MW: 'MWI', MV: 'MDV', MQ: 'MTQ', MP: 'MNP', MS: 'MSR', OR: 'SEÑ', IM: 'IMN', UG: 'UGA', TZ: 'TZA', IS: 'MYS', MX: 'MEX', IL: 'ISR', FR: 'FRA', IO: 'IOT', SH: 'SHN', FI: 'FIN', FJ: 'FJI', FK: 'FLK', FM: 'FSM', FO: 'FRO', NI: 'NIC', NL: 'NLD', NO: 'NOR', NA: 'NAM', VU: 'VUT', NC: 'NCL', NE: 'NER', NF: 'NFK', NG: 'NGA', NZ: 'NZL', NP: 'NPL', NR: 'NRU', NU: 'NIU', CK: 'COK', XK: 'XKX', CI: 'CIV', CH: 'CHE', CO: 'COL', CN: 'CHN', CM: 'CMR', CL: 'CHL', CC: 'CCK', CA: 'CAN', CG: 'COG', CF: 'CAF', CD: 'COD', CZ: 'CZE', CY: 'CYP', CX: 'CXR', CR: 'CRI', CW: 'CUW', CV: 'CPV', CU: 'CUB', SZ: 'SWZ', SY: 'SYR', SX: 'SXM', KG: 'KGZ', KE: 'KEN', SS: 'SSD', SR: 'SUR', KI: 'KIR', KH: 'KHM', KN: 'KNA', KM: 'COM', ST: 'STP', SK: 'SVK', KR: 'KOR', SI: 'SVN', KP: 'PRK', KW: 'KWT', SN: 'SEN', SM: 'SMR', SL: 'SLE', SC: 'SYC', KZ: 'KAZ', KY: 'CYM', SG: 'SGP', SE: 'SWE', SD: 'SDN', DO: 'DOM', DM: 'DMA', DJ: 'DJI', DK: 'DNK', VG: 'VGB', DE: 'DEU', YE: 'YEM', DZ: 'DZA', US: 'USA', UY: 'URY', YT: 'MYT', UM: 'UMI', LB: 'LBN', LC: 'LCA', LA: 'LAO', TV: 'TUV', TW: 'TWN', TT: 'TTO', TR: 'TUR', LK: 'LKA', LI: 'LIE', LV: 'LVA', TO: 'TON', LT: 'LTU', LU: 'LUX', LR: 'LBR', LS: 'LSO', TH: 'THA', TF: 'ATF', TG: 'TGO', TD: 'TCD', TC: 'TCA', LY: 'LBY', VA: 'VAT', VC: 'VCT', AE: 'ARE', AD: 'AND', AG: 'ATG', AF: 'AFG', AI: 'AIA', VI: 'VIR', IS: 'ISL', IR: 'IRN', AM: 'ARM', AL: 'ALB', AO: 'AGO', AQ: 'ATA', AS: 'ASM', AR: 'ARG', AU: 'AUS', AT: 'AUT', AW: 'ABW', IN: 'IND', AX: 'ALA', AZ: 'AZE', IE: 'IRL', ID: 'IDN', UA: 'UKR', QA: 'QAT', MZ: 'MOZ'}
-export default {
+
+function sortObjectValuesAlphabetically(obj) {
+  let values = Object.values(obj);
+  values.sort();
+  let sortedObj = {};
+  let keys = Object.keys(obj);
+  values.forEach((value, index) => {
+    sortedObj[keys[index]] = value;
+  });
+
+  return sortedObj;
+}
+
+const countries = {
   AC: 'Ascension Island',
   AD: 'Andorra',
   AE: 'United Arab Emirates',
@@ -281,3 +294,6 @@ export default {
   ZR: 'Zaire',
   ZW: 'Zimbabwe',
 };
+
+
+export default sortObjectValuesAlphabetically(countries)

frontend/app/styles/reset.css

@@ -26,7 +26,7 @@ button {
 }
 
 textarea:focus,
-input:not(.ant-input-number-input):focus {
+input:not(.ant-input-number-input, .nofocus):focus {
   border: solid thin $teal !important;
 }