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"
+ >