Bug 1085451 - Implement new design for Loop's green call buttons. r=Gijs, a=lmandel
authorJared Wein <jwein@mozilla.com>
Mon, 20 Oct 2014 19:26:16 -0400
changeset 225782 5aecfcba7559
parent 225781 290442516a98
child 225783 605c6938c9d3
push id4014
push userryanvm@gmail.com
push date2014-10-22 23:37 +0000
treeherdermozilla-beta@27b0655c1385 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs, lmandel
bugs1085451
milestone34.0
Bug 1085451 - Implement new design for Loop's green call buttons. r=Gijs, a=lmandel
browser/components/loop/content/shared/css/common.css
browser/components/loop/content/shared/css/contacts.css
browser/components/loop/content/shared/css/conversation.css
browser/components/loop/content/shared/css/panel.css
--- a/browser/components/loop/content/shared/css/common.css
+++ b/browser/components/loop/content/shared/css/common.css
@@ -109,32 +109,32 @@ p {
   .btn-info:active {
     background-color: #006b9d;
     border: 1px solid #006b9d;
   }
 
 .btn-accept,
 .btn-success,
 .btn-accept + .btn-chevron {
-  background-color: #74bf43;
-  border: 1px solid #74bf43;
+  background-color: #5bc0a4;
+  border: 1px solid #5bc0a4;
 }
 
   .btn-accept:hover,
   .btn-success:hover,
   .btn-accept + .btn-chevron:hover {
-    background-color: #6cb23e;
-    border: 1px solid #6cb23e;
+    background-color: #47b396;
+    border: 1px solid #47b396;
   }
 
   .btn-accept:active,
   .btn-success:active,
   .btn-accept + .btn-chevron:active {
-    background-color: #64a43a;
-    border: 1px solid #64a43a;
+    background-color: #3aa689;
+    border: 1px solid #3aa689;
   }
 
 .btn-warning {
   background-color: #f0ad4e;
 }
 
 .btn-cancel,
 .btn-error,
@@ -148,27 +148,27 @@ p {
 
   .btn-cancel:hover,
   .btn-error:hover,
   .btn-decline:hover,
   .btn-hangup:hover,
   .btn-decline + .btn-chevron:hover,
   .btn-error + .btn-chevron:hover {
     background-color: #c53436;
-    border: 1px solid #c53436;
+    border-color: #c53436;
   }
 
   .btn-cancel:active,
   .btn-error:active,
   .btn-decline:active,
   .btn-hangup:active,
   .btn-decline + .btn-chevron:active,
   .btn-error + .btn-chevron:active {
     background-color: #ae2325;
-    border: 1px solid #ae2325;
+    border-color: #ae2325;
   }
 
 .btn-chevron {
   width: 26px;
   height: 26px;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
--- a/browser/components/loop/content/shared/css/contacts.css
+++ b/browser/components/loop/content/shared/css/contacts.css
@@ -131,23 +131,28 @@
   line-height: 16px;
 }
 
 .icons {
   cursor: pointer;
   display: none;
   margin-left: auto;
   padding: 12px 10px;
-  border-radius: 30px;
-  background: #7ed321;
+  border-radius: 2px;
+  background: #5bc0a4;
+  color: #fff;
   -moz-user-select: none;
 }
 
 .icons:hover {
-  background: #89e029;
+  background-color: #47b396;
+}
+
+.icons:hover:active {
+  background-color: #3aa689;
 }
 
 .icons i {
   margin: 0 5px;
   display: inline-block;
   background-position: center;
   background-repeat: no-repeat;
 }
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -107,17 +107,17 @@
 
 .fx-embedded-btn-audio-small,
 .fx-embedded-btn-video-small {
   width: 26px;
   height: 26px;
   border-left: 1px solid rgba(255,255,255,.4);
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
-  background-color: #74BF43;
+  background-color: #5bc0a4;
   background-position: center;
   background-size: 1rem;
   background-repeat: no-repeat;
   cursor: pointer;
 }
 
   .fx-embedded-btn-video-small:hover,
   .fx-embedded-btn-audio-small:hover {
--- a/browser/components/loop/content/shared/css/panel.css
+++ b/browser/components/loop/content/shared/css/panel.css
@@ -171,30 +171,30 @@ body {
 }
 
 .button:hover:active {
   background-color: #ccc;
   color: #111;
 }
 
 .button.button-accept {
-  background-color: #74bf43;
-  border-color: #74bf43;
+  background-color: #5bc0a4;
+  border-color: #5bc0a4;
   color: #fff;
 }
 
 .button.button-accept:hover {
-  background-color: #6cb23e;
-  border-color: #6cb23e;
+  background-color: #47b396;
+  border-color: #47b396;
   color: #fff;
 }
 
 .button.button-accept:hover:active {
-  background-color: #64a43a;
-  border-color: #64a43a;
+  background-color: #3aa689;
+  border-color: #3aa689;
   color: #fff;
 }
 
 /* Dropdown menu */
 
 .dropdown {
   position: relative;
 }