feat(todo): add todolist on first start

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'
 };

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<ChatProps> = () => {
+  const history = useHistory();
+  return (
+    <Wrapper>
+      <Content onClick={() => history.push('/settings')}>
+        <h3>
+          <p>Todo</p>
+          Hi! Before you start chatting
+          <br />
+          go to the settings and...
+        </h3>
+        <Item>✏️ ...choose a name</Item>
+        <Item>🎨 ...choose a color</Item>
+        <Item>🐨 ...choose an avatar</Item>
+      </Content>
+    </Wrapper>
+  );
+};
+
+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));

src/views/Chat.tsx → 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<ChatProps> = (props) => {
   return (
     <>
       <Header />
-      <Chat hasSelection={store.selectionCount > 0}>
-        <Messages
-          onAnimationEnd={() => 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;
-          }}
-        >
-          {/* <Messages> */}
-          <TransitionGroup>
-            {chatState.filteredMessages.map((m, i) => (
-              <CSSTransition
-                key={m.message.date}
-                timeout={400}
-                classNames={`message-${
-                  m.id === store.instanceId ? 'self' : 'other'
-                }`}
-              >
-                <>
-                  <Message data={m} instanceId={store.instanceId} />
-                  {(i + 1) % MAX_MESSAGES === 0 &&
-                  i + 1 !== chatState.filteredMessages.length ? (
-                    <MessageSeperator />
-                  ) : (
-                    ''
-                  )}
-                </>
-              </CSSTransition>
-            ))}
-          </TransitionGroup>
-          {/* </Messages> */}
-        </Messages>
+      {!store.settings.name ? (
+        <TodoList />
+      ) : (
+        <Chat hasSelection={store.selectionCount > 0}>
+          <Messages
+            onAnimationEnd={() => 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;
+            }}
+          >
+            {/* <Messages> */}
+            <TransitionGroup>
+              {chatState.filteredMessages.map((m, i) => (
+                <CSSTransition
+                  key={m.message.date}
+                  timeout={400}
+                  classNames={`message-${
+                    m.id === store.instanceId ? 'self' : 'other'
+                  }`}
+                >
+                  <>
+                    <Message data={m} instanceId={store.instanceId} />
+                    {(i + 1) % MAX_MESSAGES === 0 &&
+                    i + 1 !== chatState.filteredMessages.length ? (
+                      <MessageSeperator />
+                    ) : (
+                      ''
+                    )}
+                  </>
+                </CSSTransition>
+              ))}
+            </TransitionGroup>
+            {/* </Messages> */}
+          </Messages>
 
-        <Chatbar
-          sendMessage={sendMessage}
-          setTextMessage={(text) => (chatState.textMessage = text)}
-          textMessage={chatState.textMessage}
-          setSelectionIsChecked={(isChecked) =>
-            (chatState.selectionIsChecked = isChecked)
-          }
-          selectionIsChecked={chatState.selectionIsChecked}
-        />
-      </Chat>
+          <Chatbar
+            sendMessage={sendMessage}
+            setTextMessage={(text) => (chatState.textMessage = text)}
+            textMessage={chatState.textMessage}
+            setSelectionIsChecked={(isChecked) =>
+              (chatState.selectionIsChecked = isChecked)
+            }
+            selectionIsChecked={chatState.selectionIsChecked}
+          />
+        </Chat>
+      )}
     </>
   );
 };

src/views/Settings/components/AvatarPicker.tsx

@@ -33,6 +33,7 @@ const AvatarPickerComponent: FunctionComponent<SettingsProps> = (props) => {
           (emoji) => (
             <div
               key={emoji}
+              className={emoji === store.settings.avatar ? 'active' : ''}
               onClick={() => {
                 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};
+    }
   }
 `;
 

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] ? (
-    <SavedFlag
-      onClick={() =>
-        props.reset({
-          ...props.flags,
-          [props.type]: false,
-        })
-      }
-    >
-      saved!
-    </SavedFlag>
-  ) : null;
-};
-
 const SettingsView: FunctionComponent<SettingsProps> = (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<SettingsProps> = (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<SettingsProps> = (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<SettingsProps> = (props) => {
         </Picker>
 
         <div>
-          <label>
-            Username <Flag reset={setFlag} flags={flags} type="username" />
-          </label>
+          <label>Username</label>
           <input
             type="text"
+            ref={nameInputRef}
             value={settings.name}
             onBlur={() => saveSettings(false)}
             onChange={({ target }: any) =>
@@ -109,7 +85,7 @@ const SettingsView: FunctionComponent<SettingsProps> = (props) => {
         </div>
         <div>
           <label htmlFor="server-url">
-            Server-URL <Flag reset={setFlag} flags={flags} type="url" />
+            Server-URL
             <span
               onClick={() => {
                 settings.url = DEFAULT_SERVER_URL;
@@ -246,18 +222,35 @@ const Tile = styled.div`
     if (p.name === 'trash') {
       return css`
         svg {
+          path {
+            fill: ${({ theme }) => theme.thirdFontColor};
+            stroke: ${({ theme }) => theme.thirdFontColor};
+          }
           path:last-child {
             stroke: ${({ theme }) => theme.secondaryBackgroundColor};
           }
         }
       `;
     }
 
+    if (p.name === 'theme') {
+      return css`
+        svg {
+          path {
+            fill: ${({ theme }) => theme.thirdFontColor};
+          }
+        }
+      `;
+    }
+
     if (p.name === 'bell' || p.name === 'message') {
       return css`
         svg {
           path {
-            stroke: ${({ theme }) => theme.secondaryBackgroundColor};
+            fill: ${({ theme }) => theme.thirdFontColor};
+            &:last-child {
+              stroke: ${({ theme }) => theme.secondaryBackgroundColor};
+            }
           }
         }
       `;
@@ -272,13 +265,6 @@ const ShortcutTiles = styled.div`
   margin: 0 auto;
 `;
 
-const SavedFlag = styled.span`
-  background-color: #fff;
-  color: #000;
-  padding: 4px 7px;
-  border-radius: 5px;
-`;
-
 const VersionNote = styled.a`
   position: absolute;
   left: 0;