Modify Data Dictionary style and add source option items

Issue-ID: CCSDK-3092

Issue-ID: CCSDK-3093

Issue-ID: CCSDK-3094

Issue-ID: CCSDK-3095

Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: I395761081646510c1c4bab244496e11139cade01

8 files changed, 349 insertions, 220 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css
index f263c0086..1916f86fa 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css
@@ -16,4 +16,10 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END=========================================================
-*/
\ No newline at end of file
+*/
+.ace-tomorrow-night-bright .ace_marker-layer .ace_active-line{
+    background: #C3CDDB !important;
+}
+.ace-tomorrow-night-bright .ace_marker-layer .ace_bracket{
+    border: 1px solid #fff;
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html
index 8e355449b..943707e6e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html
@@ -17,7 +17,7 @@
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */-->
-<div class="card creat-card col-11">
+<div class="card creat-card">
     <div class="single-line-model">
         <label class="label-name">Name</label>
         <div class="label-input">
@@ -58,9 +58,15 @@
     <div class="single-line-model">
         <label class="label-name">Required</label>
         <div class="label-input">
-            <input type="checkbox" [checked]="metaDataTab.property.required" style="width: auto;"
-                (change)="metaDataTab.property.required = !metaDataTab.property.required" placeholder="required">
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
+                <label class="custom-control-label p-0" for="customControlValidation1">True</label>
+            </div>
         </div>
+        <!-- <div class="label-input">
+            <input type="checkbox" [checked]="metaDataTab.property.required" style="width: auto;"
+                (change)="metaDataTab.property.required = !metaDataTab.property.required" placeholder="required"> &nbsp;<span style="font-size: 14px;">True</span>
+        </div> -->
     </div>
     <!-- <div class="single-line-model">
         <label class="label-name">Library Instance</label>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css
index f02bd233d..bae7ea0ba 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css
@@ -17,21 +17,29 @@
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */
-.edit-button{
-    color:white;
-    background:#1B3E6F;
-    margin-right: 60px;
-    border: none;
-    width: 80px;
-    height: 20px;
-    margin-top: 25px;
-    font-size: 10px;
-    padding-left:5px;
-    padding-top: 3px;
-  }
-  .ed{
-    justify-content: space-between;
-  }
-  .single-line-model{
-    margin:20px;
-  }
\ No newline at end of file
+.tab-pane{
+  padding-top: 20px;
+}
+.edit-button,
+.edit-button:hover,
+.edit-button.edit-button.active{
+  position: absolute;
+  right: 15px;
+  height: 38px;
+  margin-top: 12px;
+  padding: 0 15px !important;
+  color: #fff !important;
+  background:#1B3E6F;  
+  line-height: 38px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.edit-button.active{
+  background:#5DBDBA !important;
+}
+.edit-button::before{
+  content: '';
+}
+.single-line-model{
+  margin:20px;
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
index 637c87d7a..26857e600 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
@@ -33,91 +33,110 @@
             </div>
         </header>
         <div class="container-fluid body-container">
-            <div class="container card creat-card col-11">
-                <div class="single-line-model customKeyTitle">
-                    <h5 class="label-name w-100 ">
-                        Dictionary Name
-                    </h5>
-                    <!-- <label class="label-name"></label> -->
-                    <span>Last modified {{createDate}} by me</span>
-                </div>
-            </div>
-        </div>
-        <div class="container-fluid body-container">
             <div class="container">
+                <!--Right Side - Action Buttons-->
                 <div class="creat-action-container">
-                    <a class="action-button" (click)="createDictionary()">
+                    <button class="action-button save" (click)="createDictionary()">
                         <i class="icon-save-sm" aria-hidden="true"></i>
                         <span>Save</span>
-                    </a>
-                    <a href="#" class="action-button" (click)="goBackToDashBorad()">
+                    </button>
+                    <button class="action-button" (click)="goBackToDashBorad()">
                         <i class="icon-discard-sm" aria-hidden="true"></i>
                         <span>Discard Changes</span>
-                    </a>
-                    <a href="#" class="action-button">
+                    </button>
+                    <hr>
+                    <button class="action-button">
                         <i class="icon-clone-sm" aria-hidden="true"></i>
                         <span>Clone</span>
+                    </button>
+
+                    <a class="action-button">
+                        <i class="icon-download" aria-hidden="true"></i>
+                        <span>Download</span>
                     </a>
-                    <a href="#" class="action-button delete">
+
+                    <a class="action-button delete">
                         <i class="icon-delete-sm" aria-hidden="true"></i>
                         <span>Delete</span>
                     </a>
                 </div>
+                <div class="card creat-card view-package-container">
+                    <div class="row mb-4">
+                        <div class="col-12 package-name deployed">
+                            Dictionary Name
+                        </div>
+                        <div class="col-12 package-description">
+                            Last modified {{createDate}} By Me
+                        </div>
+                    </div>
+                    <div class="row package-auth-info">
+                        <div class="col-3">
+                            <p><b>Author Name</b></p>
+                            <span>Abdelmuhaimen Seaudi</span>
+                        </div>
+                        <div class="col-3">
+                            <p><b>Author Email</b></p>
+                            <span>abdelmuhaimen.seaudi@orange.com</span>
+                        </div>
+                        <div class="col-6">
+                            <p><b>Contributions</b></p>
+                            <ul class="package-contributers">
+                                <li>
+                                    <button type="button" class="border-fade" data-toggle="tooltip"
+                                        data-placement="bottom" title="User name">
+                                        <img src="/assets/img/img-user1.jpeg">
+                                    </button>
+                                </li>
+                                <li>
+                                    <button type="button" data-toggle="tooltip" data-placement="bottom"
+                                        title="User name">
+                                        <img src="/assets/img/img-user2.jpg">
+                                    </button>
+                                </li>
+                                <li>
+                                    <button type="button" data-toggle="tooltip" data-placement="bottom"
+                                        title="User name">
+                                        <img src="/assets/img/img-user3.jpg">
+                                    </button>
+                                </li>
+                                <li>
+                                    <a href="">5 contributors</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
                 <nav class="row">
                     <!--Nav Tabs-->
                     <div class="col">
-                        <div class="nav nav-tabs ed" id="nav-tab" role="tablist">
+                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                             <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
                                 href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="false"
                                 autofocus #nameit (focusout)="saveDictionaryToStore()">METADATA</a>
-                            <a class="edit-button" id="nav-editor-tab" data-toggle="tab" href="#nav-editor" role="tab"
-                                aria-controls="nav-editor" aria-selected="false">EDITOR MODE</a>
-
+                            <a class="nav-item nav-link" id="nav-source-tab" data-toggle="tab" href="#nav-source"
+                                role="tab" aria-controls="nav-source" aria-selected="false">SOURCES</a>
+                            <a class="nav-item nav-link edit-button" id="nav-editor-tab" data-toggle="tab"
+                                href="#nav-editor" role="tab" aria-controls="nav-editor" aria-selected="false">EDITOR
+                                MODE</a>
                         </div>
-                    </div>
-                </nav>
-                <div>
-                    <div class="row mt-4">
-                        <div class="col">
-                            <div class="tab-content" id="nav-tabContent">
-                                <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
-                                    aria-labelledby="nav-metadata-tab">
-                                    <app-dictionary-metadata></app-dictionary-metadata>
-                                    <nav class="row">
-                                        <!--Nav Tabs-->
-                                        <div class="col">
-                                            <div class="nav nav-tabs " id="nav-tab" role="tablist">
-                                                <a class="nav-item nav-link active" id="nav-source-tab"
-                                                    data-toggle="tab" href="#nav-source" role="tab"
-                                                    aria-controls="nav-source" aria-selected="false">SOURCES</a>
-                                            </div>
-                                        </div>
-                                    </nav>
-                                    <div class="row mt-4">
-                                        <div class="col">
-                                            <div class="tab-content" id="nav-tabContent">
-                                                <div class="tab-pane fade show active" id="nav-source" role="tabpanel"
-                                                    aria-labelledby="nav-source-tab">
-                                                    <app-sources-template></app-sources-template>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="tab-pane fade col-11" id="nav-editor" role="tabpanel"
-                                    aria-labelledby="nav-editor-tab">
-                                    <div class="card creat-card">
-                                        <div class="editor-container">
-                                            <app-dictionary-editor></app-dictionary-editor>
-                                        </div>
-                                    </div>
-                                </div>
+                        <div class="tab-content" id="nav-tabContent">
+                            <!--MetaData-->
+                            <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
+                                aria-labelledby="nav-metadata-tab">
+                                <app-dictionary-metadata></app-dictionary-metadata>
+                            </div>
+                            <div class="tab-pane fade" id="nav-source" role="tabpanel"
+                                aria-labelledby="nav-source-tab">
+                                <app-sources-template></app-sources-template>
+                            </div>
+                            <div class="tab-pane fade" id="nav-editor" role="tabpanel"
+                                aria-labelledby="nav-editor-tab">
+                                <app-dictionary-editor></app-dictionary-editor>
                             </div>
                         </div>
                     </div>
-
-
-                </div>
+                </nav>
             </div>
         </div>
-    </div>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css
index 7799d915f..c55b6e4d9 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css
@@ -17,21 +17,115 @@
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */
-.source{
-    left: 20px;  
-    width: 72%;  
+.sourceOptions,
+.sourceList{
+  background: #F4F9FE;
+  border: solid 1px #D0DFF1 !important;
+  box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
+  border-radius: 3px !important;
 }
-.source1{
-    width: 25%;
-    background-color:#F4F9FE;
+.sourceOptions h5,
+.sourceList h5{
+  margin-bottom: 0;
+  padding: 12px 20px;
+  border-bottom: solid 1px #D7E7F9;
+  color: #C3CDDB;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+  background: #fff;
 }
-h5{
-    padding-top: 10px;
-    padding-left: 10px;
-    background-color:white;
-    height: 40px;
-    width: 100%;
+.searchBox{
+  position: relative;
+  width: 100%;
+  margin-left: 0;
+  background-color:#fff;
+  z-index: 9000;
+}
+.searchBox input{
+  width: 100%;
+  background: url(src/assets/img/icon-search-light.svg) 20px center no-repeat;
+  height: 40px;
+  padding: 0 0 0 40px;
+  background-size: 4.5%;
+  border-radius: 0;
+  border: 0;
+  border-bottom: solid 1px #E8F0FA;
+  color: #1B3E6F;
+  font-size: 13px;
+}
+.searchBox input::placeholder{
+  color: #C3CDDB;
+  font-size: 12px;
+}
+.searchBox input:focus{
+  background-color: #fff !important;
+  box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
+  text-shadow: none;
+  border-color: #DEE8F3;
+}
+.sourceOtionsScroll,
+.sourceListScroll{
+  margin-bottom: 20px;
+  height: 400px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+.sourceOtionsScroll{
+  height: 362px;
+  max-height: 362px;
+}
+.sourceOption{
+  margin: 12px 20px;
+  padding: 6px 20px;
+  background: #fff;
+  font-size: 14px;
+  box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
+}
+.sourceOptionActions{
+  margin-bottom: 20px;
 }
+.sourceOptionActions a{
+  margin-left: 20px;
+  color: #2A81ED;
+  font-weight: bold;
+  font-size: 12px;
+}
+.sourceOptionActions a:hover,
+.deleteSource a:hover{
+  text-decoration: underline;
+  cursor: pointer;
+}
+.sourceOptionActions .btn{
+  background: #1273EB;
+  border-radius: 15px;
+  font-weight: bold;
+  font-size: 12px;
+  color: #fff;
+}
+
+.deleteSource{
+  margin: 20px 0 0;
+  padding: 9px 5px;
+  background: #fff;
+  border-top: solid 1px #E8F0FA;
+}
+.deleteSource a{
+  color: #FF6469;
+  font-weight: bold;
+  font-size: 12px;
+}
+.sourceListItems{
+  height: 410px;
+  max-height: 410px;
+  overflow-y: auto;
+}
+.sourceListItems .custom-control{
+  float: left;
+}
+
+
+
 .mat-form-field + .mat-form-field {
   margin-left: 8px;
 }
@@ -57,39 +151,8 @@ mat-expansion-panel{
   width: 100%;
   color:#1B3E6F;
  }
-.example-container {
-    width: 230px;
-    max-width: 100%;
-    margin: 10px 10px 15px 0;
-    display: inline-block;
-    vertical-align: top;
-    border-radius: 2px;
-    height: 260px;
-    background-color:#F4F9FE;
-  }
-  .example-container2 {
-    width: 630px;
-    max-width: 100%;
-    margin: 10px 10px 5px 0;
-    display: inline-block;
-    vertical-align: top; 
-    border-radius: 2px;
-    height: 300px;
-    background-color:#F4F9FE;  
-  }
   
-  .example-list {
-    min-height: 12px;
-    border-radius: 0px;
-    overflow: hidden;
-    display: block;
-    margin: 5px;
-    overflow-y:scroll;
-    overflow-x:hidden;
-    margin-left: 15px; 
-    width: 195px;
-    margin-top: 15px;
-  }
+  
   
   .example-list1 {
     min-height: 12px;
@@ -101,20 +164,6 @@ mat-expansion-panel{
     overflow-x:hidden;
   }
   
-  .checkbox{
-   margin-left: 11%; 
-  }
-  .example-box {
-    padding: 2px 1px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: left;
-    box-sizing: border-box;
-    cursor: move;
-    font-size: 14px;
-    
-  }
   .example-box1 {
     padding: 1px 1px;
     display: flex;
@@ -151,24 +200,8 @@ mat-expansion-panel{
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   }
   
-.searchText{
-  width: 180px;
-  /* border-top: solid 2px #F4F9FE; */
-  border: 0px;
-  color: #1B3E6F;
-  font-size: 13px;
-  margin-top: 2px;
-}
-.searchBox{
-    position: relative;
-    top: 0%;
-    right: 0%;
-    height: 35px;
-    border-top: solid 2px #F4F9FE;
-    width: 100%;
-    margin-left:0px;
-    background-color:white;
-}
+
+
  
 .searchButton1{
   float: left;
@@ -190,19 +223,3 @@ mat-expansion-panel{
   border-radius:16px;
   border:solid 0.5px #ededed;
 }
-.footer{
-  margin: 1px 0px;
-}
-.delete{
-  color: red;
-  font-size: 14px;
-  margin: 2px;
-}
-.footer input{
-  margin: 6px 0px 1px 5px;
-}
-.select-button{
-  color: #007bff;
-  font-size: 14px;
-  margin: 2px; 
-}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html
index f6150c95b..14a0b6668 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html
@@ -17,59 +17,132 @@
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */-->
-<div class="col-11">
-  <div class="row ">
-    <div class="card creat-card source1">
-      <h5 class="label-name"> Sources Options</h5>
-      <div class="searchBox row"><i class="searchButton1 col-1" aria-hidden="true"></i>
-        <input class="searchText col-8" [(ngModel)]="searchText" type="input" placeholder="filter sources">
+<div class="row">
+  <!--Sources Options-->
+  <div class="col-3">
+    <div class="card sourceOptions">
+      <h5>Sources Options</h5>
+      <div class="searchBox">
+        <input class="searchText" [(ngModel)]="searchText" type="input" placeholder="Search">
       </div>
-
-      <div class="example-container">
-        <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="option" [cdkDropListConnectedTo]="[doneList]"
-          class="example-list" (cdkDropListDropped)="drop($event)">
-          <div class="example-box card creat-card" *ngFor="let item of option| search :searchText" cdkDrag>
-            <input type="checkbox" class="checkbox" [(ngModel)]="checked"
+      <div class="row sourceOtionsScroll">
+        <div class="col">
+          <div class="sourceOption" *ngFor="let item of option| search :searchText">
+            <!-- <input type="checkbox" class="checkbox" [(ngModel)]="checked"
               (change)="onChange(item, $event.target.checked)">
-            {{item.name}}
+            {{item.name}} -->
+            <div class="custom-control custom-checkbox">
+              <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
+              <label class="custom-control-label" for="customControlValidation1">{{item.name}}</label>
+            </div>
           </div>
-
         </div>
-
       </div>
-      <div class="footer row">
-        <a class="select-button col-sm-05">Select all</a>
-        <button class="action-button1 col-sm-04">Add to list</button>
+      <div class="row sourceOptionActions">
+        <div class="col">
+          <a>Select all</a>
+        </div>
+        <div class="col">
+          <button class="btn">Add to list</button>
+        </div>
       </div>
     </div>
+  </div>
+  <!--Sources List-->
+  <div class="col-9">
+    <div class="card sourceList">
+      <h5>Sources List</h5>
 
-    <div class="card creat-card source">
-      <h5 class="label-name">Sources List</h5>
-      <div class="example-container2 card creat-card">
-        <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="sourcesOptions"
-          [cdkDropListConnectedTo]="[todoList]" class="example-list1" (cdkDropListDropped)="drop($event)">
-
-          <div class="example-box1" *ngFor="let item of sourcesOptions" cdkDrag>
-            <input type="checkbox" value="item.name">
-            <mat-expansion-panel class="expansion-panel">
-              <mat-expansion-panel-header [collapsedHeight]="'23px'" [expandedHeight]="'23px'">
-                <mat-panel-title>
-                  {{item.name}}
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <br>
-              <ace-editor  [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000"
-                (textChanged)="textChanged($event,item)" [theme]="'tomorrow_night_bright'" #editor
-                style="height:300px;">
-              </ace-editor>
-            </mat-expansion-panel>
+      <div class="accordion sourceListItems" id="accordionExample">
+        <div class="card">
+          <div class="card-header" id="headingOne">
+            <h2 class="mb-0">
+              <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
+                aria-expanded="true" aria-controls="collapseOne">
+                <div class="custom-control custom-checkbox">
+                  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
+                  <label class="custom-control-label" for="customControlValidation1"></label>
+                </div>
+                Collapsible Group Item #1
+              </button>
+            </h2>
           </div>
 
+          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+            <div class="card-body">
+              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
+              moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
+              Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
+              shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
+              proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
+              aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-header" id="headingTwo">
+            <h2 class="mb-0">
+              <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
+                aria-expanded="false" aria-controls="collapseTwo">
+                Collapsible Group Item #2
+              </button>
+            </h2>
+          </div>
+          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+            <div class="card-body">
+              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
+              moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
+              Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
+              shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
+              proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
+              aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-header" id="headingThree">
+            <h2 class="mb-0">
+              <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree"
+                aria-expanded="false" aria-controls="collapseThree">
+                Collapsible Group Item #3
+              </button>
+            </h2>
+          </div>
+          <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
+            <div class="card-body">
+              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
+              moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
+              Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
+              shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
+              proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
+              aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+            </div>
+          </div>
         </div>
-
       </div>
-      <div>
-        <a type="submit" class="delete">Delete</a>
+
+      <!-- <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="sourcesOptions" [cdkDropListConnectedTo]="[todoList]"
+        class="example-list1 sourceListScroll" (cdkDropListDropped)="drop($event)">
+        <div class="example-box1" *ngFor="let item of sourcesOptions" cdkDrag>
+          <input type="checkbox" value="item.name">
+          <mat-expansion-panel class="expansion-panel">
+            <mat-expansion-panel-header [collapsedHeight]="'23px'" [expandedHeight]="'23px'">
+              <mat-panel-title>
+                {{item.name}}
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <br>
+            <ace-editor [(text)]=item.value [mode]="'javascript'" [autoUpdateContent]="true"
+              [durationBeforeCallback]="1000" (textChanged)="textChanged($event,item)" [theme]="'tomorrow_night_bright'"
+              #editor style="height:300px;">
+            </ace-editor>
+          </mat-expansion-panel>
+        </div>
+      </div> -->
+      <div class="row deleteSource">
+        <div class="col">
+          <a type="submit" class="">Delete Source</a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.html
index fc08ebe22..4d0906dba 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-header/dictionary-header.component.html
@@ -21,7 +21,7 @@
 <header class="page-title">
     <div class="row">
         <h2 class="col m-0">Resource Dictionary
-            <span id="numberOfPackages">({{numberOfDD}} DD)</span>
+            <span id="numberOfPackages">({{numberOfDD}} Dictionary)</span>
         </h2>
         <div class="col">
         </div>
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 0055520a7..6a911fc4b 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -224,7 +224,7 @@ button:focus{
   padding: 10px 1em;
   font-size: 12px;
   font-weight: bold;
-  height: 52px;
+  height: 54px;
   line-height: 30px;
 }
 .menu a:hover{