Style changes in the right area:

- Chat background - Chat messages - Input messages area
saeedvakili1 · May 12, 2020 · ffbdb82 · ffbdb82
1 parent e3c505c
commit ffbdb82
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 34 deletions.
diff --git a/src/App-styles.js b/src/App-styles.js
@@ -54,35 +54,33 @@ export default () => ({
     height: '100%'
   },
   rightCard: {
+    position: 'relative',
     display: 'flex',
     height: '100%',
     flex: '1',
     'flex-direction': 'column'
   },
   chatArea: {
-    background:
-      'url(bg-chat.png)',
-    'overflow-y': 'auto',
+    'overflow-y': 'scroll',
     'flex-direction': 'column-reverse',
     display: 'flex',
     flex: '1',
-    height: '100%',
-    width: '100%'
-    // opacity: '0.06'
+    height: '100%'
   },
   paper: {
     background: '#9de1fe',
     padding: 20
   },
   message: {
-    background: 'white',
+    background: '#dcf8c6',
     padding: 10,
     'max-width': '50%',
     width: 'fit-content'
   },
   'message-wrapper': {
     'padding-top': '2px',
-    'padding-bottom': '2px'
+    'padding-bottom': '2px',
+    justifyContent: 'flex-end'
   },
   inputMessage: {
     height: '25px'

diff --git a/src/components/InputMessage.jsx b/src/components/InputMessage.jsx
@@ -1,15 +1,17 @@
 import React, { useState, useRef } from 'react'
+
 import { makeStyles } from '@material-ui/core/styles'
 import Paper from '@material-ui/core/Paper'
 import InputBase from '@material-ui/core/InputBase'
 
-import IconButton from '@material-ui/core/IconButton'
-import AttachFileIcon from '@material-ui/icons/AttachFile'
-import SendIcon from '@material-ui/icons/Send'
+import InsertEmoticonIcon from '@material-ui/icons/InsertEmoticon'
+import MicIcon from '@material-ui/icons/Mic'
+
+import IconButton from '../custom-components/IconButton'
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    padding: '2px 4px',
+    padding: '0px 4px',
     display: 'flex',
     alignItems: 'center',
     width: '100%'
@@ -41,23 +43,25 @@ export default function CustomizedInputBase({ sendMessage }) {
   }
 
   return (
-    <Paper className={classes.root} elevation={5}>
-      <IconButton className={classes.iconButton} aria-label="attach">
-        <AttachFileIcon />
+    <>
+      <IconButton style={{ padding: '7px' }}>
+        <InsertEmoticonIcon style={{ fontSize: '1.75rem' }} />
       </IconButton>
-      <InputBase
-        inputRef={inputRef}
-        className={classes.input}
-        placeholder="Digite aqui"
-        inputProps={{ 'aria-label': 'digite aqui' }}
-        onChange={(e) => setContent(e.target.value)}
-        value={content}
-        onKeyDown={keyPressHandler}
-      />
-      <IconButton className={classes.iconButton} aria-label="send" onClick={sendMessageHandler}>
-        <SendIcon />
+      <Paper className={classes.root} square elevation={0} style={{ height: '100%', borderRadius: '21px' }}>
+        <InputBase
+          inputRef={inputRef}
+          className={classes.input}
+          placeholder="Type a message"
+          inputProps={{ 'aria-label': 'Type a message' }}
+          onChange={(e) => setContent(e.target.value)}
+          value={content}
+          onKeyDown={keyPressHandler}
+        />
+      </Paper>
+      <IconButton style={{ padding: '7px' }}>
+        <MicIcon style={{ fontSize: '1.75rem' }} />
       </IconButton>
-    </Paper>
+    </>
   )
 }
 

diff --git a/src/components/RightContainer.jsx b/src/components/RightContainer.jsx
@@ -8,12 +8,14 @@ import MoreVertIcon from '@material-ui/icons/MoreVert'
 import SearchIcon from '@material-ui/icons/Search'
 import AttachFileIcon from '@material-ui/icons/AttachFile'
 
+import backgroundChat from './bg-chat.png'
 import InputMessage from './InputMessage'
 
 const RightContainer = ({ classes, chat, sendMessage }) => (
-  <Grid item className={classes.rightGrid} style={{ width: '70%' }}>
+  <Grid item id="rightGrid" className={classes.rightGrid} style={{ width: '70%' }}>
     <Card className={classes.rightCard}>
       <CardHeader
+        style={{ zIndex: '2' }}
         className={classes.cardHeader}
         classes={{ action: classes['cardHeader-action'] }}
         avatar={
@@ -39,7 +41,11 @@ const RightContainer = ({ classes, chat, sendMessage }) => (
               )}
         title={chat.name}
       />
-      <CardContent className={classes.chatArea}>
+      <div style={{
+        backgroundImage: `url(${backgroundChat})`, opacity: '0.06', position: 'absolute', width: '100%', height: '100%'
+      }}
+      />
+      <CardContent className={classes.chatArea} style={{ background: '#e5ddd5' }}>
         <List>
           {chat.messages.map((message) => (
             <ListItem
@@ -48,7 +54,7 @@ const RightContainer = ({ classes, chat, sendMessage }) => (
             >
               <Paper
                 className={classes.message}
-                elevation={0}
+                elevation={1}
               >
                 <Typography className={classes.information} variant="body2">
                   {message.m}
@@ -58,7 +64,7 @@ const RightContainer = ({ classes, chat, sendMessage }) => (
           ))}
         </List>
       </CardContent>
-      <CardActions>
+      <CardActions style={{ background: '#f0f0f0', zIndex: '2', padding: '10px' }}>
         <InputMessage sendMessage={sendMessage} />
       </CardActions>
     </Card>

diff --git a/public/bg-chat.png → src/components/bg-chat.png b/public/bg-chat.png → src/components/bg-chat.png
diff --git a/src/index.css b/src/index.css
@@ -22,15 +22,15 @@ code {
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background: #ffffff; 
+  background: transparent; 
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #cccccc; 
+  background: #bab3ae; 
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #cccccc; 
+  background: #bab3ae; 
 }