From 6cbd7fdd1414f7f28c4aecd615e204642b933355 Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Wed, 10 Aug 2022 18:44:37 +0500
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=BF=D0=B8=D1=81?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D1=83=D0=BA=D1=82=D1=83?=
 =?UTF-8?q?=D1=80=D0=B0=20=D0=B4=D0=BE=D0=BF=20=D0=BA=D0=BE=D0=BD=D1=82?=
 =?UTF-8?q?=D0=B5=D0=B9=D0=BD=D0=B5=D1=80=D0=B0=20=D0=B4=D0=BB=D1=8F=20?=
 =?UTF-8?q?=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=D0=B0,=20=D1=81?=
 =?UTF-8?q?=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D1=8B=20=D0=BA=D0=BE=D0=BC=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D1=8B=20=D0=BA=D0=BD=D0=BE=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BA=20=D0=B4=D0=BB=D1=8F=20=D0=BD=D0=B0=D1=81=D1=82?=
 =?UTF-8?q?=D1=80=D0=BE=D0=B5=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mainScreen/mainScreen.tsx      |  1 -
 .../mobileAddPart/mobileAddPart.css           | 40 +++++++++
 .../mobileAddPart/mobileAddPart.tsx           | 42 ++++-----
 .../mobileAddPart/settingButton.tsx           | 27 ++++++
 .../mobileAddPart/settingButtons.tsx          | 31 +++++++
 .../mainScreen/mobileAddPart/usersList.tsx    | 18 ++++
 .../mainScreen/mobileUsersPart/borderLine.tsx |  5 --
 .../mainScreen/mobileUsersPart/closeIcon.svg  |  3 -
 .../mobileUsersPart/mobileUsersPart.css       | 90 -------------------
 .../mobileUsersPart/mobileUsersPart.tsx       | 32 -------
 .../mainScreen/mobileUsersPart/userItem.tsx   | 42 ---------
 11 files changed, 132 insertions(+), 199 deletions(-)
 create mode 100644 src/components/mainScreen/mobileAddPart/settingButton.tsx
 create mode 100644 src/components/mainScreen/mobileAddPart/settingButtons.tsx
 create mode 100644 src/components/mainScreen/mobileAddPart/usersList.tsx
 delete mode 100644 src/components/mainScreen/mobileUsersPart/borderLine.tsx
 delete mode 100644 src/components/mainScreen/mobileUsersPart/closeIcon.svg
 delete mode 100644 src/components/mainScreen/mobileUsersPart/mobileUsersPart.css
 delete mode 100644 src/components/mainScreen/mobileUsersPart/mobileUsersPart.tsx
 delete mode 100644 src/components/mainScreen/mobileUsersPart/userItem.tsx

diff --git a/src/components/mainScreen/mainScreen.tsx b/src/components/mainScreen/mainScreen.tsx
index 4e72b22..b0407ae 100644
--- a/src/components/mainScreen/mainScreen.tsx
+++ b/src/components/mainScreen/mainScreen.tsx
@@ -3,7 +3,6 @@ import { CSSTransition } from "react-transition-group";
 import { ContextWindowHeight } from "../contextWindowHeight";
 import './mainScreen.css';
 import { MobileAddPart } from "./mobileAddPart/mobileAddPart";
