Merge pull request #50 from StudentsAgainstCovid19/feature/cluster-li…

…st-styling-improvements

Overall styling improvements

src/css/call_list_style.css

@@ -1,4 +1,4 @@
-#left_bar{
+#left_bar {
     display:flex;
     position: fixed;
     overflow: hidden;
@@ -10,37 +10,35 @@
     outline: none;
 }
 
-#call_list_div
-{
+#call_list_div {
     overflow: auto;
     height: 100%;
     width: 100%;
     background-color: white;
 }
 
-.call_list_header
-{
+.call_list_header {
     margin: 5px 10px 5px 10px;
     justify-content: center;
     border-bottom: 1px black;
 }
 
-.call_list_content{
+.call_list_content {
     flex-direction: column;
     margin-top: 10px;
 }
 
-h1{
+h1 {
     font-size:medium;
 }
 
-h2{
+h2 {
     font-size: small;
     margin-bottom: -0.1px;
     margin-top: 8px;
 }
 
-.seperator{
+.seperator {
     background-color: black;
     height: 1px;
 }
@@ -52,7 +50,6 @@ h2{
     animation: slideout_call_div .7s ease-in-out forwards;
 }
 
-
 @keyframes slidein_call_div {
     from {
         transform: translate(-100%, 0);
@@ -96,13 +93,13 @@ h2{
     }
 
     to {
-        left: 16%;
+        left: 14%;
     }
 }
 
 @keyframes slideout_search_bar {
     from {
-        left: 16%;
+        left: 14%;
     }
 
     to {
@@ -113,17 +110,16 @@ h2{
 .wellbeing_imagespan {
     position: relative;
     top: 4px;
-    margin-right: 5px;
+    margin-right: 10px;
 }
 
 
-.wellbeing_indicator
-{
+.wellbeing_indicator {
     height: 20px;
     width: 20px;
 }
 
-.call_box  {
+.call_box {
     color: black;
     border-style: solid;
     background-color: #f2f2f2;
@@ -133,22 +129,21 @@ h2{
     transition: 0.3s;
 }
 
-.call_box :hover {
+.call_box:hover {
     border-width: 0 0 0 8px;
+    background-color: #e6e6e6;
 }
 
-.call_list_element{
+.call_list_element {
     border-top: 1px black;
     margin: 5px 0 5px 0;
-    cursor: pointer;
 }
 
-.call_list_element :hover {
+.call_list_element:hover {
     border-width: 0 0 0 10px;
-    background-color: #e6e6e6;
+    cursor: pointer;
 }
 
-
 .lowprio {
     border-color: green;
 }
@@ -169,8 +164,7 @@ h2{
     border-color: purple;
 }
 
-.done_call_box
-{
+.done_call_box {
     background-color: lightgrey;
     filter: grayscale(100%);
 }

src/css/clustered_list.css

@@ -1,33 +1,27 @@
-#clustered_list
-{
+#clustered_list {
     padding: 5px;
     overflow: auto;
 }
 
-.list_div
-{
-    padding: 5px;
-
+.list_div {
+    padding: 3px 20px 4px;
 }
 
-.list_div:hover
-{
+.list_div:hover {
     background-color: #e6e6e6;
     border-radius: 5px;
     border-width: 10px;
-
+    cursor: pointer;
 }
 
-.done_div
-{
+.done_div {
     padding: 5px;
     border-radius: 5px;
     border-width: 10px;
     background-color: lightgrey;
     filter: grayscale(100%);
 }
 
-.done_div:hover
-{
+.done_div:hover {
     background-color: #e6e6e6;
 }