Apply styles to the search bar

Signed-off-by: Egor Savkin <es@m-labs.hk>

sass/css/_shop.scss

@@ -178,6 +178,47 @@ button {
 
     .backlog-container {
         padding-bottom: 4rem;
+
+        .backlog-bar {
+            display: flex;
+            width: 100%;
+            margin: 0.4rem 0;
+            padding: 0 0.5rem;
+            justify-content: space-around;
+
+            .mobileCloseMenu {
+                display: flex;
+                padding: 0;
+                margin: 0;
+                width: 10%;
+                align-content: center;
+            }
+            .search-backlog {
+                display: inline-block;
+                border: 0;
+                width: 90%;
+
+                .search-backlog-input {
+                    display: inline;
+                    border: 0;
+                    color: white;
+                    border-radius: 2rem;
+                    background: rgba(255, 255, 255, 0.15) url("/images/shop/icon-search.svg") no-repeat;
+                    background-position: right 2% center;
+                    background-size: 20px;
+                    padding-right: 1rem;
+
+                    &::placeholder {
+                        color: white;
+                        opacity: 0.5;
+                    }
+
+                    &:focus {
+                        box-shadow: none;
+                    }
+                }
+            }
+        }
     }
 
     .rule {

static/images/shop/icon-search.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="512"
+   height="512"
+   version="1.1"
+   viewBox="0 0 512 512"
+   id="svg1"
+   sodipodi:docname="icon-search.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.59375"
+     inkscape:cx="255.68627"
+     inkscape:cy="256"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="M456.69,421.39,362.6,327.3a173.81,173.81,0,0,0,34.84-104.58C397.44,126.38,319.06,48,222.72,48S48,126.38,48,222.72s78.38,174.72,174.72,174.72A173.81,173.81,0,0,0,327.3,362.6l94.09,94.09a25,25,0,0,0,35.3-35.3ZM97.92,222.72a124.8,124.8,0,1,1,124.8,124.8A124.95,124.95,0,0,1,97.92,222.72Z"
+     fill="#fff"
+     id="path1"
+     style="fill:#ffffff;fill-opacity:0.5" />
+</svg>

static/js/shop/Backlog.jsx

@@ -34,6 +34,11 @@ export function Backlog() {
                     ref={provided.innerRef}
                     {...provided.droppableProps}>
 
+
+
+                    <div className="backlog-bar">
+                        <SearchBar/>
+
                         {isMobile ? (
                             <div className="mobileCloseMenu">
                                 <button onClick={onClickToggleMobileSideMenu}>
@@ -41,8 +46,9 @@ export function Backlog() {
                                 </button>
                             </div>
                         ) : null}
+                    </div>
+
 
-                    <SearchBar/>
 
                     <BacklogSearchResult/>
 

static/js/shop/SearchBar.jsx

@@ -4,12 +4,11 @@ import {useShopStore} from "./shop_store";
 export function SearchBar() {
     const search_bar_value = useShopStore((state) => state.search_bar_value);
     const updateSearchBar = useShopStore((state) => state.updateSearchBar);
-
     return (
-        <div className="form-outline">
+        <div className="search-backlog form-outline">
             <input type="search"
                    id="search_bar"
-                   className="form-control"
+                   className="search-backlog-input form-control"
                    placeholder="Search through cards"
                    value={search_bar_value}
                    onChange={event => updateSearchBar(event.target.value)}