diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js index 52bf9a6aa1..8ae7d72f43 100644 --- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js +++ b/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 { - font-size: 13px; - color: var(--light-gray-dark); - font-style: normal; - font-weight: 600; - line-height: 15px; + .list-link { + margin-left: 4px; + color: ${(props) => props.theme.createEditRoomDialog.commonParam.textColor}; + } + @media ${mobile} { + 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, diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js b/packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js index 1ec09d7dbd..7a6e07f48a 100644 --- a/packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js +++ b/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" + >
@@ -257,7 +260,8 @@ const InviteInput = ({ style={{ width: "inherit" }} textOverflow onClick={addEmail} - height={48}> + height={48} + > {t("Common:AddButton")} «{inputValue}» ); @@ -318,7 +322,8 @@ const InviteInput = ({ fontWeight="600" type="action" isHovered - onClick={openUsersPanel}> + onClick={openUsersPanel} + > {t("Translations:ChooseFromList")} )} @@ -329,7 +334,7 @@ const InviteInput = ({ : t("AddManuallyDescriptionRoom")} - {t("InvitationLanguage")}: + {t("InvitationLanguage")}:
- {isChangeLangMail && ( + {isChangeLangMail && !isMobileView && ( + onClick={onResetLangMail} + > {t("ResetChange")} )}
+ {isChangeLangMail && isMobileView && ( + + {t("ResetChange")} + + )} + + {...dropDownMaxHeight} + > {!!usersList.length ? foundUsers : addEmailPanel} )} diff --git a/packages/components/themes/base.js b/packages/components/themes/base.js index 6b24d3f3e6..8dc411e602 100644 --- a/packages/components/themes/base.js +++ b/packages/components/themes/base.js @@ -2363,6 +2363,7 @@ const Base = { createEditRoomDialog: { commonParam: { descriptionColor: "#a3a9ae", + textColor: "#657077", }, roomType: { diff --git a/packages/components/themes/dark.js b/packages/components/themes/dark.js index c269cef98b..4530b23f3f 100644 --- a/packages/components/themes/dark.js +++ b/packages/components/themes/dark.js @@ -2366,6 +2366,7 @@ const Dark = { createEditRoomDialog: { commonParam: { descriptionColor: "#a3a9ae", + textColor: "#858585", }, roomType: {