[WC-1351]: fixed the problem with rendering logo (#36)

Author: raffiar

packages/pluggableWidgets/language-selector-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We changed the way how arrow is rendered.
+
 ## [1.0.0] - 2022-09-26
 
 ### Added

packages/pluggableWidgets/language-selector-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "language-selector-web",
   "widgetName": "LanguageSelector",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Display a list of available languages",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "license": "Apache-2.0",

packages/pluggableWidgets/language-selector-web/src/components/LanguageSwitcher.tsx

@@ -14,7 +14,6 @@ import {
 } from "../utils/document";
 import { PositionEnum, TriggerEnum } from "../../typings/LanguageSelectorProps";
 import { LanguageItem } from "../LanguageSelector";
-import ArrowIcon from "../assets/arrow_black.svg";
 
 export interface LanguageSwitcherProps {
     preview: boolean;
@@ -68,7 +67,7 @@ export const LanguageSwitcher = (props: LanguageSwitcherProps): ReactElement =>
             <div className={"popupmenu-trigger popupmenu-trigger-alignment"} {...onClick}>
                 <span className="current-language-text">{props.currentLanguage?.value || ""}</span>
                 <span className="language-arrow" aria-hidden="true">
-                    <img className={`${visibility ? "arrow-up" : "arrow-down"}`} src={ArrowIcon} alt="" />
+                    <div className={`arrow-image ${visibility ? "arrow-up" : "arrow-down"}`} />
                 </span>
             </div>
             <div className={classNames("popupmenu-menu", `popupmenu-position-${props.position}`)}>

packages/pluggableWidgets/language-selector-web/src/components/__tests__/__snapshots__/LanguageSwitcher.spec.tsx.snap

@@ -15,9 +15,8 @@ exports[`Language switcher renders the structure with empty language list 1`] =
         aria-hidden="true"
         class="language-arrow"
       >
-        <img
-          alt=""
-          class="arrow-down"
+        <div
+          class="arrow-image arrow-down"
         />
       </span>
     </div>
@@ -45,9 +44,8 @@ exports[`Language switcher renders the structure with language list and selected
         aria-hidden="true"
         class="language-arrow"
       >
-        <img
-          alt=""
-          class="arrow-down"
+        <div
+          class="arrow-image arrow-down"
         />
       </span>
     </div>

packages/pluggableWidgets/language-selector-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="LanguageSelector" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="LanguageSelector" version="1.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="LanguageSelector.xml" />
         </widgetFiles>

packages/pluggableWidgets/language-selector-web/src/ui/LanguageSelector.scss

@@ -3,18 +3,27 @@
         .current-language-text,
         .language-arrow {
             color: white;
-            img {
+            .arrow-image {
                 filter: invert(1);
             }
         }
     }
 }
 
 .widget-language-selector {
+    .popupmenu-trigger {
+        display: flex;
+        align-items: center;
+    }
     .language-arrow {
+        display: inline-flex;
         transition: transform 0.2s ease-in-out 50ms;
-        img {
+        .arrow-image {
+            background-image: url(../assets/arrow_black.svg);
+            background-repeat: no-repeat;
             height: 14px !important;
+            width: 14px;
+            margin-top: 2px;
             &.arrow-up {
                 transform: rotate(180deg);
             }