refactor(auth, layouts): enhance UI components for improved aesthetics and usability

- Updated SignIn and Profile components with new background styles and layout adjustments for a more modern look.
- Refined button styles in GoogleSigninButton and SigninWithPassword for better user interaction feedback.
- Enhanced InputGroup and Select components with improved styling and error handling for a more consistent user experience.
- Adjusted Sidebar and Header components for better responsiveness and visual appeal.
- Implemented spotlight effect in UserInfo dropdown for a more engaging user interface.

src/components/Tables/tenders/TenderListFilters.tsx

@@ -1,5 +1,6 @@
 import InputGroup from "@/components/FormElements/InputGroup";
 import { Select } from "@/components/FormElements/select";
+import { Button } from "@/components/ui-elements/button";
 import { Countries } from "@/constants/countries";
 import { TenderStatus } from "@/constants/enums";
 import { getEnumAsArray } from "@/utils/shared";
@@ -63,24 +64,29 @@ const TenderListFilters = ({
         onClear={() => setValue("country_code", undefined)}
       />
 
-      <div className="flex gap-4 col-span-2">
-        <button
+      <div className="col-span-2 flex gap-4">
+        <Button
           type="submit"
-          className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
-        >
-          {isMutating ? (
+          size="small"
+          shape="rounded"
+          className="mt-6 w-fit capitalize"
+          label={
+            isMutating ? (
             <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
           ) : (
             <span>Search</span>
-          )}
-        </button>
-        <button
+          )
+          }
+        />
+        <Button
           type="button"
-          className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
+          variant="error"
+          size="small"
+          shape="rounded"
+          className="mt-6 w-fit capitalize"
           onClick={() => setIsFilterModalOpen(false)}
-        >
-          Close
-        </button>
+          label="Close"
+        />
       </div>
     </form>
   );

src/components/Tables/tenders/index.tsx

@@ -17,6 +17,7 @@ import { ExclamationIcon, EyeIcon } from "@/assets/icons";
 
 import IsVisible from "@/components/ui/IsVisible";
 import ListHeader from "@/components/ui/ListHeader";
+import ListWrapper from "@/components/ui/ListWrapper";
 import Modal from "@/components/ui/modal";
 import Pagination from "@/components/ui/pagination";
 import TableSkeleton from "@/components/ui/TableSkeleton";
@@ -45,7 +46,7 @@ const TendersTable = () => {
   } = useTenderListPresenter();
 
   return (
-    <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
+    <ListWrapper>
       <ListHeader
         onFilter={() => setIsFilterModalOpen(true)}
         createButtonText="Create Tender"
@@ -166,7 +167,7 @@ const TendersTable = () => {
           }}
         />
       </IsVisible>
-    </div>
+    </ListWrapper>
   );
 };