You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by ma...@apache.org on 2017/09/15 15:15:49 UTC

[4/4] atlas git commit: ATLAS-2102 : Atlas UI Improvements: Search results page. patch has (ATLAS-2103, 2104, 2105, 2107, 2108)

ATLAS-2102 : Atlas UI Improvements: Search results page. patch has (ATLAS-2103,2104,2105,2107,2108)

Signed-off-by: Madhan Neethiraj <ma...@apache.org>


Project: http://git-wip-us.apache.org/repos/asf/atlas/repo
Commit: http://git-wip-us.apache.org/repos/asf/atlas/commit/3a47ea6b
Tree: http://git-wip-us.apache.org/repos/asf/atlas/tree/3a47ea6b
Diff: http://git-wip-us.apache.org/repos/asf/atlas/diff/3a47ea6b

Branch: refs/heads/branch-0.8
Commit: 3a47ea6bb0d7687854475cf99269a55c5d525445
Parents: 8a4d714
Author: kevalbhatt <kb...@apache.org>
Authored: Fri Sep 15 19:42:40 2017 +0530
Committer: Madhan Neethiraj <ma...@apache.org>
Committed: Fri Sep 15 08:15:35 2017 -0700

----------------------------------------------------------------------
 dashboardv2/public/css/scss/__mixin.scss        |  71 +++
 dashboardv2/public/css/scss/breadcrumb.scss     |  10 +-
 .../public/css/scss/business-catlog.scss        |  56 ++-
 dashboardv2/public/css/scss/form.scss           | 287 +++++++++----
 dashboardv2/public/css/scss/graph.scss          |  11 +-
 dashboardv2/public/css/scss/loader.scss         |  11 +
 dashboardv2/public/css/scss/login.scss          |  19 +-
 dashboardv2/public/css/scss/main.scss           | 275 +-----------
 dashboardv2/public/css/scss/nav.scss            |  12 +-
 dashboardv2/public/css/scss/old-style.scss      |  10 +-
 dashboardv2/public/css/scss/override.scss       | 141 +++---
 dashboardv2/public/css/scss/profile-table.scss  |   3 +-
 dashboardv2/public/css/scss/search.scss         |  46 +-
 dashboardv2/public/css/scss/style.scss          |   3 +-
 dashboardv2/public/css/scss/tab.scss            |  39 +-
 dashboardv2/public/css/scss/tag.scss            | 326 +-------------
 dashboardv2/public/css/scss/theme.scss          | 244 ++++++++++-
 dashboardv2/public/css/scss/tree.scss           |  13 +-
 dashboardv2/public/js/router/Router.js          |  17 +-
 .../audit/AuditTableLayoutView_tmpl.html        |  33 +-
 .../audit/CreateAuditTableLayoutView_tmpl.html  |   2 +-
 .../business_catalog/AddTermView_tmpl.html      |  22 +-
 .../BusinessCatalogDetailLayoutView_tmpl.html   |   6 +-
 .../business_catalog/TreeLayoutView_tmpl.html   |   4 +-
 .../js/templates/common/TableLayout_tmpl.html   |  61 ++-
 .../js/templates/common/buttons_tmpl.html       |  19 +
 .../public/js/templates/common/modal.html       |   4 +-
 .../detail_page/DetailPageLayoutView_tmpl.html  |  32 +-
 .../entity/CreateEntityLayoutView_tmpl.html     |   8 +-
 .../templates/graph/LineageLayoutView_tmpl.html |   6 +-
 .../schema/SchemaTableLayoutView_tmpl.html      |   2 +-
 .../search/AdvancedSearchInfo_tmpl.html         |  38 +-
 .../templates/search/SearchLayoutView_tmpl.html |  12 +-
 .../search/SearchResultLayoutView_tmpl.html     |  94 ++--
 .../templates/tag/AddTagAttributeView_tmpl.html |   6 +-
 .../tag/TagAttributeDetailLayoutView_tmpl.html  |  29 +-
 .../tag/TagAttributeItemView_tmpl.html          |  10 +-
 .../js/templates/tag/TagLayoutView_tmpl.html    |   6 +-
 .../js/templates/tag/addTagModalView_tmpl.html  |   2 +-
 .../templates/tag/createTagLayoutView_tmpl.html |  49 ++-
 .../public/js/utils/CommonViewFunction.js       |  61 ++-
 dashboardv2/public/js/utils/Messages.js         |  16 +-
 dashboardv2/public/js/utils/Overrides.js        | 104 ++++-
 dashboardv2/public/js/utils/TableLayout.js      |  93 ++--
 dashboardv2/public/js/utils/Utils.js            |  71 ++-
 .../js/views/audit/AuditTableLayoutView.js      |  33 +-
 .../views/audit/CreateAuditTableLayoutView.js   |  11 +-
 .../BusinessCatalogDetailLayoutView.js          |   2 +-
 .../views/business_catalog/SideNavLayoutView.js |   4 +-
 .../js/views/business_catalog/TreeLayoutView.js |  88 ++--
 .../views/detail_page/DetailPageLayoutView.js   |  19 +-
 .../js/views/entity/CreateEntityLayoutView.js   |  12 +-
 .../public/js/views/schema/SchemaLayoutView.js  |  27 +-
 .../public/js/views/search/SearchLayoutView.js  |  58 ++-
 .../public/js/views/search/SearchQueryView.js   |  15 +-
 .../js/views/search/SearchResultLayoutView.js   | 427 +++++++++++--------
 .../views/tag/TagAttributeDetailLayoutView.js   |  18 +-
 .../public/js/views/tag/TagDetailLayoutView.js  |   6 +-
 .../js/views/tag/TagDetailTableLayoutView.js    |  10 +-
 .../public/js/views/tag/TagLayoutView.js        |  87 ++--
 .../public/js/views/tag/addTagModalView.js      |   2 +-
 61 files changed, 1713 insertions(+), 1490 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/__mixin.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/__mixin.scss b/dashboardv2/public/css/scss/__mixin.scss
