rework search

src/components/feedback/PlainModal/PlainModal.tsx

@@ -16,13 +16,14 @@ export type PlainModalProps = {
   containerClassName?: string
   overlayClosable?: boolean
   withCloseButton?: boolean
+  withAnimation?: boolean
   closeModal: (withOnClose?: boolean) => void
 }
 
 const PlainModal: React.CFC<PlainModalProps> = (props) => {
   const {
     children, className, contentClassName, containerClassName,
-    overlayClosable = true, withCloseButton = true,
+    withAnimation = true, overlayClosable = true, withCloseButton = true,
     closeModal,
   } = props
 
@@ -45,11 +46,13 @@ const PlainModal: React.CFC<PlainModalProps> = (props) => {
   }, [])
 
   const rootClassName = cx(
-    s.container,
     containerClassName,
     'flex w-full',
     'mb:absolute mb:left-0 mb:flex-col mb:justify-end mb:h-full',
-    'ds:items-center ds:justify-center ds:min-h-full m-auto'
+    'ds:items-center ds:justify-center ds:min-h-full m-auto',
+    {
+      [s.container]: withAnimation,
+    }
   )
 
   const modalClassName = cx(

src/components/inputs/Input/Input.tsx

@@ -61,7 +61,7 @@ const Input: React.FC<InputProps> = (props) => {
         )
       }
       <input
-        className="bg-transparent w-full h-full placeholder:text-grey-60 text-caption-14 font-semibold"
+        className="bg-transparent w-full h-full placeholder:text-grey-40 text-caption-14 font-semibold"
         type={type}
         autoFocus={autoFocus}
         value={value}

src/compositions/PageLayout/components/Content/Content.tsx

@@ -7,7 +7,7 @@ import { Media } from 'components/layout'
 import MobileBetslipButton from 'compositions/MobileBetslipButton/MobileBetslipButton'
 import MobileStatisticsButton from 'compositions/MobileStatisticsButton/MobileStatisticsButton'
 
-import { LeftSidebar, RightSidebar, Header } from './components'
+import { LeftSidebar, RightSidebar, Header, Search } from './components'
 
 import ns from './Narrow.module.scss'
 import ws from './Wide.module.scss'
@@ -34,7 +34,9 @@ const Content: React.CFC = ({ children }) => {
       </Media>
       <main className={mainClassName}>
         {/* search block */}
-        <Media className="h-16" wide />
+        <Media className="sticky top-0 z-[100]" wide>
+          <Search />
+        </Media>
         <div className="flex flex-col bg-bg-l1 border border-grey-10 wd:rounded-l-md -wd:rounded-t-md px-2 min-h-[calc(100vh_-_4.5rem)]">
           {children}
         </div>

src/compositions/PageLayout/components/Content/components/LeftSidebar/LeftSidebar.tsx

@@ -1,9 +1,8 @@
 'use client'
 
 import React from 'react'
-import { openModal } from '@locmod/modal'
 
-import { Icon, Logo } from 'components/ui'
+import { Logo } from 'components/ui'
 import Navigation from 'compositions/Navigation/Navigation'
 import LiveSwitcher from 'compositions/LiveSwitcher/LiveSwitcher'
 
@@ -13,9 +12,9 @@ const LeftSidebar: React.FC = () => {
     <div className="h-full">
       <div className="px-4 py-5 sticky top-0 flex items-center justify-between">
         <Logo className="h-6" />
-        <button className="text-grey-60 hover:text-grey-90 transition" onClick={() => openModal('SearchModal')}>
+        {/* <button className="text-grey-60 hover:text-grey-90 transition" onClick={() => openModal('SearchModal')}>
           <Icon className="size-5" name="interface/search" />
-        </button>
+        </button> */}
       </div>
       <div className="overflow-auto wd:h-[calc(100vh_-_4rem)] no-scrollbar">
         <LiveSwitcher />

src/compositions/PageLayout/components/Content/components/Search/Search.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { Message } from '@locmod/intl'
+import React from 'react'
+import { openModal } from '@locmod/modal'
+import { Icon } from 'components/ui'
+
+import messages from './messages'
+
+
+const Search: React.FC = () => {
+  return (
+    <div
+      className="h-16 w-full flex items-center text-grey-40 hover:text-grey-90 py-3 px-6 bg-bg-l0"
+      onClick={() => openModal('SearchModal')}
+    >
+      <Icon className="size-5 mr-2" name="interface/search" />
+      <Message className="text-caption-13" value={messages.title} />
+    </div>
+  )
+}
+
+export default Search

src/compositions/PageLayout/components/Content/components/Search/messages.ts

@@ -0,0 +1,5 @@
+export default {
+  title: {
+    en: 'Search for sport events, leagues...',
+  },
+}

src/compositions/PageLayout/components/Content/components/index.ts

@@ -1,3 +1,4 @@
 export { default as LeftSidebar } from './LeftSidebar/LeftSidebar'
 export { default as RightSidebar } from './RightSidebar/RightSidebar'
 export { default as Header } from './Header/Header'
+export { default as Search } from './Search/Search'

src/compositions/events/Navbar/Navbar.tsx

@@ -32,7 +32,7 @@ const Navbar: React.CFC = ({ children }) => {
   const icon: IconName = sportSlug === 'top' ? 'interface/top' : `sport/${sportSlug}` as IconName
   const isTimeFilterVisible = !isLive && sportSlug !== 'unique'
 
-  const className = cx('border-b border-b-grey-10 -mx-2 ds:px-6 mb:px-3 flex mb:flex-col ds:items-center justify-between ds:sticky top-0 z-20 bg-bg-l1', {
+  const className = cx('border-b border-b-grey-10 -mx-2 ds:px-6 mb:px-3 flex mb:flex-col ds:items-center justify-between ds:sticky top-14 z-20 bg-bg-l1', {
     'py-3': !isTimeFilterVisible,
   })
 

src/compositions/modals/SearchModal/SearchModal.tsx

@@ -21,11 +21,12 @@ const SearchModal: ModalComponent = (props) => {
 
   return (
     <PlainModal
-      className="mb:pt-4 ds:pt-5 w-full h-full !bg-transparent ds:max-w-[956px]"
+      className="mb:pt-4 ds:pt-3 w-full h-full !bg-transparent ds:max-w-[954px]"
       closeModal={closeModal}
       containerClassName="!p-0 h-full"
-      contentClassName="h-full flex flex-col pb-0"
+      contentClassName="h-full flex flex-col pb-0 !py-0"
       withCloseButton={false}
+      withAnimation={false}
     >
       <div className="w-full flex items-center mb:px-2 space-x-2">
         <Input
@@ -35,7 +36,7 @@ const SearchModal: ModalComponent = (props) => {
           value={value}
           rightNode={
             Boolean(value) ? (
-              <button onClick={() => searchField.set('')}>
+              <button className="text-grey-60 hover:text-grey-90" onClick={() => searchField.set('')}>
                 <Icon className="size-5" name="interface/clear" />
               </button>
             ) : undefined

src/compositions/modals/SearchModal/components/Result/Result.tsx

@@ -104,7 +104,7 @@ const Result: React.FC<ResultProps> = ({ field }) => {
     return (
       <EmptyContent
         className="!bg-transparent"
-        image="/images/icons/3d/not_found_1_60.png"
+        image="/images/illustrations/smile_sad.png"
         title={messages.empty.title}
         text={messages.empty.text}
       />

src/compositions/modals/SearchModal/messages.ts

@@ -1,5 +1,5 @@
 export default {
   placeholder: {
-    en: 'Search event, team',
+    en: 'Search for sport events, leagues...',
   },
 }