From be9c78966ac5a765b3aeca728cf0b472f0afd7b2 Mon Sep 17 00:00:00 2001
From: Gorji <gorji@mobiniranian.ir>
Date: Thu, 27 May 2021 18:53:46 +0430
Subject: [PATCH] set

---
 src/Router.js                                 |  2 +-
 .../ChatInput.js => Input/index.js}           |  2 +-
 .../ChatInputs.scss => Input/index.scss}      |  0
 .../ChatSuggest.js => Keyboard/index.js}      |  2 +-
 .../ChatSuggest.scss => Keyboard/index.scss}  |  0
 .../Message2D.js => Inline/index.js}          |  2 +-
 .../Message2D.scss => Inline/index.scss}      |  0
 src/views/ChatRoom/Body/Message/Message.js    | 38 -----------
 .../RadioMessage.js => MultiSelect/index.js}  |  0
 .../NormalMessage.js => Normal/index.js}      | 13 +++-
 .../NormalMessage.scss => Normal/index.scss}  |  0
 .../ChatRoom/Body/Message/Select/index.js     | 63 +++++++++++++++++++
 .../index.scss}                               |  0
 .../SliderMessage.js => Slider/index.js}      |  0
 .../RadioMessage.scss => Slider/index.scss}   |  0
 .../DraggableMessage.js => Sort/index.js}     |  0
 .../SliderMessage.scss => Sort/index.scss}    |  0
 src/views/ChatRoom/Body/Message/index.js      | 36 +++++++++++
 src/views/ChatRoom/Body/Message/index.scss    |  5 ++
 src/views/ChatRoom/Body/{Body.js => index.js} | 20 +++---
 .../ChatRoom/Body/{Body.scss => index.scss}   |  2 +-
 .../ChatRoom/Header/{Header.js => index.js}   |  2 +-
 .../Header/{Header.scss => index.scss}        |  0
 .../FileTabs.js => Info/FileTabs/index.js}    |  2 +-
 .../FileTabs/index.scss}                      |  0
 .../Gallery.js => Info/Gallery/index.js}      |  2 +-
 .../Gallery.scss => Info/Gallery/index.scss}  |  0
 .../{ChatInfo/ChatInfo.js => Info/index.js}   |  8 +--
 .../ChatInfo.scss => Info/index.scss}         |  0
 src/views/ChatRoom/{ChatRoom.js => index.js}  | 12 ++--
 .../ChatRoom/{ChatRoom.scss => index.scss}    |  0
 31 files changed, 140 insertions(+), 71 deletions(-)
 rename src/views/ChatRoom/Body/{ChatInputs/ChatInput.js => Input/index.js} (99%)
 rename src/views/ChatRoom/Body/{ChatInputs/ChatInputs.scss => Input/index.scss} (100%)
 rename src/views/ChatRoom/Body/{ChatSuggest/ChatSuggest.js => Keyboard/index.js} (96%)
 rename src/views/ChatRoom/Body/{ChatSuggest/ChatSuggest.scss => Keyboard/index.scss} (100%)
 rename src/views/ChatRoom/Body/Message/{Message2D/Message2D.js => Inline/index.js} (98%)
 rename src/views/ChatRoom/Body/Message/{Message2D/Message2D.scss => Inline/index.scss} (100%)
 delete mode 100644 src/views/ChatRoom/Body/Message/Message.js
 rename src/views/ChatRoom/Body/Message/{RadioMessage/RadioMessage.js => MultiSelect/index.js} (100%)
 rename src/views/ChatRoom/Body/Message/{NormalMessage/NormalMessage.js => Normal/index.js} (96%)
 rename src/views/ChatRoom/Body/Message/{NormalMessage/NormalMessage.scss => Normal/index.scss} (100%)
 create mode 100644 src/views/ChatRoom/Body/Message/Select/index.js
 rename src/views/ChatRoom/Body/Message/{DraggableMessage/DraggableMessage.scss => Select/index.scss} (100%)
 rename src/views/ChatRoom/Body/Message/{SliderMessage/SliderMessage.js => Slider/index.js} (100%)
 rename src/views/ChatRoom/Body/Message/{RadioMessage/RadioMessage.scss => Slider/index.scss} (100%)
 rename src/views/ChatRoom/Body/Message/{DraggableMessage/DraggableMessage.js => Sort/index.js} (100%)
 rename src/views/ChatRoom/Body/Message/{SliderMessage/SliderMessage.scss => Sort/index.scss} (100%)
 create mode 100644 src/views/ChatRoom/Body/Message/index.js
 create mode 100644 src/views/ChatRoom/Body/Message/index.scss
 rename src/views/ChatRoom/Body/{Body.js => index.js} (97%)
 rename src/views/ChatRoom/Body/{Body.scss => index.scss} (99%)
 rename src/views/ChatRoom/Header/{Header.js => index.js} (99%)
 rename src/views/ChatRoom/Header/{Header.scss => index.scss} (100%)
 rename src/views/ChatRoom/{ChatInfo/FileTabs/FileTabs.js => Info/FileTabs/index.js} (98%)
 rename src/views/ChatRoom/{ChatInfo/FileTabs/FileTabs.scss => Info/FileTabs/index.scss} (100%)
 rename src/views/ChatRoom/{ChatInfo/Gallery/Gallery.js => Info/Gallery/index.js} (97%)
 rename src/views/ChatRoom/{ChatInfo/Gallery/Gallery.scss => Info/Gallery/index.scss} (100%)
 rename src/views/ChatRoom/{ChatInfo/ChatInfo.js => Info/index.js} (95%)
 rename src/views/ChatRoom/{ChatInfo/ChatInfo.scss => Info/index.scss} (100%)
 rename src/views/ChatRoom/{ChatRoom.js => index.js} (80%)
 rename src/views/ChatRoom/{ChatRoom.scss => index.scss} (100%)

