re base code

Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5
Issue-ID: SDC-1566
Signed-off-by: Michael Lando <ml636r@att.com>

36 files changed, 361 insertions, 56 deletions

diff --git a/catalog-ui/src/assets/styles/app.less b/catalog-ui/src/assets/styles/app.less
index 638b28eeb2..1b42aefd5f 100644
--- a/catalog-ui/src/assets/styles/app.less
+++ b/catalog-ui/src/assets/styles/app.less
@@ -9,6 +9,7 @@
 @import 'mixins_old.less';
 @import 'global.less';
 @import '../../../node_modules/sdc-ui/css/style.css';
+/* @import '../../../node_modules/sdc-ui/css/theme_1802.css'; */
 
 @import 'sprite-old.less';
 @import 'sprite.less';
@@ -16,6 +17,7 @@
 @import 'sprite-services-icons.less';
 @import 'sprite-group-icons.less';
 @import 'sprite-policy-icons.less';
+@import 'archive-resouce.less';
 
 @import 'animation.less';
 @import 'buttons.less';
@@ -49,7 +51,7 @@
 @import '../../app/directives/graphs-v2/composition-graph/composition-graph.less';
 @import '../../app/directives/graphs-v2/deployment-graph/deployment-graph.less';
 @import '../../app/directives/graphs-v2/palette/palette.less';
-@import '../../app/directives/graphs-v2/relation-menu/relation-menu.less';
+// @import '../../app/directives/graphs-v2/relation-menu/relation-menu.less';
 @import '../../app/directives/capabilities-and-requirements/capabilities-requirements-list.less';
 // @import '../../app/directives/graphs-v2/asset-popover/asset-popover.less';
 @import '../../app/directives/info-tooltip/info-tooltip.less';
@@ -120,3 +122,4 @@
 @import '../../app/view-models/workspace/tabs/interface-operation/interface-operation.less';
 @import '../../app/view-models/workspace/workspace.less';
 @import '../../app/view-models/workspace/tabs/plugins/plugins-context.less';