new file mode 100644
index 0000000..9b84f08
--- /dev/null
+++ b/dashboardv2/public/css/scss/__mixin.scss
@@ -0,0 +1,71 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin clearfix() {
+    &:before,
+    &:after {
+        content: " "; // 1
+        display: table; // 2
+    }
+    &:after {
+        clear: both;
+    }
+}
+
+@mixin ellipsis() {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+@mixin transition($transition...) {
+    -webkit-transition: $transition;
+    -moz-transition: $transition;
+    -o-transition: $transition;
+    transition: $transition;
+}
+
+@mixin transition-property($properties...) {
+    -webkit-transition-property: $properties;
+    -moz-transition-property: $properties;
+    -o-transition-property: $properties;
+    transition-property: $properties;
+}
+
+@mixin btn-action-effect($color) {
+    @if $color=='default' {
+        border: 1px $color_keppel_approx solid;
+        color: $color_keppel_approx;
+    }
+
+    @else if $color=='blue' {
+        border: 1px $color_havelock_blue_approx solid;
+        color: $color_havelock_blue_approx;
+    }
+}
+
+@mixin btn-action-hover-effect($color1) {
+    @if $color1=='default' {
+        background-color: $color_keppel_approx;
+        color: $white;
+    }
+
+    @else if $color1=='blue' {
+        color: $white;
+        background-color: $tag_color;
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/breadcrumb.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/breadcrumb.scss b/dashboardv2/public/css/scss/breadcrumb.scss
index dbd17b4..4bb09db 100644
--- a/dashboardv2/public/css/scss/breadcrumb.scss
+++ b/dashboardv2/public/css/scss/breadcrumb.scss
@@ -25,9 +25,9 @@
     margin-bottom: 0;
     font-weight: 600;
     line-height: 44px;
-    > li {
+    >li {
         display: inline-block;
-        + li:before {
+        +li:before {
             padding: 0 10px;
             font-family: $font_2;
             color: $color_ironside_gray_approx;
@@ -37,8 +37,8 @@
 }
 
 .breadcrumb-menu,
-.breadcrumb-dropdown + li:before,
-.breadcrumb-ellipsis + li:before {
+.breadcrumb-dropdown+li:before,
+.breadcrumb-ellipsis+li:before {
     display: none;
 }
 
@@ -59,4 +59,4 @@
 
 .breadcrumb>li:last-child a {
     color: #b4b7bc;
-}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/business-catlog.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/business-catlog.scss b/dashboardv2/public/css/scss/business-catlog.scss
index 8e68fc1..7e43f64 100644
--- a/dashboardv2/public/css/scss/business-catlog.scss
+++ b/dashboardv2/public/css/scss/business-catlog.scss
@@ -22,10 +22,8 @@
 .main-search {
     .form-control {
         border: none;
-        border-left: 1px $color_mystic_approx solid;
-        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-        border-radius: 0;
-        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        border-left: 1px $color_mystic_approx solid; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
         box-shadow: none;
         height: 60px;
         font-size: 18px;
@@ -47,12 +45,11 @@
     display: block !important;
 }
 
-.dropdown-menu > li > a {
+.dropdown-menu>li>a {
     color: $color_jungle_green_approx;
     padding: 6px 20px;
-    text-overflow: ellipsis;
     max-width: 276px;
-    overflow: hidden;
+    @include ellipsis();
 }
 
 .branchListParent {
@@ -81,10 +78,8 @@ ul[data-id=branchList] {
     padding-bottom: 18px;
     display: list-item;
     .form-control {
-        border-right: none;
-        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
-        box-shadow: none;
-        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-right: none; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: none; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
         border-radius: 4px;
     }
     .input-group-addon {
@@ -96,14 +91,37 @@ ul[data-id=branchList] {
     padding-bottom: 5px;
 }
 
-.lineageLabel {
-    padding-bottom: 10px;
-}
-
-.detailLabel {
-    padding-bottom: 10px;
-}
-
 .termNote {
     padding-top: 10px;
 }
+
+.termTableBreadcrumb {
+    >div {
+        @include clearfix();
+        display: block;
+        width: 100%;
+    }
+    .hide {
+        opacity: 0;
+        overflow: hidden;
+        height: 0px;
+        display: block !important;
+    }
+    .show {
+        opacity: 1;
+        overflow: visible;
+        height: auto;
+    }
+    .liContent {
+        float: left;
+        line-height: 21px !important;
+        padding: 0px 10px 0px 0px !important;
+    }
+    >div a {
+        .fa-trash,
+        .fa-ellipsis-h {
+            color: $tag_color;
+            cursor: pointer;
+        }
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/form.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/form.scss b/dashboardv2/public/css/scss/form.scss
index 9989e7c..b83fb9c 100644
--- a/dashboardv2/public/css/scss/form.scss
+++ b/dashboardv2/public/css/scss/form.scss
@@ -19,15 +19,52 @@
 
 /* form.scss */
 
-.form-control {
-    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-    background-color: $color_white_lilac_approx;
-    border: 1px $color_mystic_approx solid;
-    &:focus {
-        border-color: $color_bali_hai_approx;
-        outline: 0;
-        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
-        box-shadow: inset 0 1px 1px $black_7_5, 0 0 2px $color_bali_hai_approx;
+.form-horizontal {
+    .control-label-sm {
+        padding-top: 3px;
+    }
+    .control-label-sm-pl {
+        @extend .control-label-sm;
+        padding-left: 10px;
+    }
+    .control-label-sm-pr {
+        @extend .control-label-sm;
+        padding-right: 10px;
+    }
+}
+
+.form-group {
+    .required:after {
+        content: "*";
+        padding-left: 1%;
+        color: $red
+    }
+
+    .control-label {
+        &.text-left {
+            text-align: left;
+        }
+        &.text-right {
+            text-align: right;
+        }
+    }
+
+    .form-control {
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        background-color: $color_mystic_approx;
+        border: 1px $color_mystic_approx solid;
+        &:focus {
+            border-color: $color_bali_hai_approx;
+            outline: 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+            box-shadow: inset 0 1px 1px $black_7_5, 0 0 2px $color_bali_hai_approx;
+        }
+    }
+}
+
+.form-color {
+    .form-group span[class^="select2-selection select2-selection--"],
+    .form-control {
+        background-color: #e8e8e8 !important;
     }
 }
 
@@ -51,13 +88,28 @@ textarea {
     }
 }
 
+label {
+    font-weight: 600;
+}
+
 button:focus {
     outline: none !important;
 }
 
 .btn {
     //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-    border-radius: 0;
+    border-radius: 4px;
+    &:hover {
+        text-decoration: none;
+    }
+}
+
+[class^="col-md-"],
+[class^="col-sm-"] {
+    .btn.checkbox-inline,
+    .btn.radio-inline {
+        padding-left: 19px;
+    }
 }
 
 .btn-primary {
@@ -80,6 +132,11 @@ button:focus {
         background-color: $color_jungle_green_approx;
         border-color: $color_jungle_green_approx;
     }
+    &:focus {
+        color: $white;
+        background-color: $color_jungle_green_approx;
+        border-color: $color_jungle_green_approx;
+    }
 }
 
 .btn-info {
@@ -91,6 +148,11 @@ button:focus {
         background-color: $color_curious_blue_approx;
         border-color: $color_curious_blue_approx;
     }
+    &:focus {
+        color: $white;
+        background-color: $color_curious_blue_approx;
+        border-color: $color_curious_blue_approx;
+    }
 }
 
 .btn-warning {
@@ -102,6 +164,11 @@ button:focus {
         background-color: $color_gamboge_approx;
         border-color: $color_gamboge_approx;
     }
+    &:focus {
+        color: $white;
+        background-color: $color_gamboge_approx;
+        border-color: $color_gamboge_approx;
+    }
 }
 
 .btn-danger {
@@ -113,79 +180,161 @@ button:focus {
         background-color: $color_grenadier_approx;
         border-color: $color_grenadier_approx;
     }
+    &:focus {
+        color: $white;
+        background-color: $color_grenadier_approx;
+        border-color: $color_grenadier_approx;
+    }
 }
 
 .btn-atlas {
     padding: 10px 20px;
     background-color: $color_keppel_approx;
     color: $white;
-    border: 1px $color_keppel_approx solid;
-    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-    border-radius: 4px;
-    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+    margin-bottom: 10px;
+    border: 1px $color_keppel_approx solid; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 4px; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
     transition: all .3s ease;
     margin: 2px;
-    &.cancel {
+    &:hover {
+        @include btn-action-effect('default');
         background-color: $transparent;
-        color: $color_keppel_approx;
-        &:hover {
-            color: $color_keppel_approx;
-            background-color: $transparent;
-        }
-        &:focus {
-            background-color: $transparent;
-            color: $color_keppel_approx;
-        }
     }
     &:focus {
-        background-color: $color_keppel_approx;
-        color: $white;
+        @include btn-action-effect('default');
+        background-color: $transparent;
     }
-    &:hover {
-        color: $white;
+    &.btn-sm {
+        padding: 2px 6px;
+    }
+    &.btn-md {
+        padding: 5px 10px;
     }
 }
 
-.btn-tag {
-    color: $color_havelock_blue_approx;
-    border: 1px $color_havelock_blue_approx solid;
-    background-color: $white;
-    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-    border-radius: 4px;
-    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
-    transition: all .3s ease;
-    &:hover {
-        color: $white;
-        background-color: $color_havelock_blue_approx;
+.btn-inline {
+    .btn-action {
+        margin: 0px 3px 3px 0px;
+        display: inline-block;
     }
 }
 
-.btn-atlasAction {
-    background-color: $transparent;
-    color: $color_keppel_approx;
-    margin-bottom: 10px;
+.btn-fixed-width {
+    .btn-icon>span {
+        @include ellipsis();
+        float: left;
+        width: 100px;
+        padding: 2px 5px !important;
+    }
+    >i {
+        float: right;
+    }
+}
+
+.btn-action {
+    @extend .btn-atlas;
+    @include btn-action-effect('default');
     border-radius: 4px;
-    padding: 5px 10px;
+    font-size: 14px;
+    background-color: $transparent;
     &.active {
-        background-color: $color_keppel_approx;
-        color: $white;
+        @include btn-action-hover-effect('default');
     }
+
     &:hover {
-        background-color: $color_keppel_approx;
-        color: $white;
+        @include btn-action-hover-effect('default');
+        color: $white !important;
     }
+
     &:focus {
-        background-color: $transparent;
-        color: $color_keppel_approx;
+        @include btn-action-effect('default');
+    }
+
+    &.btn-sm {
+        padding: 2px 6px;
+    }
+    &.btn-md {
+        padding: 5px 10px;
+    }
+
+    &.btn-blue {
+        @include btn-action-effect('blue');
+        &.active {
+            @include btn-action-hover-effect('blue');
+        }
+        &:hover {
+            @include btn-action-hover-effect('blue');
+        }
+        &:focus {
+            @include btn-action-effect('blue');
+        }
+        &.btn-icon {
+            @include btn-action-effect('blue');
+            color: $tag_color !important;
+            &:hover {
+                color: $color_havelock_blue_approx;
+                background-color: $transparent;
+            }
+            >span {
+                &:hover {
+                    @include btn-action-hover-effect('blue');
+                }
+            }
+            i.fa {
+                &:hover {
+                    @include btn-action-hover-effect('blue');
+                }
+            }
+        }
+    }
+
+    &.btn-disabled {
+        border: 1px $action_gray solid;
+        color: $action_gray;
+        cursor: default;
+        i.fa {
+            position: relative;
+            right: -5px;
+        }
+        &:hover {
+            color: $white;
+            background-color: $action_gray;
+        }
     }
-}
 
-.input-spacing {
-    padding-bottom: 10px!important;
+    &.btn-icon {
+        padding: 0px;
+        overflow: hidden;
+        background-color: $transparent;
+        &:hover {
+            color: $color_keppel_approx;
+            background-color: $transparent;
+        }
+        >span {
+            padding: 5px;
+            &:hover {
+                @include btn-action-hover-effect('default');
+            }
+        }
+        i.fa {
+            position: relative;
+            padding: 5px;
+            cursor: pointer;
+            &:hover {
+                @include btn-action-hover-effect('default');
+            }
+        }
+    }
+    &.btn-icon-pd {
+        i.fa {
+            padding: 5px;
+            cursor: pointer;
+        }
+    }
 }
 
-.pagination > .active {
-    > a {
+.pagination>.active {
+    >a {
         background-color: $color_curious_blue_approx;
         border-color: $color_curious_blue_approx;
         &:focus {
@@ -197,7 +346,8 @@ button:focus {
             border-color: $color_curious_blue_approx;
         }
     }
-    > span {
+
+    >span {
         background-color: $color_curious_blue_approx;
         border-color: $color_curious_blue_approx;
         &:focus {
@@ -218,9 +368,10 @@ button:focus {
     margin: 5px 10px;
     &:hover {
         border-color: $color_mountain_mist_approx;
-        color: $color_mountain_mist_approx;
+        color: $color_mountain_mist_approx !important;
         background-color: $transparent;
     }
+
     &:focus {
         border-color: $color_mountain_mist_approx;
         color: $color_mountain_mist_approx;
@@ -232,22 +383,6 @@ button:focus {
     display: block !important;
 }
 
-.editBtn {
-    border-color: $color_mountain_mist_approx;
-    color: $color_mountain_mist_approx;
-    cursor: default;
-    margin: 5px 10px;
-    font-size: 14px;
-    cursor: pointer;
-    padding: 0px 5px;
-    &:hover {
-        border-color: $color_mountain_mist_approx;
-        color: $color_mountain_mist_approx;
-        background-color: $transparent;
-    }
-    &:focus {
-        border-color: $color_mountain_mist_approx;
-        color: $color_mountain_mist_approx;
-        background-color: $transparent;
-    }
-}
+.list-style-disc {
+    list-style: disc;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/graph.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss
index 3e55b96..2d7e8a3 100644
--- a/dashboardv2/public/css/scss/graph.scss
+++ b/dashboardv2/public/css/scss/graph.scss
@@ -94,8 +94,7 @@
     background: $black_80;
     color: $white;
     z-index: 999;
-    max-width: 300px;
-    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    max-width: 300px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
     border-radius: 2px;
     .tip-inner-scroll {
         overflow: auto;
@@ -108,7 +107,7 @@
     }
 }
 
-g.type-TK > rect {
+g.type-TK>rect {
     fill: $color_bright_turquoise_approx;
 }
 
@@ -120,9 +119,9 @@ g.type-TK > rect {
 }
 
 .legends {
-    > i {
-        > span {
+    >i {
+        >span {
             font-family: 'Source Sans Pro';
         }
     }
-}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/loader.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/loader.scss b/dashboardv2/public/css/scss/loader.scss
index ff8b890..43f15fd 100644
--- a/dashboardv2/public/css/scss/loader.scss
+++ b/dashboardv2/public/css/scss/loader.scss
@@ -45,6 +45,17 @@
     }
 }
 
+.contentLoading {
+    position: absolute;
+    background: rgba(247, 247, 247, 0.24);
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 99;
+    bottom: 0;
+    display: none;
+}
+
 .fontLoader {
     top: 50%;
     left: 50%;

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/login.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/login.scss b/dashboardv2/public/css/scss/login.scss
index b917d46..926c272 100644
--- a/dashboardv2/public/css/scss/login.scss
+++ b/dashboardv2/public/css/scss/login.scss
@@ -45,8 +45,7 @@
     padding: 15px;
     background: $color_tuna_approx;
     color: $color_gallery_approx;
-    padding: 15px;
-    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    padding: 15px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
     border-radius: 5px;
     h2 {
         margin-bottom: 40px;
@@ -55,21 +54,19 @@
         margin: 20px 0;
     }
     .form-control {
-        background-color: transparent;
-        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        background-color: transparent; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
         border-radius: 0;
         border-left: none;
         color: $color_gallery_approx;
         &:focus {
             border-color: $color_celeste_approx;
-            + .input-group-addon {
+            +.input-group-addon {
                 border-color: $color_cornflower_blue_approx;
             }
         }
     }
     .input-group-addon {
-        background-color: transparent;
-        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        background-color: transparent; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
         border-radius: 0;
         border-right: none;
         color: $color_celeste_approx;
@@ -78,10 +75,8 @@
         padding: 10px 20px;
         background-color: $color_keppel_approx;
         color: $white;
-        border: 1px $color_keppel_approx solid;
-        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-        border-radius: 4px;
-        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+        border: 1px $color_keppel_approx solid; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 4px; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
         transition: all .3s ease;
     }
 }
@@ -93,4 +88,4 @@ button:focus {
 .form-control:focus {
     //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
     box-shadow: none;
-}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/main.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/main.scss b/dashboardv2/public/css/scss/main.scss
index 83c2a5a..c52abb4 100644
--- a/dashboardv2/public/css/scss/main.scss
+++ b/dashboardv2/public/css/scss/main.scss
@@ -31,6 +31,7 @@ $color_celeste_approx: #ccc;
 $color_cornflower_blue_approx: #66afe9;
 $color_mystic_approx: #e8e9ee;
 $color_jungle_green_approx: #38BB9B;
+$color_jungle_green_light:#7ed3be;
 $color_froly_approx: #ee6e73;
 $color_manatee_approx: #9398a0;
 $black: #000;
@@ -105,203 +106,14 @@ $tag_color:#4A90E2;
 $delete_link:#BB5838;
 //urls
 $url_0: url(img/loading.gif);
-.card {
-    background: $white none repeat scroll 0 0;
-    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
-    box-shadow: 0 1px 3px $black_30;
-    margin-bottom: 30px;
-}
 
-body {
-    font-family: $font_0, $font_1;
-    color: $color_ironside_gray_approx;
-}
+$switchTransition: .4s ease-out;
 
-.gray-bg {
-    background-color: #f6f7fb;
-    padding-bottom: 4%;
-}
-
-header {
-    background-color: $white;
-    border-bottom: 1px $color_mystic_approx solid;
-}
-
-a {
-    color: $color_jungle_green_approx;
-    &:focus {
-        color: $color_puerto_rico_approx;
-        text-decoration: none;
-        outline: none;
-    }
-    &:hover {
-        color: $color_puerto_rico_approx;
-        text-decoration: none;
-    }
-}
-
-th {
-    text-transform: capitalize;
-}
-
-ul {
-    list-style: none;
-}
-
-.table {
-    background-color: $white;
-    .table {
-        width: auto;
-    }
-}
-
-.close {
-    font-size: 2em;
-}
-
-#sideNav-wrapper {
-    color: $white;
-    font-size: 16px !important;
-}
-
-.contentLoading {
-    position: absolute;
-    background: rgba(247, 247, 247, 0.24);
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 99;
-    bottom: 0;
-    display: none;
-}
-
-.auditDetailBtn {
-    padding: 5px 10px;
-    font-size: 14px;
-    line-height: 1;
-    color: $color_jungle_green_approx;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    border-radius: 4px;
-    font-weight: 100;
-    background-color: $transparent;
-    border: 1px solid $color_jungle_green_approx;
-    cursor: pointer;
-    &+.auditDetailBtn {
-        margin-left: 5px;
-    }
-}
-
-.add-seperator {
-    margin-bottom: 10px;
-    border-bottom: 1px solid $color_mirage_approx
-}
-
-.termTableBreadcrumb {
-    /* min-width: 200px; */
-    /*   width: 200px; */
-    /*  display: inline-block; */
-    i {
-        cursor: pointer;
-    }
-    >div {
-        display: inline-block;
-        // padding: 10px 0px;
-        width: 100%;
-    }
-    .hide {
-        opacity: 0;
-        overflow: hidden;
-        height: 0px;
-        display: block !important;
-    }
-    .show {
-        opacity: 1;
-        overflow: visible;
-        height: auto;
-    }
-    .liContent {
-        /*  width: 150px; */
-        float: left;
-        line-height: 21px !important;
-        padding: 0px 10px 0px 0px !important;
-    }
-}
-
-.table-quickMenu > tbody > tr > td {
-    &.searchTerm {
-        overflow: visible;
-    }
-    &.searchTag {}
-}
-
-.tab-content >.tab-pane {
-    display: block;
-    opacity: 0;
-    height: 0;
-    padding: 0px;
-    overflow: hidden;
-    &.active {
-        padding: 25px;
-        opacity: 1;
-        height: auto;
-        overflow: auto;
-    }
-}
-
-.ellipsis {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    margin-bottom: 10px;
-}
-
-.modal-body {
-    .table {
-        table-layout: fixed;
-        word-wrap: break-word;
-    }
-}
-
-.readOnlyLink {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    .deleteBtn {
-        padding: 0px 5px;
-    }
-    a {
-        color: $delete_link;
-    }
-}
 
 .readOnly {
-    .addTag-dropdown {
-        display: none;
-    }
-    span {
-        &.inputTag[data-id="tagClick"] {
-            span {
-                display: block;
-                padding: 3px 5px 3px 5px;
-            }
-            i.fa-close[data-id="deleteTag"] {
-                display: none;
-            }
-        }
-    }
+    span,
+    button,
     a {
-        &.inputTagAdd[data-id="addTag"] {
-            display: none;
-        }
-        &.inputTag[data-id="tagClick"] {
-            span {
-                display: block;
-                padding: 3px 5px 3px 5px;
-            }
-            i.fa-times[data-id="delete"] {
-                display: none;
-            }
-        }
         i {
             &.fa-trash[data-guid] {
                 display: none;
@@ -310,11 +122,9 @@ ul {
                 display: none;
             }
         }
-        &.inputAssignTag[data-id="addTerm"] {
+        &.btn[data-id="addTag"] {
             display: none;
         }
-    }
-    button {
         &.editbutton[data-id="editButton"] {
             display: none !important;
         }
@@ -322,64 +132,19 @@ ul {
         &[data-id="edit"] {
             display: none;
         }
+        &.btn[data-id="addTerm"] {
+            display: none;
+        }
+        &.btn[data-id="tagClick"] {
+            span {
+                display: block;
+                padding: 3px 5px 3px 5px;
+            }
+            i.fa-close[data-id="deleteTag"],
+            i.fa-times[data-id="deleteTag"],
+            i.fa-times[data-id="delete"] {
+                display: none;
+            }
+        }
     }
-}
-
-@media (min-width: 768px) {
-    .col-sm-custom {
-        //width: 92%;
-        margin: 25px 25px 0px;
-        position: relative;
-    }
-}
-
-.panel-fullscreen {
-    position: fixed;
-    height: 100%;
-    top: 0px;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    right: 0;
-    z-index: 999;
-}
-
-.no-padding {
-    padding: 0px !important;
-}
-
-.no-padding-bottom {
-    padding-bottom: 0px !important;
-}
-
-.no-padding-top {
-    padding-top: 0px !important;
-}
-
-.no-padding-left {
-    padding-left: 0px !important;
-}
-
-.no-padding-right {
-    padding-right: 0px !important;
-}
-
-.no-margin {
-    margin: 0px !important;
-}
-
-.no-margin-bottom {
-    margin-bottom: 0px !important;
-}
-
-.no-margin-top {
-    margin-top: 0px !important;
-}
-
-.no-margin-left {
-    margin-left: 0px !important;
-}
-
-.no-margin-right {
-    margin-right: 0px !important;
-}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/nav.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/nav.scss b/dashboardv2/public/css/scss/nav.scss
index 524e2b8..0385890 100644
--- a/dashboardv2/public/css/scss/nav.scss
+++ b/dashboardv2/public/css/scss/nav.scss
@@ -20,13 +20,12 @@
 /* nav.scss */
 
 .navbar-atlas {
-    background-color: $color_tuna_approx;
-    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    background-color: $color_tuna_approx; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
     box-shadow: inset 0 0 0 $black_10, 0 1px 10px $black_10;
     .navbar-brand {
         color: $white;
     }
-    .nav > li > a {
+    .nav>li>a {
         color: $white;
         padding-top: 18px;
         padding-bottom: 18px;
@@ -44,7 +43,7 @@
     background-color: $white;
 }
 
-.navbar-fixed-top + .wrapper {
+.navbar-fixed-top+.wrapper {
     margin-top: 90px;
     padding-bottom: 90px;
 }
@@ -62,8 +61,7 @@
         padding: 6px 0;
         background-color: transparent;
         color: $white;
-        border: none;
-        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        border: none; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
         box-shadow: 0 2px $white;
     }
-}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/old-style.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/old-style.scss b/dashboardv2/public/css/scss/old-style.scss
index 89e313e..0d60ac1 100644
--- a/dashboardv2/public/css/scss/old-style.scss
+++ b/dashboardv2/public/css/scss/old-style.scss
@@ -23,12 +23,10 @@
 //original selectors
 //.inputs button.addAttr, .inputs button.saveAttr
 %extend_1 {
-    height: 40px;
-    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    height: 40px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
     border-radius: 4px;
     border: 1px solid $white;
-    color: $white;
-    //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    color: $white; //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
     text-shadow: 0 -1px 0 $black_25;
     font-weight: bold;
 }
@@ -65,6 +63,8 @@
 }
 
 
+
+
 /* .switch {
     float: left;
     margin-top: 4px;
@@ -177,4 +177,4 @@ text {
 .switch-yellow .switch-selection {
     background: $color_laser_approx;
     background-image: linear-gradient(to bottom, $color_zombie_approx, $color_laser_approx);
-}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/override.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss
index e4e8bf7..2ed091c 100644
--- a/dashboardv2/public/css/scss/override.scss
+++ b/dashboardv2/public/css/scss/override.scss
@@ -40,6 +40,9 @@
     padding: 15px;
     text-align: right;
     border-top: 1px solid #DEDEDE;
+    .btn+.btn {
+        margin-bottom: 0;
+    }
 }
 
 .modal-body {
@@ -48,10 +51,9 @@
     max-height: 400px;
     min-height: 70px;
     overflow: auto;
-}
-
-.cancel {
-    float: left;
+    .btn+.btn {
+        margin-bottom: 2px;
+    }
 }
 
 .switch.pull-left {
@@ -116,30 +118,61 @@ td {
     display: inline-block;
     padding-left: 0;
     margin: 20px 0;
-    border-radius: 4px;
-    border: 1px #DDDDDD solid;
+    border: 1px $color_keppel_approx solid;
     margin: 0px;
     float: right;
-    border-radius: 10px;
+    border-radius: 4px;
     overflow: hidden;
-    >.disabled>span,
-    >.disabled>a {
+
+    >.active>span,
+    >.active>a,
+    >.active>a:hover {
+        background: none;
+        color: $color_keppel_approx;
+        background: none;
+        color: #37bb9b;
+        font-weight: 600;
+        font-family: sans-serif;
+    }
+
+    >li>a,
+    >li>span,
+    >li>button {
+        width: 30px;
+        height: 30px;
+        padding: 0;
+        line-height: 30px;
+        text-decoration: none;
+        border: none;
+        float: left;
+        background: $transparent;
+        color: $color_keppel_approx;
+        @include ellipsis();
+        i {
+            font-weight: bold;
+        }
         &:hover {
-            cursor: not-allowed;
-            background-color: #7ed3be !important;
+            color: $white;
+            background: $color_keppel_approx
         }
     }
-    >.active>span,
-    >.active>a,
-    >li>a:hover {
-        background-color: #2EBC9A !important;
-        color: #fff !important;
+
+    >.disabled>span,
+    >.disabled>a,
+    >li>button[disabled] {
+        color: $color_mountain_mist_approx;
         &:hover {
-            background-color: none;
+            cursor: not-allowed;
+            color: $white;
+            background: $color_jungle_green_light !important;
         }
     }
 }
 
+.select2-container {
+    width: 100% !important;
+}
+
 .select2-container--default {
     .select2-selection--multiple {
         background-color: $color_white_lilac_approx !important;
@@ -209,7 +242,7 @@ td {
     }
 }
 
-.fixedPopover {
+.fixed-popover {
     position: fixed;
 }
 
@@ -221,23 +254,6 @@ td {
 
 .pager {
     margin: 0px;
-    li {
-        >button {
-            display: inline-block;
-            padding: 5px 14px;
-            background-color: #fff;
-            border: 1px solid #ddd;
-            border-radius: 15px;
-            color: $color_jungle_green_approx;
-        }
-        >button,
-        >span {
-            &:hover {
-                background-color: $color_jungle_green_approx;
-                color: $white;
-            }
-        }
-    }
 }
 
 .popover {
@@ -245,6 +261,8 @@ td {
 }
 
 .popover-content {
+    max-height: 150px;
+    overflow: auto;
     ul {
         color: $dark_gray;
         padding: 0px 5px;
@@ -261,24 +279,17 @@ td {
     overflow-x: hidden;
 }
 
-.ui-pnotify-text {
-    word-break: break-all;
-}
-
-.checkbox-inline,
-.radio-inline {
-    padding-left: 0px;
-    font-weight: bold;
-}
-
 .advancedInfo {
     margin-left: 5px;
     cursor: pointer;
 }
 
 .query-builder {
-    .rule-container .rule-value-container {
-        display: inline-block !important;
+    .rule-container {
+        margin: 6px 0;
+        .rule-value-container {
+            display: inline-block !important;
+        }
     }
     .rules-list>:first-child::before {
         top: -8px;
@@ -289,6 +300,10 @@ td {
     .rule-value-container input {
         padding: 6px 12px !important;
     }
+    .rules-group-container {
+        border: none;
+        background: none;
+    }
 }
 
 
@@ -299,7 +314,7 @@ td {
 div.columnmanager-visibilitycontrol {
     width: auto;
     margin-bottom: 5px;
-    &.open .btn-atlasAction {
+    &.open .btn-action {
         background-color: #37bb9b;
         color: #fff;
     }
@@ -312,4 +327,34 @@ div.columnmanager-dropdown-container {
     >li>span.column-label {
         width: auto;
     }
+}
+
+.stack-modal[aria-role="alertdialog"] {
+    .alert.ui-pnotify-container {
+        color: $color_ironside_gray_approx;
+        background-color: $white;
+        border: 1px solid rgba(0, 0, 0, .2);
+        padding: 0px;
+        outline: 0;
+        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
+        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
+        .ui-pnotify-icon,
+        .ui-pnotify-title {
+            padding: 15px;
+        }
+        .ui-pnotify-text {
+            position: relative;
+            padding: 15px;
+            max-height: 400px;
+            min-height: 70px;
+            overflow: auto;
+            border-top: 1px solid #DEDEDE
+        }
+
+        .ui-pnotify-action-bar {
+            padding: 15px;
+            text-align: right;
+            border-top: 1px solid #DEDEDE;
+        }
+    }
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/profile-table.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/profile-table.scss b/dashboardv2/public/css/scss/profile-table.scss
index 2b0b483..cfeab01 100644
--- a/dashboardv2/public/css/scss/profile-table.scss
+++ b/dashboardv2/public/css/scss/profile-table.scss
@@ -67,6 +67,5 @@ th.renderable.nonNullData {
 .profileGraphDetail>div div {
     text-align: right;
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis();
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/search.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/search.scss b/dashboardv2/public/css/scss/search.scss
index 2bce210..242b14a 100644
--- a/dashboardv2/public/css/scss/search.scss
+++ b/dashboardv2/public/css/scss/search.scss
@@ -18,21 +18,6 @@
 
 //colors
 $color_celeste_approx: #1D1F2B;
-$switchTransition: .4s ease-out;
-@mixin transition($transition...) {
-    -webkit-transition: $transition;
-    -moz-transition: $transition;
-    -o-transition: $transition;
-    transition: $transition;
-}
-
-@mixin transition-property($properties...) {
-    -webkit-transition-property: $properties;
-    -moz-transition-property: $properties;
-    -o-transition-property: $properties;
-    transition-property: $properties;
-}
-
 .switch {
     position: relative;
     width: 50px;
@@ -74,31 +59,12 @@ $switchTransition: .4s ease-out;
         box-shadow: inset 0 1px rgba(black, .02);
         @include transition(inherit)
     }
-    .switch-input:checked ~ & {
+    .switch-input:checked~& {
         left: 30px;
         box-shadow: -1px 1px 5px rgba(black, .2);
     }
 }
 
-.advanceSearchBtn {
-    float: right;
-}
-
-.advanceSearchTagInput {
-    margin-bottom: 20px;
-}
-
-.advanceSearchTermInput {
-    margin-bottom: 20px;
-}
-
-.clearAdvanceSearch {
-    display: inline-block;
-    float: left;
-    margin-top: 10px;
-    cursor: pointer
-}
-
 .labelShowRecord {
     line-height: 40px;
 }
@@ -131,3 +97,13 @@ $switchTransition: .4s ease-out;
         color: $tag_color;
     }
 }
+
+.popup-tag {
+    display: none;
+}
+
+.popover-tag {
+    .btn {
+        display: block;
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/style.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/style.scss b/dashboardv2/public/css/scss/style.scss
index f634c44..02e0c47 100644
--- a/dashboardv2/public/css/scss/style.scss
+++ b/dashboardv2/public/css/scss/style.scss
@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+@import "__mixin.scss";
 @import "main.scss";
 @import "tab.scss";
 @import "form.scss";
@@ -32,4 +33,4 @@
 @import "tag.scss";
 @import "search.scss";
 @import "profile-table.scss";
-@import "override.scss";
+@import "override.scss";
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/tab.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/tab.scss b/dashboardv2/public/css/scss/tab.scss
index 9b67e2c..185a7b1 100644
--- a/dashboardv2/public/css/scss/tab.scss
+++ b/dashboardv2/public/css/scss/tab.scss
@@ -23,15 +23,14 @@
     margin: 25px 0;
     .nav-tabs {
         border-bottom: 1px solid $color_mystic_approx;
-        > li {
-            > a {
+        >li {
+            >a {
                 padding: 15px 30px;
                 text-transform: uppercase;
-                letter-spacing: 1px;
-                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+                letter-spacing: 1px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                 border-radius: 2px 2px 0 0;
             }
-            &.active > a {
+            &.active>a {
                 border: 1px solid $color_mystic_approx;
                 border-bottom-color: transparent;
                 &:focus {
@@ -57,12 +56,26 @@ ul.tabs li.tab {
     padding: 0;
 }
 
+.tab-content>.tab-pane {
+    display: block;
+    opacity: 0;
+    height: 0;
+    padding: 0px;
+    overflow: hidden;
+    &.active {
+        padding: 25px;
+        opacity: 1;
+        height: auto;
+        overflow: auto;
+    }
+}
+
 .tagsList .atlast-tabbable {
     margin: 0;
     .tab-content {
         padding: 10px 22px;
     }
-    .nav-tabs > li > a {
+    .nav-tabs>li>a {
         padding: 10px 20px;
     }
 }
@@ -100,8 +113,7 @@ ul.tabs li.tab {
             display: block;
             text-decoration: none;
             width: 100%;
-            height: 100%;
-            //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+            height: 100%; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
             transition: color 0.28s ease;
             /*  color: $color_manatee_approx; */
             /*    &:hover {
@@ -122,15 +134,14 @@ ul.tabs li.tab {
     margin: 25px 0;
     .nav-tabs {
         border-bottom: 1px solid $color_mystic_approx;
-        > li {
-            > a {
+        >li {
+            >a {
                 padding: 15px 30px;
                 text-transform: uppercase;
-                letter-spacing: 1px;
-                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+                letter-spacing: 1px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                 border-radius: 2px 2px 0 0;
             }
-            &.active > a {
+            &.active>a {
                 border: 1px solid $color_mystic_approx;
                 border-bottom-color: transparent;
                 &:focus {
@@ -150,4 +161,4 @@ ul.tabs li.tab {
         border: 1px solid $color_mystic_approx;
         border-top: none;
     }
-}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/tag.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/tag.scss b/dashboardv2/public/css/scss/tag.scss
index 39bc995..6556784 100644
--- a/dashboardv2/public/css/scss/tag.scss
+++ b/dashboardv2/public/css/scss/tag.scss
@@ -19,7 +19,7 @@
 //tag.scss
 .tag-tree {
     padding: 0; // overflow: auto;
-    li {
+    >li {
         list-style: none;
         cursor: pointer;
         &.parent-node {
@@ -55,18 +55,22 @@
                 padding: 5px 10px;
             }
         }
-        a {
+        >a,
+        >div>a {
             display: block;
-            color: #f2f2f2;
+            color: $white !important;
             white-space: nowrap;
             padding: 5px 10px;
-            text-overflow: ellipsis;
             max-width: 91%;
-            overflow: hidden;
+            @include ellipsis();
             font-size: 14px;
+            &:hover {
+                color: $white !important;
+                text-decoration: none !important;
+            }
         }
     }
-    ul {
+    >ul {
         padding-left: 20px;
         li {}
     }
@@ -96,316 +100,6 @@
     border-color: $color_bali_hai_approx;
 }
 
-.select2-container {
-    width: 100% !important;
-    /*margin:15px 0px;*/
-}
-
-.tagListSelect {
-    margin: 15px 0px;
-}
-
-.inputTag {
-    display: inline-block;
-    border: 1px $tag_color solid;
-    color: $tag_color;
-    font-size: 14px;
-    border-radius: 4px;
-    margin-right: 3px;
-    margin-bottom: 3px;
-    float: left;
-    cursor: pointer;
-    background-color: $white;
-    white-space: nowrap;
-    overflow: hidden;
-    &:hover {
-        color: $tag_color;
-    }
-    i.fa {
-        position: relative;
-        padding: 5px;
-        cursor: pointer;
-        &:hover {
-            color: $white;
-            background-color: $tag_color;
-        }
-    }
-    >.inputValue {
-        padding: 5px;
-        &:hover {
-            color: $white;
-            background-color: $tag_color;
-        }
-    }
-}
-
-.inputTagAdd {
-    display: inline-block;
-    border: 1px $color_havelock_blue_approx solid;
-    color: $color_havelock_blue_approx;
-    font-size: 14px;
-    border-radius: 4px;
-    margin-right: 3px;
-    margin-bottom: 3px;
-    float: left;
-    cursor: pointer;
-    background-color: #fff;
-    white-space: nowrap;
-    overflow: hidden;
-    padding: 2px 6px;
-    &:hover {
-        color: $white;
-        background-color: $tag_color;
-    }
-}
-
-.inputTagGreen {
-    border: 1px $color_jungle_green_approx solid;
-    background-color: $white;
-    color: $color_jungle_green_approx;
-    padding-left: 5px;
-    &:hover {
-        color: $white;
-        background-color: $color_jungle_green_approx;
-    }
-    i.fa {
-        &:hover {
-            background-color: $color_jungle_green_approx;
-        }
-    }
-}
-
-.addTagBase {
-    padding: 2px 8px;
-    border: 1px solid $action_gray;
-    color: $action_gray;
-    border-radius: 4px;
-    cursor: pointer;
-    &:hover {
-        color: $color_dark_grey_approx;
-        background-color: $color_mercury_approx;
-    }
-}
-
-.noTags {
-    font-size: 24px;
-    font-weight: bold;
-    text-align: center;
-}
-
-.addTag-dropdown {
-    display: inline-block;
-    float: left;
-}
-
-.addTagText {
-    font-size: 14px;
-    font-weight: 600;
-}
-
-.addTagPlus {
-    font-size: 14px;
-    font-weight: 600;
-}
-
-.inputSearchTag {
-    max-width: 200px;
-}
-
-.appendList {
-    max-height: 200px;
-    overflow: auto;
-    max-width: 200px;
-    overflow-x: hidden;
-    div {
-        padding: 3px;
-    }
-}
-
-.editbutton {
-    padding: 4px 8px;
-    border: 1px solid $color_celeste_approx;
-    color: $action_gray;
-    border-radius: 4px;
-}
-
-.inputAttribute {
-    display: inline-block;
-    padding: 2px 10px;
-    border: 1px $action_gray solid;
-    color: $action_gray;
-    font-size: 14px;
-    border-radius: 4px;
-    margin-right: 3px;
-    margin-bottom: 3px;
-    float: left;
-    cursor: pointer;
-    background-color: $white;
-    i.fa {
-        position: relative;
-        right: -5px;
-        cursor: pointer;
-    }
-    &:hover {
-        color: $white;
-        background-color: $action_gray;
-    }
-}
-
-.superType {
-    margin-bottom: 15px;
-}
-
-form-control .tagInpput {
-    margin-bottom: 15px;
-    margin-top: 15px;
-}
-
-.attributeText {
-    color: $color_star_dust_approx;
-}
-
-.termTagLine {
-    border-top: none;
-}
-
-.tagTerm {
-    margin-top: 10px;
-    div {
-        display: inline-block;
-    }
-}
-
-.tagSpan,
-.termSpan {
-    float: left;
-    padding: 2px 10px 2px 0px;
-    font-weight: 600;
-    width: 45px
-}
-
-.attrLabel {
-    float: left;
-    padding: 2px 10px 2px 0px;
-    font-weight: 600;
-    width: 70px;
-    margin-right: 5px;
-}
-
-.superTypeLabel {
-    font-weight: 600;
-    width: 90px;
-    margin-right: 5px;
-    float: left;
-}
-
-.inputAssignTag {
-    display: block;
-    padding: 2px 5px;
-    border: 1px $action_gray solid;
-    color: $action_gray;
-    font-size: 14px;
-    border-radius: 4px;
-    margin-right: 3px;
-    margin-bottom: 3px;
-    float: left;
-    cursor: pointer;
-    background-color: $white;
-    white-space: nowrap;
-    &:hover {
-        color: $color_dark_grey_approx;
-        background-color: $color_mercury_approx;
-    }
-}
-
-.multiSelect {
-    float: right;
-}
-
-.multiSelectTerm {
-    float: right;
-}
-
-.multiSelectTag {
-    float: right;
-}
-
-.inputAssignTag.multiSelectTag {
-    margin-right: 10px;
-}
-
-.popover.popoverTag {
-    display: block;
-}
-
-.popoverContainer .inputTag {
-    display: block;
-    float: none;
-    margin-top: 10px;
-}
-
-.popoverContainer .inputTag>.inputValue {
-    padding: 2px 5px;
-    display: inline-block;
-    width: 100px;
-}
-
-.tagAttributeLabel {
-    color: $color_star_dust_approx;
-}
-
-fieldset.scheduler-border {
-    border-top: 1px solid #999 !important;
-    padding: 0 1em 0em 1em !important;
-    margin: 0 0 .5em 0 !important;
-}
-
-legend.scheduler-border {
-    width: auto;
-    padding: 0 5px;
-    border-bottom: none;
-    font-size: 16px;
-    margin-left: 50%;
-    margin-bottom: 10px;
-    color: #555;
-}
-
-.requiredInput {
-    color: #d20606;
-}
-
-.spanEntityType {
-    cursor: help;
-    width: 100%;
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 14px;
-    color: #a7a19f;
-}
-
-.errorClass {
-    border: 1px solid red !important;
-    box-shadow: none !important;
-}
-
-.attributeTag {
-    padding: 5px 8px;
-    border: 1px solid #999999;
-    color: #999999;
-    border-radius: 1px;
-    cursor: pointer
-}
-
-.attrTopMargin {
-    margin-top: 15px;
-}
-
-.topMargin {
-    margin-top: 13px;
-}
-
 .entityLink {
     font-size: 16px;
 }

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/theme.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/theme.scss b/dashboardv2/public/css/scss/theme.scss
index 5cf8848..26e507f 100644
--- a/dashboardv2/public/css/scss/theme.scss
+++ b/dashboardv2/public/css/scss/theme.scss
@@ -19,8 +19,18 @@
 
 /* theme.scss */
 
+body {
+    font-family: $font_0, $font_1;
+    color: $color_ironside_gray_approx;
+}
+
+header {
+    background-color: $white;
+    border-bottom: 1px $color_mystic_approx solid;
+}
+
 .header-menu {
-    .dropdown-menu > li > a {
+    .dropdown-menu>li>a {
         color: $color_ironside_gray_approx;
         &:hover {
             color: $color_jungle_green_approx;
@@ -51,10 +61,8 @@
 .main-search {
     .form-control {
         border: none;
-        border-left: 1px $color_mystic_approx solid;
-        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-        border-radius: 0;
-        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        border-left: 1px $color_mystic_approx solid; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
         box-shadow: none;
         height: 60px;
         font-size: 18px;
@@ -68,16 +76,25 @@
     }
 }
 
+
+.close {
+    font-size: 2em;
+}
+
+#sideNav-wrapper {
+    color: $white;
+    font-size: 16px !important;
+}
+
 .page-title {
     background-color: $white;
     padding: 25px;
     h1 {
-        margin-top: 50px;
+        // margin-top: 50px;
         margin-bottom: 10px;
         font-weight: 600;
-        text-overflow: ellipsis;
+        @include ellipsis();
         max-width: 91%;
-        overflow: hidden;
         display: inline-block;
         small {
             position: relative;
@@ -96,26 +113,82 @@
     }
 }
 
-.atlas-tag {
-    padding: 6px 12px;
-    background-color: $color_havelock_blue_approx;
-    color: $white;
-    font-size: 14px;
-    text-transform: uppercase;
-    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
-    border-radius: 4px;
-    i.fa {
-        position: relative;
-        right: -5px;
-        cursor: pointer;
+a {
+    color: $color_jungle_green_approx;
+    &:focus {
+        color: $color_puerto_rico_approx;
+        text-decoration: none;
+        outline: none;
     }
+    &:hover {
+        color: $color_puerto_rico_approx;
+        text-decoration: none;
+    }
+}
+
+a[href^="#!/"]:not(.btn, .not-blue-link) {
+    color: $color_havelock_blue_approx;
+    &:focus {
+        color: $color_havelock_blue_approx;
+        text-decoration: none;
+        outline: none;
+    }
+    &:hover {
+        color: $color_havelock_blue_approx;
+        text-decoration: underline;
+    }
+}
+
+th {
+    text-transform: capitalize;
 }
 
+ul {
+    list-style: none;
+}
+
+hr[size="10"] {
+    margin: 10px 0px;
+}
+
+.table {
+    margin-bottom: 2px;
+    background-color: $white;
+    .table {
+        width: auto;
+    }
+}
+
+
+.table-quickMenu>tbody>tr>td {
+    &.searchTerm {
+        overflow: visible;
+    }
+    &.searchTag {}
+}
+
+.card {
+    background: $white none repeat scroll 0 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    box-shadow: 0 1px 3px $black_30;
+    margin-bottom: 30px;
+}
+
+// Colors Class
 .white-bg {
     background-color: $white;
     padding: 30px 0;
 }
 
+.gray-text {
+    color: $color_star_dust_approx;
+}
+
+.gray-bg {
+    background-color: #f6f7fb;
+    padding-bottom: 4%;
+}
+
+
 .comment-input {
     background-color: $color_white_lilac_approx;
     padding: 20px;
@@ -139,6 +212,66 @@
     }
 }
 
+
+@media (min-width: 768px) {
+    .col-sm-custom {
+        //width: 92%;
+        margin: 25px 25px 0px;
+        position: relative;
+    }
+}
+
+.panel-fullscreen {
+    position: fixed;
+    height: 100%;
+    top: 0px;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    right: 0;
+    z-index: 999;
+}
+
+.no-padding {
+    padding: 0px !important;
+}
+
+.no-padding-bottom {
+    padding-bottom: 0px !important;
+}
+
+.no-padding-top {
+    padding-top: 0px !important;
+}
+
+.no-padding-left {
+    padding-left: 0px !important;
+}
+
+.no-padding-right {
+    padding-right: 0px !important;
+}
+
+.no-margin {
+    margin: 0px !important;
+}
+
+.no-margin-bottom {
+    margin-bottom: 0px !important;
+}
+
+.no-margin-top {
+    margin-top: 0px !important;
+}
+
+.no-margin-left {
+    margin-left: 0px !important;
+}
+
+.no-margin-right {
+    margin-right: 0px !important;
+}
+
 .backButton {
     display: block;
     margin: 0px 13px;
@@ -153,3 +286,74 @@
 .position-relative {
     position: relative;
 }
+
+.pagination-box {
+    margin-top: 15px;
+}
+
+.ellipsis {
+    @include ellipsis();
+    margin-bottom: 10px;
+}
+
+.readOnlyLink {
+    @include ellipsis();
+    .deleteBtn {
+        padding: 0px 5px;
+    }
+    a {
+        color: $delete_link !important;
+    }
+}
+
+.add-seperator {
+    margin-bottom: 10px;
+    border-bottom: 1px solid $color_mirage_approx
+}
+
+.legend-sm {
+    font-size: 17px;
+}
+
+.errorClass {
+    border: 1px solid red !important;
+    box-shadow: none !important;
+}
+
+fieldset.fieldset-child-pd>div {
+    padding-left: 12px;
+}
+
+.inline-content {
+    >.inline {
+        display: inline-block;
+        &+.inline {
+            margin-left: 5px;
+        }
+    }
+}
+
+.inline-content-fl {
+    @extend .inline-content;
+    >.inline {
+        display: block;
+        float: left;
+    }
+}
+
+.inline-content-fr {
+    @extend .inline-content-fl;
+    >.inline {
+        float: right;
+        &+.inline {
+            margin-right: 5px;
+        }
+    }
+}
+
+.has-error {
+    .select2-selection--single,
+    .select2-selection--multiple {
+        border-color: $color_apple_blossom_approx;
+    }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/css/scss/tree.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/tree.scss b/dashboardv2/public/css/scss/tree.scss
index 50396ba..4339dba 100644
--- a/dashboardv2/public/css/scss/tree.scss
+++ b/dashboardv2/public/css/scss/tree.scss
@@ -57,7 +57,7 @@
             }
         }
         &.parentChild {
-            ul {
+            >ul {
                 padding-left: 9%;
             }
             li {
@@ -74,6 +74,11 @@
                 background-color: $color_star_dust_approx;
             }
         }
+        &.listTerm {
+            a {
+                display: inline;
+            }
+        }
         &.active {
             background-color: $color_jungle_green_approx !important;
             border: none;
@@ -90,8 +95,7 @@
             color: $concrete;
             white-space: nowrap;
             padding: 5px 25px;
-            text-overflow: ellipsis;
-            overflow: hidden;
+            @include ellipsis();
             cursor: pointer;
         }
         .tools {
@@ -126,6 +130,7 @@
 }
 
 
+
 /**Css changes**/
 
 .modal-body {
@@ -175,4 +180,4 @@
 .popoverTerm {
     text-align: center;
     margin-top: 25px !important;
-}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/router/Router.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/router/Router.js b/dashboardv2/public/js/router/Router.js
index a43fbf7..64eb3f3 100644
--- a/dashboardv2/public/js/router/Router.js
+++ b/dashboardv2/public/js/router/Router.js
@@ -193,9 +193,7 @@ define([
                         Utils.setUrl({
                             url: url,
                             trigger: false,
-                            updateTabState: function() {
-                                return { tagUrl: this.url, stateChanged: true };
-                            }
+                            updateTabState: true
                         });
                     }
                     App.rSideNav.show(new SideNavLayoutView(
@@ -208,9 +206,7 @@ define([
                         Utils.setUrl({
                             url: url,
                             trigger: false,
-                            updateTabState: function() {
-                                return { tagUrl: this.url, stateChanged: true };
-                            }
+                            updateTabState: true
                         });
                     }
                     App.rSideNav.currentView.RTagLayoutView.currentView.manualRender(tagName);
@@ -224,7 +220,8 @@ define([
                     }
                     App.rNContent.show(new TagDetailLayoutView(
                         _.extend({
-                            'tag': tagName
+                            'tag': tagName,
+                            'value': paramObj
                         }, that.preFetchedCollectionLists, that.sharedObj)
                     ));
                 }
@@ -307,10 +304,8 @@ define([
             Utils.setUrl({
                 url: '#!/search',
                 mergeBrowserUrl: false,
-                updateTabState: function() {
-                    return { searchUrl: this.url, stateChanged: false };
-                },
-                trigger: true
+                trigger: true,
+                updateTabState: true
             });
 
             console.log('No route:', actions);

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html
index ca9421d..e03335c 100644
--- a/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html
@@ -21,15 +21,28 @@
         <i class="fa fa-refresh fa-spin-custom"></i>
     </div>
     <div class="auditTable" style="display: none">
-        <span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
-        <ul class="pager pull-right">
-            <li>
-                <button type="button" class="btn" data-id="previousAuditData">Previous</button>
-            </li>
-            <li>
-                <button type="button" class="btn" data-id="nextAuditData">Next</button>
-            </li>
-        </ul>
+        <div>
+            <span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
+        </div>
         <div id="r_auditTableLayoutView"></div>
+        <div class="pagination-box">
+            <div class="backgrid-paginator pull-right">
+                <ul>
+                    <li>
+                        <button type="button" data-id="previousAuditData" title="Previous" disabled=true>
+                            <i class="fa fa-angle-left" aria-hidden="true"></i>
+                        </button>
+                    </li>
+                    <li class="active">
+                        <a href="javascript:void(0)" data-id="activePage"></a>
+                    </li>
+                    <li>
+                        <button type="button" data-id="nextAuditData" title="Next">
+                            <i class="fa fa-angle-right" aria-hidden="true"></i>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </div>
     </div>
-</div>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
index 736b957..88808d1 100644
--- a/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<h4>Name: <span data-id="tagHeader"></span></h4>
+<h4>Name: <span data-id="name"></span></h4>
 <table class="table table-bordered table-striped" data-id="tableAudit">
     <thead>
         <tr data-id="auditHeaderValue">

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/templates/business_catalog/AddTermView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/business_catalog/AddTermView_tmpl.html b/dashboardv2/public/js/templates/business_catalog/AddTermView_tmpl.html
index b8d28eb..0b62098 100644
--- a/dashboardv2/public/js/templates/business_catalog/AddTermView_tmpl.html
+++ b/dashboardv2/public/js/templates/business_catalog/AddTermView_tmpl.html
@@ -14,17 +14,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<form name="tagDefinitionform" class="css-form" onsubmit="return false;">
+<form name="tagDefinitionform" class="form-horizontal" onsubmit="return false;">
     <div class="form-group">
+        <label class="control-label col-sm-2 required" for="name">Name</label>
         {{#if defaultTerm}}
-        <input class="form-control" data-id="termName" placeholder="Enter Taxonomy Name" autofocus>
-        <p class='alertTerm' style='display:none'>Taxonomy name should not have spaces</p>
+        <div class="col-sm-10">
+            <input class="form-control" data-id="termName" placeholder="Enter Taxonomy Name" autofocus>
+            <p class='alertTerm' style='display:none'>Taxonomy name should not have spaces</p>
+        </div>
         {{else}}
-        <input class="form-control" data-id="termName" placeholder="Name(Required)" autofocus>
-        <p class='alertTerm' style='display:none'>Term name should not have spaces</p>
+        <div class="col-sm-10">
+            <input class="form-control" data-id="termName" placeholder="Name(Required)" autofocus>
+            <p class='alertTerm' style='display:none'>Term name should not have spaces</p>
+        </div>
         {{/if}}
     </div>
     <div class="form-group">
-        <textarea class="form-control" data-id="termDetail" placeholder="Description"></textarea>
+        <label class="control-label col-sm-2" for="description">Description</label>
+        <div class="col-sm-10">
+            <textarea class="form-control" data-id="termDetail" placeholder="Description"></textarea>
+        </div>
     </div>
-</form>
+</form>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/templates/business_catalog/BusinessCatalogDetailLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/business_catalog/BusinessCatalogDetailLayoutView_tmpl.html b/dashboardv2/public/js/templates/business_catalog/BusinessCatalogDetailLayoutView_tmpl.html
index 3f6df14..d3c9fe1 100644
--- a/dashboardv2/public/js/templates/business_catalog/BusinessCatalogDetailLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/business_catalog/BusinessCatalogDetailLayoutView_tmpl.html
@@ -19,9 +19,9 @@
         <i class="fa fa-refresh fa-spin-custom"></i>
     </div>
     <div class="catlogDetail">
-        <h1><span data-id="title"></span></h1>
-        <button type="button" data-id="editButton" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button>
-        <p class="sub-title" data-id="description">Description</p>
+        <h1 class="form-group"><span data-id="title"></span></h1>
+        <button type="button" data-id="editButton" class="btn btn-sm btn-action pull-right"><i class="fa fa-pencil"></i></button>
+        <p class="form-group" data-id="description">Description</p>
     </div>
 </div>
 <div class="container-fluid gray-bg">

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/templates/business_catalog/TreeLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/business_catalog/TreeLayoutView_tmpl.html b/dashboardv2/public/js/templates/business_catalog/TreeLayoutView_tmpl.html
index fd50bda..ca2968e 100644
--- a/dashboardv2/public/js/templates/business_catalog/TreeLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/business_catalog/TreeLayoutView_tmpl.html
@@ -16,8 +16,8 @@
 -->
 <div class="clearfix add-seperator">
     <p data-id="descriptionAssign" style="display:none">Assign a term to this asset</p>
-    <button type="button" class="btn btn-atlasAction btn-atlas pull-left" data-id="backTaxanomy"><i class="fa fa-chevron-left"></i> Back</button>
-    <button type="button" class="btn btn-atlasAction btn-atlas pull-right" onclick="this.blur();" title="Refresh" data-id="refreshTaxanomy"><i class="fa fa-refresh"></i></button>
+    <button type="button" class="btn btn-action btn-md pull-left" data-id="backTaxanomy"><i class="fa fa-chevron-left"></i> Back</button>
+    <button type="button" class="btn btn-action btn-md pull-right" onclick="this.blur();" title="Refresh" data-id="refreshTaxanomy"><i class="fa fa-refresh"></i></button>
 </div>
 <div>
     <select type="text" class="form-control" data-id="searchTermInput"></select>

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/templates/common/TableLayout_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/common/TableLayout_tmpl.html b/dashboardv2/public/js/templates/common/TableLayout_tmpl.html
index 64c7c19..0ec8301 100644
--- a/dashboardv2/public/js/templates/common/TableLayout_tmpl.html
+++ b/dashboardv2/public/js/templates/common/TableLayout_tmpl.html
@@ -15,28 +15,43 @@
  * limitations under the License.
 -->
 <div>
-<div class="t_tableOverlay"></div>
-<div class="row banded">
-    <div data-id="r_footerRecords" class="col-sm-6 margin-top-10"></div>
-    <div data-id="r_pagination" class="col-sm-6 text-right"></div>
-</div>
-<div class="clearfix">
-    <div class="form-group pull-right no-margin">
-        <div data-id="control" class="pull-right"></div>
-        <label class="select pull-right">
-            <select data-id="pageSize" class="form-control">
-                <option selected>10</option>
-                <option>25</option>
-                <option>50</option>
-                <option>100</option>
-            </select>
-        </label>
+    <div class="clearfix">
+        <div class="form-group pull-right no-margin">
+            {{#unless columnOpts.el}}
+            <div data-id="control" class="pull-right"></div>
+            {{/unless}}
+        </div>
     </div>
-</div>
-<div class="position-relative thick-border">
-    <div data-id="r_tableList" class="table-responsive tableBorder"> </div>
-    <div data-id="r_tableSpinner" class="fontLoader for-ignore">
-        <i class="fa fa-refresh fa-spin-custom"></i>
+    {{#if includePagination}}
+    <div class="clearfix banded">
+        <div data-id="r_footerRecords" class="margin-top-10"></div>
     </div>
-</div>
-</div>
+    {{/if}}
+    <div class="position-relative thick-border">
+        <div data-id="r_tableList" class="table-responsive tableBorder"> </div>
+        {{#if includeTableLoader}}
+        <div data-id="r_tableSpinner" class="fontLoader for-ignore">
+            <i class="fa fa-refresh fa-spin-custom"></i>
+        </div>
+        {{/if}}
+    </div>
+    {{#if includePagination}}
+    <div class="row clearfix banded pagination-box">
+        <div class="col-md-offset-4 col-md-8">
+            <div class="inline-content-fr">
+                <div data-id="r_pagination" class="inline"></div>
+                {{#if includePageSize}}
+                <div class="inline">
+                    <div class="form-group inline-content">
+                        <span class="control-label-sm inline ">Page Limit :</span>
+                        <div class="select inline" style="width: 80px;">
+                            <select data-id="pageSize" class="form-control"></select>
+                        </div>
+                    </div>
+                </div>
+                {{/if}}
+            </div>
+        </div>
+    </div>
+    {{/if}}
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/templates/common/buttons_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/common/buttons_tmpl.html b/dashboardv2/public/js/templates/common/buttons_tmpl.html
new file mode 100644
index 0000000..19db7cf
--- /dev/null
+++ b/dashboardv2/public/js/templates/common/buttons_tmpl.html
@@ -0,0 +1,19 @@
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+{{#if btn_edit}}
+<button data-id="editButton" title="Edit Entity" class="btn btn-action btn-sm pull-right"><i class="fa fa-pencil"></i></button>
+{{/if}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/templates/common/modal.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/common/modal.html b/dashboardv2/public/js/templates/common/modal.html
index ef59290..e000fa8 100644
--- a/dashboardv2/public/js/templates/common/modal.html
+++ b/dashboardv2/public/js/templates/common/modal.html
@@ -32,9 +32,9 @@
         {{#if showFooter}}
         <div class="modal-footer">
             {{#if buttons}} {{#each buttons}}
-             <button type="button" class="btn btn-atlas {{this.btnClass}}">{{this.text}}</button>
+            <button type="button" {{#if this.title}} title="{{this.title}}" {{/if}} class="btn {{this.btnClass}}">{{this.text}}</button>
             {{/each}} {{else}} {{#if allowCancel}} {{#if cancelText}}
-            <button type="button" class="btn btn-atlas cancel">{{tt cancelText}}</button>
+            <button type="button" class="btn btn-action cancel">{{tt cancelText}}</button>
             {{/if}} {{/if}}
             <button type="button" class="btn btn-atlas ok">{{tt okText}}</button>
             {{/if}}

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
index 18da242..21931e5 100644
--- a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
@@ -18,29 +18,29 @@
     <div class="fontLoader">
         <i class="fa fa-refresh fa-spin-custom"></i>
     </div>
-    <div class="entityDetail">
+    <div class="entityDetail form-horizontal col-md-12">
         <div class="row">
             <a href="javascript:void(0);" class="backButton" data-id="backButton"><i class="fa fa-chevron-left"></i>  Back To Results</a>
         </div>
-        <h1><span  data-id="title"></span></h1> {{#if entityUpdate}}
-        <button data-id="editButton" title="Edit Entity" style="display:none" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button>
+        <h1 class="form-group"><span  data-id="title"></span></h1> {{#if entityUpdate}}
+        <div data-id="editButtonContainer" class="pull-right"></div>
         {{/if}}
-        <div class="tagTerm">
-            <span class="tagSpan">Tags:</span>
-            <div class="" data-id="tagList">
-                <div class="addTag-dropdown" data-id="addTag">
-                    <div class="addTagBase tagBox" title="Add Tag" data-id="addTagPlus"><i class="fa fa-plus"></i></div>
-                </div>
+        <div class="form-group">
+            <span class="control-label-sm-pr pull-left">Tags:</span>
+            <div class="pull-left" data-id="tagList">
+                <button class="btn btn-action btn-sm" title="Add Tag" data-id="addTag">
+                    <i class="fa fa-plus"> </i>
+                </button>
             </div>
-            <hr class="termTagLine"> {{#if taxonomy}}
-            <span class="termSpan">Terms:</span>
-            <div class="" data-id="termList">
-                <div class="addTag-dropdown" data-id="addTerm">
-                    <div class="addTagBase termBox" title="Add Term" data-id="addTermPlus"><i class="fa fa-plus"></i></div>
-                </div>
+        </div>
+        {{#if taxonomy}}
+        <div class="form-group">
+            <span class="control-label-sm-pr pull-left">Terms:</span>
+            <div class="pull-left" data-id="termList">
+                <button class="btn btn-action btn-sm" title="Add Term" data-id="addTerm"><i class="fa fa-plus"></i></button>
             </div>
-            {{/if}}
         </div>
+        {{/if}}
     </div>
 </div>
 <div class="container-fluid gray-bg">

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html b/dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html
index b01352c..ef99f2d 100644
--- a/dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html
@@ -14,9 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<form name="entityDefinitionform" class="css-form">
-    <div class="form-group clearfix">
-        <div class="col-sm-12">
+<form name="entityDefinitionform">
+    <div class="clearfix">
+        <div class="col-sm-12 form-group">
             <div class="row">
                 {{#if guid}}
                 <div class="col-md-8">
@@ -37,7 +37,7 @@
                 </div>
             </div>
         </div>
-        <div class="control-group entityInputData" data-id="entityInputData"></div>
+        <div class="col-md-12 entityInputData" data-id="entityInputData"></div>
     </div>
 </form>
 <div class="" style="position: relative;height: 8px;">

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
index 7b79e09..76241db 100644
--- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
@@ -18,13 +18,13 @@
     <div class="fontLoader">
         <i class="fa fa-refresh fa-spin-custom"></i>
     </div>
-    <svg width="100%" height="100%"></svg>
+    <svg width="100%" height="100%" " viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg>
     <div class="legends" style="height: 20px">
         <i class="fa fa-long-arrow-right" aria-hidden="true" style="margin-right: 12px; color:#8bc152;">&nbsp<span>Lineage</span></i>
         <i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;">&nbsp<span>Impact</span></i>
     </div>
     <div class="zoomButtonGroup">
-        <span type="button" id="zoom_in" class="btn btn-atlasAction btn-atlas lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span>
-        <span type="button" id="zoom_out" class="btn btn-atlasAction btn-atlas lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span>
+        <span type="button" id="zoom_in" class="btn btn-action btn-md lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span>
+        <span type="button" id="zoom_out" class="btn btn-action btn-md lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span>
     </div>
 </div>

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html
index 21300b2..22748cf 100644
--- a/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html
@@ -21,7 +21,7 @@
             <input type="checkbox" class="input" name="queryType" value="text" name="check" value="1" />Include historical entities</label>
     </div>
     <div class="clearfix">
-        <a href="javascript:void(0)" class="inputAssignTag multiSelectTerm btnAssign" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i> Assign Term</a>
+        <a href="javascript:void(0)" class="inputAssignTag multiSelectTerm btnAssign" style="display:none" data-id="addTerm"><i class="fa fa-plus"></i></a>
         <a href="javascript:void(0)" class="inputAssignTag multiSelectTag assignTag btnAssign" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i> Assign Tag</a>
     </div>
     <div id="r_schemaTableLayoutView">

http://git-wip-us.apache.org/repos/asf/atlas/blob/3a47ea6b/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html b/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html
index 3e13fce..cce3096 100644
--- a/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html
+++ b/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html
@@ -15,24 +15,22 @@
  * limitations under the License.
 -->
 <div class="">
-    <h4>Use DSL (Doamin Specific Language) to build queries</h4>
-    <ul>
-    <li><b>Entity Name</b></li>
-    <li>name="string"</li>
+    <h4>Use DSL (Domain Specific Language) to build queries</h4>
+    <ul class="list-style-disc">
+        <li><b>Single Query</b>
+            <p>DB where name="Reporting" select name, owner</p>
+        </li>
+        <li><b>GROUPBY</b>
+            <p>select count(CustomerID), Country from Customers group by Country</p>
+        </li>
+        <li><b>ORDERBY</b>
+            <p>DB where name="Reporting" select name, owner orderby name limit 10 offset 5</p>
+        </li>
+        <li><b>LIMIT</b>
+            <p>DB where name="Reporting" select name, owner limit 10 offset 0</p>
+        </li>
     </ul>
-    <ul>
-    <li><b>Joining queries</b></li>
-    <li>name="sales_fact",columns as column select column.name</li>
-    </ul>
-    <ul>
-    <li><b>Query Name</b></li>
-    <li>Query Example</li>
-    </ul>
-    <ul>
-    <li><b>Query Name</b></li>
-    <li>Query Example</li>
-    </ul>
-    <ul>
-    <a href="http://atlas.apache.org/Search.html" target="_blank">More sample queries and use-cases >></a>
-    </ul>
-</div>
+    <h5 style="padding-left: 22.5px;">
+        <a href="http://atlas.apache.org/Search.html" target="_blank"><i class="fa fa-info-circle" aria-hidden="true"></i> &nbsp; More sample queries and use-cases</a>
+    </h5>
+</div>
\ No newline at end of file