Transparent color scheme, preparing for custom backgrounds

client/src/components/Board/Board.module.css

@@ -1,11 +1,11 @@
 .addListButton {
-  background-color: rgba(0, 0, 0, 0.12);
+  background: hsla(0, 0%, 0%, 0.24);
   border: none;
   border-radius: 3px;
-  color: hsla(0, 0%, 100%, 0.7);
+  color: hsla(0, 0%, 100%, 0.72);
   cursor: pointer;
   display: block;
-  fill: hsla(0, 0%, 100%, 0.7);
+  fill: hsla(0, 0%, 100%, 0.72);
   font-weight: normal;
   height: 42px;
   padding: 11px;
@@ -20,7 +20,7 @@
 }
 
 .addListButton:hover {
-  background-color: rgba(0, 0, 0, 0.3);
+  background: hsla(0, 0%, 0%, 0.32);
 }
 
 .addListButtonIcon {

client/src/components/Board/Filter.module.css

@@ -23,7 +23,7 @@
 }
 
 .filterLabel {
-  background: #2d3034;
+  background: hsla(0, 0%, 0%, 0.24);
   border-radius: 3px;
   color: #fff;
   display: inline-block;
@@ -33,7 +33,7 @@
 }
 
 .filterLabel:hover {
-  opacity: 0.75;
+  background: hsla(0, 0%, 0%, 0.32);
 }
 
 .filterTitle {

client/src/components/Boards/Boards.module.css

@@ -11,6 +11,7 @@
 
 .editButton {
   background: transparent !important;
+  box-shadow: none !important;
   color: #fff !important;
   line-height: 32px !important;
   margin-right: 0 !important;
@@ -23,7 +24,7 @@
 }
 
 .editButton:hover {
-  background: rgba(34, 36, 38, 0.3) !important;
+  background: hsla(0, 0%, 100%, 0.08) !important;
 }
 
 .link {
@@ -44,7 +45,7 @@
 }
 
 .tab:hover {
-  background: #353a3f !important;
+  background: hsla(0, 0%, 0%, 0.24) !important;
 }
 
 .tab:hover .target {
@@ -52,11 +53,11 @@
 }
 
 .tabActive {
-  background: #2c3035 !important;
+  background: hsla(0, 0%, 0%, 0.24) !important;
 }
 
 .tabActive:hover {
-  background: #353a3f !important;
+  background: hsla(0, 0%, 0%, 0.32) !important;
 }
 
 .tabWrapper {
@@ -65,7 +66,7 @@
 }
 
 .tabs {
-  border-bottom: 2px solid #2c3035;
+  border-bottom: 2px solid hsla(0, 0%, 0%, 0.24);
   display: flex;
   height: 38px;
   flex: 0 0 auto;

client/src/components/Header/Header.module.css

@@ -2,8 +2,11 @@
   background: none !important;
 }
 
+.item:hover {
+  background: hsla(0, 0%, 0%, 0.32) !important;
+}
+
 .logo {
-  background: #2d3035;
   color: #fff !important;
   flex: 0 0 auto;
   font-size: 20px;
@@ -20,7 +23,7 @@
 }
 
 .menu {
-  background: #2d3035 !important;
+  background: transparent !important;
   border: none !important;
   border-radius: 0 !important;
   box-shadow: none !important;
@@ -49,6 +52,7 @@
 }
 
 .wrapper {
+  background: hsla(0, 0%, 0%, 0.24);
   display: flex;
   flex: 0 0 auto;
 }

client/src/components/List/List.module.css

@@ -108,6 +108,7 @@
   max-height: calc(100vh - 300px);
   overflow-x: hidden;
   overflow-y: auto;
+  scrollbar-width: thin;
   width: 290px;
 }
 

client/src/components/Project/Project.module.css

@@ -1,6 +1,7 @@
 .addUser {
-  background: #2c3035 !important;
+  background: hsla(0, 0%, 0%, 0.24) !important;
   border-radius: 50% !important;
+  box-shadow: none !important;
   color: #fff !important;
   line-height: 36px !important;
   margin: 0 !important;
@@ -11,7 +12,7 @@
 }
 
 .addUser:hover {
-  background: #4b4f53;
+  background: hsla(0, 0%, 0%, 0.32) !important;
 }
 
 .header {
@@ -21,6 +22,7 @@
 
 .name {
   background: transparent !important;
+  box-shadow: none !important;
   color: #fff !important;
   display: inline-block !important;
   font-size: 32px !important;
@@ -44,8 +46,9 @@
 }
 
 .wrapper {
+  background: hsla(0, 0%, 0%, 0.08);
   display: flex;
   flex-direction: column;
   height: 100%;
-  margin: 0 20px;
+  padding: 0 20px;
 }