+
{Props.list.length ? (
@@ -118,7 +131,9 @@ export const SelectDevice: React.FC = (Props) => {
))
) : (
- Нет устройств
+
+ Нет устройств
+
)}
diff --git a/src/features/EnterProfile/index.ts b/src/features/EnterProfile/index.ts
new file mode 100644
index 0000000..7a18b97
--- /dev/null
+++ b/src/features/EnterProfile/index.ts
@@ -0,0 +1 @@
+export { EnterProfileButton } from "./ui/EnterProfileButton";
diff --git a/src/features/EnterProfile/ui/EnterProfileButton.tsx b/src/features/EnterProfile/ui/EnterProfileButton.tsx
new file mode 100644
index 0000000..a6b42f9
--- /dev/null
+++ b/src/features/EnterProfile/ui/EnterProfileButton.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { styled } from "styled-components";
+import settingsIcon from "../../../../public/icons/setting-mini.svg";
+import Paragraph from "../../../shared/ui/Paragraph";
+
+const Container = styled.div`
+ width: 100%;
+ height: 100%;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ color: inherit;
+`;
+
+export const EnterProfileButton: React.FC = () => {
+ function enterProfile() {
+ window.location.href = "/profile";
+ }
+
+ return (
+
+ 
+ Настройки профиля
+
+ );
+};
diff --git a/src/features/createRoom/model/index.ts b/src/features/createRoom/model/index.ts
index 865e782..ff15fbf 100644
--- a/src/features/createRoom/model/index.ts
+++ b/src/features/createRoom/model/index.ts
@@ -1,34 +1,9 @@
import { IUser } from "../../../shared/api/models";
-import user from "../../../pages/Lobby/store/user";
-
-export const AddUserThunk = (fullname: any, photo_url: string, email: any) => {
- const API = String(import.meta.env.VITE_API);
-
- const newUser = {
- full_name: fullname,
- photo_url: photo_url,
- email: email
- }
-
- fetch(`${API}/users`, {
- method : 'POST',
- headers: {
- 'Content-type': 'application/json',
- },
- body : JSON.stringify(newUser),
- })
- .then(response => response.text())
- .then(response => {
- response = JSON.parse(response);
- console.log(response);
- user.addUser(JSON.parse(response));
- })
-}
export const CreateThunk = (event: any, title: string, isPublic: boolean, user: IUser) => {
event.preventDefault();
- AddUserThunk(user?.name, 'test', user?.email);
const API = String(import.meta.env.VITE_API);
+
console.log(user?.email);
const newRoom = {
diff --git a/src/features/editRoom/model/delete.ts b/src/features/editRoom/model/delete.ts
index b4bf2d0..4da660c 100644
--- a/src/features/editRoom/model/delete.ts
+++ b/src/features/editRoom/model/delete.ts
@@ -1,12 +1,16 @@
-export const DeleteThunk= (id: number) => {
+export const DeleteThunk= (id: number, email: any) => {
const API = String(import.meta.env.VITE_API);
- fetch(`${API}/channels/`, {
+ const info = {
+ user_email: String(email)
+ }
+
+ fetch(`${API}/channels/${id}`, {
method : 'DELETE',
headers: {
'Content-type': 'application/json',
},
- body : JSON.stringify({id}),
+ body : JSON.stringify(info),
})
.then(response => response.text())
.then(response => {
diff --git a/src/features/editRoom/model/index.ts b/src/features/editRoom/model/index.ts
index 4085771..b391514 100644
--- a/src/features/editRoom/model/index.ts
+++ b/src/features/editRoom/model/index.ts
@@ -1,13 +1,19 @@
-export const EditThunk= (event: any, id: number, title: string, isPublic: boolean) => {
+import { IRoom } from '../../../entities/room/api/models';
+
+export const EditThunk= (event: any, room: IRoom, title: string, isPublic: boolean, email: any) => {
event.preventDefault();
const API = String(import.meta.env.VITE_API);
const editedRoom = {
- name: title,
- public: isPublic,
+ user_email: email,
+ title: title, //change
+ photo_url: room.photo_url,
+ url: room.url,
+ isPublic: isPublic, //change
+ isActive: room.isActive
}
- fetch(`${API}/channels/${id}`, {
+ fetch(`${API}/channels/${room.id}`, {
method : 'PUT',
headers: {
'Content-type': 'application/json',
diff --git a/src/features/editRoom/ui/EditRoomForm.tsx b/src/features/editRoom/ui/EditRoomForm.tsx
index eb6ca5b..2b99fc9 100644
--- a/src/features/editRoom/ui/EditRoomForm.tsx
+++ b/src/features/editRoom/ui/EditRoomForm.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { IRoom } from '../../../entities/room/api/models';
import { EditThunk } from '../model';
import { DeleteThunk } from '../model/delete';
+import { observer } from 'mobx-react-lite';
import styled from 'styled-components';
import LobbyFormLayout from '../../../widgets/layout/LobbyFormLayout';
import Input from '../../../shared/ui/Input';
@@ -9,6 +10,7 @@ import SwitchToggle from '../../../shared/ui/switchToggle/SwitchToggle';
import FormButton from '../../../shared/ui/formButton/FormButton';
import avatar from '../../../../public/icons/avatar.svg';
import deleteIcon from '../../../../public/icons/delete.svg';
+import { useAuth0 } from "@auth0/auth0-react";
const Form = styled.form`
display: flex;
@@ -60,16 +62,17 @@ interface Props {
room: IRoom,
}
-export const EditRoomForm: React.FC
= ({ room }) => {
+export const EditRoomForm: React.FC = observer(({ room }) => {
+ const { user } = useAuth0();
const [title, setTitle] = useState(room.title);
const [isPublic, setIsPublic] = useState(room.isPublic);
function editRoom(event: any) {
- EditThunk(event, room.id, title, isPublic);
+ EditThunk(event, room, title, isPublic, user?.email);
}
function deleteRoom() {
- DeleteThunk(room.id);
+ DeleteThunk(room.id, user?.email);
}
return (
@@ -94,4 +97,4 @@ export const EditRoomForm: React.FC = ({ room }) => {
)
-}
+})
diff --git a/src/features/editUser/index.ts b/src/features/editUser/index.ts
new file mode 100644
index 0000000..f33886e
--- /dev/null
+++ b/src/features/editUser/index.ts
@@ -0,0 +1 @@
+export { EditUserForm } from "./ui/EditUserForm";
diff --git a/src/features/editUser/ui/EditUserForm.tsx b/src/features/editUser/ui/EditUserForm.tsx
new file mode 100644
index 0000000..90b19db
--- /dev/null
+++ b/src/features/editUser/ui/EditUserForm.tsx
@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import styles from "./styles.module.css";
+import ProfileFormLayout from "../../../widgets/layout/ProfileFormLayout";
+import { useAuth0 } from "@auth0/auth0-react";
+import avatarDefault from "../../../../public/icons/avatar.svg";
+import FormButton from "../../../shared/ui/formButton/FormButton";
+import profileFormState from "../../../pages/Profile/store/profileFormState";
+import { observer } from "mobx-react-lite";
+
+const Form = styled.form`
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: -2px;
+ bottom: -2px;
+ left: -2px;
+ right: -2px;
+ border-radius: 12px;
+ background: linear-gradient(
+ 223deg,
+ rgba(255, 178, 64, 0.9) 0%,
+ rgba(216, 97, 196, 0.9) 50.52%,
+ rgba(23, 94, 241, 0.9) 100%
+ );
+ z-index: -1;
+ }
+`;
+
+export const EditUserForm: React.FC = observer(() => {
+ const { user } = useAuth0();
+ const [avatar, setAvatar] = useState(user?.picture || avatarDefault);
+ const [name, setName] = useState(user?.name);
+
+ const sendAccess = () => {
+ profileFormState.confirmEmail();
+ };
+
+ const saveChanges = () => {
+ profileFormState.closeEditForm();
+ };
+
+ const onImageChange = (event: React.ChangeEvent) => {
+ if (event.target.files && event.target.files[0]) {
+ setAvatar(URL.createObjectURL(event.target.files[0]));
+ }
+ };
+
+ return (
+
+
+
+ );
+});
diff --git a/src/features/editUser/ui/styles.module.css b/src/features/editUser/ui/styles.module.css
new file mode 100644
index 0000000..d3e9e4a
--- /dev/null
+++ b/src/features/editUser/ui/styles.module.css
@@ -0,0 +1,71 @@
+.user {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.avatar {
+ width: 86px;
+ height: 86px;
+ border-radius: 10px;
+ border: 2px dashed #175ef1;
+ position: relative;
+}
+
+.inputAvatar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ color: transparent;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &::file-selector-button {
+ display: none;
+ }
+}
+
+.info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+}
+
+.name {
+ width: 100%;
+ font-size: 22px;
+ font-weight: 500;
+}
+
+.email {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.emailText {
+ font-size: 20px;
+ font-weight: 300;
+ line-height: normal;
+}
+
+.accessEmail {
+ font-size: 20px;
+ font-weight: 300;
+ line-height: normal;
+}
+
+.accessText {
+ color: var(--red, #f95a39);
+
+ &:hover {
+ text-decoration: underline;
+ cursor: pointer;
+ }
+}
diff --git a/src/features/logout/ui/LogoutButton.tsx b/src/features/logout/ui/LogoutButton.tsx
index 7f41339..8c6f0ba 100644
--- a/src/features/logout/ui/LogoutButton.tsx
+++ b/src/features/logout/ui/LogoutButton.tsx
@@ -1,20 +1,32 @@
-import React from 'react';
+import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
-import Paragraph from '../../../shared/ui/Paragraph';
+import Paragraph from "../../../shared/ui/Paragraph";
+import logoutIcon from "../../../../public/icons/logout.svg";
+import { styled } from "styled-components";
+
+const Container = styled.div`
+ width: 100%;
+ height: 100%;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ color: inherit;
+`;
export const LogoutButton: React.FC = () => {
- const { logout } = useAuth0();
+ const { logout } = useAuth0();
- function logoutFunc(event : any) {
- event.preventDefault();
- logout({ logoutParams: { returnTo: window.location.origin } });
- }
+ function logoutFunc(event: any) {
+ event.preventDefault();
+ logout({ logoutParams: { returnTo: window.location.origin } });
+ }
return (
-
- )
-}
+
+ 
+
+
+ );
+};
diff --git a/src/pages/CallPageCustomUI/CallPage.tsx b/src/pages/CallPageCustomUI/CallPage.tsx
index 89f2f30..6d80595 100644
--- a/src/pages/CallPageCustomUI/CallPage.tsx
+++ b/src/pages/CallPageCustomUI/CallPage.tsx
@@ -8,6 +8,8 @@ import avatar from "../../../public/icons/avatar.svg";
import Sidebar from "../../widgets/layout/Sidebar/Sidebar";
import storeSidebar from "./store/sidebarState";
import { observer } from "mobx-react-lite";
+import settingsState from "./store/settingsState";
+import SettingsCallPopup from "../../widgets/layout/SettingsCallPopup/SettingsCallPopup";
const Container = styled.div`
width: 100%;
@@ -30,6 +32,17 @@ const Content = styled.div`
transition: all 0.3s ease-out;
`;
+const Overlay = styled.div`
+ background: white;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0.4;
+ z-index: 100;
+`;
+
const peopleList: IUser[] = [
{
email: "jjj",
@@ -178,6 +191,10 @@ const peopleList: IUser[] = [
];
const CallPage: React.FC = observer(() => {
+ function closePopup() {
+ settingsState.closeSettings();
+ }
+
return (
{
}
>
-
+
+ {settingsState.isActive && }
+ {settingsState.isActive && }
);
});
diff --git a/src/pages/CallPageCustomUI/store/settingsState.ts b/src/pages/CallPageCustomUI/store/settingsState.ts
new file mode 100644
index 0000000..0eddd3d
--- /dev/null
+++ b/src/pages/CallPageCustomUI/store/settingsState.ts
@@ -0,0 +1,28 @@
+import { makeAutoObservable } from "mobx";
+
+class SettingsState {
+ isActive = false;
+ selected = "My";
+
+ constructor() {
+ makeAutoObservable(this);
+ }
+
+ openSettings() {
+ this.isActive = true;
+ }
+
+ closeSettings() {
+ this.isActive = false;
+ }
+
+ selectClass() {
+ this.selected = "Class";
+ }
+
+ selectMy() {
+ this.selected = "My";
+ }
+}
+
+export default new SettingsState();
diff --git a/src/pages/Join/Join.tsx b/src/pages/Join/Join.tsx
index 91d57dd..2e0419a 100644
--- a/src/pages/Join/Join.tsx
+++ b/src/pages/Join/Join.tsx
@@ -9,15 +9,24 @@ import { EnterClassForm } from "../../features/EnterClass/index.ts";
import FunctionsList from "../../widgets/FunctionsList/FunctionsList.tsx";
import functions from "../../widgets/FunctionsList/functionsObject.tsx";
import ProfilePanel from "../../widgets/ProfilePanel/ProfilePanel.tsx"
+import { useAuth0 } from "@auth0/auth0-react";
+import { useAddUser } from "../../entities/user/api/useAddUser.ts";
const Join: React.FC = () => {
+ const { isAuthenticated, user } = useAuth0();
+
+ if (isAuthenticated) {
+ useAddUser(user?.name, 'test', user?.email);
+ }
return (
- 
- Сетевой учебный класс
+
+
+
Сетевой учебный класс
+
+
Имя в классе
+ ) =>
+ setName(e.target.value)
+ }
+ />
+
+
+
+
+
+ );
+};
+
+export default SettingsMy;
diff --git a/src/widgets/Statistics/Statistics.tsx b/src/widgets/Statistics/Statistics.tsx
new file mode 100644
index 0000000..8eb6c5e
--- /dev/null
+++ b/src/widgets/Statistics/Statistics.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+ display: grid;
+ grid-template-columns: repeat(3, max-content);
+ justify-content: space-between;
+ gap: 30px;
+ margin: 0 136px 0 144px;
+ color: #000;
+ font-family: var(--font);
+ line-height: normal;
+`;
+
+const StatisticsBlock = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 10px;
+`;
+
+const StatisticsTitle = styled.div`
+ font-size: 22px;
+ font-weight: 500;
+`;
+
+const StatisticsText = styled.div`
+ font-size: 20px;
+ font-weight: 300;
+`;
+
+const Statistics: React.FC = () => {
+ return (
+
+
+ Дата регистрации
+ 08.08.2023
+
+
+ Дата последней онлайн-встречи
+ 09.08.2023
+
+
+ Частота проведения встреч
+ 2.8 встреч в месяц
+
+
+ Всего участников
+ 1784
+
+
+ Всего моих классов
+ 15
+
+
+
+ Всего онлайн участников в моих классах
+
+ 12
+
+
+ );
+};
+
+export default Statistics;
diff --git a/src/widgets/UserGrid/UserGrid.tsx b/src/widgets/UserGrid/UserGrid.tsx
index fce7228..bd069e7 100644
--- a/src/widgets/UserGrid/UserGrid.tsx
+++ b/src/widgets/UserGrid/UserGrid.tsx
@@ -64,7 +64,7 @@ const ShowMoreButton = styled.button`
position: absolute;
top: 50%;
transform: translate(0, -50%);
- z-index: 1000;
+ z-index: 10;
&:hover {
cursor: pointer;
diff --git a/src/widgets/layout/Navbar.tsx b/src/widgets/layout/Navbar.tsx
index 8c87428..c7d9036 100644
--- a/src/widgets/layout/Navbar.tsx
+++ b/src/widgets/layout/Navbar.tsx
@@ -1,10 +1,12 @@
// import React from 'react';
import styled from 'styled-components';
+import { observer } from 'mobx-react-lite';
import { AddRoomButton } from '../../features/AddRoom.tsx/index.ts';
import { SearchInput } from '../../features/Search/index.ts';
import roomsFormState from '../../pages/Lobby/store/roomsFormState.ts';
import roomsState from '../../pages/Lobby/store/roomsState.ts';
import editIcon from '../../../public/icons/edit.svg';
+import navbarState from '../../pages/Lobby/store/navbarState.ts';
const Container = styled.div`
display: flex;
@@ -21,7 +23,7 @@ const Left = styled.div`
justify-content: space-between;
`
-const Link = styled.a`
+const Link = styled.button`
font-family: var(--font);
font-size: 20px;
font-style: normal;
@@ -53,41 +55,50 @@ const EditButton = styled.button`
box-shadow: 0px 3px 6px 0px #E5EAF8;
`
-interface Props {
- activeLink: string,
- allLength?: number,
- accessLength?: number,
- myLength?: number,
-}
+const Navbar: React.FC = observer(() => {
-const Navbar: React.FC = ({ activeLink, /*allLength, accessLength, myLength*/ }) => {
+ function openAll() {
+ navbarState.openAll();
+ }
+
+ function openAccess() {
+ navbarState.openAccess();
+ }
+
+ function openMy() {
+ navbarState.openMy();
+ }
function addRoom() {
- const currentUrl = window.location.href;
- if (currentUrl !== "http://localhost:5173/lobby/my") {
- window.location.href = '/lobby/my';
+ if (roomsFormState.state === '' && navbarState.state === 'my') {
roomsFormState.openCreateForm();
+ return 0;
}
- roomsFormState.openCreateForm();
+ if (roomsFormState.state === 'create') {
+ roomsFormState.closeCreateForm();
+ return 0;
+ }
}
function editRooms() {
- if (roomsState.state === '') {
- roomsState.openEditForm();
- return 0;
- }
- if (roomsState.state === 'edit') {
- roomsState.closeEditForm();
- return 0;
+ if (navbarState.state === 'my') {
+ if (roomsState.state === '') {
+ roomsState.openEditForm();
+ return 0;
+ }
+ if (roomsState.state === 'edit') {
+ roomsState.closeEditForm();
+ return 0;
+ }
}
}
return (
- Все классы({121})
- Доступные({5})
- Мои({2})
+ Все классы
+ Доступные
+ Мои
@@ -98,6 +109,6 @@ const Navbar: React.FC = ({ activeLink, /*allLength, accessLength, myLeng
)
-}
+})
export default Navbar;
\ No newline at end of file
diff --git a/src/widgets/layout/ProfileFormLayout.tsx b/src/widgets/layout/ProfileFormLayout.tsx
new file mode 100644
index 0000000..3086275
--- /dev/null
+++ b/src/widgets/layout/ProfileFormLayout.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+ position: relative;
+ width: 100%;
+ padding: 20px;
+ border-radius: 10px;
+ background: var(--white);
+ box-shadow: 0px 0px 4px 0px #e5eaf8;
+ font-family: var(--font);
+ color: #000;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+`;
+
+interface Props {
+ children?: React.ReactNode;
+}
+
+const ProfileFormLayout: React.FC = ({ children }) => {
+ return {children};
+};
+
+export default ProfileFormLayout;
diff --git a/src/widgets/layout/SettingClassLayout.tsx b/src/widgets/layout/SettingClassLayout.tsx
new file mode 100644
index 0000000..6b3cff0
--- /dev/null
+++ b/src/widgets/layout/SettingClassLayout.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { styled } from "styled-components";
+import CheckBox from "../../shared/ui/checkBox/CheckBox";
+
+const Container = styled.div`
+ width: 100%;
+ display: flex;
+ padding-bottom: 20px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+`;
+
+const Head = styled.div`
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ gap: 100px;
+`;
+
+const Title = styled.div`
+ color: var(--black, #000);
+ font-family: var(--font);
+ font-size: 20px;
+ font-weight: 600;
+ line-height: normal;
+`;
+
+const Main = styled.div`
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ gap: 20px;
+`;
+
+interface Props {
+ title: string;
+ children?: React.ReactNode;
+}
+
+export const SettingClassLayout: React.FC = ({ title, children }) => {
+ return (
+
+
+ {title}
+
+
+ {children}
+
+ );
+};
diff --git a/src/widgets/layout/SettingsCallPopup/SettingsCallPopup.tsx b/src/widgets/layout/SettingsCallPopup/SettingsCallPopup.tsx
new file mode 100644
index 0000000..e25f357
--- /dev/null
+++ b/src/widgets/layout/SettingsCallPopup/SettingsCallPopup.tsx
@@ -0,0 +1,133 @@
+import React from "react";
+import styled from "styled-components";
+import settingsState from "../../../pages/CallPageCustomUI/store/settingsState";
+import { observer } from "mobx-react-lite";
+import FormButton from "../../../shared/ui/formButton/FormButton";
+import SettingsMy from "../../SettingsMy/SettingsMy";
+import SettingsClass from "../../SettingsClass/SettingsClass";
+
+const Container = styled.div`
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ min-width: 530px;
+ max-height: 100vh;
+ padding: 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 30px;
+ border-radius: 8px;
+ background: var(--white, #fff);
+ box-shadow: 0px 0px 2px 0px #c5ccd5;
+ z-index: 101;
+`;
+
+const Header = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ width: 100%;
+ padding-bottom: 20px;
+ border-bottom: 0.5px solid var(--grey-5, #d5dee8);
+`;
+
+const HeaderText = styled.div`
+ display: flex;
+ padding: 8px 16px;
+ align-items: flex-start;
+ gap: 10px;
+ color: var(--grey-1, #5f6a77);
+ font-family: var(--font);
+ font-size: 20px;
+ font-weight: 400;
+ line-height: normal;
+
+ &:hover {
+ cursor: pointer;
+ }
+`;
+
+const Settings = styled.form`
+ overflow: auto;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 20px;
+ padding-bottom: 5px;
+
+ &::-webkit-scrollbar {
+ width: 0;
+ }
+`;
+
+const Buttons = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 30px;
+`;
+
+const Back = styled.button`
+ color: var(--grey-1, #5f6a77);
+ font-family: var(--font);
+ font-size: 20px;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+const styleSelected = {
+ color: "var(--blue, #175EF1)",
+ fontWeight: 600,
+};
+
+const SettingsCallPopup: React.FC = observer(() => {
+ function openMy() {
+ settingsState.selectMy();
+ }
+
+ function openClass() {
+ settingsState.selectClass();
+ }
+
+ function saveChanges() {
+ settingsState.closeSettings();
+ }
+
+ function backChanges() {
+ settingsState.closeSettings();
+ }
+
+ return (
+
+
+
+ Мои настройки
+
+
+ Настройки класса
+
+
+
+ {settingsState.selected === "My" && }
+ {settingsState.selected === "Class" && }
+
+ Сохранить
+ Отмена
+
+
+
+ );
+});
+
+export default SettingsCallPopup;