made an input text component and modified button component

nepalingo-web/src/components/Button.tsx

@@ -5,7 +5,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const { className, children, ...rest } = props;
 
-  const buttonClasses = `bg-blue-500 hover:md:bg-opacity-80 text-white font-bold py-2 px-4 rounded ${className}`;
+  const buttonClasses = `bg-[#D03641] hover:bg-opacity-80 text-white font-primary font-bold py-2 px-4 rounded-lg ${className}`;
 
   return (
     <button ref={ref} className={buttonClasses} {...rest}>

nepalingo-web/src/components/DictionarySearchBar.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import Button from "../components/Button";
 import useDictionary, { DictionaryProps } from "../hooks/useDictionary";
+import InputText from "./InputText";
 
 interface DictionarySearchBarProps {
   language: DictionaryProps["language"]; // Define language as a prop
@@ -32,20 +32,17 @@ const DictionarySearchBar: React.FC<DictionarySearchBarProps> = ({
   return (
     <div className="flex flex-col items-center mt-5">
       <div className="w-3/4 flex items-center relative">
-        <input
-          type="text"
+      <InputText
           value={searchTerm}
           onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          placeholder="Search here"
-          className="w-full p-2 pl-5 border border-gray-300 rounded-md text-lg shadow-sm transition-colors duration-300 focus:border-blue-500 focus:shadow-lg bg-white"
+          placeholder="Search for words here..."
         />
-        <span
-          className="absolute right-2 text-lg text-gray-600 cursor-pointer"
-          onClick={handleSearchClick}
+        <Button
+          type="submit"
+          className="ml-2 bg-[#D03641] hover:bg-opacity-80 text-white font-bold h-[60px] w-[155px] rounded-md"
         >
-          <FontAwesomeIcon icon={faSearch} />
-        </span>
+          Search
+        </Button>
       </div>
 
       {error && <p className="mt-2 text-red-600">{error.message}</p>}
@@ -91,4 +88,4 @@ const DictionarySearchBar: React.FC<DictionarySearchBarProps> = ({
   );
 };
 
-export default DictionarySearchBar;
+export default DictionarySearchBar;

nepalingo-web/src/components/InputText.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+interface InputTextProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+}
+
+const InputText: React.FC<InputTextProps> = ({
+  value,
+  onChange,
+  onKeyDown,
+  placeholder,
+}) => {
+  return (
+    <input
+      type="text"
+      value={value}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      placeholder={placeholder}
+      className="w-[785px] h-[60px] rounded-md p-[16px_12px] text-lg shadow-sm transition-colors duration-300 focus:border-blue-500 focus:shadow-lg bg-[#2B2B2B] text-white"
+    />
+  );
+};
+
+export default InputText;

nepalingo-web/src/components/header/Header.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import logo from "@/assets/NepaLingoLogoWhiteBg.jpg";
+import logo from "@/assets/NewLogo.png";
 import UserProfile from "@/components/header/UserProfile";
 import ChangeLanguage from "@/components/header/ChangeLanguage";