From 1ca335794ca746a639a3e7efe0514961f7971bd3 Mon Sep 17 00:00:00 2001
From: Arun Et-008 <61292452+Et-008@users.noreply.github.com>
Date: Wed, 27 Oct 2021 16:23:16 +0530
Subject: [PATCH] fix(client): make language dropdown as wide as the nav
 (#43991)

Co-authored-by: arun elanthamil <arun.elanthamil@superops.ai>
---
 .../Header/components/nav-links.tsx           |  2 +-
 .../Header/components/universal-nav.css       | 20 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Header/components/nav-links.tsx b/client/src/components/Header/components/nav-links.tsx
index 453df3ecf5..fc2fee2c5d 100644
--- a/client/src/components/Header/components/nav-links.tsx
+++ b/client/src/components/Header/components/nav-links.tsx
@@ -189,7 +189,7 @@ export class NavLinks extends Component<NavLinksProps, {}> {
           {t('footer.language')}
         </div>
 
-        <div className='nav-link' key='language-dropdown'>
+        <div className='nav-link dropdown-nav-link' key='language-dropdown'>
           <select
             className='nav-link-lang-dropdown'
             onChange={this.handleLanguageChange}
diff --git a/client/src/components/Header/components/universal-nav.css b/client/src/components/Header/components/universal-nav.css
index 1d63450e52..f5f8f42b35 100644
--- a/client/src/components/Header/components/universal-nav.css
+++ b/client/src/components/Header/components/universal-nav.css
@@ -109,6 +109,16 @@
   border: none;
 }
 
+.dropdown-nav-link {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.dropdown-nav-link:hover .nav-link-lang-dropdown,
+.dropdown-nav-link:active .nav-link-lang-dropdown {
+  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+}
+
 .nav-link:hover,
 .nav-link:active {
   color: var(--theme-color);
@@ -143,11 +153,21 @@
 }
 
 .nav-link-lang-dropdown {
+  padding: 0 15px;
   color: var(--gray-00);
   background-color: var(--gray-90);
   width: 100%;
   border: none;
+  position: relative;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+  background-size: 10px;
+  background-position: calc(100% - 15px) center;
+  background-repeat: no-repeat;
 }
+
 .nav-link-lang-dropdown:focus {
   outline: none;
 }