Updated search bar design

ghost/sodo-search/public/main.css

@@ -565,6 +565,18 @@ video {
   margin: auto;
 }
 
+.mr-3 {
+  margin-right: 1.2rem;
+}
+
+.ml-3 {
+  margin-left: 1.2rem;
+}
+
+.flex {
+  display: flex;
+}
+
 .hidden {
   display: none;
 }
@@ -581,6 +593,14 @@ video {
   max-width: 51.2rem;
 }
 
+.grow {
+  flex-grow: 1;
+}
+
+.items-center {
+  align-items: center;
+}
+
 .rounded-lg {
   border-radius: 0.8rem;
 }
@@ -594,24 +614,94 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.fill-gray-50 {
+  fill: #f9fafb;
+}
+
+.fill-gray-500 {
+  fill: #6b7280;
+}
+
+.fill-gray-300 {
+  fill: #d1d5db;
+}
+
+.fill-gray-400 {
+  fill: #9ca3af;
+}
+
 .p-4 {
   padding: 1.6rem;
 }
 
+.p-6 {
+  padding: 2.4rem;
+}
+
+.py-6 {
+  padding-top: 2.4rem;
+  padding-bottom: 2.4rem;
+}
+
+.px-7 {
+  padding-left: 2.8rem;
+  padding-right: 2.8rem;
+}
+
 .pt-8 {
   padding-top: 3.2rem;
 }
 
+.pt-12 {
+  padding-top: 4.8rem;
+}
+
+.pt-20 {
+  padding-top: 8rem;
+}
+
+.text-md {
+  font-size: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.8rem;
+}
+
+.text-\[1\.6rem\] {
+  font-size: 1.6rem;
+}
+
+.text-\[1\.65rem\] {
+  font-size: 1.65rem;
+}
+
+.text-\[1\.7rem\] {
+  font-size: 1.7rem;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .outline {
   outline-style: solid;
 }
 
+.blur-sm {
+  --tw-blur: blur(4px);
+  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -625,4 +715,17 @@ html {
 
 body {
   font-size: 1.5rem;
+}
+
+.focus\:border-none:focus {
+  border-style: none;
+}
+
+.focus-visible\:border-none:focus-visible {
+  border-style: none;
+}
+
+.focus-visible\:outline-none:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }

ghost/sodo-search/src/components/PopupModal.js

@@ -86,11 +86,13 @@ class PopupContent extends React.Component {
 function Search() {
     return (
         <>
-            <div className='bg-[rgba(0,0,0,0.2)] h-screen w-screen pt-8'>
-                <div className='bg-white max-w-lg rounded-lg shadow-lg p-4 m-auto'>
-                    <SearchIcon alt='Search' />
-                    <input placeholder='Search posts, tags, and authors' />
-                    <ClearIcon alt='Clear' />
+            <div className='bg-[rgba(0,0,0,0.2)] h-screen w-screen pt-20'>
+                <div className='bg-white max-w-lg rounded-lg shadow-xl py-6 px-7 m-auto'>
+                    <div className='flex items-center'>
+                        <SearchIcon className='mr-3' alt='Search' />
+                        <input className='grow text-[1.65rem] focus-visible:outline-none' placeholder='Search posts, tags, authors..' />
+                        <ClearIcon className='ml-3 fill-gray-400' alt='Clear' />
+                    </div>
                 </div>
             </div>
         </>

ghost/sodo-search/src/icons/delete.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16" width="16"><path d="M24,12A12,12,0,1,0,12,24,12,12,0,0,0,24,12Zm-7.29,3.28a1,1,0,0,1,0,1.41,1,1,0,0,1-1.42,0l-3.11-3.11a.26.26,0,0,0-.35,0L8.72,16.69a1,1,0,0,1-1.41-1.41l3.11-3.11a.26.26,0,0,0,0-.35L7.31,8.71a1,1,0,0,1,0-1.42,1,1,0,0,1,1.41,0l3.11,3.11a.24.24,0,0,0,.35,0l3.11-3.11a1,1,0,1,1,1.42,1.42L13.6,11.82a.24.24,0,0,0,0,.35Z" fill="currentColor"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16" width="16"><path d="M24,12A12,12,0,1,0,12,24,12,12,0,0,0,24,12Zm-7.29,3.28a1,1,0,0,1,0,1.41,1,1,0,0,1-1.42,0l-3.11-3.11a.26.26,0,0,0-.35,0L8.72,16.69a1,1,0,0,1-1.41-1.41l3.11-3.11a.26.26,0,0,0,0-.35L7.31,8.71a1,1,0,0,1,0-1.42,1,1,0,0,1,1.41,0l3.11,3.11a.24.24,0,0,0,.35,0l3.11-3.11a1,1,0,1,1,1.42,1.42L13.6,11.82a.24.24,0,0,0,0,.35Z"></path></svg>