diff --git a/src/Router.js b/src/Router.js
index 0c6d9a5..a812880 100644
--- a/src/Router.js
+++ b/src/Router.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import proxy from './Redux/proxy';
 import Home from './views/Home/Home';
-import ChatRoom from './views/ChatRoom/ChatRoom';
+import ChatRoom from './views/ChatRoom';
 import Auth from './views/Auth/Auth';
 // import { connect } from 'react-redux';
 class AppRouter extends Component {
diff --git a/src/views/ChatRoom/Body/ChatInputs/ChatInput.js b/src/views/ChatRoom/Body/Input/index.js
similarity index 99%
rename from src/views/ChatRoom/Body/ChatInputs/ChatInput.js
rename to src/views/ChatRoom/Body/Input/index.js
index be4761c..7d95cfd 100644
--- a/src/views/ChatRoom/Body/ChatInputs/ChatInput.js
+++ b/src/views/ChatRoom/Body/Input/index.js
@@ -7,7 +7,7 @@ import AttachmentIcon from '@material-ui/icons/Attachment';
 import TextField from '@material-ui/core/TextField';
 import SendIcon from '@material-ui/icons/Send';
 
-import './ChatInputs.scss';
+import './index.scss';
 export default class ChatInputs extends Component {
   render() {
     const {
diff --git a/src/views/ChatRoom/Body/ChatInputs/ChatInputs.scss b/src/views/ChatRoom/Body/Input/index.scss
similarity index 100%
rename from src/views/ChatRoom/Body/ChatInputs/ChatInputs.scss
rename to src/views/ChatRoom/Body/Input/index.scss
diff --git a/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js b/src/views/ChatRoom/Body/Keyboard/index.js
similarity index 96%
rename from src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js
rename to src/views/ChatRoom/Body/Keyboard/index.js
index bc4c423..76e4d2b 100644
--- a/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js
+++ b/src/views/ChatRoom/Body/Keyboard/index.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Carousel from 'react-elastic-carousel';
-import './ChatSuggest.scss';
+import './index.scss';
 export default function suggetbar({ suggest }) {
   return (
     <div className="chat-suggest portrait-slider d-flex flex-column">
diff --git a/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss b/src/views/ChatRoom/Body/Keyboard/index.scss
similarity index 100%
rename from src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss
rename to src/views/ChatRoom/Body/Keyboard/index.scss
diff --git a/src/views/ChatRoom/Body/Message/Message2D/Message2D.js b/src/views/ChatRoom/Body/Message/Inline/index.js
similarity index 98%
rename from src/views/ChatRoom/Body/Message/Message2D/Message2D.js
rename to src/views/ChatRoom/Body/Message/Inline/index.js
index 7d112c5..a7b283f 100644
--- a/src/views/ChatRoom/Body/Message/Message2D/Message2D.js
+++ b/src/views/ChatRoom/Body/Message/Inline/index.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Avatar from '@material-ui/core/Avatar';
 
-import './Message2D.scss';
+import './index.scss';
 import { toast } from 'react-toastify';
 
 export default class Message2D extends Component {
diff --git a/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss b/src/views/ChatRoom/Body/Message/Inline/index.scss
similarity index 100%
rename from src/views/ChatRoom/Body/Message/Message2D/Message2D.scss
rename to src/views/ChatRoom/Body/Message/Inline/index.scss
diff --git a/src/views/ChatRoom/Body/Message/Message.js b/src/views/ChatRoom/Body/Message/Message.js
deleted file mode 100644
index 9220c9b..0000000
--- a/src/views/ChatRoom/Body/Message/Message.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { Component } from 'react';
-
-import NormalMessage from './NormalMessage/NormalMessage';
-import Message2D from './Message2D/Message2D';
-import DraggableMessage from './DraggableMessage/DraggableMessage';
-import SliderMessage from './SliderMessage/SliderMessage.js';
-import RadioMessage from './RadioMessage/RadioMessage.js';
-
-export default class Message extends Component {
-  render() {
-    const { message, user, isSelf, file, document, prevUserId, isActive } = this.props;
-    return (
-      <div style={{ marginTop: 5 }}>
-        <NormalMessage
-          prevUserId={prevUserId}
-          message={message}
-          user={user}
-          isSelf={isSelf}
-          file={file}
-          document={document}
-        >
-          {message.type === '2d' ? (
-            <Message2D message={message} user={user} isSelf={isSelf} isActive={isActive} />
-          ) : null}
-          {message.type === 'draggable' ? (
-            <DraggableMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
-          ) : null}
-          {message.type === 'slider' ? (
-            <SliderMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
-          ) : null}
-          {message.type === 'radio' ? (
-            <RadioMessage message={message} user={user} isSelf={isSelf} isActive={isActive} />
-          ) : null}
-        </NormalMessage>
-      </div>
-    );
-  }
-}
diff --git a/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js b/src/views/ChatRoom/Body/Message/MultiSelect/index.js
similarity index 100%
rename from src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
rename to src/views/ChatRoom/Body/Message/MultiSelect/index.js
diff --git a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js b/src/views/ChatRoom/Body/Message/Normal/index.js
similarity index 96%
rename from src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
rename to src/views/ChatRoom/Body/Message/Normal/index.js
index a9f21c3..c8a7ac5 100644
--- a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
+++ b/src/views/ChatRoom/Body/Message/Normal/index.js
@@ -8,7 +8,7 @@ import DoneIcon from '@material-ui/icons/Done';
 import DoneAllIcon from '@material-ui/icons/DoneAll';
 import EditIcon from '@material-ui/icons/Edit';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import './NormalMessage.scss';
+import './index.scss';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import ReplyIcon from '@material-ui/icons/Reply';
@@ -45,7 +45,11 @@ export default class NormalMessage extends Component {
             alt={user.name}
             src={window.baseURL + '/file/download/' + user.fileId}
             className=""
-            style={{ backgroundColor: user.color, alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
+            style={{
+              marginTop: -5,
+              backgroundColor: user.color,
+              alignSelf: isSelf ? 'flex-end' : 'flex-start',
+            }}
           >
             {user.name
               .split(' ')
@@ -54,7 +58,10 @@ export default class NormalMessage extends Component {
           </Avatar>
         )}
 
-        <div className="d-flex" style={{ direction: isSelf ? 'rtl' : 'ltr' }}>
+        <div
+          className="d-flex"
+          style={{ direction: isSelf ? 'rtl' : 'ltr', marginTop: hasavatar ? -15 : 0 }}
+        >
           <div
             className={
               message.voice === null &&
diff --git a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss b/src/views/ChatRoom/Body/Message/Normal/index.scss
similarity index 100%
rename from src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss
rename to src/views/ChatRoom/Body/Message/Normal/index.scss
diff --git a/src/views/ChatRoom/Body/Message/Select/index.js b/src/views/ChatRoom/Body/Message/Select/index.js
new file mode 100644
index 0000000..aacd485
--- /dev/null
+++ b/src/views/ChatRoom/Body/Message/Select/index.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
+import Avatar from '@material-ui/core/Avatar';
+import { toast } from 'react-toastify';
+
+export default class RadioMessage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: this.props.message.value,
+    };
+  }
+
+  handleRadioChange = (newValue) => {
+    if (this.props.isActive)
+      this.setState({
+        value: newValue,
+      });
+  };
+
+  render() {
+    const { message, user, isSelf, isActive } = this.props;
+    return (
+      <div className="message-2d d-flex flex-column d-flex">
+        <div className="message-2d__options d-flex flex-wrap justify-content-center">
+          {message.options.map((row) => (
+            <Row list={row} handleRadioChange={this.handleRadioChange} value={this.state.value} />
+          ))}
+        </div>
+        {isActive && (
+          <button className="message-2d__submit" onClick={() => toast.success('ثبت شد')}>
+            ثبت
+            <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
+          </button>
+        )}
+      </div>
+    );
+  }
+}
+
+const Row = (props) => {
+  return (
+    <div className="message-2d__options--row d-flex">
+      {props.list.map((item) => (
+        <Item item={item} {...props} />
+      ))}
+    </div>
+  );
+};
+
+const Item = (props) => {
+  return (
+    <div
+      onClick={() => props.handleRadioChange(props.item.name)}
+      style={{
+        backgroundColor: props.item.name === props.value ? '#6f42c1' : 'rgb(181 224 252 / 47%)',
+        color: props.item.name === props.value ? 'white' : 'black',
+      }}
+    >
+      {props.item.name}
+    </div>
+  );
+};
diff --git a/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.scss b/src/views/ChatRoom/Body/Message/Select/index.scss
similarity index 100%
rename from src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.scss
rename to src/views/ChatRoom/Body/Message/Select/index.scss
diff --git a/src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js b/src/views/ChatRoom/Body/Message/Slider/index.js
similarity index 100%
rename from src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js
rename to src/views/ChatRoom/Body/Message/Slider/index.js
diff --git a/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.scss b/src/views/ChatRoom/Body/Message/Slider/index.scss
similarity index 100%
rename from src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.scss
rename to src/views/ChatRoom/Body/Message/Slider/index.scss
diff --git a/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js b/src/views/ChatRoom/Body/Message/Sort/index.js
similarity index 100%
rename from src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
rename to src/views/ChatRoom/Body/Message/Sort/index.js
diff --git a/src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.scss b/src/views/ChatRoom/Body/Message/Sort/index.scss
similarity index 100%
rename from src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.scss
rename to src/views/ChatRoom/Body/Message/Sort/index.scss
diff --git a/src/views/ChatRoom/Body/Message/index.js b/src/views/ChatRoom/Body/Message/index.js
new file mode 100644
index 0000000..150487f
--- /dev/null
+++ b/src/views/ChatRoom/Body/Message/index.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import Normal from './Normal';
+import Inline from './Inline';
+import Sort from './Sort';
+import Slider from './Slider';
+import Select from './Select';
+import MultiSelect from './MultiSelect';
+import './index.scss';
+const types = {
+  normal: <></>,
+  sort: Sort,
+  inline: Inline,
+  silder: Slider,
+  select: Select,
+  multiselect: MultiSelect,
+};
+export default class Message extends Component {
+  render() {
+    const { message, user, isSelf, file, document, prevUserId, isActive } = this.props;
+    const Key = types[message.type];
+    return (
+      <div className="Message">
+        <Normal
+          prevUserId={prevUserId}
+          message={message}
+          user={user}
+          isSelf={isSelf}
+          file={file}
+          document={document}
+        >
+          <Key message={message} isSelf={isSelf} isActive={isActive} />
+        </Normal>
+      </div>
+    );
+  }
+}
diff --git a/src/views/ChatRoom/Body/Message/index.scss b/src/views/ChatRoom/Body/Message/index.scss
new file mode 100644
index 0000000..4fc619f
--- /dev/null
+++ b/src/views/ChatRoom/Body/Message/index.scss
@@ -0,0 +1,5 @@
+@media screen and (max-width: 4500px) {
+  .Message {
+    margin-top: 2px;
+  }
+}
diff --git a/src/views/ChatRoom/Body/Body.js b/src/views/ChatRoom/Body/index.js
similarity index 97%
rename from src/views/ChatRoom/Body/Body.js
rename to src/views/ChatRoom/Body/index.js
index 5b5b2b9..8098b37 100644
--- a/src/views/ChatRoom/Body/Body.js
+++ b/src/views/ChatRoom/Body/index.js
@@ -1,17 +1,16 @@
 import React, { Component } from 'react';
-import Message from './Message/Message';
-import ChatInputs from './ChatInputs/ChatInput';
-import ChatSuggest from './ChatSuggest/ChatSuggest';
+import Message from './Message';
+import ChatInputs from './Input';
+import ChatSuggest from './Keyboard';
 import { RecordState } from 'audio-react-recorder';
 import ReactPlayer from 'react-player';
 import ReactAudioPlayer from 'react-audio-player';
 import { ToastContainer } from 'react-toastify';
-
-import './Body.scss';
 import { list, send, sendKeys } from '../../../Redux/actions/message';
 import { info, bio } from '../../../Redux/actions/chat';
 import { connect } from 'react-redux';
-class Body extends Component {
+import './index.scss';
+class List extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -360,9 +359,10 @@ class Body extends Component {
           className="chat-body__content d-flex flex-column"
           id="chatroom"
           style={{
+            paddingTop: 10,
             overflowX: 'hidden',
             overflowY: this.state.file !== null ? 'hidden' : 'scroll',
-            paddingBottom: this.state.footer === 'suggest' ? 150 : 70,
+            paddingBottom: this.state.footer === 'suggest' ? 150 : 40,
           }}
         >
           {chatInfo.users &&
@@ -371,9 +371,9 @@ class Body extends Component {
               this.state.music === null &&
               this.state.video === null ? (
                 <Message
-                  isActive={true || i == messageList.length - 1}
+                  isActive={i == messageList.length - 1}
                   prevUserId={i > 0 ? messageList[i - 1].userId : 0}
-                  isSelf={1 != item.userId}
+                  isSelf={1 == item.userId}
                   key={i}
                   file={this.state.image}
                   document={this.state.document}
@@ -454,4 +454,4 @@ export default connect(
     };
   },
   { list, send, sendKeys, info, bio }
-)(Body);
+)(List);
diff --git a/src/views/ChatRoom/Body/Body.scss b/src/views/ChatRoom/Body/index.scss
similarity index 99%
rename from src/views/ChatRoom/Body/Body.scss
rename to src/views/ChatRoom/Body/index.scss
index 1291825..df34e68 100644
--- a/src/views/ChatRoom/Body/Body.scss
+++ b/src/views/ChatRoom/Body/index.scss
@@ -4,7 +4,7 @@
     border: 3px solid #ffffff66;
     width: 60px;
     height: 60px;
-    top: 20px;
+    // top: 20px;
     z-index: 30;
     font-family: 'IRANSansNumeralBold';
     & div {
diff --git a/src/views/ChatRoom/Header/Header.js b/src/views/ChatRoom/Header/index.js
similarity index 99%
rename from src/views/ChatRoom/Header/Header.js
rename to src/views/ChatRoom/Header/index.js
index 445a74b..3d7fdd3 100644
--- a/src/views/ChatRoom/Header/Header.js
+++ b/src/views/ChatRoom/Header/index.js
@@ -4,7 +4,7 @@ import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 
-import './Header.scss';
+import './index.scss';
 export default class Header extends Component {
   constructor(props) {
     super(props);
diff --git a/src/views/ChatRoom/Header/Header.scss b/src/views/ChatRoom/Header/index.scss
similarity index 100%
rename from src/views/ChatRoom/Header/Header.scss
rename to src/views/ChatRoom/Header/index.scss
diff --git a/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.js b/src/views/ChatRoom/Info/FileTabs/index.js
similarity index 98%
rename from src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.js
rename to src/views/ChatRoom/Info/FileTabs/index.js
index 161b844..918b9f2 100644
--- a/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.js
+++ b/src/views/ChatRoom/Info/FileTabs/index.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import './FileTabs.scss';
+import './index.scss';
 export default class FileTabs extends Component {
   constructor(props) {
     super(props);
diff --git a/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss b/src/views/ChatRoom/Info/FileTabs/index.scss
similarity index 100%
rename from src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss
rename to src/views/ChatRoom/Info/FileTabs/index.scss
diff --git a/src/views/ChatRoom/ChatInfo/Gallery/Gallery.js b/src/views/ChatRoom/Info/Gallery/index.js
similarity index 97%
rename from src/views/ChatRoom/ChatInfo/Gallery/Gallery.js
rename to src/views/ChatRoom/Info/Gallery/index.js
index 11ff288..d233951 100644
--- a/src/views/ChatRoom/ChatInfo/Gallery/Gallery.js
+++ b/src/views/ChatRoom/Info/Gallery/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Carousel from 'react-elastic-carousel';
 import CloseIcon from '@material-ui/icons/Close';
 
-import './Gallery.scss';
+import './index.scss';
 
 export default function Gallery(props) {
   // const [state,setState] = useState({
diff --git a/src/views/ChatRoom/ChatInfo/Gallery/Gallery.scss b/src/views/ChatRoom/Info/Gallery/index.scss
similarity index 100%
rename from src/views/ChatRoom/ChatInfo/Gallery/Gallery.scss
rename to src/views/ChatRoom/Info/Gallery/index.scss
diff --git a/src/views/ChatRoom/ChatInfo/ChatInfo.js b/src/views/ChatRoom/Info/index.js
similarity index 95%
rename from src/views/ChatRoom/ChatInfo/ChatInfo.js
rename to src/views/ChatRoom/Info/index.js
index 60b75aa..ac07b94 100644
--- a/src/views/ChatRoom/ChatInfo/ChatInfo.js
+++ b/src/views/ChatRoom/Info/index.js
@@ -1,12 +1,10 @@
 import React, { Component } from 'react';
 import ChatIcon from '@material-ui/icons/Chat';
-
-import FileTabs from './FileTabs/FileTabs';
-import Gallery from './Gallery/Gallery.js';
-
+import FileTabs from './FileTabs';
+import Gallery from './Gallery';
 import user2 from '../../../assets/images/user2.png';
 
-import './ChatInfo.scss';
+import './index.scss';
 export default class ChatInfo extends Component {
   constructor(props) {
     super(props);
diff --git a/src/views/ChatRoom/ChatInfo/ChatInfo.scss b/src/views/ChatRoom/Info/index.scss
similarity index 100%
rename from src/views/ChatRoom/ChatInfo/ChatInfo.scss
rename to src/views/ChatRoom/Info/index.scss
diff --git a/src/views/ChatRoom/ChatRoom.js b/src/views/ChatRoom/index.js
similarity index 80%
rename from src/views/ChatRoom/ChatRoom.js
rename to src/views/ChatRoom/index.js
index a03af40..d702040 100644
--- a/src/views/ChatRoom/ChatRoom.js
+++ b/src/views/ChatRoom/index.js
@@ -1,10 +1,8 @@
 import React, { Component } from 'react';
-
-import Header from './Header/Header';
-import Body from './Body/Body';
-import ChatInfo from './ChatInfo/ChatInfo';
-
-import './ChatRoom.scss';
+import Header from './Header';
+import Body from './Body';
+import Info from './Info';
+import './index.scss';
 export default class ChatRoom extends Component {
   constructor(props) {
     super(props);
@@ -31,7 +29,7 @@ export default class ChatRoom extends Component {
           </>
         ) : (
           <>
-            <ChatInfo />
+            <Info />
           </>
         )}
       </div>
diff --git a/src/views/ChatRoom/ChatRoom.scss b/src/views/ChatRoom/index.scss
similarity index 100%
rename from src/views/ChatRoom/ChatRoom.scss
rename to src/views/ChatRoom/index.scss