fix/asa-206: subpanel tables and panel button icon

docker/advocase-image/build-files/suitecrm/core/app/core/src/lib/components/panel/panel.component.html

@@ -1,10 +1,38 @@
+<! --
+/**
+* SuiteCRM is a customer relationship management program developed by SalesAgility Ltd.
+* Copyright (C) 2021 SalesAgility Ltd.
+*
+* This program is free software; you can redistribute it and/or modify it under
+* the terms of the GNU Affero General Public License version 3 as published by the
+* Free Software Foundation with the addition of the following permission added
+* to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
+* IN WHICH THE COPYRIGHT IS OWNED BY SALESAGILITY, SALESAGILITY DISCLAIMS THE
+* WARRANTY OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
+*
+* This program is distributed in the hope that it will be useful, but WITHOUT
+* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+* FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+* details.
+*
+* You should have received a copy of the GNU Affero General Public License
+* along with this program.  If not, see http://www.gnu.org/licenses.
+*
+* In accordance with Section 7(b) of the GNU Affero General Public License
+* version 3, these Appropriate Legal Notices must retain the display of the
+* "Supercharged by SuiteCRM" logo. If the display of the logos is not reasonably
+* feasible for technical reasons, the Appropriate Legal Notices must display
+* the words "Supercharged by SuiteCRM".
+*/
+-->
+
 <div [class.collapsed]="isCollapsed" class="card panel-card {{klass}}">
     <div *ngIf="showHeader" class="card-header d-flex justify-content-end align-items-center">
         <div
-            class="flex-grow-1 align-items-center justify-content-between d-flex panel-title-upper-header"
+            class="flex-grow-1 align-items-center justify-content-between sub-panel-flex-content d-flex"
             >
-            <div *ngIf="title" class="panel-title">{{title}}</div>
-            <div *ngIf="titleKey" class="pl-1 panel-title">
+            <div *ngIf="title" class="panel-title panel-title-upper-header">{{title}}</div>
+            <div *ngIf="titleKey" class="pl-1 panel-title panel-title-upper-header">
                 <scrm-label [labelKey]="titleKey"></scrm-label>
             </div>
             <div class="d-flex align-items-center">
@@ -19,30 +47,30 @@
             </div>
         </div>
     </div>
+    <div class="card-body card-body-padding" [ngbCollapse]="isCollapsed">
 
-    <div class="flex-grow-1 align-items-center d-flex justify-content-between panel-title-header">
-        <div *ngIf="isCollapsible()" class="d-flex align-items-center">
-            <scrm-minimise-button
-                *ngIf="isCollapsible()"
-                [config]="minimiseButton"
-                [status]="minimiseStatus">
-            </scrm-minimise-button>
+        <div class="flex-grow-1 align-items-center d-flex justify-content-between panel-title-header">
+            <div *ngIf="isCollapsible()" class="d-flex align-items-center">
+                <scrm-minimise-button
+                    *ngIf="isCollapsible()"
+                    [config]="minimiseButton"
+                    [status]="minimiseStatus">
+                </scrm-minimise-button>
 
-            <ng-content select="[panel-icon-area]"></ng-content>
-        </div>
+                <ng-content select="[panel-icon-area]"></ng-content>
+            </div>
 
-        <div *ngIf="title" class="pl-1 panel-title">{{title}}</div>
+            <div *ngIf="title" class="pl-1 panel-title">{{title}}</div>
 
-        <div *ngIf="titleKey" class="pl-1 panel-title">
-            <scrm-label [labelKey]="titleKey"></scrm-label>
-        </div>
+            <div *ngIf="titleKey" class="pl-1 panel-title">
+                <scrm-label [labelKey]="titleKey"></scrm-label>
+            </div>
 
-        <div class="panel-buttons float-right">
-            <ng-content select="[panel-header-button]"></ng-content>
+            <div class="panel-buttons float-right">
+                <ng-content select="[panel-header-button]"></ng-content>
+            </div>
         </div>
-    </div>
 
-    <div class="card-body card-body-padding" [ngbCollapse]="isCollapsed">
         <ng-content select="[panel-body]"></ng-content>
     </div>
 </div>

docker/advocase-image/build-files/suitecrm/core/app/shell/src/themes/suite8/css/components/_svg.scss

@@ -88,14 +88,13 @@
 }
 
 .line-action svg {
-  fill: $sky-blue;
+  fill: $typography-color-link;
 }
 
 .line-action:hover svg {
-  fill: $bright-purple;
+  fill: $typography-color-link-hover;
 }
 
-
 .back-to-top svg {
   width: 1em;
   height: 1em;
@@ -115,6 +114,11 @@
   height: 14px;
 }
 
+.card-body .sicon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .sicon-xs svg {
   width: 0.5em;
   height: 0.5em;
@@ -296,4 +300,4 @@
     vertical-align: middle;
     fill: $off-white;
   }
-}
+}

docker/advocase-image/build-files/suitecrm/core/app/shell/src/themes/suite8/css/layout/_listview.scss

@@ -24,7 +24,7 @@
  * the words "Supercharged by SuiteCRM".
  */
 
- .list-view {
+.list-view {
   margin: 82px 56px 32px 56px;
   background-color: #ffffff;
   border: 1px solid rgba(0,0,0,.1);
@@ -75,6 +75,15 @@
 .table-header-select-count {
   margin-right: 24px;
   margin-bottom: 0;
+  color: $primary_text;
+  font-family: "BC Sans";
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.table-header-select-count {
   color:$primary_text;
   font-family: "BC Sans";
   font-size: 16px;
@@ -164,22 +173,28 @@
   border-bottom-left-radius: 0.3em;
 }
 
+.card-body .table-footer {
+  margin-top: 8px;
+}
+
 .table td {
   vertical-align: middle;
   padding: 0.45em;
+  font-weight: 400;
 }
 
 .table th {
   border-top: 0;
   padding: 0.5rem 0.45em;
+  font-weight: 700;
 }
 
 .table thead th {
   border-bottom: 0;
 }
 
 .table td, .table th {
-  font-size: 0.797rem;
+  font-size: 1rem;
   max-width: 220px;
 }
 
@@ -415,6 +430,8 @@ td {
 }
 
 .centre-pagination {
+  margin: 0 0.7em;
+  font-weight: bold;
   position: relative;
   top: initial;
   bottom: initial;
@@ -440,3 +457,4 @@ td {
 td.cdk-column-checkbox {
   min-width: 32px;
 }
+

docker/advocase-image/build-files/suitecrm/core/app/shell/src/themes/suite8/css/layout/_panel.scss

@@ -37,7 +37,11 @@
 }
 
 .sub-panel .panel-title-upper-header {
-    display:  none !important;
+    display: none !important;
+}
+
+.sub-panel .sub-panel-flex-content {
+  justify-content: flex-end !important;
 }
 
 .panel-card.collapsed .card-header {
@@ -58,7 +62,12 @@
 }
 
 .panel-card .card-body-padding {
-    padding: 2rem !important;
+    padding: 1rem 2.5rem;
+    border-radius: 0px 0px  6px 6px;
+    border-right:  2px solid  #D8D8D8;
+    border-bottom:  2px solid #D8D8D8;
+    border-left:  2px solid #D8D8D8;
+    background: $white;
 }
 
 .panel-title-header .panel-title {
@@ -75,7 +84,7 @@
 }
 
 .panel-title-header {
-  padding: 1rem 2rem;
+  padding-bottom: 1.5rem;
 }
 
 .panel-title-upper-header {