Edited app icons

src/assets/navbarMenus/pfofileIcons/MessagesIcon.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+class MessagesIcon extends React.Component {
+
+  render() {
+    return (
+      <svg className={this.props.className} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clipRule="evenodd" d="M16.5253 3.00005L7.45618 3C4.28665 3 2 5.56151 2 8.85897V15.141C2 18.4385 4.28665 21 7.45618 21H16.5168C18.0392 20.9829 19.4802 20.3421 20.5126 19.2266C21.5449 18.111 22.0786 16.6183 21.9893 15.0959L21.9906 8.85897C22.0786 7.38171 21.5449 5.88895 20.5126 4.77344C19.4802 3.65794 18.0392 3.01705 16.5253 3.00005ZM7.45618 4.52843L16.5084 4.52838C17.6073 4.54072 18.6532 5.00592 19.4026 5.81562C20.152 6.62533 20.5393 7.70887 20.4745 8.81389L20.4732 15.141C20.5393 16.2911 20.152 17.3747 19.4026 18.1844C18.6532 18.9941 17.6073 19.4593 16.5084 19.4716L7.45618 19.4716C5.16279 19.4716 3.51744 17.6284 3.51744 15.141V8.85897C3.51744 6.37155 5.16279 4.52843 7.45618 4.52843ZM18.024 8.63837C17.7622 8.30886 17.2847 8.25555 16.9576 8.5193L12.8583 11.8242L12.7408 11.9068C12.2575 12.2095 11.6228 12.1816 11.1598 11.8181L7.03057 8.51731L6.93763 8.4536C6.61736 8.26727 6.20141 8.34031 5.96461 8.64086C5.70412 8.97146 5.75904 9.45216 6.08726 9.71453L10.2217 13.0195L10.383 13.1375C11.4231 13.8459 12.8013 13.8067 13.7988 13.0236L17.9058 9.71255L17.9882 9.63551C18.24 9.36261 18.2621 8.93792 18.024 8.63837Z" fill="#16365F"/>
+      </svg>
+    );
+  }
+}
+
+export default MessagesIcon;

src/assets/navbarMenus/pfofileIcons/TasksIcon.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+class TasksIcon extends React.Component {
+
+  render() {
+    return (
+      <svg className={this.props.className} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clipRule="evenodd" d="M8.138 22C7.726 22 7.335 21.968 6.967 21.905L6.749 21.864C4.378 21.371 3 19.555 3 16.791V7.209C3 6.875 3.02 6.555 3.06 6.249C3.409 3.564 5.254 2 8.138 2H15.863C19.059 2 20.97 3.92 21 7.132V7.209V16.791C21 20.048 19.084 22 15.863 22H8.138ZM8.138 3.457C5.682 3.457 4.437 4.72 4.437 7.209V16.791C4.437 19.28 5.682 20.543 8.138 20.543H15.854C18.309 20.543 19.546 19.28 19.546 16.791V7.209C19.546 4.72 18.309 3.457 15.854 3.457H8.138ZM16.306 16.234C16.306 15.834 15.987 15.51 15.593 15.51H8.382C7.988 15.51 7.668 15.834 7.668 16.234C7.668 16.634 7.988 16.958 8.382 16.958H15.593C15.987 16.958 16.306 16.634 16.306 16.234ZM15.593 11.271C15.868 11.241 16.137 11.373 16.284 11.61C16.431 11.849 16.431 12.151 16.284 12.39C16.137 12.627 15.868 12.759 15.593 12.729H8.382C8.016 12.687 7.739 12.374 7.739 12C7.739 11.626 8.016 11.312 8.382 11.271H15.593ZM11.777 7.771C11.777 7.397 11.5 7.083 11.134 7.042H8.391C8.024 7.083 7.747 7.397 7.747 7.771C7.747 8.144 8.024 8.458 8.391 8.499H11.134C11.5 8.458 11.777 8.144 11.777 7.771Z" fill="#16365F"/>
+      </svg>
+    );
+  }
+}
+
+export default TasksIcon;

src/components/Header/Header.js

@@ -25,9 +25,11 @@ import MenuIcon from "../Icons/HeaderIcons/MenuIcon.js";
 import SearchBarIcon from "../Icons/HeaderIcons/SearchBarIcon.js";
 import BellIcon from "../Icons/HeaderIcons/BellIcon.js";
 import SearchIcon from "../Icons/HeaderIcons/SearchIcon.js";
