feat: add noShadow class to SearchBar and apply it in TopicSettings

Author: medyo

src/assets/App.css

@@ -1016,6 +1016,9 @@ Producthunt item
   width: 100%;
   background-color: var(--card-header-background-color);
 
+  &.noShadow {
+    box-shadow: none;
+  }
   &::placeholder {
     color: var(--primary-text-color);
     font-size: 0.9em;

src/components/Elements/SearchBar/SearchBar.tsx

@@ -1,12 +1,20 @@
+import { clsx } from 'clsx'
 import React, { useEffect, useRef } from 'react'
 
 type SearchBarProps = {
   iconStart?: React.ReactNode
   placeholder: string
+  inputClassName?: string
   onSubmit?: (keyword: string) => void
   onChange?: (keyword: string) => void
 }
-export const SearchBar = ({ iconStart, placeholder, onChange, onSubmit }: SearchBarProps) => {
+export const SearchBar = ({
+  iconStart,
+  placeholder,
+  onChange,
+  onSubmit,
+  inputClassName,
+}: SearchBarProps) => {
   const keywordsInputRef = useRef<HTMLInputElement | null>(null)
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -30,7 +38,7 @@ export const SearchBar = ({ iconStart, placeholder, onChange, onSubmit }: Search
         type="text"
         name="keyword"
         onChange={(e) => onChange?.(e.target.value)}
-        className="searchBarInput"
+        className={clsx('searchBarInput shadow', inputClassName)}
         placeholder={placeholder}
       />
     </form>

src/features/settings/components/TopicSettings.tsx

@@ -97,6 +97,7 @@ export const TopicSettings = () => {
         <SearchBar
           iconStart={<IoMdSearch className="searchBarIcon" />}
           placeholder="Search by programming language, framework, or topic"
+          inputClassName="noShadow"
           onChange={(keyword) => {
             setSearchKeyword(keyword)
           }}