Web: Client: Mobile. fix style invitation language

packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js

@@ -376,6 +376,17 @@ const StyledLink = styled(Link)`
     theme.interfaceDirection === "rtl" ? `left` : `right`};
 `;
 
+const ResetLink = styled(Link)`
+  float: ${({ theme }) =>
+    theme.interfaceDirection === "rtl" ? `right` : `left`};
+  padding: 0 16px;
+  margin-bottom: 16px;
+  font-size: 13px;
+  color: ${(props) => props.theme.createEditRoomDialog.commonParam.textColor};
+  font-style: normal;
+  line-height: 15px;
+`;
+
 StyledButtons.defaultProps = { theme: Base };
 
 const StyledToggleButton = styled(ToggleButton)`
@@ -416,27 +427,46 @@ const StyledInviteLanguage = styled.div`
   display: flex;
   align-items: center;
   justify-content: start;
-  gap: 4px;
   height: 28px;
   color: ${(props) =>
     props.theme.createEditRoomDialog.commonParam.descriptionColor};
-  margin-bottom: 16px;
+  margin-bottom: 4px;
   font-size: 13px;
   font-style: normal;
   font-weight: 600;
   line-height: 20px;
-  .link-list {
+  .list-link {
-    font-size: 13px;
+    margin-left: 4px;
-    color: var(--light-gray-dark);
+    color: ${(props) => props.theme.createEditRoomDialog.commonParam.textColor};
-    font-style: normal;
+  }
-    font-weight: 600;
+  @media ${mobile} {
-    line-height: 15px;
+    justify-content: space-between;
+  }
+  .invitation-language {
+    margin-right: 4px;
+    color: ${(props) =>
+      props.theme.createEditRoomDialog.commonParam.descriptionColor};
+    @media ${mobile} {
+      margin-right: 0;
+    }
   }
   .language-combo-box {
     .combo-button {
       padding-left: 6px;
       padding-right: 0px;
     }
+    .combo-button-label {
+      color: ${(props) =>
+        props.theme.createEditRoomDialog.commonParam.descriptionColor};
+    }
+    .combo-buttons_arrow-icon {
+      svg {
+        path {
+          fill: ${(props) =>
+            props.theme.createEditRoomDialog.commonParam.descriptionColor};
+        }
+      }
+    }
   }
 `;
 const StyledCrossIconMobile = styled(CrossIconMobile)`
@@ -468,6 +498,7 @@ export {
   StyledDeleteIcon,
   StyledButtons,
   StyledLink,
+  ResetLink,
   ScrollList,
   StyledAccessSelector,
   StyledToggleButton,

packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js

@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect, useRef } from "react";
 import debounce from "lodash.debounce";
 import { inject, observer } from "mobx-react";
 import Avatar from "@docspace/components/avatar";
+import Text from "@docspace/components/text";
 import TextInput from "@docspace/components/text-input";
 import DropDownItem from "@docspace/components/drop-down-item";
 import toastr from "@docspace/components/toast/toastr";
@@ -27,6 +28,7 @@ import {
   SearchItemText,
   StyledDescription,
   StyledInviteLanguage,
+  ResetLink,
 } from "../StyledInvitePanel";
 
 import Filter from "@docspace/common/api/people/filter";
@@ -188,7 +190,8 @@ const InviteInput = ({
         onClick={addUser}
         disabled={shared}
         height={48}
-        className="list-item">
+        className="list-item"
+      >
         <Avatar size="min" role="user" source={avatar} />
         <div>
           <SearchItemText primary disabled={shared}>
@@ -257,7 +260,8 @@ const InviteInput = ({
       style={{ width: "inherit" }}
       textOverflow
       onClick={addEmail}
-      height={48}>
+      height={48}
+    >
       {t("Common:AddButton")} «{inputValue}»
     </DropDownItem>
   );
@@ -318,7 +322,8 @@ const InviteInput = ({
             fontWeight="600"
             type="action"
             isHovered
-            onClick={openUsersPanel}>
+            onClick={openUsersPanel}
+          >
             {t("Translations:ChooseFromList")}
           </StyledLink>
         )}
@@ -329,7 +334,7 @@ const InviteInput = ({
           : t("AddManuallyDescriptionRoom")}
       </StyledDescription>
       <StyledInviteLanguage>
-        {t("InvitationLanguage")}:
+        <Text className="invitation-language">{t("InvitationLanguage")}:</Text>
         <div className="language-combo-box-wrapper">
           <ComboBox
             className="language-combo-box"
@@ -346,20 +351,33 @@ const InviteInput = ({
             withBlur={isMobileView}
             isDefaultMode={!isMobileView}
             fillIcon={false}
-            modernView={!isMobileView}
+            modernView
           />
         </div>
-        {isChangeLangMail && (
+        {isChangeLangMail && !isMobileView && (
           <StyledLink
-            className="link-list"
+            className="list-link"
             fontWeight="600"
             type="action"
             isHovered
-            onClick={onResetLangMail}>
+            onClick={onResetLangMail}
+          >
             {t("ResetChange")}
           </StyledLink>
         )}
       </StyledInviteLanguage>
+      {isChangeLangMail && isMobileView && (
+        <ResetLink
+          className="reset-link"
+          fontWeight="600"
+          type="action"
+          isHovered
+          onClick={onResetLangMail}
+        >
+          {t("ResetChange")}
+        </ResetLink>
+      )}
+
       <StyledInviteInputContainer ref={inputsRef}>
         <StyledInviteInput ref={searchRef}>
           <TextInput
@@ -386,7 +404,8 @@ const InviteInput = ({
             showDisabledItems
             clickOutsideAction={closeInviteInputPanel}
             eventTypes="click"
-            {...dropDownMaxHeight}>
+            {...dropDownMaxHeight}
+          >
             {!!usersList.length ? foundUsers : addEmailPanel}
           </StyledDropDown>
         )}

packages/components/themes/base.js

@@ -2363,6 +2363,7 @@ const Base = {
   createEditRoomDialog: {
     commonParam: {
       descriptionColor: "#a3a9ae",
+      textColor: "#657077",
     },
 
     roomType: {

packages/components/themes/dark.js

@@ -2366,6 +2366,7 @@ const Dark = {
   createEditRoomDialog: {
     commonParam: {
       descriptionColor: "#a3a9ae",
+      textColor: "#858585",
     },
 
     roomType: {