-import profileIcon from "../../assets/navbarMenus/profileOutlined.svg";
-import messagesIcon from "../../assets/navbarMenus/messagesOutlined.svg";
-import tasksIcon from "../../assets/navbarMenus/tasksOutlined.svg";
+
+import ProfileIcon from "../../assets/navbarMenus/pfofileIcons/ProfileIcon.js";
+import MessagesIcon from "../../assets/navbarMenus/pfofileIcons/MessagesIcon.js";
+import TasksIcon from "../../assets/navbarMenus/pfofileIcons/TasksIcon.js";
+
 import logoutIcon from "../../assets/navbarMenus/logoutOutlined.svg";
 import basketIcon from "../../assets/navbarMenus/basketIcon.svg";
 import calendarIcon from "../../assets/navbarMenus/calendarIcon.svg";
@@ -153,12 +155,12 @@ class Header extends React.Component {
               <span className="small d-none d-sm-block ml-1 mr-2 body-1">Christina Carey</span>
             </DropdownToggle>
             <DropdownMenu className="navbar-dropdown profile-dropdown" style={{ width: "194px" }}>
-              <DropdownItem><img src={profileIcon} alt="Profile Icon"/><span>Profile</span></DropdownItem>
-              <DropdownItem><img src={tasksIcon} alt="Tasks Icon"/><span>Tasks</span></DropdownItem>
-              <DropdownItem><img src={messagesIcon} alt="Message Icon"/><span>Messages</span></DropdownItem>
+              <DropdownItem className={s.dropdownProfileItem}><ProfileIcon/><span>Profile</span></DropdownItem>
+              <DropdownItem className={s.dropdownProfileItem}><TasksIcon/><span>Tasks</span></DropdownItem>
+              <DropdownItem className={s.dropdownProfileItem}><MessagesIcon/><span>Messages</span></DropdownItem>
               <NavItem>
                 <NavLink onClick={this.doLogout} href="#">
-                  <button className="btn btn-primary rounded-pill mx-auto logout-btn" type="submit"><img src={logoutIcon} alt="Logout Icon"/><span className="ml-1">Logout</span></button>
+                  <button className="btn btn-primary rounded-pill mx-auto logout-btn" type="submit"><img src={logoutIcon} alt="Logout"/><span className="ml-1">Logout</span></button>
                 </NavLink>
               </NavItem>
             </DropdownMenu>

src/components/Header/Header.module.scss

@@ -89,3 +89,16 @@
   color: red;
   opacity: 1;
 }
+
+.dropdownProfileItem {
+  display: flex;
+  &:hover {
+    svg {
+      path {
+        fill: $default;
+        stroke: $default;
+      }
+    }
+  }
+}
+

src/components/Icons/SidebarIcons/HomeIcon.js

