feat(settings): add new settings page and fix tooltips

feat(avatar): add emoji avatar

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "code.js",
   "scripts": {
+    "lint": "tslint --project ./ --config ./tslint.json --fix",
     "build": "NODE_ENV=production webpack --mode=production && rm ./Figma\\ Chat/ui.js*",
     "dev": "DEBUG=* webpack --watch",
     "version": "conventional-changelog -p karma -i CHANGELOG.md -s -r 0 && git add ."
@@ -31,6 +32,8 @@
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.1",
     "ts-loader": "^7.0.4",
+    "tslint": "^6.1.2",
+    "tslint-config-prettier": "^1.18.0",
     "typescript": "^3.9.3",
     "url-loader": "^4.1.0",
     "webpack": "^4.43.0",
@@ -56,12 +59,15 @@
     ]
   },
   "dependencies": {
+    "@popperjs/core": "^2.4.0",
     "@types/react-transition-group": "^4.2.4",
     "mobx": "^5.15.4",
     "mobx-react": "^6.2.2",
+    "mobx-react-lite": "^2.0.7",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-popper": "^2.2.3",
     "react-router-dom": "^5.2.0",
     "react-timeago": "^4.4.0",
     "react-tooltip": "^4.2.6",

src/Ui.tsx

@@ -1,32 +1,32 @@
+import { observer } from 'mobx-react';
 import 'mobx-react-lite/batchingForReactDom';
 import React, { useEffect, useState } from 'react';
-import { observer } from 'mobx-react';
 import * as ReactDOM from 'react-dom';
-import styled, { createGlobalStyle } from 'styled-components';
 import {
   MemoryRouter as Router,
   Redirect,
   Route,
   Switch,
 } from 'react-router-dom';
 import io from 'socket.io-client';
+import styled, { createGlobalStyle } from 'styled-components';
 // styles
 import './assets/css/ui.css';
 import './assets/figma-ui/main.min.css';
 // components
 import Notifications from './components/Notifications';
+import { SocketProvider } from './shared/SocketProvider';
 // shared
 import { ConnectionEnum } from './shared/interfaces';
-import { SocketProvider } from './shared/SocketProvider';
 import { sendMainMessage } from './shared/utils';
 // views
 import ChatView from './views/Chat';
 import MinimizedView from './views/Minimized';
-import UserListView from './views/UserList';
 import SettingsView from './views/Settings';
+import UserListView from './views/UserList';
 
-import { StoreProvider, useStore } from './store';
 import { reaction } from 'mobx';
+import { useStore, StoreProvider } from './store';
 
 onmessage = (message) => {
   if (message.data.pluginMessage) {
@@ -56,7 +56,7 @@ const AppWrapper = styled.div`
 const init = () => {
   const App = observer(() => {
     const store = useStore();
-    let [socket, setSocket] = useState<SocketIOClient.Socket>(undefined);
+    const [socket, setSocket] = useState<SocketIOClient.Socket>(undefined);
 
     function onFocus() {
       sendMainMessage('focus', false);

src/assets/icons/Bell.tsx

@@ -0,0 +1,43 @@
+import React, { FunctionComponent } from 'react';
+
+interface Props {
+  active?: boolean;
+}
+
+const BellIcon: FunctionComponent<Props> = (props) => {
+  if (props.active) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+      >
+        <path
+          fill="#A2ADC0"
+          fillRule="evenodd"
+          d="M17.435 10.308V13.847c0 .977.792 1.77 1.769 1.77v.884H5.049v-.885a1.77 1.77 0 001.77-1.77v-3.538a5.308 5.308 0 0110.616 0zm-5.309 8.644a1.566 1.566 0 01-1.566-1.567H9.269a2.857 2.857 0 005.714 0h-1.29c0 .865-.702 1.567-1.567 1.567z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+      <path
+        fill="#A2ADC0"
+        fillRule="evenodd"
+        d="M17.435 10.308V13.847c0 .977.792 1.77 1.769 1.77v.884H5.049v-.885a1.77 1.77 0 001.77-1.77v-3.538a5.308 5.308 0 0110.616 0zm-5.309 8.644a1.566 1.566 0 01-1.566-1.567H9.269a2.857 2.857 0 005.714 0h-1.29c0 .865-.702 1.567-1.567 1.567z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#A2ADC0"
+        stroke="#ECEFF4"
+        d="M20.678 3.293l1.414 1.414L3.707 23.092l-1.414-1.414z"
+      />
+    </svg>
+  );
+};
+
+export default BellIcon;

src/assets/icons/Message.tsx

@@ -0,0 +1,40 @@
+import React, { FunctionComponent } from 'react';
+
+interface Props {
+  active?: boolean;
+}
+
+const MessageIcon: FunctionComponent<Props> = (props) => {
+  if (props.active) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+      >
+        <path
+          fill="#A2ADC0"
+          d="M18.342 18.072h-2.808c-.638 0-1.24.296-1.631.8a2.061 2.061 0 01-3.263 0 2.061 2.061 0 00-1.63-.8H6.2a2.18 2.18 0 01-2.18-2.18V8.603a2.18 2.18 0 012.18-2.18h12.14a2.18 2.18 0 012.181 2.18v7.287a2.18 2.18 0 01-2.18 2.18z"
+        />
+        <circle cx="19.552" cy="7.394" r="2.912" fill="red" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+      <path
+        fill="#A2ADC0"
+        d="M18.342 18.072h-2.808c-.638 0-1.24.296-1.631.8a2.061 2.061 0 01-3.263 0 2.062 2.062 0 00-1.63-.8H6.2a2.18 2.18 0 01-2.18-2.18V8.603a2.18 2.18 0 012.18-2.18h12.14a2.18 2.18 0 012.181 2.18v7.287a2.18 2.18 0 01-2.18 2.18z"
+      />
+      <path
+        fill="#A2ADC0"
+        stroke="#ECEFF4"
+        d="M20.678 3.293l1.414 1.414L3.707 23.092l-1.414-1.414z"
+      />
+    </svg>
+  );
+};
+
+export default MessageIcon;