feat: apply new layout overhaul

src/app/modules/dashboard/section/section.component.html

@@ -0,0 +1,10 @@
+<ion-label class="section-headline"
+  >{{ title }}
+  <ion-icon name="edit" *ngIf="isEditable" (click)="onEditClick()"></ion-icon>
+  <ion-icon
+    [name]="customIcon"
+    *ngIf="customIcon"
+    (click)="onEditClick()"
+  ></ion-icon>
+</ion-label>
+<ng-content></ng-content>

src/app/modules/dashboard/section/section.component.scss

@@ -0,0 +1,55 @@
+@import '../../../../theme/util/mixins';
+
+:host {
+  display: block;
+  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
+
+  @include ion-md-up {
+    padding: var(--spacing-lg) var(--spacing-xxl) var(--spacing-sm);
+  }
+
+  &.is-editable ::ng-deep {
+    .swiper-button-prev {
+      right: 65px;
+    }
+
+    .swiper-button-next {
+      right: 35px;
+    }
+  }
+
+  &.is-extended {
+    padding-right: 0;
+    ion-icon[name='edit'] {
+      margin-right: var(--spacing-md);
+    }
+  }
+
+  // TODO
+  &:first-of-type {
+    padding-top: var(--spacing-lg);
+  }
+
+  & > ion-label:first-child {
+    font-family: var(--headline-font-family);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-bold);
+    font-stretch: condensed;
+    text-transform: uppercase;
+    margin-bottom: var(--spacing-xs);
+
+    width: 100%;
+    display: flex;
+    flex-direction: revert;
+    justify-content: space-between;
+
+    ion-icon {
+      color: var(--ion-color-medium-shade);
+      width: 25px;
+      height: 25px;
+      position: relative;
+      bottom: var(--spacing-sm);
+      cursor: pointer;
+    }
+  }
+}

src/app/modules/dashboard/section/section.component.ts

@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * 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 General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+
+/**
+ * Shows a horizontal list of action chips
+ */
+@Component({
+  selector: 'stapps-section',
+  templateUrl: 'section.component.html',
+  styleUrls: ['section.component.scss'],
+})
+export class SectionComponent implements OnInit {
+  @HostBinding('class.is-extended') isExtendedClass = false;
+
+  @HostBinding('class.is-editable') isEditableClass = false;
+
+  @Input() title = '';
+
+  @Input() isSectionExtended = false;
+
+  @Input() isEditable = false;
+
+  @Input() customIcon?: string = undefined;
+
+  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+  @Output() onEdit = new EventEmitter<void>();
+
+  ngOnInit() {
+    this.isExtendedClass = this.isSectionExtended;
+    this.isEditableClass = this.isEditable;
+  }
+
+  /**
+   * Action when edit is clicked
+   */
+  onEditClick() {
+    this.onEdit.emit();
+  }
+}