Dashboard: table -> change buttons to badges, fix justify content in widgets, add more space between elements, upd badges, fix border color in table,

Package: add/fix links;
Update gray button;
Alerts: change content position;
Fixed colors;
Form elements: fix several ui bugs;
Gallery: fix page;
TimeLine: fix image;

Author: Blari

changelog.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [5.2.6]
+### Changed
+
+Dashboard: table -> change buttons to badges, fix justify content in widgets, add more space between elements, upd badges, fix border color in table,
+Package: add/fix links;
+Update gray button;
+Alerts: change content position;
+Fixed colors;
+Form elements: fix several ui bugs;
+Gallery: fix page;
+TimeLine: fix image;
+
 ## [5.2.5]
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sing-app",
-  "version": "5.2.5",
+  "version": "5.2.6",
   "description": "Sing Dashboard App with Angular 7.0 Final Release support by Flatlogic",
   "scripts": {
     "install": "napa",

src/app/layout/layout.template.html

@@ -29,7 +29,7 @@
       <router-outlet></router-outlet>
     </div>
     <footer class="content-footer">
-      2019 &copy; Sing App Angular - Angular Admin Dashboard Template Made by <a href="https://flatlogic.com" target="_blank">Flatlogic</a>
+      2020 &copy; Sing App Angular - Angular Admin Dashboard Template Made by <a href="https://flatlogic.com" target="_blank">Flatlogic</a>
     </footer>
   </main>
 </div>

src/app/pages/analytics/analytics.template.html

@@ -33,7 +33,7 @@ <h6>{{analyticsService.visits.sign_out_pct}}%</h6>
                 </div>
                 <div class="mt">
                   <h6>{{analyticsService.visits.rate_pct}}%</h6>
-                  <p class="text-muted mb-0 mr">
+                  <p class="text-muted mb-0">
                     <small>Rate</small>
                   </p>
                 </div>
@@ -182,9 +182,9 @@ <h5>Support <span class='fw-semi-bold'>Requests</span></h5>
                       <td>{{row.date}}</td>
                       <td>{{row.city}}</td>
                       <td>
-                        <button class="btn p-1 px-3 btn-xs btn-{{row.status === 'Pending' ? 'success' : row.status === 'Declined' ? 'danger' : 'info'}}">
+                        <span class="badge badge-{{row.status === 'Pending' ? 'success' : row.status === 'Declined' ? 'danger' : 'info'}}">
                           {{row.status}}
-                        </button>
+                        </span>
                       </td>
                     </tr>
                   </tbody>

src/app/pages/core/colors/colors.template.html

@@ -118,28 +118,28 @@ <h5>
               Semantically distinguishable beauty.
             </p>
             <p>
-              <button class="btn btn-default width-100 mb-xs" role="button">
+              <button class="btn btn-default width-100 mb-3 mr-3" role="button">
                 Defaullt
               </button>
-              <button class="btn btn-primary width-100 mb-xs" role="button">
+              <button class="btn btn-primary width-100 mb-3 mr-3" role="button">
                 Primary
               </button>
-              <button class="btn btn-info width-100 mb-xs" role="button">
+              <button class="btn btn-info width-100 mb-3 mr-3" role="button">
                 Info
               </button>
-              <button class="btn btn-success width-100 mb-xs" role="button">
+              <button class="btn btn-success width-100 mb-3 mr-3" role="button">
                 Success
               </button>
-              <button class="btn btn-warning width-100 mb-xs" role="button">
+              <button class="btn btn-warning width-100 mb-3 mr-3" role="button">
                 Warning
               </button>
-              <button class="btn btn-danger width-100 mb-xs" role="button">
+              <button class="btn btn-danger width-100 mb-3 mr-3" role="button">
                 Danger
               </button>
-              <button class="btn btn-gray width-100 mb-xs" role="button">
+              <button class="btn btn-gray width-100 mb-3 mr-3" role="button">
                 Gray
               </button>
-              <button class="btn btn-inverse width-100 mb-xs" role="button">
+              <button class="btn btn-inverse width-100 mb-3 mr-3" role="button">
                 Inverse
               </button>
             </p>

src/app/pages/ecommerce/product-detail/components/bag/bag.template.html

@@ -1,5 +1,5 @@
 <div class="btn-toolbar bag">
-  <button class="btn btn-lg btn-inverse btn-add">
+  <button class="btn btn-lg btn-inverse btn-add mr-2">
     add to bag
     <img src="assets/img/bag.svg" alt="bag" />
   </button>

src/app/pages/ecommerce/product-detail/components/selects/selects.style.scss

@@ -15,8 +15,8 @@
     }
 
     &:last-child {
-      width: calc(35% - 7.5px);
-      margin-left: 7.5px;
+      width: calc(35% - 16px);
+      margin-left: 16px;
     }
   }
 }

src/app/pages/ecommerce/product-detail/components/slider/slider.style.scss

@@ -12,8 +12,8 @@
     transition: $transition-base;
     width: 50px;
     height: 50px;
-    background-color: rgba(0, 0, 0, 0.15);
-    color: $white;
+    background-color: transparent;
+    color: rgba(0, 0, 0, 0.24);
     border: none;
 
     &:hover {
@@ -34,7 +34,7 @@
   }
 
   .product-card {
-    padding: 0 5px;
+    padding: 0 8px;
   }
 
   @include media-breakpoint-down(sm) {

src/app/pages/ecommerce/product-grid/components/filter/filter.style.scss

@@ -4,6 +4,8 @@
 
   .filters-group {
     margin-left: 25px;
+    display: flex;
+    align-items: center;
 
     .btn-group {
       margin-left: 5px;

src/app/pages/ecommerce/product-grid/components/filter/filter.template.html

@@ -1,10 +1,10 @@
 <div class="filters">
   <div class="filters-group" *ngFor="let filter of filters.mainFilters">
-    {{filter.name}}
+    <p class="mr-3 mb-0">{{filter.name}}</p>
     <filter-dropdown [dropdown]="filter.items"></filter-dropdown>
   </div>
   <div class="filters-group">
-    {{filters.sortFilter.name}}
+    <p class="mr-3 mb-0">{{filters.sortFilter.name}}</p>
     <filter-dropdown [dropdown]="filters.sortFilter.items"></filter-dropdown>
   </div>
 </div>