diff --git a/src/shared/theme.ts b/src/shared/theme.ts index 1b2aae3..30a5b87 100644 --- a/src/shared/theme.ts +++ b/src/shared/theme.ts @@ -1,19 +1,23 @@ const darkTheme = { fontColor: "#fff", secondaryFontColor: "#615e73", + thirdFontColor: "#606d80", fontColorInverse: "#000", backgroundColor: '#0D0B1C', secondaryBackgroundColor: '#1F2538', + backgroundColorInverse: '#E7E7E7', borderColor: '#272D36', - tooltipBackgroundColor: '#fff' + tooltipBackgroundColor: '#fff', }; const theme = { fontColor: "#000", secondaryFontColor: "#cecece", + thirdFontColor: "#A2ADC0", fontColorInverse: "#fff", backgroundColor: '#fff', secondaryBackgroundColor: '#eceff4', + backgroundColorInverse: '#383168', borderColor: '#e4e4e4', tooltipBackgroundColor: '#1e1940' }; diff --git a/src/views/Chat/components/TodoList.tsx b/src/views/Chat/components/TodoList.tsx new file mode 100644 index 0000000..8892b4c --- /dev/null +++ b/src/views/Chat/components/TodoList.tsx @@ -0,0 +1,62 @@ +import { observer } from 'mobx-react'; +import styled from 'styled-components'; +import React, { FunctionComponent } from 'react'; +import { useHistory } from 'react-router-dom'; + +import { withSocketContext } from '../../../shared/SocketProvider'; + +interface ChatProps { + socket: SocketIOClient.Socket; +} + +const TodoList: FunctionComponent = () => { + const history = useHistory(); + return ( + + history.push('/settings')}> +

+

Todo

+ Hi! Before you start chatting +
+ go to the settings and... +

+ ✏️ ...choose a name + 🎨 ...choose a color + 🐨 ...choose an avatar + + + ); +}; + +const Content = styled.div` + margin: 0 auto; +`; + +const Item = styled.div` + background-color: ${(p) => p.theme.secondaryBackgroundColor}; + padding: 11px 16px; + color: ${(p) => p.theme.thirdFontColor}; + border-radius: 14px; + margin-top: 4px; + cursor: pointer; +`; + +const Wrapper = styled.div` + display: flex; + align-items: center; + height: calc(100% - 37px); + width: 100%; + h3 { + text-align: center; + color: ${(p) => p.theme.fontColor}; + margin: 0 0 32px; + p { + margin: 0px 0 4px; + opacity: 0.4; + font-weight: 300; + font-size: 11px; + } + } +`; + +export default withSocketContext(observer(TodoList)); diff --git a/src/views/Chat.tsx b/src/views/Chat/index.tsx similarity index 70% rename from src/views/Chat.tsx rename to src/views/Chat/index.tsx index 74c95f7..a19d2fc 100644 --- a/src/views/Chat.tsx +++ b/src/views/Chat/index.tsx @@ -4,14 +4,15 @@ import { observer, useLocalStore } from 'mobx-react'; import React, { useEffect, useState, FunctionComponent } from 'react'; import { CSSTransition, TransitionGroup } from 'react-transition-group'; import styled from 'styled-components'; -import Chatbar from '../components/Chatbar'; -import Header from '../components/Header'; -import Message from '../components/Message'; -import { withSocketContext } from '../shared/SocketProvider'; +import Chatbar from '../../components/Chatbar'; +import Header from '../../components/Header'; +import Message from '../../components/Message'; +import { withSocketContext } from '../../shared/SocketProvider'; -import { IS_PROD, MAX_MESSAGES } from '../shared/constants'; -import { sendMainMessage } from '../shared/utils'; -import { useStore } from '../store'; +import { IS_PROD, MAX_MESSAGES } from '../../shared/constants'; +import { sendMainMessage } from '../../shared/utils'; +import { useStore } from '../../store'; +import TodoList from './components/TodoList'; interface ChatProps { socket: SocketIOClient.Socket; @@ -156,56 +157,60 @@ const ChatView: FunctionComponent = (props) => { return ( <>
- 0}> - setContainerIsHidden(!containerIsHidden)} - ref={store.messagesRef} - onWheel={() => { - const { current } = toJS(store.messagesRef); - if (current.scrollTop <= current.scrollHeight * 0.2) { - showMore(); - } - store.disableAutoScroll = - current.scrollHeight - - (current.scrollTop + current.clientHeight) > - 0; - }} - > - {/* */} - - {chatState.filteredMessages.map((m, i) => ( - - <> - - {(i + 1) % MAX_MESSAGES === 0 && - i + 1 !== chatState.filteredMessages.length ? ( - - ) : ( - '' - )} - - - ))} - - {/* */} - + {!store.settings.name ? ( + + ) : ( + 0}> + setContainerIsHidden(!containerIsHidden)} + ref={store.messagesRef} + onWheel={() => { + const { current } = toJS(store.messagesRef); + if (current.scrollTop <= current.scrollHeight * 0.2) { + showMore(); + } + store.disableAutoScroll = + current.scrollHeight - + (current.scrollTop + current.clientHeight) > + 0; + }} + > + {/* */} + + {chatState.filteredMessages.map((m, i) => ( + + <> + + {(i + 1) % MAX_MESSAGES === 0 && + i + 1 !== chatState.filteredMessages.length ? ( + + ) : ( + '' + )} + + + ))} + + {/* */} + - (chatState.textMessage = text)} - textMessage={chatState.textMessage} - setSelectionIsChecked={(isChecked) => - (chatState.selectionIsChecked = isChecked) - } - selectionIsChecked={chatState.selectionIsChecked} - /> - + (chatState.textMessage = text)} + textMessage={chatState.textMessage} + setSelectionIsChecked={(isChecked) => + (chatState.selectionIsChecked = isChecked) + } + selectionIsChecked={chatState.selectionIsChecked} + /> + + )} ); }; diff --git a/src/views/Settings/components/AvatarPicker.tsx b/src/views/Settings/components/AvatarPicker.tsx index d622eb6..abccd87 100644 --- a/src/views/Settings/components/AvatarPicker.tsx +++ b/src/views/Settings/components/AvatarPicker.tsx @@ -33,6 +33,7 @@ const AvatarPickerComponent: FunctionComponent = (props) => { (emoji) => (
{ pickerRef.current.hide(); store.persistSettings( @@ -74,13 +75,16 @@ const AvatarPicker = styled.div` margin: 5px 0; width: 41px; height: 41px; - border: 1px solid #383168; + border: 1px solid ${(p) => p.theme.backgroundColorInverse}; border-radius: 14px 14px 3px 14px; text-align: center; font-size: 18px; line-height: 40px; overflow: hidden; cursor: pointer; + &.active { + background-color: ${(p) => p.theme.backgroundColorInverse}; + } } `; diff --git a/src/views/Settings/index.tsx b/src/views/Settings/index.tsx index 5dc1d9d..731355b 100644 --- a/src/views/Settings/index.tsx +++ b/src/views/Settings/index.tsx @@ -1,6 +1,6 @@ // store import { observer, useLocalStore } from 'mobx-react'; -import React, { useEffect, useState, FunctionComponent } from 'react'; +import React, { useEffect, FunctionComponent, useRef } from 'react'; import { useHistory } from 'react-router-dom'; import styled, { css } from 'styled-components'; import { version } from '../../../package.json'; @@ -22,28 +22,10 @@ interface SettingsProps { socket: SocketIOClient.Socket; } -const Flag = (props) => { - return props.flags[props.type] ? ( - - props.reset({ - ...props.flags, - [props.type]: false, - }) - } - > - saved! - - ) : null; -}; - const SettingsView: FunctionComponent = (props) => { const store = useStore(); - const [flags, setFlag] = useState({ - username: false, - }); - + const nameInputRef = useRef(null); const history = useHistory(); const settings = useLocalStore(() => ({ name: '', @@ -55,11 +37,9 @@ const SettingsView: FunctionComponent = (props) => { if (store.isMinimized) { store.toggleMinimizeChat(); } - - return () => - setFlag({ - username: true, - }); + if(!store.settings.name) { + nameInputRef.current.focus(); + } }, []); useEffect(() => { @@ -71,10 +51,7 @@ const SettingsView: FunctionComponent = (props) => { const saveSettings = (shouldClose: boolean = true) => { if (store.settings.name !== settings.name) { - setFlag({ - ...flags, - username: true, - }); + store.addNotification(`Name successfully updated`); } store.persistSettings(settings, props.socket); @@ -94,11 +71,10 @@ const SettingsView: FunctionComponent = (props) => {
- + saveSettings(false)} onChange={({ target }: any) => @@ -109,7 +85,7 @@ const SettingsView: FunctionComponent = (props) => {