+@import 'override.less';
diff --git a/catalog-ui/src/assets/styles/archive-resouce.less b/catalog-ui/src/assets/styles/archive-resouce.less
new file mode 100644
index 0000000000..ec064e00f6
--- /dev/null
+++ b/catalog-ui/src/assets/styles/archive-resouce.less
@@ -0,0 +1,7 @@
+.archive-resource-btn {
+  background: url('images/archive-delete/archive.svg') top left no-repeat;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  text-indent: 100%;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/images/archive-delete/archive.png b/catalog-ui/src/assets/styles/images/archive-delete/archive.png
new file mode 100644
index 0000000000..5284a5401e
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/archive-delete/archive.png
diff --git a/catalog-ui/src/assets/styles/images/archive-delete/archive.svg b/catalog-ui/src/assets/styles/images/archive-delete/archive.svg
new file mode 100644
index 0000000000..162e5eafe5
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/archive-delete/archive.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>icons/versio_bar/archive</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icons/versio_bar/archive" fill="#5A5A5A">
+            <path d="M1.96142578,9.02011447 C1.16722011,9.02011447 0,9.03344727 0,7.20846897 L0,4.06491428 C0,2.16137695 1.16722011,2 1.96142578,2 L22.0875382,2 C22.8817438,2 24.0641007,2.46750217 24.0641007,4.06491428 L24.0641007,7.20846897 C24.0641007,8.57785373 22.8817438,9.02011447 22.0875382,9.02011447 L21.0783829,9.02011447 L21.0783829,21.6395264 C21.0783829,22.4091347 20.4299479,23.0284153 19.6357422,23.0284153 L4.46949616,23.0284153 C3.67529049,23.0284153 3.02685547,22.4091347 3.02685547,21.6395264 L3.02685547,9.02011447 L1.96142578,9.02011447 Z M19,20.9406738 L19,9.00119358 L5.11112098,9.00119358 L5.11112098,20.9406738 L19,20.9406738 Z M9,13 C8.4,13 8,12.6 8,12 C8,11.4 8.4,11 9,11 L15,11 C15.6,11 16,11.4 16,12 C16,12.6 15.6,13 15,13 L9,13 Z M2.87234189,7.00119358 L21.206041,7.00119358 C21.6790502,7.00119358 22.0625,6.66540714 22.0625,6.25119358 L22.0625,4.75119358 C22.0625,4.33698001 21.6790502,4.00119358 21.206041,4.00119358 L2.87234189,4.00119358 C2.39933264,4.00119358 2.01588288,4.33698001 2.01588288,4.75119358 L2.01588288,6.25119358 C2.01588288,6.66540714 2.39933264,7.00119358 2.87234189,7.00119358 Z" id="Combined-Shape"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/images/canvas-tagging-icons/group_1.svg b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/group_1.svg
new file mode 100644
index 0000000000..fa4e06c4bc
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/group_1.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="44" height="41">
+  <defs>
+    <filter id="groups_1-a" width="145.5%" height="145.5%" x="-22.7%" y="-13.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <path id="groups_1-b" d="M6,4 L6,1 C6,0.4 5.6,0 5,0 C4.4,0 4,0.4 4,1 L4,4 L1,4 C0.4,4 0,4.4 0,5 C0,5.6 0.4,6 1,6 L4,6 L4,9 C4,9.6 4.4,10 5,10 C5.6,10 6,9.6 6,9 L6,6 L9,6 C9.6,6 10,5.6 10,5 C10,4.4 9.6,4 9,4 L6,4 Z"/>
+    <polygon id="groups_1-d" points="7.841 8.516 12.487 6.865 0 0 3.64 13.776 6.366 9.668 9.63 13.845 11.104 12.693"/>
+    <filter id="groups_1-c" width="196.1%" height="186.7%" x="-48.1%" y="-36.1%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/>
+      <feOffset dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" transform="translate(4 3)">
+    <g transform="translate(15 11)">
+      <path fill="#009FDB" stroke="#FFF" d="M3,0 L19,0 C20.6568542,-3.04359188e-16 22,1.34314575 22,3 L22,19 C22,20.6568542 20.6568542,22 19,22 L3,22 C1.34314575,22 2.02906125e-16,20.6568542 0,19 L0,3 C-2.02906125e-16,1.34314575 1.34314575,3.04359188e-16 3,0 Z" filter="url(#groups_1-a)"/>
+      <g transform="translate(6 6)">
+        <use fill="#FFF" xlink:href="#groups_1-b"/>
+      </g>
+    </g>
+    <use fill="#000" filter="url(#groups_1-c)" xlink:href="#groups_1-d"/>
+    <use fill="#FFF" xlink:href="#groups_1-d"/>
+    <path stroke="#000" stroke-opacity=".8" d="M8.6617598,8.75489325 L11.806255,12.7796636 L9.54386134,14.5472392 L6.39936616,10.5224689 L3.44128728,14.9806328 L-0.781456351,-1.00021852 L13.7031213,6.96320943 L8.6617598,8.75489325 Z"/>
+  </g>
+</svg>
diff --git a/catalog-ui/src/assets/styles/images/canvas-tagging-icons/group_2.svg b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/group_2.svg
new file mode 100644
index 0000000000..f6b1cf1eb7
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/group_2.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="44">
+  <defs>
+    <filter id="groups_2-a" width="145.5%" height="145.5%" x="-22.7%" y="-13.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <path id="groups_2-b" d="M6,4 L6,1 C6,0.4 5.6,0 5,0 C4.4,0 4,0.4 4,1 L4,4 L1,4 C0.4,4 0,4.4 0,5 C0,5.6 0.4,6 1,6 L4,6 L4,9 C4,9.6 4.4,10 5,10 C5.6,10 6,9.6 6,9 L6,6 L9,6 C9.6,6 10,5.6 10,5 C10,4.4 9.6,4 9,4 L6,4 Z"/>
+    <path id="groups_2-d" d="M3.98190975,9.99999992 L3.09529739,8.64532799 C2.48991036,7.72034561 1.20039622,7.38287755 0.214035029,7.88996475 L0.443864811,7.77180951 C0.199079509,7.89765337 0.081702931,8.21138642 0.182488604,8.47214489 L1.40976041,11.6474128 C1.60431817,12.1507837 2.10121802,12.8626937 2.51297222,13.2203156 C2.51297222,13.2203156 4.98190975,15.2638557 4.98190975,16.03003 L4.98190975,16.9999999 L8.98190975,16.9999999 L9.98190975,14.9999999 L10.9819098,16.9999999 L11.9819098,17 L11.9819098,16.0300302 C11.9819098,15.2638559 13.4907506,12.8506759 13.4907506,12.8506759 C13.7684994,12.3815967 14,11.5552351 14,11.0065899 L14,6.9718022 C13.9819097,6.07849828 13.2225759,5.35453877 12.2856231,5.35453877 C11.8168923,5.35453877 11.4372254,5.71651852 11.4372254,6.1634131 L11.4372254,6.48657465 C11.4372254,5.59327073 10.6778916,4.86931122 9.7409389,4.86931122 C9.27220806,4.86931122 8.89254117,5.23129097 8.89254117,5.67818555 L8.89254117,6.0013471 C8.89254117,5.10804318 8.13320739,4.38408367 7.19625465,4.38408367 C6.72752382,4.38408367 6.34785693,4.74606342 6.34785693,5.192958 L6.34785693,5.51611955 C6.34785693,5.37255591 6.33251267,5.25843099 6.30286699,5.16799051 L6.04408993,1.0012141 C6.00909675,0.437760917 5.53419442,0 4.98190967,0 C4.42577449,0 3.98190967,0.447629061 3.98190967,0.999807492 L3.98190967,5 L3.98190975,9.99999992 Z M11,9.00000012 L12,9 L12,12.9999999 L11,13 L11,9.00000012 L11,9.00000012 Z M9,9.00000012 L10,9 L10,12.9999999 L9,13 L9,9.00000012 L9,9.00000012 Z M7,9.00000012 L8,9 L8,12.9999999 L7,13 L7,9.00000012 L7,9.00000012 Z"/>
+    <filter id="groups_2-c" width="186.6%" height="170.6%" x="-43.3%" y="-29.4%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/>
+      <feOffset dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" transform="translate(4 3)">
+    <g transform="translate(16 14)">
+      <path fill="#009FDB" stroke="#FFF" d="M3,0 L19,0 C20.6568542,-3.04359188e-16 22,1.34314575 22,3 L22,19 C22,20.6568542 20.6568542,22 19,22 L3,22 C1.34314575,22 2.02906125e-16,20.6568542 0,19 L0,3 C-2.02906125e-16,1.34314575 1.34314575,3.04359188e-16 3,0 Z" filter="url(#groups_2-a)"/>
+      <g transform="translate(6 6)">
+        <use fill="#FFF" xlink:href="#groups_2-b"/>
+      </g>
+    </g>
+    <use fill="#000" filter="url(#groups_2-c)" xlink:href="#groups_2-d"/>
+    <use fill="#FFF" xlink:href="#groups_2-d"/>
+    <path stroke="#000" stroke-opacity=".8" d="M3.48190972,8.32416496 L3.48190967,5 L3.48190967,0.999807491 C3.48190967,0.170429729 4.15068503,-0.5 4.98190967,-0.5 C5.80152555,-0.5 6.49196322,0.146369011 6.54312845,0.970221378 L6.729109,3.96484284 C6.87493261,3.91257008 7.03237962,3.88408367 7.19625465,3.88408367 C7.87883467,3.88408367 8.49131623,4.18500488 8.89495329,4.65876818 C9.12697419,4.47737206 9.42176446,4.36931122 9.7409389,4.36931122 C10.4235189,4.36931122 11.0360005,4.67023243 11.4396375,5.14399573 C11.6716584,4.96259961 11.9664487,4.85453877 12.2856231,4.85453877 C13.4881886,4.85453877 14.4761616,5.78959763 14.5,6.9718022 L14.5,11.0065899 C14.5,11.6413376 14.2462612,12.556081 13.9147021,13.1157516 C13.8694672,13.1880985 13.788913,13.3198554 13.6849071,13.4950007 C13.511352,13.7872659 13.3378324,14.0912197 13.1763581,14.3904728 C13.1037538,14.5250271 13.0351585,14.6557806 12.9712321,14.7818029 C12.6639479,15.3875721 12.4819098,15.8603735 12.4819098,16.0300302 L12.4819098,17.5000001 L10.6728927,17.4999999 L9.98190975,16.1180339 L9.29092675,17.4999999 L4.48190975,17.4999999 L4.48190975,16.03003 C4.48190975,15.9441015 4.22664544,15.5664829 3.80083171,15.1083367 C3.6777582,14.9759181 3.54245432,14.8374578 3.39695629,14.6944531 C3.13416835,14.4361686 2.85142222,14.1758166 2.56855227,13.9270547 C2.39897253,13.7779227 2.26768741,13.6663479 2.1851049,13.5978113 C1.71375103,13.1884251 1.16828661,12.409552 0.943384241,11.8276717 L-0.28388756,8.65240379 C-0.444283002,8.23741952 -0.319449182,7.76260422 0.000730716832,7.47505565 L-0.0145732772,7.44528707 C0.0327844808,7.42094049 0.0806824543,7.39816945 0.129050684,7.37695571 C0.156751662,7.359073 0.18549978,7.34242973 0.215256505,7.32713183 L0.221175841,7.33864583 C1.37808265,6.88340881 2.77316135,7.29220176 3.48190972,8.32416496 Z M0.000730716832,7.47505565 C0.0405415491,7.43930216 0.0833724658,7.40644385 0.129050684,7.37695571 C0.159577614,7.36356695 0.190291862,7.35079852 0.221175841,7.33864583 L0.672473117,8.2164872 L0.442643335,8.33464243 L0.000730716832,7.47505565 Z M11.5,11 L11.5,12.9999999 L11.9999999,12.4999999 L10.9999999,12.5 L11.5,13 L11.5,11 Z M11.5,11 L11.5,9.00000012 L11.0000001,9.50000012 L12.0000001,9.5 L11.5,9 L11.5,11 Z M9.5,11 L9.5,12.9999999 L9.99999994,12.4999999 L8.99999994,12.5 L9.5,13 L9.5,11 Z M9.5,11 L9.5,9.00000012 L9.00000006,9.50000012 L10.0000001,9.5 L9.5,9 L9.5,11 Z M7.5,11 L7.5,12.9999999 L7.99999994,12.4999999 L6.99999994,12.5 L7.5,13 L7.5,11 Z M7.5,11 L7.5,9.00000012 L7.00000006,9.50000012 L8.00000006,9.5 L7.5,9 L7.5,11 Z"/>
+  </g>
+</svg>
diff --git a/catalog-ui/src/assets/styles/images/canvas-tagging-icons/policy_1.svg b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/policy_1.svg
new file mode 100644
index 0000000000..c7f83e89d6
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/policy_1.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="44" height="41">
+  <defs>
+    <filter id="policies_1-a" width="145.5%" height="145.5%" x="-22.7%" y="-13.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <path id="policies_1-b" d="M6,4 L6,1 C6,0.4 5.6,0 5,0 C4.4,0 4,0.4 4,1 L4,4 L1,4 C0.4,4 0,4.4 0,5 C0,5.6 0.4,6 1,6 L4,6 L4,9 C4,9.6 4.4,10 5,10 C5.6,10 6,9.6 6,9 L6,6 L9,6 C9.6,6 10,5.6 10,5 C10,4.4 9.6,4 9,4 L6,4 Z"/>
+    <polygon id="policies_1-d" points="7.841 8.516 12.487 6.865 0 0 3.64 13.776 6.366 9.668 9.63 13.845 11.104 12.693"/>
+    <filter id="policies_1-c" width="196.1%" height="186.7%" x="-48.1%" y="-36.1%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/>
+      <feOffset dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" transform="translate(4 3)">
+    <g transform="translate(15 11)">
+      <path fill="#162F90" stroke="#FFF" d="M3,0 L19,0 C20.6568542,-3.04359188e-16 22,1.34314575 22,3 L22,19 C22,20.6568542 20.6568542,22 19,22 L3,22 C1.34314575,22 2.02906125e-16,20.6568542 0,19 L0,3 C-2.02906125e-16,1.34314575 1.34314575,3.04359188e-16 3,0 Z" filter="url(#policies_1-a)"/>
+      <g transform="translate(6 6)">
+        <use fill="#FFF" xlink:href="#policies_1-b"/>
+      </g>
+    </g>
+    <use fill="#000" filter="url(#policies_1-c)" xlink:href="#policies_1-d"/>
+    <use fill="#FFF" xlink:href="#policies_1-d"/>
+    <path stroke="#000" stroke-opacity=".8" d="M8.6617598,8.75489325 L11.806255,12.7796636 L9.54386134,14.5472392 L6.39936616,10.5224689 L3.44128728,14.9806328 L-0.781456351,-1.00021852 L13.7031213,6.96320943 L8.6617598,8.75489325 Z"/>
+  </g>
+</svg>
diff --git a/catalog-ui/src/assets/styles/images/canvas-tagging-icons/policy_2.svg b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/policy_2.svg
new file mode 100644
index 0000000000..0b5217727f
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/policy_2.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="44">
+  <defs>
+    <filter id="policies_2-a" width="145.5%" height="145.5%" x="-22.7%" y="-13.6%" filterUnits="objectBoundingBox">
+      <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
+      <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <path id="policies_2-b" d="M6,4 L6,1 C6,0.4 5.6,0 5,0 C4.4,0 4,0.4 4,1 L4,4 L1,4 C0.4,4 0,4.4 0,5 C0,5.6 0.4,6 1,6 L4,6 L4,9 C4,9.6 4.4,10 5,10 C5.6,10 6,9.6 6,9 L6,6 L9,6 C9.6,6 10,5.6 10,5 C10,4.4 9.6,4 9,4 L6,4 Z"/>
+    <path id="policies_2-d" d="M3.98190975,9.99999992 L3.09529739,8.64532799 C2.48991036,7.72034561 1.20039622,7.38287755 0.214035029,7.88996475 L0.443864811,7.77180951 C0.199079509,7.89765337 0.081702931,8.21138642 0.182488604,8.47214489 L1.40976041,11.6474128 C1.60431817,12.1507837 2.10121802,12.8626937 2.51297222,13.2203156 C2.51297222,13.2203156 4.98190975,15.2638557 4.98190975,16.03003 L4.98190975,16.9999999 L8.98190975,16.9999999 L9.98190975,14.9999999 L10.9819098,16.9999999 L11.9819098,17 L11.9819098,16.0300302 C11.9819098,15.2638559 13.4907506,12.8506759 13.4907506,12.8506759 C13.7684994,12.3815967 14,11.5552351 14,11.0065899 L14,6.9718022 C13.9819097,6.07849828 13.2225759,5.35453877 12.2856231,5.35453877 C11.8168923,5.35453877 11.4372254,5.71651852 11.4372254,6.1634131 L11.4372254,6.48657465 C11.4372254,5.59327073 10.6778916,4.86931122 9.7409389,4.86931122 C9.27220806,4.86931122 8.89254117,5.23129097 8.89254117,5.67818555 L8.89254117,6.0013471 C8.89254117,5.10804318 8.13320739,4.38408367 7.19625465,4.38408367 C6.72752382,4.38408367 6.34785693,4.74606342 6.34785693,5.192958 L6.34785693,5.51611955 C6.34785693,5.37255591 6.33251267,5.25843099 6.30286699,5.16799051 L6.04408993,1.0012141 C6.00909675,0.437760917 5.53419442,0 4.98190967,0 C4.42577449,0 3.98190967,0.447629061 3.98190967,0.999807492 L3.98190967,5 L3.98190975,9.99999992 Z M11,9.00000012 L12,9 L12,12.9999999 L11,13 L11,9.00000012 L11,9.00000012 Z M9,9.00000012 L10,9 L10,12.9999999 L9,13 L9,9.00000012 L9,9.00000012 Z M7,9.00000012 L8,9 L8,12.9999999 L7,13 L7,9.00000012 L7,9.00000012 Z"/>
+    <filter id="policies_2-c" width="186.6%" height="170.6%" x="-43.3%" y="-29.4%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/>
+      <feOffset dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd" transform="translate(4 3)">
+    <g transform="translate(16 14)">
+      <path fill="#162F90" stroke="#FFF" d="M3,0 L19,0 C20.6568542,-3.04359188e-16 22,1.34314575 22,3 L22,19 C22,20.6568542 20.6568542,22 19,22 L3,22 C1.34314575,22 2.02906125e-16,20.6568542 0,19 L0,3 C-2.02906125e-16,1.34314575 1.34314575,3.04359188e-16 3,0 Z" filter="url(#policies_2-a)"/>
+      <g transform="translate(6 6)">
+        <use fill="#FFF" xlink:href="#policies_2-b"/>
+      </g>
+    </g>
+    <use fill="#000" filter="url(#policies_2-c)" xlink:href="#policies_2-d"/>
+    <use fill="#FFF" xlink:href="#policies_2-d"/>
+    <path stroke="#000" stroke-opacity=".8" d="M3.48190972,8.32416496 L3.48190967,5 L3.48190967,0.999807491 C3.48190967,0.170429729 4.15068503,-0.5 4.98190967,-0.5 C5.80152555,-0.5 6.49196322,0.146369011 6.54312845,0.970221378 L6.729109,3.96484284 C6.87493261,3.91257008 7.03237962,3.88408367 7.19625465,3.88408367 C7.87883467,3.88408367 8.49131623,4.18500488 8.89495329,4.65876818 C9.12697419,4.47737206 9.42176446,4.36931122 9.7409389,4.36931122 C10.4235189,4.36931122 11.0360005,4.67023243 11.4396375,5.14399573 C11.6716584,4.96259961 11.9664487,4.85453877 12.2856231,4.85453877 C13.4881886,4.85453877 14.4761616,5.78959763 14.5,6.9718022 L14.5,11.0065899 C14.5,11.6413376 14.2462612,12.556081 13.9147021,13.1157516 C13.8694672,13.1880985 13.788913,13.3198554 13.6849071,13.4950007 C13.511352,13.7872659 13.3378324,14.0912197 13.1763581,14.3904728 C13.1037538,14.5250271 13.0351585,14.6557806 12.9712321,14.7818029 C12.6639479,15.3875721 12.4819098,15.8603735 12.4819098,16.0300302 L12.4819098,17.5000001 L10.6728927,17.4999999 L9.98190975,16.1180339 L9.29092675,17.4999999 L4.48190975,17.4999999 L4.48190975,16.03003 C4.48190975,15.9441015 4.22664544,15.5664829 3.80083171,15.1083367 C3.6777582,14.9759181 3.54245432,14.8374578 3.39695629,14.6944531 C3.13416835,14.4361686 2.85142222,14.1758166 2.56855227,13.9270547 C2.39897253,13.7779227 2.26768741,13.6663479 2.1851049,13.5978113 C1.71375103,13.1884251 1.16828661,12.409552 0.943384241,11.8276717 L-0.28388756,8.65240379 C-0.444283002,8.23741952 -0.319449182,7.76260422 0.000730716832,7.47505565 L-0.0145732772,7.44528707 C0.0327844808,7.42094049 0.0806824543,7.39816945 0.129050684,7.37695571 C0.156751662,7.359073 0.18549978,7.34242973 0.215256505,7.32713183 L0.221175841,7.33864583 C1.37808265,6.88340881 2.77316135,7.29220176 3.48190972,8.32416496 Z M0.000730716832,7.47505565 C0.0405415491,7.43930216 0.0833724658,7.40644385 0.129050684,7.37695571 C0.159577614,7.36356695 0.190291862,7.35079852 0.221175841,7.33864583 L0.672473117,8.2164872 L0.442643335,8.33464243 L0.000730716832,7.47505565 Z M11.5,11 L11.5,12.9999999 L11.9999999,12.4999999 L10.9999999,12.5 L11.5,13 L11.5,11 Z M11.5,11 L11.5,9.00000012 L11.0000001,9.50000012 L12.0000001,9.5 L11.5,9 L11.5,11 Z M9.5,11 L9.5,12.9999999 L9.99999994,12.4999999 L8.99999994,12.5 L9.5,13 L9.5,11 Z M9.5,11 L9.5,9.00000012 L9.00000006,9.50000012 L10.0000001,9.5 L9.5,9 L9.5,11 Z M7.5,11 L7.5,12.9999999 L7.99999994,12.4999999 L6.99999994,12.5 L7.5,13 L7.5,11 Z M7.5,11 L7.5,9.00000012 L7.00000006,9.50000012 L8.00000006,9.5 L7.5,9 L7.5,11 Z"/>
+  </g>
+</svg>
diff --git a/catalog-ui/src/assets/styles/images/canvas-tagging-icons/policy_added.svg b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/policy_added.svg
index 9ff39019c7..269f437636 100644
--- a/catalog-ui/src/assets/styles/images/canvas-tagging-icons/policy_added.svg
+++ b/catalog-ui/src/assets/styles/images/canvas-tagging-icons/policy_added.svg
@@ -1,33 +1,18 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
-    <title>Group 13 Copy</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <path d="M3,0 L15,0 C16.6568542,-3.04359188e-16 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 L3,18 C1.34314575,18 -6.85272294e-16,16.6568542 -8.8817842e-16,15 L0,3 C-2.02906125e-16,1.34314575 1.34314575,-5.83819232e-16 3,-8.8817842e-16 Z" id="path-1"></path>
-        <filter x="-25.0%" y="-13.9%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox" id="filter-2">
-            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
-            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <path d="M12.6603086,4.57405469 L8.30209375,11.5833406 L5.57568359,9.20957266 C5.13068359,8.77957266 4.46368359,8.77957266 4.01968359,9.20957266 C3.57568359,9.64057266 3.57568359,10.2865727 4.01968359,10.7175727 L7.52409375,13.8453406 C7.74609375,14.0603406 7.96809375,14.1683406 8.30209375,14.1683406 C8.63509375,14.1683406 8.85809375,14.0603406 9.07909375,13.8453406 L14.2163086,6.08105469 C14.6603086,5.65105469 14.6603086,5.00505469 14.2163086,4.57405469 C13.7723086,4.14305469 13.1053086,4.14305469 12.6603086,4.57405469 Z" id="path-3"></path>
-    </defs>
-    <g id="sdc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group-13-Copy" transform="translate(3.000000, 1.000000)">
-            <g id="Group-4-Copy-9">
-                <g id="Group-3">
-                    <g id="Rectangle-15-Copy-5">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
-                        <use stroke="#FFFFFF" stroke-width="1" fill="#0568AE" fill-rule="evenodd" xlink:href="#path-1"></use>
-                    </g>
-                </g>
-            </g>
-            <mask id="mask-4" fill="white">
-                <use xlink:href="#path-3"></use>
-            </mask>
-            <use id="Mask" fill="#FFFFFF" xlink:href="#path-3"></use>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24">
+  <defs>
+    <path id="group-13-copy-b" d="M3,0 L15,0 C16.6568542,-3.04359188e-16 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 L3,18 C1.34314575,18 -6.85272294e-16,16.6568542 -8.8817842e-16,15 L0,3 C-2.02906125e-16,1.34314575 1.34314575,-5.83819232e-16 3,-8.8817842e-16 Z"/>
+    <filter id="group-13-copy-a" width="150%" height="150%" x="-25%" y="-13.9%" filterUnits="objectBoundingBox">
+      <feMorphology in="SourceAlpha" operator="dilate" radius=".5" result="shadowSpreadOuter1"/>
+      <feOffset dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
+      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0"/>
+    </filter>
+    <path id="group-13-copy-c" d="M12.6603086,4.57405469 L8.30209375,11.5833406 L5.57568359,9.20957266 C5.13068359,8.77957266 4.46368359,8.77957266 4.01968359,9.20957266 C3.57568359,9.64057266 3.57568359,10.2865727 4.01968359,10.7175727 L7.52409375,13.8453406 C7.74609375,14.0603406 7.96809375,14.1683406 8.30209375,14.1683406 C8.63509375,14.1683406 8.85809375,14.0603406 9.07909375,13.8453406 L14.2163086,6.08105469 C14.6603086,5.65105469 14.6603086,5.00505469 14.2163086,4.57405469 C13.7723086,4.14305469 13.1053086,4.14305469 12.6603086,4.57405469 Z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" transform="translate(3 1)">
+    <use fill="#000" filter="url(#group-13-copy-a)" xlink:href="#group-13-copy-b"/>
+    <use fill="#162F90" stroke="#FFF" xlink:href="#group-13-copy-b"/>
+    <use fill="#FFF" xlink:href="#group-13-copy-c"/>
+  </g>
+</svg>
diff --git a/catalog-ui/src/assets/styles/images/relationship-icons/BindsTo.svg b/catalog-ui/src/assets/styles/images/relationship-icons/BindsTo.svg
index ae5647dda9..e19fc4cb64 100644
--- a/catalog-ui/src/assets/styles/images/relationship-icons/BindsTo.svg
+++ b/catalog-ui/src/assets/styles/images/relationship-icons/BindsTo.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
   <defs>
     <style>
       .cls-1 {
diff --git a/catalog-ui/src/assets/styles/images/relationship-icons/ConnectedTo.svg b/catalog-ui/src/assets/styles/images/relationship-icons/ConnectedTo.svg
index 4ee7672305..9f7a75b6f2 100644
--- a/catalog-ui/src/assets/styles/images/relationship-icons/ConnectedTo.svg
+++ b/catalog-ui/src/assets/styles/images/relationship-icons/ConnectedTo.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
   <defs>
     <style>
       .cls-1 {
diff --git a/catalog-ui/src/assets/styles/images/relationship-icons/DependsOn.svg b/catalog-ui/src/assets/styles/images/relationship-icons/DependsOn.svg
index e38808e2df..39d613b25e 100644
--- a/catalog-ui/src/assets/styles/images/relationship-icons/DependsOn.svg
+++ b/catalog-ui/src/assets/styles/images/relationship-icons/DependsOn.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
   <defs>
     <style>
       .cls-1, .cls-2 {
diff --git a/catalog-ui/src/assets/styles/images/relationship-icons/HostedOn.svg b/catalog-ui/src/assets/styles/images/relationship-icons/HostedOn.svg
index 5daf84a334..22df67c4c3 100644
--- a/catalog-ui/src/assets/styles/images/relationship-icons/HostedOn.svg
+++ b/catalog-ui/src/assets/styles/images/relationship-icons/HostedOn.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
   <defs>
     <style>
       .cls-1 {
diff --git a/catalog-ui/src/assets/styles/images/relationship-icons/LinksTo.svg b/catalog-ui/src/assets/styles/images/relationship-icons/LinksTo.svg
index fb4c687774..3299595503 100644
--- a/catalog-ui/src/assets/styles/images/relationship-icons/LinksTo.svg
+++ b/catalog-ui/src/assets/styles/images/relationship-icons/LinksTo.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
   <defs>
     <style>
       .cls-1 {
diff --git a/catalog-ui/src/assets/styles/images/relationship-icons/RoutesTo.svg b/catalog-ui/src/assets/styles/images/relationship-icons/RoutesTo.svg
index 4c3caf5886..3a79cff034 100644
--- a/catalog-ui/src/assets/styles/images/relationship-icons/RoutesTo.svg
+++ b/catalog-ui/src/assets/styles/images/relationship-icons/RoutesTo.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
   <defs>
     <style>
       .cls-1 {
diff --git a/catalog-ui/src/assets/styles/images/relationship-icons/arrow.svg b/catalog-ui/src/assets/styles/images/relationship-icons/arrow.svg
index 4696e50d57..02ec817db7 100644
--- a/catalog-ui/src/assets/styles/images/relationship-icons/arrow.svg
+++ b/catalog-ui/src/assets/styles/images/relationship-icons/arrow.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="7" height="9" viewBox="0 0 7 9">
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="7" height="9" viewBox="0 0 7 9">
   <defs>
     <style>
       .cls-1 {
diff --git a/catalog-ui/src/assets/styles/images/relationship-icons/arrow_connection_right.svg b/catalog-ui/src/assets/styles/images/relationship-icons/arrow_connection_right.svg
index ea2d9f258d..bfb7be51d6 100644
--- a/catalog-ui/src/assets/styles/images/relationship-icons/arrow_connection_right.svg
+++ b/catalog-ui/src/assets/styles/images/relationship-icons/arrow_connection_right.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="7" height="9" viewBox="0 0 7 9">
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="7" height="9" viewBox="0 0 7 9">
   <defs>
     <style>
       .cls-1 {
diff --git a/catalog-ui/src/assets/styles/images/relationship-icons/conected.svg b/catalog-ui/src/assets/styles/images/relationship-icons/conected.svg
index 4ee7672305..9f7a75b6f2 100644
--- a/catalog-ui/src/assets/styles/images/relationship-icons/conected.svg
+++ b/catalog-ui/src/assets/styles/images/relationship-icons/conected.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 25 25">
   <defs>
     <style>
       .cls-1 {
diff --git a/catalog-ui/src/assets/styles/images/resource-icons/archive_big.png b/catalog-ui/src/assets/styles/images/resource-icons/archive_big.png
new file mode 100644
index 0000000000..fd5ae3d08f
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/resource-icons/archive_big.png
diff --git a/catalog-ui/src/assets/styles/images/resource-icons/archive_small.png b/catalog-ui/src/assets/styles/images/resource-icons/archive_small.png
new file mode 100644
index 0000000000..207cc41e4b
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/resource-icons/archive_small.png
diff --git a/catalog-ui/src/assets/styles/images/sprites/sprite-global.png b/catalog-ui/src/assets/styles/images/sprites/sprite-global.png
index 2cf0bd7757..ca628a2a30 100644
--- a/catalog-ui/src/assets/styles/images/sprites/sprite-global.png
+++ b/catalog-ui/src/assets/styles/images/sprites/sprite-global.png
diff --git a/catalog-ui/src/assets/styles/images/sprites/sprite-global.png-orig b/catalog-ui/src/assets/styles/images/sprites/sprite-global.png-orig
new file mode 100644
index 0000000000..51cfefab6f
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/sprites/sprite-global.png-orig
diff --git a/catalog-ui/src/assets/styles/images/sprites/sprite-policy-groups-icons.png b/catalog-ui/src/assets/styles/images/sprites/sprite-policy-groups-icons.png
index fe1723e2fa..57da9e285c 100644
--- a/catalog-ui/src/assets/styles/images/sprites/sprite-policy-groups-icons.png
+++ b/catalog-ui/src/assets/styles/images/sprites/sprite-policy-groups-icons.png
diff --git a/catalog-ui/src/assets/styles/images/sprites/sprite-resource-icons.png b/catalog-ui/src/assets/styles/images/sprites/sprite-resource-icons.png
index 7f21e24223..dc63954694 100644
--- a/catalog-ui/src/assets/styles/images/sprites/sprite-resource-icons.png
+++ b/catalog-ui/src/assets/styles/images/sprites/sprite-resource-icons.png
diff --git a/catalog-ui/src/assets/styles/layout/main.less b/catalog-ui/src/assets/styles/layout/main.less
index 2992b1d9d0..4dfeb8b46d 100644
--- a/catalog-ui/src/assets/styles/layout/main.less
+++ b/catalog-ui/src/assets/styles/layout/main.less
@@ -27,9 +27,22 @@
         .sdc-tile {
             margin: 10px;
             .sdc-tile-content {
+                overflow: visible;
+
+                .sdc-tile-content-icon {
+                    width: 100%;
+                    margin-top: -1em;
+                    text-align: right;
+                }
+
                 .sdc-tile-content-info {
                     .sdc-tile-info-line {
                         display: inline-block;
+
+                        &.title {
+                            line-height: 1.4em;
+                            height: auto;
+                        }
                     }
                 }
             }
@@ -38,6 +51,13 @@
     }
 }
 
+.w-sdc-tile-multiline-ellipsis {
+    .multiline-ellipsis-dots {
+        background: linear-gradient(to right, transparent 0%, #ffffff 80%);
+        padding-left: 1em;
+    }
+}
+
 .w-sdc-row-flex-items {
     display: flex;
     flex-wrap: wrap;
diff --git a/catalog-ui/src/assets/styles/mixins.less b/catalog-ui/src/assets/styles/mixins.less
index b55d4fd794..e71f3444aa 100644
--- a/catalog-ui/src/assets/styles/mixins.less
+++ b/catalog-ui/src/assets/styles/mixins.less
@@ -219,3 +219,37 @@
     -ms-user-select: text;
     user-select: text;
 }
+
+
+.square-icon() {
+    display: inline-block;
+    background-color: @main_color_a;
+    padding: 0;
+    margin: 0;
+    margin-right: 7px;
+    width: 2em;
+    height: 2em;
+    border-radius: 1px;
+
+    &::before {
+        display: block;
+        content: "";
+        color: @main_color_p;
+        text-align: center;
+        line-height: 2em;
+        width: calc(100% - 2px);
+        height: calc(100% - 2px);
+    }
+
+    &.small {
+        font-size: 14px;
+    }
+
+    &.medium {
+        font-size: 20px;
+    }
+
+    &.large {
+        font-size: 30px;
+    }
+}
diff --git a/catalog-ui/src/assets/styles/override.less b/catalog-ui/src/assets/styles/override.less
new file mode 100644
index 0000000000..960be234f9
--- /dev/null
+++ b/catalog-ui/src/assets/styles/override.less
@@ -0,0 +1,72 @@
+@sdcui_color_white: #ffffff;
+@sdcui_color_dark-blue: #0568ae;
+@sdcui_color_blue: #009fdb;
+@sdcui_color_light-blue: #1eb9f3;
+@sdcui_color_blue-disabled: #9dd9ef;
+@sdcui_color_lighter-blue: #e6f6fb;
+@sdcui_color_black: #000000;
+@sdcui_color_text-black: #191919;
+@sdcui_color_rich-black: #323943;
+@sdcui_color_dark-gray: #5a5a5a;
+@sdcui_color_gray: #959595;
+@sdcui_color_light-gray: #d2d2d2;
+@sdcui_color_silver: #eaeaea;
+@sdcui_color_light-silver: #f2f2f2;
+@sdcui_color_lighter-silver: #f8f8f8;
+@sdcui_color_green: #4ca90c;
+@sdcui_color_red: #cf2a2a;
+@sdcui_color_light-red: #ed4141;
+@sdcui_color_disabled-red: #f4adad;
+@sdcui_color_yellow: #ffb81c;
+@sdcui_color_dark-purple: #702f8a;
+@sdcui_color_purple: #9063cd;
+@sdcui_color_light-purple: #caa2dd;
+
+/* override sdc-ui library tabs */
+body.composition {
+
+    .sdc-tabs {
+        .sdc-tab {
+            background-color: @sdcui_color_white;
+            border: 1px solid @sdcui_color_silver;
+            border-left: none;
+            display: inline-block;
+            height: 36px;
+            text-align: center;
+            cursor: pointer;
+            padding: 2px 10px 0 10px;
+            margin: 0;
+    
+    
+            &:first-child {
+                border-left: 1px solid @sdcui_color_silver;
+            }
+            &.sdc-tab-active {
+                background-color: @sdcui_color_silver;
+            }
+            &[disabled] {
+                opacity: 0.3;
+                cursor: default;
+            }
+        }
+        &.sdc-tabs-header {
+            .sdc-tab {
+                font-size: 24px;
+            }
+        }
+        &.sdc-tabs-menu {
+            .sdc-tab {
+                font-size: 14px;
+                padding: 0px 10px 4px 10px;
+            }
+        }
+        .sdc-tab-content {
+            margin-top: 0;
+        }
+    }
+    
+}
+//override sdc-ui version 53 css, used by onboarding. This can be removed after we update past version 42
+sdc-modal {
+    position: static !important;
+}
diff --git a/catalog-ui/src/assets/styles/sprite-group-icons.less b/catalog-ui/src/assets/styles/sprite-group-icons.less
index 47340adbb3..363f7a9d09 100644
--- a/catalog-ui/src/assets/styles/sprite-group-icons.less
+++ b/catalog-ui/src/assets/styles/sprite-group-icons.less
@@ -4,7 +4,7 @@
 }
 
 .sprite-group-icons.disable               { opacity:0.5;}
-.sprite-group-icons.group                 { background-position: -43px -42px; width: 40px; height: 40px;}
+.sprite-group-icons.group                 { background-position: -239px -43px; width: 40px; height: 40px;}
 .sprite-group-icons.group-border          { background-position: -123px -36px; width: 55px; height: 55px;}
 
 sprite-group-icons.group-empty            { background-position: -40px -274px; width: 47px; height: 47px;}
diff --git a/catalog-ui/src/assets/styles/sprite-policy-icons.less b/catalog-ui/src/assets/styles/sprite-policy-icons.less
index 154cf0b6a3..40f4f7e4e2 100644
--- a/catalog-ui/src/assets/styles/sprite-policy-icons.less
+++ b/catalog-ui/src/assets/styles/sprite-policy-icons.less
@@ -5,7 +5,7 @@
 
 .sprite-policy-icons.disable              { opacity:0.5;}
 
-.sprite-policy-icons.policy               { background-position: -42px -130px; width: 40px; height: 40px;}
+.sprite-policy-icons.policy               { background-position: -239px -130px; width: 40px; height: 40px;}
 .sprite-policy-icons.policy-border        { background-position: -123px -123px; width: 55px; height: 55px;}
 
 .sprite-policy-icons.policy-empty         { background-position: -40px -546px; width: 47px; height: 47px;}
diff --git a/catalog-ui/src/assets/styles/sprite-resource-icons.less b/catalog-ui/src/assets/styles/sprite-resource-icons.less
index 2f542d661c..0ada1c8711 100644
--- a/catalog-ui/src/assets/styles/sprite-resource-icons.less
+++ b/catalog-ui/src/assets/styles/sprite-resource-icons.less
@@ -96,7 +96,7 @@
 .sprite-resource-icons.oracle.large             { background-position: -70px  -1229px; width: 60px; height: 60px;}
 
 .sprite-resource-icons.defaulticon              { background-position: -282px -2069px; width: 60px; height: 60px;}
-.sprite-resource-icons.defaulticon.small        { background-position: -210px -2101px; width: 28px; height: 28px;}
+.sprite-resource-icons.defaulticon.small        { background-position: -211px -2101px; width: 28px; height: 28px;}
 .sprite-resource-icons.defaulticon.medium       { background-position: -141px -2089px; width: 40px; height: 40px;}
 .sprite-resource-icons.defaulticon.large        { background-position: -70px -2069px; width: 61px; height: 60px;}
 
diff --git a/catalog-ui/src/assets/styles/sprite.less b/catalog-ui/src/assets/styles/sprite.less
index aaf4f5529a..3e56a0163b 100644
--- a/catalog-ui/src/assets/styles/sprite.less
+++ b/catalog-ui/src/assets/styles/sprite.less
@@ -1,3 +1,5 @@
+@import "variables";
+@import '../../assets/styles/mixins';
 .sprite-new {
     background-image: url('images/sprites/sprite-global.png');
     display: inline-block;
@@ -140,7 +142,7 @@
 .Deployed                                       { background-position: -573px -718px; width: 16px;  height: 16px;}
 
 .error-icon                                     { background-position: -51px -751px; width: 13px;  height: 11px;}
-.asdc-warning                                   { background-position: -100px -748px; width: 17px;  height: 15px;}
+.asdc-warning, .sdc-warning                     { background-position: -100px -748px; width: 17px;  height: 15px;}
 
 .link-btn                                       {  background-position: -636px -424px;  width: 19px;  height: 19px;}
 .link-btn:hover                                 {  background-position: -636px -453px;  width: 19px;  height: 19px;}
@@ -291,3 +293,43 @@
 .white-arrow-back{	background-position: -767px -918px;  width: 23px;  height: 23px;}
 .link-tooltip-arrow{background-position:-746px -961px;  width: 20px; height: 14px;}
 
+
+.archive-btn 		{ background-position: -110px -419px; width: 24px; height: 24px;}
+.archive-btn:hover 	{ background-position: -110px -447px; width: 24px; height: 24px;}
+
+.archive-component {
+    position:relative;
+    &::after {
+        content: "";
+        display: block;
+        background: url('images/sprites/sprite-global.png') no-repeat -739px -1044px;
+        width: 61px;
+        height: 61px;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    &.active-component-static {
+        &::after {
+            position: static;
+        }
+    }
+}
+
+.archive-label { background-position: -739px -1136px; width: 67px; height: 18px;}
+
+.icon-group {
+    .square-icon();
+
+    &::before {
+        content: "G";
+    }
+}
+.icon-policy {
+    .square-icon();
+    background-color: @main_color_b;
+
+    &::before {
+        content: "P";
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/svg/source/fit-all.svg b/catalog-ui/src/assets/styles/svg/source/fit-all.svg
index dbea90963f..03834f8f17 100644
--- a/catalog-ui/src/assets/styles/svg/source/fit-all.svg
+++ b/catalog-ui/src/assets/styles/svg/source/fit-all.svg
@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	width="18px" height="19px" viewBox="0 0 18 19">
+     width="18px" height="19px" viewBox="0 0 18 19">
 <path fillRule="evenodd" d="M 17.94 18.86C 17.77 18.92 17.63 19 17.4 18.94 16.03 18.93 12.86 19 12.86 19 12.5 19 11.92 18.85 12 18 12.08 17.07 12.5 17 12.86 17 12.86 17 14.79 17 14.79 17 14.79 17 10.44 11.98 10.44 11.98 10.44 11.98 11.77 10.51 11.77 10.51 11.77 10.51 16.33 15.76 16.33 15.76 16.33 15.76 16.33 12.99 16.33 12.99 16.23 12.09 17.03 11.99 17.4 11.99 17.77 11.99 18.01 12.27 18.01 12.69 18.01 12.69 18.01 18.23 18.01 18.23 18.01 17.81 18 18.55 17.94 18.86ZM 17.33 7.36C 16.92 7.36 16.04 7.25 16.15 6.31 16.15 6.31 16.15 3.62 16.15 3.62 16.15 3.62 11.37 9 11.37 9 11.37 9 10.01 7.53 10.01 7.53 10.01 7.53 14.82 2.1 14.82 2.1 14.82 2.1 12.33 2.1 12.33 2.1 11.92 2.1 11.47 2.02 11.37 1.05 11.29 0.16 11.92-0 12.33-0 12.33-0 15.82 0.07 17.33 0.06 17.59 0 17.74 0.08 17.93 0.15 17.99 0.47 18 1.25 18 0.8 18 0.8 18 6.62 18 6.62 18 7.06 17.73 7.36 17.33 7.36ZM 5.67 16.9C 6.08 16.9 6.53 16.98 6.63 17.95 6.71 18.84 6.08 19 5.67 19 5.67 19 2.18 18.93 0.67 18.94 0.41 19 0.26 18.92 0.07 18.85 0.01 18.53-0 17.75-0 18.2-0 18.2-0 12.38-0 12.38-0 11.94 0.27 11.64 0.67 11.64 1.08 11.64 1.96 11.75 1.85 12.69 1.85 12.69 1.85 15.38 1.85 15.38 1.85 15.38 6.63 10 6.63 10 6.63 10 7.99 11.47 7.99 11.47 7.99 11.47 3.18 16.9 3.18 16.9 3.18 16.9 5.67 16.9 5.67 16.9ZM 6.63 9C 6.63 9 1.85 3.62 1.85 3.62 1.85 3.62 1.85 6.31 1.85 6.31 1.96 7.25 1.08 7.36 0.67 7.36 0.27 7.36-0 7.06-0 6.62-0 6.62-0 0.8-0 0.8-0 1.25 0.01 0.47 0.07 0.15 0.26 0.08 0.41 0 0.67 0.06 2.18 0.07 5.67-0 5.67-0 6.08-0 6.71 0.16 6.63 1.05 6.53 2.02 6.08 2.1 5.67 2.1 5.67 2.1 3.18 2.1 3.18 2.1 3.18 2.1 7.99 7.53 7.99 7.53 7.99 7.53 6.63 9 6.63 9Z" fill="rgb(89,89,89)"/></svg>
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/svg/source/minus.svg b/catalog-ui/src/assets/styles/svg/source/minus.svg
index 4ced110098..7e204f19b6 100644
--- a/catalog-ui/src/assets/styles/svg/source/minus.svg
+++ b/catalog-ui/src/assets/styles/svg/source/minus.svg
@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	width="16px" height="2px" viewBox="0 0 16 2">
+     width="16px" height="2px" viewBox="0 0 16 2">
 <path fillRule="evenodd" d="M 1-0C 1-0 15-0 15-0 15.55-0 16 0.45 16 1 16 1.55 15.55 2 15 2 15 2 1 2 1 2 0.45 2 0 1.55 0 1 0 0.45 0.45-0 1-0Z" fill="rgb(99,99,99)"/></svg>
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/svg/source/plus.svg b/catalog-ui/src/assets/styles/svg/source/plus.svg
index dff172c54d..34670eda20 100644
--- a/catalog-ui/src/assets/styles/svg/source/plus.svg
+++ b/catalog-ui/src/assets/styles/svg/source/plus.svg
@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	width="18px" height="18px" viewBox="0 0 18 18">
+     width="18px" height="18px" viewBox="0 0 18 18">
 <path fillRule="evenodd" d="M 17 10C 17 10 10 10 10 10 10 10 10 17 10 17 10 17.55 9.55 18 9 18 8.45 18 8 17.55 8 17 8 17 8 10 8 10 8 10 1 10 1 10 0.45 10 0 9.55 0 9 0 8.45 0.45 8 1 8 1 8 8 8 8 8 8 8 8 1 8 1 8 0.45 8.45 0 9 0 9.55 0 10 0.45 10 1 10 1 10 8 10 8 10 8 17 8 17 8 17.55 8 18 8.45 18 9 18 9.55 17.55 10 17 10Z" fill="rgb(99,99,99)"/></svg>
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/svg/source/search-magnify.svg b/catalog-ui/src/assets/styles/svg/source/search-magnify.svg
index 279c13fd52..f5483a5087 100644
--- a/catalog-ui/src/assets/styles/svg/source/search-magnify.svg
+++ b/catalog-ui/src/assets/styles/svg/source/search-magnify.svg
@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	width="23px" height="26px" viewBox="0 0 23 26">
+     width="23px" height="26px" viewBox="0 0 23 26">
 <path fillRule="evenodd" d="M 17.53 4.53C 14.5 0.28 8.55-0.71 4.3 2.32 0.05 5.36-0.94 11.31 2.09 15.56 3.56 17.63 5.74 18.99 8.25 19.41 10.42 19.77 12.58 19.38 14.48 18.32 14.48 18.32 20.28 25.23 20.28 25.23 20.44 25.47 20.7 25.61 20.93 25.65 21.16 25.69 21.45 25.64 21.68 25.47 22.15 25.13 22.26 24.5 21.92 24.06 21.92 24.06 16.11 17.15 16.11 17.15 17.73 15.7 18.81 13.79 19.17 11.61 19.58 9.14 19.01 6.6 17.53 4.53ZM 3.76 14.4C 1.37 11.04 2.14 6.4 5.5 4 7.18 2.8 9.16 2.41 11.07 2.73 12.97 3.05 14.73 4.07 15.92 5.74 17.09 7.38 17.52 9.34 17.19 11.32 16.86 13.29 15.79 15 14.18 16.17 12.58 17.35 10.58 17.77 8.61 17.44 6.65 17.08 4.9 16.03 3.76 14.4Z" fill="rgb(99,99,99)"/></svg>
\ No newline at end of file
diff --git a/catalog-ui/src/assets/styles/variables.less b/catalog-ui/src/assets/styles/variables.less
index 163737466e..e800da9166 100644
--- a/catalog-ui/src/assets/styles/variables.less
+++ b/catalog-ui/src/assets/styles/variables.less
@@ -26,7 +26,9 @@
 @main_color_o: #d2d2d2;
 @main_color_p: #ffffff;
 @main_color_q: #999999;
-
+@main_color_r: #162F90;
+@main_color_s: #666666;
+@main_color_t: #979797;
 /* Functional Colors */
 @func_color_q: #cf2a2a;
 @func_color_r: #f2f2f2;