Fix regex search and github integration status bar

index.less

@@ -26,6 +26,7 @@
 @import "styles/atom";
 @import "styles/buttons";
 @import "styles/editor";
+@import "styles/github";
 @import "styles/inputs";
 @import "styles/lists";
 @import "styles/messages";

styles/atom.less

@@ -18,15 +18,28 @@
     .source .regexp {
       color: @base-background-color;
     }
+
+    .syntax--text,
+    .syntax--source,
+    .syntax--string {
+      color: @base-background-color;
+    }
   }
 
   .btn-group-find .btn {
-    .button-variant(@text-color-info);
+    .button-variant(@base-background-color, @text-color-info);
   }
 
   .btn-group-replace .btn,
   .btn-group-replace-all .btn {
-    .button-variant(@text-color-warning);
+    .button-variant(@base-background-color, @text-color-warning);
+  }
+
+  .btn-toggle .btn {
+    // Pin padding and line height to avoid having them overwritten.
+    padding: 0 !important;
+    line-height: 1.75 !important;
+    .button-variant-inner(@base-background-color, @text-color-subtle, @text-color-highlight);
   }
 
   .find-meta-container {
@@ -102,7 +115,7 @@ kbd {
   + Select Forms +
   +--------------+*/
 select.form-control {
-  .button(@button-border-color);
+  .button(@base-background-color, @button-border-color);
   .text(normal);
   height: @input-height;
   line-height: @input-height;

styles/buttons.less

@@ -11,13 +11,7 @@ button,
 button.icon,
 .btn-default,
 .btn {
-  .button(@button-border-color);
-
-  &:focus,
-  &:active:focus {
-    outline: 0;
-    border: 1px solid @text-color-selected !important;
-  }
+  .button(@base-background-color, @button-border-color);
 
   &.btn-xs {
     font-size: 10px;
@@ -41,23 +35,23 @@ button.icon,
   }
 
   &.btn-error {
-    .button-variant(@text-color-error);
+    .button-variant(@base-background-color, @text-color-error);
   }
 
   &.btn-info {
-    .button-variant(@text-color-info);
+    .button-variant(@base-background-color, @text-color-info);
   }
 
   &.btn-primary {
-    .button-variant(@text-color-info);
+    .button-variant(@base-background-color, @text-color-info);
   }
 
   &.btn-success {
-    .button-variant(@text-color-success);
+    .button-variant(@base-background-color, @text-color-success);
   }
 
   &.btn-warning {
-    .button-variant(@text-color-warning);
+    .button-variant(@base-background-color, @text-color-warning);
   }
 
   &.status-indicator {

styles/github.less

@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2016-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2016-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Atom UI
+ * Repository: https://github.com/arcticicestudio/nord-atom-ui
+ * License:    MIT
+ * References:
+ *   https://atom.io/docs/api/latest/Atom
+ *   https://atom.io/docs
+ *   https://github.com/atom/atom/blob/master/static/variables/ui-variables.less
+ *   http://lesscss.org
+ */
+
+.github-CommitView-hardwrap,
+.github-StatusBarTile,
+.github-ChangedFilesCount,
+.github-branch,
+.github-PushPull {
+  border: none !important;
+
+  // Disable button effects, not the cleanes way.
+  color: @text-color !important;
+  background: @base-border-color !important;
+
+  cursor: pointer !important;
+}
+
+.github-BranchMenuView-select {
+  color: @text-color;
+}

styles/notifications.less

@@ -23,9 +23,10 @@ atom-notifications {
   .btn {
     height: 24px !important;
     line-height: 20px !important;
-
+    
     &.close-all {
-      .button-variant(@text-color-info);
+      .button-variant(@base-background-color, @text-color-info);
+      color: @text-color-info !important; // some other funky stuff going on.
     }
   }
 

styles/package-support/build.less

@@ -21,18 +21,18 @@
     opacity: 1;
 
     .btn {
-      .button(@button-border-color);
+      .button(@base-background-color, @button-border-color);
 
       &.icon-zap {
-        .button-variant(@text-color-info);
+        .button-variant(@base-background-color, @text-color-info);
       }
 
       &.icon-trashcan {
-        .button-variant(@text-color-warning);
+        .button-variant(@base-background-color, @text-color-warning);
       }
 
       &.icon-x {
-        .button(@button-border-color);
+        .button(@base-background-color, @button-border-color);
       }
     }
   }

styles/panels.less

@@ -51,26 +51,26 @@ atom-panel-container {
   border-radius: 0;
 
   & .btn {
-    .button(@button-border-color);
+    .button(@base-background-color, @button-border-color);
 
     &.btn-primary {
-      .button-variant(@text-color-info);
+      .button-variant(@base-background-color, @text-color-info);
     }
 
     &.btn-info {
-      .button-variant(@text-color-info);
+      .button-variant(@base-background-color, @text-color-info);
     }
 
     &.btn-success {
-      .button-variant(@text-color-success);
+      .button-variant(@base-background-color, @text-color-success);
     }
 
     &.btn-warning {
-      .button-variant(@text-color-warning);
+      .button-variant(@base-background-color, @text-color-warning);
     }
 
     &.btn-error {
-      .button-variant(@text-color-error);
+      .button-variant(@base-background-color, @text-color-error);
     }
 
     font-size: 11px !important;

styles/status-bar.less

@@ -15,10 +15,14 @@ status-bar {
   font-size: 11px;
 
   & > .flexbox-repaint-hack {
-    padding-top: 3px;
+    padding-top: 2px;
   }
 
   span {
     font-size: 11px;
   }
+
+  .package-updates-status-view {
+    cursor: pointer !important;
+  }
 }

styles/ui-mixins.less

@@ -10,81 +10,66 @@
 /*+---------+
   + Buttons +
   +---------+*/
-.button(@color) {
+.button(@background-color, @highlight-color) {
   color: @text-color;
   font-size: 12px;
   font-weight: 400;
-  background: transparent;
+  background: @background-color;
   height: @input-height;
   line-height: @input-height;
   border-radius: @component-border-radius;
-  border-color: @color;
-  border-width: 1px !important;
-  border-style: solid !important;
+  border: 1px solid @highlight-color !important;
   box-shadow: none !important;
   transition: all @transition-time ease;
   padding: 0 10px;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus,
-  &:hover {
-    color: @base-background-color !important;
-    background: @color !important;
-    border-color: @color !important;
-  }
-
+  cursor: pointer;
+
+  &:hover,
   &:active,
-  &:active:focus {
-    color: @base-background-color;
-    background: @color;
-    border: 1px solid @text-color-selected !important;
-  }
-
   &.selected {
-    color: @base-background-color;
-    background: @button-background-color-selected;
-    border: 1px solid @color !important;
-
-    &:hover {
-      color: @base-background-color !important;
-      border: 1px solid @text-color-highlight !important;
-      background: @color !important;
-    }
+    color: @background-color;
+    background: @highlight-color;
   }
-
+
+  &:focus {
+    outline: none;
+  }
+
   &[disabled],
   &.disabled {
     opacity: 1;
     background-color: transparent !important;
     border-color: transparent !important;
     color: @text-color-subtle !important;
+    cursor: default;
   }
 }
 
-.button-variant(@color) {
-  .button(@color);
-  color: @color !important;
-  border-color: @color !important;
-  background: transparent;
+// Colored buttons with same content color as highlight-color.
+.button-variant(@base-background-color, @highlight-color) {
+  .button(@base-background-color, @highlight-color);
+  color: @highlight-color;
+}
 
+// Only highlight inner content on hover, then everything on selected.
+.button-variant-inner(@background-color, @base-color, @highlight-color) {
+  .button(@background-color, @highlight-color);
+  color: @base-color;
+
+  // No idea why this works, but without it find and replace buttons stay 
+  // toggeled on until something else is focused.
+  // Copied idea from one-dark-ui theme.
+  background-image: linear-gradient(@background-color, @background-color);
+
   &:hover {
-    border-color: @color !important;
+    color: @highlight-color;
+    background-color: @background-color;
   }
-
+
+  &:active,
   &.selected {
-    color: @base-background-color !important;
-    background: @color !important;
-  }
-
-  &[disabled],
-  &.disabled {
-    opacity: 1;
-    background-color: transparent !important;
-    border-color: transparent !important;
-    color: @text-color-subtle !important;
+    color: @background-color;
+    background-color: @highlight-color;
   }
 }
 

styles/ui-theme-settings.less

@@ -33,7 +33,8 @@
       background-color: @theme-setting-formfocuseffect-background-color;
 
       .syntax--text,
-      .syntax--source {
+      .syntax--source,
+      .syntax--string {
         color: @text-color;
 
         .regexp {

styles/ui-variables.less

@@ -52,7 +52,7 @@
   + Components +
   +------------+*/
 /*+--- Button ---+*/
-@button-background-color: transparent;
+@button-background-color: @base-background-color;
 @button-background-color-hover: @input-border-color;
 @button-background-color-selected: @input-border-color;
 @button-border-color: @input-border-color;