Merge pull request #244 from github/ui-polish

Ui polish

src/app/grammar-view.coffee

@@ -4,7 +4,7 @@ SelectList = require 'select-list'
 module.exports =
 class GrammarView extends SelectList
 
-  @viewClass: -> "#{super} grammar-view from-top overlay"
+  @viewClass: -> "#{super} grammar-view from-top overlay mini"
 
   filterKey: 'name'
 

src/packages/bracket-matcher/stylesheets/bracket-matcher.css

@@ -1,12 +1,4 @@
-@-webkit-keyframes bracketmatch {
-  from { border-bottom-color: transparent; }
-  to { border-bottom-color: lime; }
-}
-
 .bracket-matcher {
   border-bottom: 1px dotted lime;
   position: absolute;
-  -webkit-animation-name: bracketmatch;
-  -webkit-animation-duration: 0.15s;
-  -webkit-animation-iteration-count: 2;
 }

src/packages/status-bar/stylesheets/status-bar.css

@@ -1,9 +0,0 @@
-.status-bar {
-  position: relative;
-  -webkit-user-select: none;
-  cursor: default;
-}
-
-.status-bar .git-branch {
-  float: right;
-}

static/command-panel.css

@@ -1,11 +1,12 @@
 .command-panel {
   padding: 5px;
+  position: relative;
 }
 
 .command-panel .preview-list {
   max-height: 300px;
   overflow: auto;
-  margin: 0 1px 5px 10px;
+  margin: 10px 0 10px 10px;
   position: relative;
   cursor: default;
 }
@@ -13,7 +14,10 @@
 .command-panel .preview-count {
   font-size: 11px;
   text-align: right;
-  padding-bottom: 1px;
+  position: absolute;
+  right: 15px;
+  top: 24px;
+  z-index: 9999;
 }
 
 .command-panel .preview-list .path {

static/overlay.css

@@ -1,15 +1,14 @@
 .overlay {
   position: absolute;
-  top: 0;
   left: 50%;
   width: 500px;
   margin-left: -250px;
-  background: #303030;
+  background: #202123;
   color: #eee;
   padding: 10px;
   z-index: 9999;
   box-sizing: border-box;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.05);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   border-radius: 3px;
 }
@@ -26,10 +25,19 @@
 .overlay.mini {
   width: 200px;
   margin-left: -100px;
+  font-size: 12px;
 }
 
 .overlay.from-top {
+  top: 0;
   border-top: none;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
+}
+
+.overlay.from-bottom {
+  bottom: 0;
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }

static/status-bar.css

@@ -1,16 +1,25 @@
 .status-bar {
-  padding: 4px 10px 3px;
+  padding: 5px 10px;
   font-size: 11px;
   line-height: 14px;
+  position: relative;
+  -webkit-user-select: none;
+  cursor: default;
+}
+
+.status-bar .git-branch {
+  float: right;
 }
 
 .status-bar .cursor-position,
 .status-bar .grammar-name {
-  padding-left: 10px;
+  margin-left: 10px;
 }
 
 .status-bar .grammar-name {
   cursor: pointer;
+  border: 1px solid transparent;
+  padding: 1px 2px;
 }
 
 .status-bar .branch-label {

themes/atom-dark-ui/command-panel.css

@@ -1,19 +1,24 @@
 .command-panel {
-  background-color: #303030;
-  border: 1px solid #252525;
+  background-color: #1b1c1e;
   color: #dedede;
+  border-top: 1px solid rgba(0, 0, 0, 0.5);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  padding: 10px;
 }
 
 .command-panel .preview-list {
-  background-color: #1e1e1e;
+  background-color: #19191b;
   color: #C5C8C6;
   border: 1px solid rgba(0, 0, 0, 0.5);
-  border-bottom: 1px solid rgba(180, 180, 180, 0.2);
-  border-right: 1px solid rgba(180, 180, 180, 0.2);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .command-panel .preview-count {
   color: #969696;
+  background: #161719;
+  padding: 5px;
+  border-radius: 3px;
 }
 
 .command-panel .preview-list li.selected, .command-panel .preview-list li.operation:hover {

themes/atom-dark-ui/editor.css

@@ -1,7 +1,7 @@
 .editor.mini {
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-bottom: 1px solid rgba(180, 180, 180, 0.2);
-  border-right: 1px solid rgba(180, 180, 180, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .editor .gutter.drop-shadow {

themes/atom-dark-ui/select-list.css

@@ -1,5 +1,5 @@
 .select-list ol li {
-  background-color: #292929;
+  background-color: #27292b;
   border-bottom: 1px solid #1e1e1e;
 }
 

themes/atom-dark-ui/status-bar.css

@@ -1,9 +1,16 @@
 .status-bar {
-  background-color: #303030;
-  border-top: 1px solid #454545;
+  background-color: #1b1c1e;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  border-top: 1px solid rgba(0, 0, 0, 0.8);
   color: #969696;
 }
 
+.status-bar .grammar-name:hover {
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+}
+
 .status-bar .git-status.octicons.modified-status-icon {
   color: #f78a46;
   display: inline-block;