-import { MobileUsersPart } from "./mobileUsersPart/mobileUsersPart";
 import { Toolbar } from "./toolbar/toolbar";
 
 export const MainScreen:React.FC = React.memo(() => {
diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPart.css b/src/components/mainScreen/mobileAddPart/mobileAddPart.css
index abf5b29..2e944ab 100644
--- a/src/components/mainScreen/mobileAddPart/mobileAddPart.css
+++ b/src/components/mainScreen/mobileAddPart/mobileAddPart.css
@@ -77,6 +77,46 @@
     gap: 8px;
 }
 
+.setting-buttons-container {
+    display: flex;
+    flex-direction: column;
+    padding-top: 12px;
+    height: 100%;
+    justify-content: space-between;    
+}
+
+.setting-buttons-row {
+    display: flex;
+    gap: 8px;
+}
+
+.setting-button-container {
+    width: 100%;
+    height: 48px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #4F4F4F;
+    border-radius: 16px;
+}
+
+.setting-button-container.exit {
+    width: 106px;
+    background-color: #EB5757;
+    align-self: flex-end;
+}
+
+
+
+
+
+
+
+
+
+
+
 .show-mobile-users-enter {
     transform: translateX(-15%);
     opacity: 0;
diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx b/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx
index 49a0d99..67911d6 100644
--- a/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx
+++ b/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx
@@ -3,6 +3,8 @@ import { BorderLine } from "./borderLine";
 import { MobileAddPartHeader } from "./mobileAddPartHeader";
 import './mobileAddPart.css';
 import { AddPartItem } from "./addPartItem";
+import { UsersList } from "./usersList";
+import { SettingButtons } from "./settingButtons";
 
 type TProps = {
     onClickClose: () => void
@@ -19,31 +21,19 @@ export const MobileAddPart:React.FC<TProps> = React.memo((props) => {
             onClick={props.onClickClose}
             title={props.title}
         />
-        <BorderLine />
-        <div className="mobile-users-part-users-container">
-            {
-                props.type === 'users' ?
-                <>
-                    <AddPartItem typeUser="user admin"/>
-                    <AddPartItem typeUser="user self" />
-                    <AddPartItem typeUser="user guest" />
-                    <AddPartItem typeUser="user guest" />
-                    <AddPartItem typeUser="user guest" />
-                    <AddPartItem typeUser="user guest" />
-                    <AddPartItem typeUser="user guest" />
-                </>
-                : <>
-                    <AddPartItem
-                        typeUser="share"
-                        onClickItem={props?.onClickShare}
-                    />
-                    <AddPartItem 
-                        typeUser="exit"
-                        onClickItem={props?.onClickExit}
-                    />
-                </>
-            }
-            
-        </div>
+        <BorderLine />        
+        {
+            props.type === 'users'
+            ? <UsersList />
+            : <SettingButtons />
+        }        
+        {/* <AddPartItem
+            typeUser="share"
+            onClickItem={props?.onClickShare}
+        />
+        <AddPartItem 
+            typeUser="exit"
+            onClickItem={props?.onClickExit}
+        /> */}
     </div>
 })
\ No newline at end of file
diff --git a/src/components/mainScreen/mobileAddPart/settingButton.tsx b/src/components/mainScreen/mobileAddPart/settingButton.tsx
new file mode 100644
index 0000000..280c22b
--- /dev/null
+++ b/src/components/mainScreen/mobileAddPart/settingButton.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+type TProps = {
+    icon: string
+    text: string
+    onClick: () => void
+    isExitButton?: boolean
+    helpText?: string
+    helpIcon?: string
+}
+
+export const SettingButton:React.FC<TProps> = React.memo((props) => {
+    return <div className={`setting-button-container ${props.isExitButton ? 'exit' : ''}`} onClick={() => props.onClick()}>
+        <img className="setting-button-icon" src={props.icon} alt={props.text}></img>
+        <div className="setting-button-text-container">
+            <span className="setting-button-text">{props.text}</span>
+            {
+                props.helpText &&
+                <span className="setting-button-help-text">{props.helpText}</span>
+            }
+        </div>        
+        {
+            props.helpIcon &&
+            <img className="setting-button-help-icon" src={props.helpIcon} alt='' />
+        }
+    </div>
+})
\ No newline at end of file
diff --git a/src/components/mainScreen/mobileAddPart/settingButtons.tsx b/src/components/mainScreen/mobileAddPart/settingButtons.tsx
new file mode 100644
index 0000000..f39ed93
--- /dev/null
+++ b/src/components/mainScreen/mobileAddPart/settingButtons.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { SettingButton } from "./settingButton";
+
+type TProps = {
+
+}
+
+export const SettingButtons:React.FC<TProps> = React.memo((props) => {
+    return <div className="setting-buttons-container">
+        <div className="setting-buttons-row">
+            <SettingButton
+                text="Пригласить"
+                icon={''}
+                onClick={() => null}
+            />
+            <SettingButton
+                text="Язык"
+                helpText="Русский"
+                icon={''}
+                helpIcon={''}
+                onClick={() => null}
+            />
+        </div>
+        <SettingButton 
+            text="Выйти"
+            isExitButton={true}
+            icon={''}
+            onClick={() => null}
+        />
+    </div>
+})
\ No newline at end of file
diff --git a/src/components/mainScreen/mobileAddPart/usersList.tsx b/src/components/mainScreen/mobileAddPart/usersList.tsx
new file mode 100644
index 0000000..6376886
--- /dev/null
+++ b/src/components/mainScreen/mobileAddPart/usersList.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { AddPartItem } from "./addPartItem";
+
+type TProps = {
+    users?: '???'
+}
+
+export const UsersList:React.FC<TProps> = React.memo((props) => {
+    return <div className="mobile-users-part-users-container">
+        <AddPartItem typeUser="user admin"/>
+        <AddPartItem typeUser="user self" />
+        <AddPartItem typeUser="user guest" />
+        <AddPartItem typeUser="user guest" />
+        <AddPartItem typeUser="user guest" />
+        <AddPartItem typeUser="user guest" />
+        <AddPartItem typeUser="user guest" />
+    </div>
+})
\ No newline at end of file
diff --git a/src/components/mainScreen/mobileUsersPart/borderLine.tsx b/src/components/mainScreen/mobileUsersPart/borderLine.tsx
deleted file mode 100644
index a10009e..0000000
--- a/src/components/mainScreen/mobileUsersPart/borderLine.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from "react";
-
-export const BorderLine:React.FC = React.memo(() => {
-    return <div className="border-line"></div>
-})
\ No newline at end of file
diff --git a/src/components/mainScreen/mobileUsersPart/closeIcon.svg b/src/components/mainScreen/mobileUsersPart/closeIcon.svg
deleted file mode 100644
index c6696a6..0000000
--- a/src/components/mainScreen/mobileUsersPart/closeIcon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 12L16.9996 17M12 12L17 7M12 12L7 17M12 12L7.00002 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/src/components/mainScreen/mobileUsersPart/mobileUsersPart.css b/src/components/mainScreen/mobileUsersPart/mobileUsersPart.css
deleted file mode 100644
index 9bbb8ba..0000000
--- a/src/components/mainScreen/mobileUsersPart/mobileUsersPart.css
+++ /dev/null
@@ -1,90 +0,0 @@
-.mobile-users-part {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    padding: 32px;
-    display: flex;
-    flex-direction: column;
-    color: #FFFFFF;
-    box-sizing: border-box;
-    background-color: #333333;
-}
-
-.border-line {
-    width: 100%;
-    height: 1px;
-    background-color: #4F4F4F;
-}
-
-.mobile-users-part-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 24px;
-}
-
-.mobile-users-part-header-title {
-    font-weight: 600;
-    font-size: 22px;
-    line-height: 130%;
-}
-
-.mobile-users-part-header-close-button {
-    width: 30px;
-    height: 30px;
-    border: none;
-    background-color: transparent;
-    background: url('closeIcon.svg') 50% 50% no-repeat;
-    background-size: 100% 100%;
-}
-
-.mobile-users-part-users-container {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    overflow-y: auto;
-    padding-top: 12px;
-}
-
-.user-item {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-}
-
-.user-item-user-info-container {
-    display: flex;
-    flex-direction: column;    
-    width: 100%;
-    gap: 12px;
-}
-
-.user-item-user-info {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.user-item-user-info-buttons {
-    display: flex;
-    gap: 8px;
-}
-
-.show-mobile-users-enter {
-    opacity: 0;
-}
-
-.show-mobile-users-enter-active {
-    opacity: 1;
-    transition: .3s;
-}
-
-.show-mobile-users-exit {
-    opacity: 1;
-}
-
-.show-mobile-users-exit-active {
-    opacity: 0;
-    transition: .3s;
-}
\ No newline at end of file
diff --git a/src/components/mainScreen/mobileUsersPart/mobileUsersPart.tsx b/src/components/mainScreen/mobileUsersPart/mobileUsersPart.tsx
deleted file mode 100644
index aaff83d..0000000
--- a/src/components/mainScreen/mobileUsersPart/mobileUsersPart.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import { BorderLine } from "./borderLine";
-import './mobileUsersPart.css'
-import { UserItem } from "./userItem";
-
-type TProps = {
-    onClickClose: () => void
-}
-
-export const MobileUsersPart:React.FC<TProps> = React.memo((props) => {
-    return <div className="mobile-users-part">
-        <div className="mobile-users-part-header">
-            <span className="mobile-users-part-header-title">
-                Участники демонастрации
-            </span>
-            <button 
-                className="mobile-users-part-header-close-button" 
-                onClick={() => props.onClickClose()} 
-            ></button>
-        </div>
-            <BorderLine />
-        <div className="mobile-users-part-users-container">
-            <UserItem typeUser="user admin"/>
-            <UserItem typeUser="user self" />
-            <UserItem typeUser="user guest" />
-            <UserItem typeUser="user guest" />
-            <UserItem typeUser="user guest" />
-            <UserItem typeUser="user guest" />
-            <UserItem typeUser="user guest" />            
-        </div>
-    </div>
-})
\ No newline at end of file
diff --git a/src/components/mainScreen/mobileUsersPart/userItem.tsx b/src/components/mainScreen/mobileUsersPart/userItem.tsx
deleted file mode 100644
index bd84c2f..0000000
--- a/src/components/mainScreen/mobileUsersPart/userItem.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from "react";
-import { ToolbarButton } from "../toolbar/toolbarButton";
-import { TypeToolbarButtons } from "../toolbar/typeButtons";
-import { BorderLine } from "./borderLine";
-import { CaptionToolbarButtons } from "../toolbar/typeCaptionButtons";
-
-type TProps = {
-    typeUser: TypeToolbarButtons
-}
-
-export const UserItem:React.FC<TProps> = React.memo((props) => {
-    return <div className="user-item">
-        <ToolbarButton
-            type={props.typeUser}
-            caption=""
-            isCaption={false}
-            onClick={() => null}            
-        />
-        <div className="user-item-user-info-container">
-            <div className="user-item-user-info">
-                <span className="user-item-user-info-name">{CaptionToolbarButtons[props.typeUser]}</span>
-                <div className="user-item-user-info-buttons">
-                    <ToolbarButton 
-                        type="micro" 
-                        active={true} 
-                        caption='' 
-                        isCaption={false}
-                        onClick={() => null}                        
-                    />
-                    <ToolbarButton 
-                        type="control" 
-                        active={false} 
-                        caption='' 
-                        isCaption={false}
-                        onClick={() => null}                        
-                    />
-                </div>
-            </div>
-            <BorderLine />
-        </div>
-    </div>
-})
\ No newline at end of file