@@ -5,7 +5,7 @@ class HomeIcon extends React.Component {
   render() {
     return (
       <svg className={this.props.className} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6.08993 13.8489V11.8104C6.08993 11.29 6.51486 10.8682 7.03904 10.8682H8.95515C9.20687 10.8682 9.44828 10.9675 9.62627 11.1441C9.80427 11.3208 9.90426 11.5605 9.90426 11.8104V13.8489C9.90267 14.0652 9.98812 14.2732 10.1417 14.4268C10.2952 14.5803 10.5041 14.6666 10.722 14.6666H12.0293C12.6398 14.6682 13.2259 14.4285 13.6582 14.0005C14.0905 13.5725 14.3334 12.9913 14.3334 12.3852V6.57789C14.3334 6.08829 14.1148 5.62387 13.7365 5.30976L9.28943 1.78389C8.51585 1.16569 7.40749 1.18565 6.65701 1.8313L2.31142 5.30976C1.91524 5.61461 1.67845 6.0804 1.66675 6.57789V12.3793C1.66675 13.6425 2.69834 14.6666 3.97086 14.6666H5.24827C5.7009 14.6667 6.06875 14.3041 6.07203 13.8548L6.08993 13.8489Z" fill="#16365F"/>
+        <path d="M6.10465 13.8476V11.8031C6.10464 11.2831 6.52858 10.8605 7.05385 10.857H8.9779C9.50567 10.857 9.93351 11.2806 9.93351 11.8031V11.8031V13.8539C9.93338 14.2954 10.2893 14.6563 10.7352 14.6666H12.0179C13.2966 14.6666 14.3332 13.6404 14.3332 12.3745V12.3745V6.55854C14.3263 6.06053 14.0902 5.59288 13.6918 5.28867L9.30498 1.79018C8.53646 1.18102 7.44397 1.18102 6.67545 1.79018L2.30785 5.29502C1.90801 5.59799 1.67143 6.06642 1.6665 6.56489V12.3745C1.6665 13.6404 2.70309 14.6666 3.98178 14.6666H5.26448C5.72141 14.6666 6.09182 14.2999 6.09182 13.8476V13.8476" stroke="#16365F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     );
   }

src/components/Sidebar/LinksGroup/LinksGroup.js

@@ -87,7 +87,6 @@ class LinksGroup extends React.Component {
           <NavLink
             to={this.props.link}
             activeClassName={s.headerLinkActive}
-            // style={{ paddingLeft: `${40 + (10 * (this.props.deep - 1))}px` }}
             onClick={(e) => {
               if (this.props.link.includes('menu')) {
                 e.preventDefault();

src/components/Sidebar/LinksGroup/LinksGroup.module.scss

@@ -61,18 +61,10 @@ a.headerLinkActive {
     color: $white;
   }
 
-  //.sidebarIcon {
-  //  path {
-  //    fill: blue;
-  //    stroke: red;
-  //  }
-  //}
-  // ПОЧЕМУ НЕ ПОДХВАТЫВАЕТСЯ ЦВЕТ????????
-
   svg {
     path {
       fill: $white;
-      stroke: white;
+      stroke: $white;
     }
   }
 }

src/components/Sidebar/Sidebar.js

@@ -92,7 +92,7 @@ class Sidebar extends React.Component {
             index="typography"
           />
           <LinksGroup
-            onActiveSidebarItemChange={t => this.props.dispatch(changeActiveSidebarItem(t))}
+            onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
             activeItem={this.props.activeItem}
             header="Tables"
             isHeader

src/pages/dashboard/Dashboard.js

@@ -5,8 +5,6 @@ import {
   Row,
   Progress,
   Button,
-  Input,
-  Label,
   ButtonDropdown,
   DropdownToggle,
   DropdownMenu,
@@ -310,7 +308,7 @@ class Dashboard extends React.Component {
                         this.changeCheck(event, "checkboxes", 0)
                       }
                     />
-                    <label for="checkbox0" />
+                    <label htmlFor="checkbox0" />
                   </div>
                 </div>
               </div>
@@ -333,7 +331,7 @@ class Dashboard extends React.Component {
                         this.changeCheck(event, "checkboxes", 1)
                       }
                     />
-                    <label for="checkbox1" />
+                    <label htmlFor="checkbox1" />
                   </div>
                 </div>
               </div>

src/pages/notifications/Notifications.js

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import classnames from "classnames";
-import { v4 as uuidv4 } from "uuid";
 import {
   Col,
   Row,

src/pages/tables/Tables.js

@@ -12,7 +12,6 @@ import {
   DropdownMenu,
   DropdownToggle,
   DropdownItem,
-  Input,
   Label,
   Badge,
 } from "reactstrap";
@@ -98,11 +97,11 @@ const Tables = function () {
                 <div className={s.tableTitle}>
                   <div className="headline-2">States Colors</div>
                   <div className="d-flex">
-                    <a href="#top"><img src={searchIcon} alt="Search"/></a>
-                    <a href="#top"><img className="d-none d-sm-block" src={cloudIcon} alt="Cloud" /></a>
-                    <a href="#top"><img src={printerIcon} alt="Printer" /></a>
-                    <a href="#top"><img className="d-none d-sm-block" src={optionsIcon} alt="Options" /></a>
-                    <a href="#top"><img src={funnelIcon} alt="Funnel" /></a>
+                    <a href="/#"><img src={searchIcon} alt="Search"/></a>
+                    <a href="/#"><img className="d-none d-sm-block" src={cloudIcon} alt="Cloud" /></a>
+                    <a href="/#"><img src={printerIcon} alt="Printer" /></a>
+                    <a href="/#"><img className="d-none d-sm-block" src={optionsIcon} alt="Options" /></a>
+                    <a href="/#"><img src={funnelIcon} alt="Funnel" /></a>
                   </div>
                 </div>
                 <div className="widget-table-overflow">