feat: added 20 point task

Author: Дмитрий Никифоров

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "proseWrap": "never",
+  "htmlWhitespaceSensitivity": "strict",
+  "endOfLine": "lf",
+  "spaceBeforeFunctionParen": true
+}

src/assets/styles/main.css

@@ -0,0 +1,4 @@
+.vkuiGroup__inner {
+  padding: 0 !important;
+  padding-bottom: 10px;
+}

src/components/additional-icons/additionalIcons.module.css

@@ -0,0 +1,28 @@
+.additional-icon {
+  margin-left: 10px;
+  width: 78px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.additional-icon--important {
+  color: var(--dynamic_red);
+}
+
+.additional-icon--finance {
+  color: var(--dynamic_green);
+}
+
+.additional-icon--confidence {
+  color: var(--dynamic_orange);
+  transform: scaleX(-1) rotate(90deg);
+}
+
+.additional-icon--new {
+  background-color: var(--icon_secondary_alpha);
+  border-radius: 8px;
+  padding: 2px;
+  margin: 0 2px;
+  font-size: 12px;
+}

src/components/additional-icons/additionalIcons.tsx

@@ -0,0 +1,29 @@
+import { Icon20ExclamationMarkOutline, Icon20KeyOutline, Icon20RoubleOutline } from '@vkontakte/icons';
+import { mail } from '../../interface/mail';
+
+import styles from './additionalIcons.module.css';
+
+const AdditionalIcons = ({ mail }: { mail: mail.Mail }) => {
+  return (
+    <div className={styles['additional-icon']}>
+      {mail.newThread && <div className={styles['additional-icon--new']}>new</div>}
+      {mail.important && (
+        <div className={styles['additional-icon--important']}>
+          <Icon20ExclamationMarkOutline />
+        </div>
+      )}
+      {mail.confidence && (
+        <div className={styles['additional-icon--confidence']}>
+          <Icon20KeyOutline />
+        </div>
+      )}
+      {mail.finance && (
+        <div className={styles['additional-icon--finance']}>
+          <Icon20RoubleOutline />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AdditionalIcons;

src/components/app/App.tsx

@@ -1,5 +1,5 @@
-import { View, Panel } from "@vkontakte/vkui";
-import Inbox from "../inbox/Inbox";
+import { View, Panel } from '@vkontakte/vkui';
+import Inbox from '../inbox/Inbox';
 
 const App = () => {
   return (