feat: UI fix and unification of design (#3)

* round number up during preprocessing

* update category naming

* move/delete elements and change legend order

* unify design on policy page

* display dash if value not a number

* change text to darker color

* adjust padding

css/index.css

@@ -1,72 +1,78 @@
-html, body {
-    max-width: 100%;
-    overflow-x: hidden;
+html,
+body {
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
-#state-legends {    
-    border-radius: 3px;    
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);    
-    padding: 0px;    
-    position: absolute;    
-    z-index: 1;
-    bottom: 25%;
-    right: 3%;
-}    
+#state-legends {
+  border-radius: 3px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 0px;
+  position: absolute;
+  z-index: 1;
+  bottom: 25%;
+  right: 3%;
+}
 
 #state-legends span {
-    margin-top: 2px;
+  margin-top: 2px;
 }
 
-
 .mapboxgl-popup-close-button {
-    font-size: 25px;     
+  font-size: 25px;
 }
 .gray {
-    color: "#C0C0C0";
+  color: "#C0C0C0";
 }
 
 #score-dropdown {
-    right: 2%; 
-    top: 2%; 
-    position: absolute; 
-    z-index: 1;
+  position: absolute;
+  top: 100px;
+  left: calc(25% + 20px);
+  z-index: 1;
 }
 
 #score-dropdown-menu {
-    max-height: 500px; 
-    overflow-y: auto; 
-    min-width: 500px;
+  max-height: 500px;
+  overflow-y: auto;
+  min-width: 500px;
+  padding: 0;
+  margin: 0;
 }
 
 #map {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 75%;
-    left:25%
+  position: absolute;
+  top: 0;
+  width: 75%;
+  left: 25%;
 }
 
 .wrapper {
-    position:absolute;
-    z-index:1;
-    left:5px; 
-    width:25%;
-    overflow-y:scroll; 
-    height:100%
+  position: absolute;
+  z-index: 1;
+  top: 80px;
+  width: 25%;
+  overflow-y: scroll;
+  height: calc(100% - 80px);
+}
+
+.wrapper .card-header {
+  background-color: #3c5a7a;
+  color: #fff;
+  border-radius: 0;
 }
 
 ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
+  width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(200,200,200,1);
-    border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(200, 200, 200, 1);
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background-color: #17a2b8;
-    -webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);
-}
+  border-radius: 10px;
+  background-color: #637c95;
+  -webkit-box-shadow: inset 0 0 6px rgba(90, 90, 90, 0.7);
+}

css/score.css

@@ -31,10 +31,14 @@
   text-align: center;
 }
 
-.legend {
+#legend-dropdown {
   position: absolute;
   bottom: 25%;
   left: 20px;
+}
+
+.legend {
+  width: fit-content;
   line-height: 1;
   background-color: #fff;
   padding: 10px;
@@ -60,10 +64,8 @@
 }
 
 #side-dropdown {
-  position: absolute;
-  bottom: 25%;
-  right: 20px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  margin-bottom: 10px;
 }
 
 #bottom-dash {
@@ -98,10 +100,29 @@
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 }
 
+#state-modal .modal-header span {
+  color: #5c6c78;
+}
+
 #state-modal .modal-header {
   background-color: #a0acb9;
 }
 
+#state-modal .modal-header .container {
+  margin-left: 0px;
+  width: 80%;
+}
+
+#state-modal h2,
+h5 {
+  margin-bottom: 0px;
+}
+
+#state-modal hr {
+  margin-top: 0.7rem;
+  margin-bottom: 0.7rem;
+}
+
 #state-modal #state-modal-title {
   text-shadow: #555 0px 0px 6px;
 }
@@ -113,6 +134,7 @@
 }
 
 #state-modal .modal-body span {
+  margin-bottom: 2px;
   align-self: end;
 }