polish

src/render/main.css

@@ -1,6 +1,7 @@
 html, body {
   margin: 0;
   padding: 0;
+  background-color: rgba(235, 235, 235, 0.75);
 }
 
 /* The first word of the class is the component that it modifys. */
@@ -46,6 +47,7 @@ html, body {
 }
 
 .contacts img {
+  height: 30px;
   border-radius: 50%;
 }
 
@@ -60,26 +62,10 @@ html, body {
 
 .contacts .email {
   font-family: SF Compact Display;
-  font-weight: bold;
   font-size: 12px;
   color: #898989;
 }
 
-.mail {
-  padding: 12px;
-  margin: 0px;
-  background-color: #D6F2FF;
-  border-radius: inherit;
-}
-
-.mail h4 {
-  margin-top: 0px;
-}
-
-.mail p {
-  margin-bottom: 0px;
-}
-
 #header-menu {
   position: fixed;
   margin-left: 20px;
@@ -251,6 +237,7 @@ html, body {
   content: '';
   display: inline-block;
   position: absolute;
+  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
 }
 
 .ws-dot::before {
@@ -493,13 +480,13 @@ html, body {
 }
 
 .bubble a {
+  display:inline-block;
+  text-decoration: none;
   border-radius: inherit;
-  font-family: "SF Compact Rounded";
   background-color: #D9D9D9;
   font-weight: bold;
-  padding: 12px;
+  padding: 10px;
   color: #727272;
-  margin: 0px;
 }
 
 .context {
@@ -522,18 +509,9 @@ html, body {
 }
 
 .context-avatar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 30px;
-  height: 30px;
-  background-color: white;
-  border-radius: 15px;
   margin-right: 5px;
-}
-
-.context-avatar img {
   border-radius: 50%;
+  height: 30px;
 }
 
 /* ---------- shared between components ---------- */