Changed styles

Author: mreorhan

client/public/style.css

@@ -3,35 +3,45 @@ body{
     font-family: 'PT Sans', sans-serif;
 }
 header{
-    background-color:#7faff9;
-    height: 54px;
+    background-color: #ffffff;
+    height: 58px;
+    box-shadow: 5px -5px 16px 5px #c8c8c8;
 }
 ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
 
 }
+/*
+new style
+*/
+
+span.menu-text {
+    display: inline-block;
+    vertical-align: top;
+    padding: 2px 0 0 15px;
+    font-weight: bold;
+    font-size: 14px;
+}
+
 .con {
     position: relative;
-    left: 150px;
-    width: calc(100% - 150px);
+    left: 184px;
+    width: calc(100% - 184px);
 }
-.searchbar:before {
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-    content: "\f002";
-    color: #fff;
+.containerDashboard{
+    padding-top: 10px;
 }
 input::placeholder {
-    color: #fff;
+    color: #b8c9d3;
   }
 .logo {
-    background: #4b6fa7;
+    background: #007bff;
     display: block;
     text-align: center;
-    font-size: 25px;
-    line-height: 54px;
+    font-size: 22px;
+    line-height: 58px;
     color: #fff;
     font-weight: bold;
 }
@@ -46,61 +56,88 @@ side {
     top: 0;
     height: 100vh;
     background: #fff;
-    min-width: 150px;
+    min-width: 184px;
     box-shadow: -3px 0px 14px #535353;
 }
 .side-menu{
     list-style-type: none;
     padding: 0;
-    text-align: center;
-    margin: 15px 0 0 0;
+    margin: 0;
 }
 .side-menu i {
-    font-size: 36px;
-    display: block;
+    font-size: 23px;
+    display: inline-block;
 }
 .side-menu li a {
-    color: #4b6fa7;
+    color: #658190;
     display: block;
     padding: 15px;
     transition: all .20s ease-in-out;
    -moz-transition: all .20s ease-in-out;
    -webkit-transition: all .20s ease-in-out;
 }
-
+li .active {
+    background: #fafbfc;
+    color: #007bff!important;
+}
+li .active:hover {
+    background: #fafbfc!important;
+}
 .side-menu li a:hover {
     color: #7a7a7a;
     text-decoration: none;
-    background: #f6f8fc;
+    background: #fafbfc;
 }
-.side-menu li:hover:before {
+.side-menu li,.side-menu li:hover:before{
+    -webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    -ms-transition: all 0.3s ease-out;
+    -o-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+}
+.side-menu li:hover:before,li .active:before {
     content: '';
     width: 4px;
-    background: #4b6fa7;
-    height: 90px;
-    left: 0;
+    background: #007bff;
+    height: 46px;
+    margin-top: 5px;
     position: absolute;
+    box-shadow: 1px 0px 6px #0000002e;
 }
-.search{
-    background-color: transparent;
-    padding: 15px;
-    color: #fff;
-    outline: 0;
-    border: 0;
+li .active:before {
+    margin: -10px -15px!important;
+}
+.mainMenu {
+    width: 94%;
+    display: inline-block;
+    font-size: 16px;
+    font-weight: bold;
 }
-.searchbar {
-    width: 96%;
+.mainMenu ul li {
+    padding: 17px 13px 9px;
     display: inline-block;
+    height: 58px;
+    margin: -7px 5px;
+    top: -3px;
+    position: relative;
+    transition: all .3s;
+}
+.mainMenu ul li:hover {
+    border-bottom:3px solid #007bff
+}
+.profilewidget div {
+    display: inline-block;
+    margin-left: 12px;
 }
 .profilewidget {
     display: inline-block;
-    width: 4%;
+    width: 6%;
 }   
-.profilewidget i {
+.profilewidget div i {
     cursor: pointer;
-    font-size: 25px;
-    top: 6px!important;
-    color: #fff;
+    font-size: 24px;
+    color: #b8c9d3;
+    position: relative;
 }
 .btnDashboard{margin-left: 22px}
 .colorBlue,.colorGreen,.colorGrey{
@@ -125,10 +162,14 @@ side {
 .space{
     margin: 15px 0 20px
 }
-i.fas.fa-plus-circle {
+.customAddTask {
     top: -22.5px;
     position: relative;
 }
+.modal-header .close {
+    font-size: 35px;
+    padding: 9px 15px;
+}
 /* TODO
 .process{
     overflow-y: auto;
@@ -145,7 +186,7 @@ i.fas.fa-plus-circle {
 }
 .mcell {
     background-color: #f5f8fc;
-    margin: 10px;
+    margin: 6px;
     border-radius: 0 0 4px 4px;
     display: inline-table;
     box-shadow: 0px 3px 5px #bababa7d;
@@ -188,8 +229,12 @@ i.fas.fa-plus-circle {
     box-shadow: 2px 2px 8px #8080800d;
     list-style-type: none;
 }
+.otherMenu div{
+    margin: 13px;
+    display: grid;
+}
 .ui-draggable{
-    width: 300px;
+    width: 304px;
 }
 .ui-droppable-hover{
     background: #ebeff3;