made incoming calls panel prettier

css/base.css

@@ -163,11 +163,11 @@ button.danger:focus, button.danger:hover, button.danger:active {
 }
 
 button.positive {
-  background-color: #9de39b;
+  background-color: #71c46f;
   color: white;
 }
 button.positive:focus, button.positive:hover, button.positive:active {
-  background-color: #7f7;
+  background-color: rgb(127, 237, 127);
 }
 
 textarea, input {
@@ -1592,7 +1592,7 @@ img.channel {
   background-color: rgba(255,255,255,0.90);
 }
 
-#video-container-controls {
+#video-container .controls {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1647,7 +1647,7 @@ video {
   transform: scaleX(-1);
 }
 
-.peer-card {
+.caller-card {
   position: absolute;
   top: 0;
   left: 0;
@@ -1659,14 +1659,19 @@ video {
   flex-direction: column;
 }
 
-.peer-card .avatar-box {
+.caller-card .avatar-box {
   width: 10rem;
   height: 10rem;
   font-size: 6rem;
 }
 
+.caller-card .avatar-box .material-icons {
+  font-size: 6rem;
+  line-height: 1.6;
+}
+
 /* Badge with "You" for current user or peer's name. */
-.call-party .title {
+.call-party .caller-name {
   padding: 0.15rem 0.5rem;
   border-radius: 0.35rem;
   z-index: 1;
@@ -1674,18 +1679,18 @@ video {
   background-color: rgba(255, 255, 255, 0.7);
 }
 
-.call-party.self .title.inactive {
+.call-party.self .caller-name.inactive {
   position: absolute;
   bottom: 0.25rem;
   right: 0.25rem;
 }
 
-.call-party .peer-card .title {
+.caller-card .caller-name {
   font-size: larger;
   margin-top: 0.5rem;
 }
 
-.call-party.peer .title.inactive {
+.call-party.peer .caller-name.inactive {
   position: absolute;
   font-size: larger;
   left: 50%;
@@ -1694,25 +1699,34 @@ video {
   margin: 0 auto;
 }
 
-.video-call-accept {
-  border-radius: 10px;
-  background-color: green;
+.incoming-call {
+  position: relative;
+  background-color: white;
+  box-shadow: 0.15rem 0.15rem 1.5rem rgb(0 0 0 / 45%);
+  border-radius: 0.3rem;
+  margin: auto 2rem auto 2rem;
+  width: fit-content;
+  min-width: 16rem;
+  max-width: 24rem;
 }
 
-.incoming-call-title {
-  text-align: center;
-  padding: 10px;
+.incoming-call .caller-card {
+  position: relative;
+  top: initial;
+  left: initial;
+  width: 100%;
+  height: 100%;
+  padding: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
 
 .incoming-call-badges {
   text-align: center;
 }
 
-.incoming-call-actions {
-  text-align: center;
-  padding: 20px;
-}
-
 /* Talk bubbles */
 .chat-box {
   list-style: none;