dark tables and login

app/catalog-tab/index/template.hbs

@@ -22,7 +22,7 @@
 
 <div class="row">
   <div class="col span-3">
-    <div class="catalog-search">
+    <div class="catalog-search box">
       <div class="mb-15">
         <label>{{t 'catalogPage.index.search.label'}}</label>
         <div class="input-group full-width">

app/components/sortable-table/template.hbs

@@ -1,4 +1,4 @@
-<table class="fixed grid sortable-table striped {{if bulkActions 'has-actions'}} {{if groupByKey 'basic-table'}} {{if subRows 'has-sub-rows'}}">
+<table class="fixed grid sortable-table basic-table {{if bulkActions 'has-actions'}} {{if groupByKey 'basic-table'}} {{if subRows 'has-sub-rows'}}">
   <thead>
     <tr class="fixed-header-placeholder">
       {{#if bulkActions}}

app/styles/components/_forms.scss

@@ -91,10 +91,6 @@ textarea {
     }
 }
 
-input[type='search'] {
-    width: auto;
-}
-
 ///inline forms
 .inline-form {
     .col-inline {

app/styles/components/_login.scss

@@ -1,29 +1,50 @@
 .login {
-  background-color: white;
-  color: $text-color;
-  margin: 100px auto 0 auto;
-  padding: 40px;
-  max-width: 440px;
-  position: relative;
-  text-align: center;
-  box-shadow: 0 0 10px rgba($dark-grey, .25);
-
-  h1 {
-    span {
-      @extend .text-small;
-      padding-top: 10px;
-      display: block;
+    background-color: $body-bg;
+    color: $text-color;
+    margin: 100px auto 0 auto;
+    padding: 40px;
+    max-width: 440px;
+    position: relative;
+    text-align: center;
+    box-shadow: 0 0 10px rgba($dark-grey, .25);
+    h1 {
+        span {
+            @extend .text-small;
+            padding-top: 10px;
+            display: block;
+        }
     }
-  }
-
-  .language-dropdown {
-    ul {
-      margin-left: -5px;
+    .language-dropdown {
+        ul {
+            margin-left: -5px;
+        }
+        > a {
+            border: solid $link-color 2px;
+            white-space: line-wrap;
+        }
+    }
+}
+
+//if dark
+.theme-ui-dark {
+    h1 + span {
+        color: $body-bg!important; //auth hidden text
+    }
+    &.container-farm {
+      background: $body-bg;
+        &:before {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            top: 0;
+            background: url('images/login-containerfarm-fullcolor.svg') center center no-repeat;
+            -webkit-filter: grayscale(0.95) opacity(0.15);
+            -moz-filter: grayscale(0.95) opacity(0.15);
+            -o-filter: grayscale(0.95) opacity(0.15);
+            -ms-filter: grayscale(0.95) opacity(0.15);
+            filter: grayscale(0.95) opacity(0.15);
+        }
     }
-
-    > a {
-      border: solid $link-color 2px;
-      white-space: line-wrap;
-    }
-  }
 }

app/styles/components/_tables.scss

@@ -104,6 +104,10 @@ TABLE {
         width: 100%;
         z-index: 1;
         background: $body-bg;
+
+        input[type='search'] {
+            width: auto;
+        }
     }
 
     .fixed-header {