From 45b5b2a376b85158ea974201ffed5800002d2f7b Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Mon, 17 Apr 2023 17:27:30 +0530
Subject: [PATCH] fix: giphy input dark color

---
 .../app-store/giphy/components/SearchDialog.tsx     | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/app-store/giphy/components/SearchDialog.tsx b/packages/app-store/giphy/components/SearchDialog.tsx
index 9b53eba716..17d7e2fc3b 100644
--- a/packages/app-store/giphy/components/SearchDialog.tsx
+++ b/packages/app-store/giphy/components/SearchDialog.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert, Button, Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui";
+import { Alert, Button, Dialog, DialogClose, DialogContent, DialogFooter, Input } from "@calcom/ui";
 
 interface ISearchDialog {
   isOpenDialog: boolean;
@@ -87,15 +87,15 @@ export const SearchDialog = (props: ISearchDialog) => {
   const renderTab = (Icon: any, text: string, mode: Mode) => (
     <div
       className={classNames(
-        "flex cursor-pointer items-center border-b-2 p-2 text-sm",
-        selectedMode === mode ? "border-black" : "text-subtle border-transparent"
+        "flex cursor-pointer items-center border-b-2 p-2 text-sm ",
+        selectedMode === mode ? "text-default border-emphasis" : "text-subtle border-transparent"
       )}
       onClick={() => {
         setKeyword("");
         setGifImage("");
         setSelectedMode(mode);
       }}>
-      <Icon color={selectedMode === mode ? "black" : "grey"} className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
+      <Icon className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
       {text}
     </div>
   );
@@ -117,7 +117,7 @@ export const SearchDialog = (props: ISearchDialog) => {
           {t("add_gif_to_confirmation")}
         </h3>
         <p className="text-subtle mb-3 text-sm font-light">{t("find_gif_spice_confirmation")}</p>
-        <div className="flex items-center border-b border-solid">
+        <div className="border-emphasis flex items-center border-b border-solid">
           {renderTab(SearchIcon, t("search_giphy"), MODE_SEARCH)}
           {renderTab(LinkIcon, t("add_link_from_giphy"), MODE_URL)}
         </div>
@@ -125,9 +125,8 @@ export const SearchDialog = (props: ISearchDialog) => {
           className="flex w-full justify-center space-x-2 space-y-2 rtl:space-x-reverse"
           onSubmit={handleFormSubmit}>
           <div className="relative block w-full pt-2">
-            <input
+            <Input
               type="text"
-              className="border-default block w-full rounded-sm shadow-sm sm:text-sm"
               placeholder={
                 selectedMode === MODE_SEARCH
                   ? t("search_giphy")