From 65cb7c0e9c3a17297ffb4678c7c4c18c91bc2bb2 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Wed, 31 Aug 2016 14:45:23 -0700
Subject: [PATCH] Cleanup colors and focus/active input states

// FREEBIE
---
 stylesheets/_conversation.scss |  2 +-
 stylesheets/_global.scss       | 16 ++++++---
 stylesheets/_themes.scss       | 49 ++++++++++++++++++++++++---
 stylesheets/manifest.css       | 60 ++++++++++++++++++++++++++--------
 4 files changed, 104 insertions(+), 23 deletions(-)

diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 736bd7c6..3055c3e3 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -4,7 +4,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: 0 36px;
+  padding: 0 46px;
   -webkit-user-select: text;
 }
 .conversation-name + .conversation-number {
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 8bbbe647..01700196 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -145,12 +145,21 @@ button.back {
   }
 
   .paperclip {
-    width: $button-height;
+    width: 36px;
     height: 100%;
-    @include color-svg('/images/paperclip.svg', $grey);
+    padding: 5px 0 0;
     opacity: 0.5;
-    transform: rotateZ(-45deg);
+    border: none;
+    background: transparent;
 
+    &:before {
+      content: '';
+      display: inline-block;
+      width: $button-height;
+      height: $button-height;
+      @include color-svg('/images/paperclip.svg', $grey);
+      transform: rotateZ(-45deg);
+    }
 
     &:focus, &:hover {
       opacity: 1.0;
@@ -312,7 +321,6 @@ $avatar-size: 44px;
     display: block;
     margin: 0;
     font-size: 1em;
-    font-weight: 400;
     text-overflow: ellipsis;
     overflow-x: hidden;
     text-align: left;
diff --git a/stylesheets/_themes.scss b/stylesheets/_themes.scss
index 3b6c217e..18be1aa2 100644
--- a/stylesheets/_themes.scss
+++ b/stylesheets/_themes.scss
@@ -22,21 +22,53 @@
   }
 }
 
+$ios-header-border-color: rgba(0,0,0,0.05);
+$ios-border-color: rgba(0,0,0,0.1);
+
 .ios {
   #header {
     height: $header-height;
-    border-bottom: 1px solid rgba(0,0,0,0.05);
+    border-bottom: 1px solid $ios-header-border-color;
+    border-width: 0 1px 1px 0;
     background-color: $grey_l;
     color: $grey_d;
     h1 { display: none; }
   }
-  .gutter .content {
-    height: calc(100% - #{$header-height});
+  .gutter {
+    border-right: 1px solid $ios-border-color;
+    .content {
+      height: calc(100% - #{$header-height});
+      background: $ios-border-color;
+    }
+    .contact {
+      background: $grey_l;
+      margin-right: 0;
+
+      &.selected {
+        background: $blue;
+        color: white;
+        .last-timestamp {
+          color: white;
+        }
+      }
+    }
+    ::-webkit-scrollbar-track {
+      background: $grey_l;
+    }
   }
   .tool-bar {
     float: left;
     padding: 15px;
   }
+  input[type=text]:active,
+  input[type=text]:focus,
+  input[type=search]:active,
+  input[type=search]:focus,
+  input[type=search].active,
+  form.active {
+    outline-offset: 0;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
   input.search {
     border-radius: 5px;
     width: 220px;
@@ -48,7 +80,8 @@
   .conversation-header {
     background-color: $grey_l;
     color: $grey_d;
-    border-color: rgba(0,0,0,0.05);
+    border-color: $ios-header-border-color;
+    text-align: left;
 
     .conversation-title {
       line-height: $header-height;
@@ -64,11 +97,14 @@
   .bottom-bar {
     padding: 15px;
     min-height: 30px;
+    border-top: 1px solid $ios-border-color;
     form.send {
       border-radius: 5px;
+      border: 1px solid $ios-border-color;
     }
   }
 
+
   .control .content {
     padding: 10px;
   }
@@ -86,7 +122,7 @@
     }
   }
   .incoming .content {
-    background-color: #e5e5e5;
+    background-color: #e6e5ea;
     color: black;
     float: left;
   }
@@ -122,6 +158,9 @@
       color: $grey_d;
     }
   }
+  .contact-details .name {
+    font-weight: 400;
+  }
   .conversation.placeholder .conversation-header {
     display: none;
   }
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index b635b194..1742094d 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -149,13 +149,21 @@ button.back {
     cursor: pointer;
     padding-left: 10px; }
   .file-input .paperclip {
-    width: 24px;
+    width: 36px;
     height: 100%;
-    -webkit-mask: url("/images/paperclip.svg") no-repeat center;
-    -webkit-mask-size: 100%;
-    background-color: #616161;
+    padding: 5px 0 0;
     opacity: 0.5;
-    transform: rotateZ(-45deg); }
+    border: none;
+    background: transparent; }
+    .file-input .paperclip:before {
+      content: '';
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      -webkit-mask: url("/images/paperclip.svg") no-repeat center;
+      -webkit-mask-size: 100%;
+      background-color: #616161;
+      transform: rotateZ(-45deg); }
     .file-input .paperclip:focus, .file-input .paperclip:hover {
       opacity: 1.0; }
   .file-input input[type=file] {
@@ -313,7 +321,6 @@ img.emoji {
     display: block;
     margin: 0;
     font-size: 1em;
-    font-weight: 400;
     text-overflow: ellipsis;
     overflow-x: hidden;
     text-align: left; }
@@ -873,7 +880,7 @@ input.search {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: 0 36px;
+  padding: 0 46px;
   -webkit-user-select: text; }
 
 .conversation-name + .conversation-number:before {
@@ -1305,15 +1312,37 @@ li.entry .error-icon-container {
 .ios #header {
   height: 64px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-width: 0 1px 1px 0;
   background-color: #f3f3f3;
   color: #454545; }
   .ios #header h1 {
     display: none; }
-.ios .gutter .content {
-  height: calc(100% - 64px); }
+.ios .gutter {
+  border-right: 1px solid rgba(0, 0, 0, 0.1); }
+  .ios .gutter .content {
+    height: calc(100% - 64px);
+    background: rgba(0, 0, 0, 0.1); }
+  .ios .gutter .contact {
+    background: #f3f3f3;
+    margin-right: 0; }
+    .ios .gutter .contact.selected {
+      background: #2090ea;
+      color: white; }
+      .ios .gutter .contact.selected .last-timestamp {
+        color: white; }
+  .ios .gutter ::-webkit-scrollbar-track {
+    background: #f3f3f3; }
 .ios .tool-bar {
   float: left;
   padding: 15px; }
+.ios input[type=text]:active,
+.ios input[type=text]:focus,
+.ios input[type=search]:active,
+.ios input[type=search]:focus,
+.ios input[type=search].active,
+.ios form.active {
+  outline-offset: 0;
+  outline: -webkit-focus-ring-color auto 5px; }
 .ios input.search {
   border-radius: 5px;
   width: 220px;
@@ -1324,7 +1353,8 @@ li.entry .error-icon-container {
 .ios .conversation-header {
   background-color: #f3f3f3;
   color: #454545;
-  border-color: rgba(0, 0, 0, 0.05); }
+  border-color: rgba(0, 0, 0, 0.05);
+  text-align: left; }
   .ios .conversation-header .conversation-title {
     line-height: 64px; }
   .ios .conversation-header .avatar {
@@ -1347,9 +1377,11 @@ li.entry .error-icon-container {
     background-color: black; }
 .ios .bottom-bar {
   padding: 15px;
-  min-height: 30px; }
+  min-height: 30px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1); }
   .ios .bottom-bar form.send {
-    border-radius: 5px; }
+    border-radius: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.1); }
 .ios .control .content {
   padding: 10px; }
 .ios .bubble .content .body {
@@ -1361,7 +1393,7 @@ li.entry .error-icon-container {
   float: none;
   clear: both; }
 .ios .incoming .content {
-  background-color: #e5e5e5;
+  background-color: #e6e5ea;
   color: black;
   float: left; }
 .ios .outgoing .content {
@@ -1393,6 +1425,8 @@ li.entry .error-icon-container {
   .android #header.inactive {
     background-color: #f3f3f3;
     color: #454545; }
+.android .contact-details .name {
+  font-weight: 400; }
 .android .conversation.placeholder .conversation-header {
   display: none; }
 .android .conversation-header.red, .android .bubble.red {