fix: ⚰️ remove flags icons from language selector

binary-com · prince-deriv · Dec 9, 2022 · Sep 8, 2022 · Oct 18, 2022 · Oct 19, 2022
commit d1cc1c374e10a89846369a5948744935004ecbc5
diff --git a/src/indexPage/react-components/binary-landing/Hero.jsx b/src/indexPage/react-components/binary-landing/Hero.jsx
@@ -45,15 +45,14 @@ const Hero = ({isFromBinary}) => {
             <h2>
                 {translate('We’ve rebranded the online trading space by offering new innovative products, intuitive platforms, and outstanding services.')}
             </h2>
-            <div className="btn-group">
-                <a href={getLanguageBase('deriv')}>
-                    <button className="l-btn primary">
-                        {translate('Explore Deriv')}
-                    </button>
-                </a>
-                <a id="logo" href={getLanguageBase('oauth')}>
-                    <button className="l-btn">{translate('Create a demo account')}</button>
-                </a>
+            <div className="btn-group-binary">
+                <button className="l-btn-binary primary" onClick={() => getLanguageBase('deriv')}>
+                    {translate('Explore Deriv')}
+                </button>
+                <button className="l-btn-binary" onClick={() => getLanguageBase('deriv')}>
+                    {translate('Create a demo account')}
+
+                </button>
             </div>
         </div>
     );
@@ -70,15 +69,13 @@ const Hero = ({isFromBinary}) => {
                 {translate('Say hello to our new home,')}
                 <b>{translate(' Deriv.')}</b>
             </h2>
-            <div className="btn-group">
-                <a href={getLanguageBase('deriv')}>
-                    <button className="l-btn primary">
-                        {translate('Hello Deriv!')}
-                    </button>
-                </a>
-                <a id="logo" onClick={() => setBinaryCookieAndRedirect(getLanguageBase('binary'))}>
-                    <button className="l-btn">{translate('Maybe later')}</button>
-                </a>
+            <div className="btn-group-binary">
+                <button className="l-btn-binary primary" onClick={() => getLanguageBase('deriv')}>
+                    {translate('Hello Deriv!')}
+                </button>
+                <button className="l-btn-binary" onClick={() => setBinaryCookieAndRedirect(getLanguageBase('binary'))}>
+                    {translate('Maybe later')}
+                </button>
             </div>
         </div>
     );

diff --git a/src/indexPage/react-components/binary-landing/LanguageSelector.jsx b/src/indexPage/react-components/binary-landing/LanguageSelector.jsx
@@ -5,22 +5,18 @@ const languages = [
     {
         code: 'en',
         name: 'English',
-        icon: './image/english-flag.png',
     },
     {
         code: 'es',
         name: 'Español',
-        icon: './image/spain-flag.png',
     },
     {
         code: 'id',
         name: 'Indonesia',
-        icon: './image/indonesia-flag.png',
     },
     {
         code: 'pt',
         name: 'Português',
-        icon: './image/portugal-flag.png',
     },
 ]
 
@@ -54,7 +50,6 @@ const LanguageSelector = () => {
             <div
                 className='language-selector-item-container'
                 onClick={() => onLanguageSelect(language)}>
-                <img className='language-selector-item-flag' src={language.icon} />
                 <p className={`language-selector-item-name ${language.code === selectedLanguage.code ? 'selected' : ''}`}>
                     {language.name}
                 </p>
@@ -65,7 +60,6 @@ const LanguageSelector = () => {
     return (
         <div className='language-selector' onClick={() => setIsOpen(old => !old)}>
             <div className='language-selector-button'>
-                <img className='language-selector-button-flag' src={selectedLanguage.icon} />
                 <p className='language-selector-button-name'>{selectedLanguage.code.toUpperCase()}</p>
                 <div className={`language-selector-button-arrow ${isOpen ? 'up' : 'down'}`} />
             </div>

diff --git a/static/css/_landing-binary.scss b/static/css/_landing-binary.scss
@@ -73,7 +73,7 @@ $header-color : #333333;
 
 }
 
-.l-btn {
+.l-btn-binary {
   height: 2.5rem;
   border-radius: 0.25rem;
   font: 700 0.875rem $font-IBM;
@@ -110,14 +110,20 @@ $header-color : #333333;
   }
 }
 
-.btn-group {
+.btn-group-binary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+
   button {
-    margin-right: 1rem;
+    flex: 1;
+    min-width: max-content;
   }
 
   @include for-size(mobile) {
     text-align: center;
     margin-bottom: 2.4rem;
+    gap: 16px;
   }
 }
 
@@ -833,11 +839,6 @@ $header-color : #333333;
       opacity: 0.5;
     }
 
-    &-flag {
-      width: 24px;
-      height: 16px;
-    }
-
     &-name {
       font: 700 16px $font-IBM;
       color: $white;
@@ -911,11 +912,6 @@ $header-color : #333333;
     }
   }
 
-  &-item-flag {
-    width: 24px;
-    height: 16px;
-  }
-
   &-item-name {
     font: 400 14px $font-IBM;
     color: #333333;