refactor(ui): change search input design (experiment)

src/components/CollectionDetails/index.tsx

@@ -102,7 +102,7 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
 
   return (
     <div
-      className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover"
+      className="px-4 pt-16 -mx-4 -mt-16 bg-center bg-cover"
       style={{
         height: 493,
         backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,

src/components/Layout/LanguagePicker/index.tsx

@@ -89,7 +89,7 @@ const LanguagePicker: React.FC = () => {
     <div className="relative">
       <div>
         <button
-          className="p-1 text-gray-400 rounded-full hover:bg-gray-500 hover:text-white focus:outline-none focus:ring focus:text-white"
+          className="p-1 text-gray-400 rounded-full hover:bg-gray-600 hover:text-white focus:outline-none focus:ring focus:text-white"
           aria-label="Language Picker"
           onClick={() => setDropdownOpen(true)}
         >

src/components/Layout/SearchInput/index.tsx

@@ -16,8 +16,8 @@ const SearchInput: React.FC = () => {
         <label htmlFor="search_field" className="sr-only">
           Search
         </label>
-        <div className="relative w-full text-white focus-within:text-gray-200">
-          <div className="absolute inset-y-0 left-0 flex items-center pointer-events-none">
+        <div className="relative flex items-center w-full text-white focus-within:text-gray-200">
+          <div className="absolute inset-y-0 flex items-center pointer-events-none left-4">
             <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
               <path
                 fillRule="evenodd"
@@ -29,7 +29,7 @@ const SearchInput: React.FC = () => {
           <input
             id="search_field"
             style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
-            className="block w-full h-full py-2 pl-8 text-white placeholder-gray-300 bg-gray-600 border-transparent rounded-md focus:border-transparent focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
+            className="block w-full py-2 pl-10 text-white placeholder-gray-300 bg-gray-900 border border-gray-600 rounded-full focus:border-gray-500 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
             placeholder={intl.formatMessage(messages.searchPlaceholder)}
             type="search"
             value={searchValue}
@@ -43,7 +43,7 @@ const SearchInput: React.FC = () => {
           />
           {searchValue.length > 0 && (
             <button
-              className="absolute inset-y-0 right-0 p-1 m-auto text-gray-400 transition border-none outline-none h-7 w-7 focus:outline-none focus:border-none hover:text-white"
+              className="absolute inset-y-0 p-1 m-auto text-gray-400 transition border-none outline-none right-2 h-7 w-7 focus:outline-none focus:border-none hover:text-white"
               onClick={() => clear()}
             >
               <ClearButton />

src/components/Layout/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import SearchInput from './SearchInput';
 import UserDropdown from './UserDropdown';
 import Sidebar from './Sidebar';
@@ -14,17 +14,42 @@ const messages = defineMessages({
 
 const Layout: React.FC = ({ children }) => {
   const [isSidebarOpen, setSidebarOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
   const { hasPermission } = useUser();
   const router = useRouter();
 
+  useEffect(() => {
+    const updateScrolled = () => {
+      if (window.pageYOffset > 60) {
+        setIsScrolled(true);
+      } else {
+        setIsScrolled(false);
+      }
+    };
+
+    window.addEventListener('scroll', updateScrolled, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', updateScrolled);
+    };
+  }, []);
+
   return (
     <div className="flex h-full min-w-0 min-h-full bg-gray-900">
       <Sidebar open={isSidebarOpen} setClosed={() => setSidebarOpen(false)} />
 
       <div className="relative flex flex-col flex-1 w-0 min-w-0 mb-16 md:ml-64">
-        <div className="fixed left-0 right-0 z-10 flex flex-shrink-0 h-16 bg-gray-600 shadow md:left-64">
+        <div
+          className={`fixed left-0 right-0 z-10 flex flex-shrink-0 h-16 bg-opacity-80 transition duration-300 ${
+            isScrolled ? 'bg-gray-700' : 'bg-transparent'
+          } md:left-64`}
+          style={{
+            backdropFilter: isScrolled ? 'blur(5px)' : undefined,
+            WebkitBackdropFilter: isScrolled ? 'blur(5px)' : undefined,
+          }}
+        >
           <button
-            className="px-4 text-gray-200 border-r border-gray-800 focus:outline-none focus:bg-gray-300 focus:text-gray-600 md:hidden"
+            className="px-4 text-gray-200 focus:outline-none focus:bg-gray-300 focus:text-gray-600 md:hidden"
             aria-label="Open sidebar"
             onClick={() => setSidebarOpen(true)}
           >
@@ -42,9 +67,9 @@ const Layout: React.FC = ({ children }) => {
               />
             </svg>
           </button>
-          <div className="flex justify-between flex-1 px-4">
+          <div className="flex justify-between flex-1 pr-4 md:pr-4 md:pl-4">
             <SearchInput />
-            <div className="flex items-center md:ml-6">
+            <div className="flex items-center ml-2 md:ml-4">
               <LanguagePicker />
               <UserDropdown />
             </div>
@@ -52,7 +77,7 @@ const Layout: React.FC = ({ children }) => {
         </div>
 
         <main className="relative z-0 top-16 focus:outline-none" tabIndex={0}>
-          <div className="pt-2 mb-6">
+          <div className="mb-6">
             <div className="px-4 mx-auto max-w-8xl">
               {router.pathname === '/' && hasPermission(Permission.ADMIN) && (
                 <div className="p-4 mt-6 bg-indigo-700 rounded-md">

src/components/MovieDetails/index.tsx

@@ -133,7 +133,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
 
   return (
     <div
-      className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover"
+      className="px-4 pt-16 -mx-4 -mt-16 bg-center bg-cover"
       style={{
         height: 493,
         backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,

src/components/PersonDetails/index.tsx

@@ -175,7 +175,7 @@ const PersonDetails: React.FC = () => {
     <>
       <PageTitle title={data.name} />
       {(sortedCrew || sortedCast) && (
-        <div className="absolute top-0 left-0 right-0 z-0 h-96">
+        <div className="absolute left-0 right-0 z-0 -top-16 h-96">
           <ImageFader
             isDarker
             backgroundImages={[...(sortedCast ?? []), ...(sortedCrew ?? [])]
@@ -188,7 +188,7 @@ const PersonDetails: React.FC = () => {
           />
         </div>
       )}
-      <div className="relative z-10 flex flex-col items-center mt-8 mb-8 md:flex-row md:items-start">
+      <div className="relative z-10 flex flex-col items-center mt-4 mb-8 md:flex-row md:items-start">
         {data.profilePath && (
           <div
             style={{

src/components/TvDetails/index.tsx

@@ -153,7 +153,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
 
   return (
     <div
-      className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover"
+      className="px-4 pt-16 -mx-4 -mt-16 bg-center bg-cover"
       style={{
         height: 493,
         backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,