From 1543f69f4aa7300d9cc6f230a91c3220a9cdb43f Mon Sep 17 00:00:00 2001
From: Zeeshan Mehboob <82993262+zesu22@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:13:34 +0530
Subject: [PATCH] [ES-1991] [ES-2026] remove eye icon & language dropdown
 (#477)

* [ES-1991] remove extra eye icon for edge

Signed-off-by: Zeeshan Mehboob <zeeshan.mehboob@infosys.com>

* [ES-2026] remove language dropdown for ekyc video verification flow only

Signed-off-by: Zeeshan Mehboob <zeeshan.mehboob@infosys.com>

---------

Signed-off-by: Zeeshan Mehboob <zeeshan.mehboob@infosys.com>
---
 signup-ui/src/App.css                 |   5 ++
 signup-ui/src/components/language.tsx | 113 ++++++++++++++------------
 2 files changed, 68 insertions(+), 50 deletions(-)

diff --git a/signup-ui/src/App.css b/signup-ui/src/App.css
index 3b0e556d..7a50a95b 100644
--- a/signup-ui/src/App.css
+++ b/signup-ui/src/App.css
@@ -408,6 +408,11 @@ body {
   @apply text-center text-2xl font-semibold;
 }
 
+input[type='password']::-ms-reveal,
+input[type='password']::-ms-clear {
+  display: none;
+}
+
 @layer base {
   :root {
     --font-inter: "Inter";
diff --git a/signup-ui/src/components/language.tsx b/signup-ui/src/components/language.tsx
index 7cae1054..c091cefe 100644
--- a/signup-ui/src/components/language.tsx
+++ b/signup-ui/src/components/language.tsx
@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useRef } from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
 
 import { ReactComponent as TranslationIcon } from "~assets/svg/translation-icon.svg";
+import { EKYC_VERIFICATION } from "~constants/routes";
 import { cn } from "~utils/cn";
 import { replaceUILocales } from "~utils/link";
 import {
@@ -14,6 +16,7 @@ import {
 import { Icons } from "./ui/icons";
 
 export const Language = () => {
+  const { pathname } = useLocation();
   const { i18n } = useTranslation();
   const langRef = useRef(null);
   const { languages_2Letters, langFontMapping } = useLanguageStore(
@@ -67,57 +70,67 @@ export const Language = () => {
   return (
     <div className="flex">
       <TranslationIcon className="mr-2 h-9 w-9" />
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger id="language-select-button" asChild>
-          <span
-            className="inline-flex items-center justify-center bg-white outline-none hover:cursor-pointer"
-            aria-label="Customise options"
-          >
-            {
-              languages_2Letters[
-                i18n.language as keyof typeof languages_2Letters
-              ]
-            }
-            <Icons.chevronDown className="ml-1 h-4 w-4" />
-          </span>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Portal>
-          <DropdownMenu.Content
-            className={cn(
-              "relative  z-50  rounded-md border border-[#BCBCBC] bg-white px-3 py-2 shadow-md outline-0 ",
-              "data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade",
-              "top-[-0.5rem] min-w-[220px] will-change-[opacity,transform]"
-            )}
-            sideOffset={5}
-          >
-            {Object.entries(languages_2Letters).map(([key, value]) => (
-              <DropdownMenu.Item
-                id={key + "_language"}
-                key={key}
-                ref={langRef}
-                className={cn(
-                  "group relative flex cursor-pointer select-none items-center py-2 text-[14px] leading-none outline-none first:border-b-[1px] hover:font-bold data-[disabled]:pointer-events-none",
-                  langFontMapping[key],
-                  {
-                    "font-bold": i18n.language === key,
-                  }
-                )}
-                onSelect={() => handleLanguageChange(key)}
-              >
-                {value}
-                <div className="ml-auto">
-                  {i18n.language === key && (
-                    <Icons.check className="h-4 w-4 text-primary" />
+      {pathname === EKYC_VERIFICATION && (
+        <span
+          className="inline-flex items-center justify-center bg-white text-[14px] outline-none"
+          aria-label="Customise options"
+        >
+          {languages_2Letters[i18n.language as keyof typeof languages_2Letters]}
+        </span>
+      )}
+      {pathname !== EKYC_VERIFICATION && (
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger id="language-select-button" asChild>
+            <span
+              className="inline-flex items-center justify-center bg-white text-[14px] outline-none hover:cursor-pointer"
+              aria-label="Customise options"
+            >
+              {
+                languages_2Letters[
+                  i18n.language as keyof typeof languages_2Letters
+                ]
+              }
+              <Icons.chevronDown className="ml-1 h-4 w-4" />
+            </span>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content
+              className={cn(
+                "relative  z-50  rounded-md border border-[#BCBCBC] bg-white px-3 py-2 shadow-md outline-0 ",
+                "data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade",
+                "top-[-0.5rem] min-w-[220px] will-change-[opacity,transform]"
+              )}
+              sideOffset={5}
+            >
+              {Object.entries(languages_2Letters).map(([key, value]) => (
+                <DropdownMenu.Item
+                  id={key + "_language"}
+                  key={key}
+                  ref={langRef}
+                  className={cn(
+                    "group relative flex cursor-pointer select-none items-center py-2 text-[14px] leading-none outline-none first:border-b-[1px] hover:font-bold data-[disabled]:pointer-events-none",
+                    langFontMapping ? langFontMapping[key] : "",
+                    {
+                      "font-bold": i18n.language === key,
+                    }
                   )}
-                </div>
-              </DropdownMenu.Item>
-            ))}
-            <DropdownMenu.Arrow asChild>
-              <Icons.chevronUpSolid className="h-[7px] stroke-[#bcbcbc]" />
-            </DropdownMenu.Arrow>
-          </DropdownMenu.Content>
-        </DropdownMenu.Portal>
-      </DropdownMenu.Root>
+                  onSelect={() => handleLanguageChange(key)}
+                >
+                  {value}
+                  <div className="ml-auto">
+                    {i18n.language === key && (
+                      <Icons.check className="h-4 w-4 text-primary" />
+                    )}
+                  </div>
+                </DropdownMenu.Item>
+              ))}
+              <DropdownMenu.Arrow asChild>
+                <Icons.chevronUpSolid className="h-[7px] stroke-[#bcbcbc]" />
+              </DropdownMenu.Arrow>
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+      )}
     </div>
   );
 };