refactoring toggle

matsen-tool/src/app/_components/toggle/toggle.component.html

@@ -1,5 +1,5 @@
 <div class="toggle-component">
-    <div class="toggle" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + toggleId"
+    <div class="toggle collapsed" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + toggleId"
          aria-expanded="false">
         <h2>{{ headline }}</h2>
     </div>

matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html

@@ -24,59 +24,58 @@
         </div>
     </div>
 </div>
-<div class="spt-container">
-    <div class="posts">
-        <div class="d-flex justify-content-between align-items-start">
-            <h2>{{'basic.posts' | translate}}</h2>
-            <button class="btn btn-primary" (click)="openModalNewPosting()">{{'basic.new-post' | translate}}</button>
-        </div>
-        <div class="post mb-3" *ngFor="let post of posts">
-            <div class="card">
-                <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
-                        <p>{{ post.ownerName }}</p>
-                    </div>
-                    <div>
-                        <h3>{{ post.headline }}</h3>
-                        <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p>
-                    </div>
-                    <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
-                          data-action="edit" (click)="openModalEditPosting(post)"></span>
-                </div>
-            </div>
-            <div *ngIf="post.id && commentsVisibility.get(post.id)">
-                <div class="card ms-5" *ngFor="let comment of post.comments">
+<app-toggle #togglePosts [headline]="'basic.posts' | translate">
+    <div class="spt-container">
+        <div class="posts position-relative">
+            <button class="btn btn-primary toggle-btn" (click)="openModalNewPosting()">{{'basic.new-post' | translate}}</button>
+            <div class="post mb-3" *ngFor="let post of posts">
+                <div class="card">
                     <div class="card-body">
                         <div class="d-flex justify-content-between align-items-center">
-                            <p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
-                            <p>{{ comment.ownerName }}</p>
+                            <p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
+                            <p>{{ post.ownerName }}</p>
                         </div>
                         <div>
-                            <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
+                            <h3>{{ post.headline }}</h3>
+                            <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p>
+                        </div>
+                        <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
+                              data-action="edit" (click)="openModalEditPosting(post)"></span>
+                    </div>
+                </div>
+                <div *ngIf="post.id && commentsVisibility.get(post.id)">
+                    <div class="card ms-5" *ngFor="let comment of post.comments">
+                        <div class="card-body">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
+                                <p>{{ comment.ownerName }}</p>
+                            </div>
+                            <div>
+                                <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
+                            </div>
+                            <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
+                                  data-action="edit" (click)="openModalEditComment(comment)"></span>
                         </div>
-                        <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
-                              data-action="edit" (click)="openModalEditComment(comment)"></span>
                     </div>
                 </div>
-            </div>
 
-            <div class="d-flex justify-content-end mt-1">
-                <span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
-                      (click)="showComments(post)">
-                    <ng-container *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                    <ng-container *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
-                </span>
-                <span role="button" class="badge bg-secondary p-2" (click)="openModalNewComment(post)">{{'basic.comment-it' | translate}}</span>
+                <div class="d-flex justify-content-end mt-1">
+                    <span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
+                          (click)="showComments(post)">
+                        <ng-container *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                        <ng-container *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
+                    </span>
+                    <span role="button" class="badge bg-secondary p-2" (click)="openModalNewComment(post)">{{'basic.comment-it' | translate}}</span>
+                </div>
             </div>
+            <mat-paginator *ngIf="posts.length > 0" class="rounded-1"
+                           [pageSizeOptions]="[10,20,30]"
+                           [length]="postsLength"
+                           (page)="postsHandlePageEvent($event)"
+                           [pageSize]="postsPageSize"
+                           [pageIndex]="postsPageIndex"
+                           showFirstLastButtons>
+            </mat-paginator>
         </div>
-        <mat-paginator *ngIf="posts.length > 0" class="rounded-1"
-                       [pageSizeOptions]="[10,20,30]"
-                       [length]="postsLength"
-                       (page)="postsHandlePageEvent($event)"
-                       [pageSize]="postsPageSize"
-                       [pageIndex]="postsPageIndex"
-                       showFirstLastButtons>
-        </mat-paginator>
     </div>
-</div>
+</app-toggle>

matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts

@@ -127,6 +127,8 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
         let posting: PostJsonld = {} as PostJsonld;
         posting.contact = this.contact.id ?? null;
         posting.partner = this.contact.partner ?? null;
+        // TODO: REAL PRODUCT
+        posting.product = "/api/products/101";
         modalRefPosting.componentInstance.posting = posting;
         modalRefPosting.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {

matsen-tool/src/app/home/home.component.html

@@ -61,66 +61,65 @@
     </div>
 
     <div class="container spt-container">
-        <div class="spt-accordion">
-            <div class="d-flex justify-content-between align-items-start">
-                <h2>{{'user.my' | translate}} {{'basic.tasks' | translate}}</h2>
-                <button class="btn btn-primary" (click)="openModalNewTask()">{{'basic.new-task' | translate}}</button>
-            </div>
-            <div class="tasks mb-3" *ngFor="let task of tasks">
-                <div class="card p-3">
-                    <div class="position-relative" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
-                         aria-expanded="false"
-                         aria-controls="collapseExample">
-                        <h3 class="m-0">{{task.partnerName}}</h3>
-                        <span class="info d-flex position-absolute">
-                        <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
-                        <span class="importance" [attr.data-importance]="task.prio"></span>
-                    </span>
-                        <h2 class="m-0">{{task.headline}}</h2>
-                    </div>
-                    <div class="collapse" id="collapse-{{ApiConverter.extractId(task.id)}}">
-                        <div class="pt-3 pe-5 position-relative">
-                            <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(task.description)"></p>
-                            <p>Zugewiesen an: {{task.assignedToName}}</p>
-                            <span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
-                                  data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
+        <app-toggle #togglePosts [headline]="('user.my' | translate) + ' ' + ('basic.tasks' | translate)">
+            <div class="spt-accordion position-relative">
+                <button class="btn btn-primary toggle-btn" (click)="openModalNewTask()">{{'basic.new-task' | translate}}</button>
+                <div class="tasks mb-3" *ngFor="let task of tasks">
+                    <div class="card p-3">
+                        <div class="position-relative" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
+                             aria-expanded="false"
+                             aria-controls="collapseExample">
+                            <h3 class="m-0">{{task.partnerName}}</h3>
+                            <span class="info d-flex position-absolute">
+                            <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
+                            <span class="importance" [attr.data-importance]="task.prio"></span>
+                        </span>
+                            <h2 class="m-0">{{task.headline}}</h2>
                         </div>
-                    </div>
-                </div>
-                <ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)">
-                    <div class="card ms-5" *ngFor="let taskNote of task.taskNotes">
-                        <div class="card-body">
-                            <div class="d-flex justify-content-between align-items-center">
-                                <p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
-                                <p>{{ taskNote.ownerName }}</p>
-                            </div>
-                            <div>
-                                <p>{{ taskNote.message }}</p>
+                        <div class="collapse" id="collapse-{{ApiConverter.extractId(task.id)}}">
+                            <div class="pt-3 pe-5 position-relative">
+                                <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(task.description)"></p>
+                                <p>Zugewiesen an: {{task.assignedToName}}</p>
+                                <span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
+                                      data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
                             </div>
-                            <span *ngIf="taskNote.owner === user?.id" class="position-absolute bi bi-pencil p-2"
-                                  data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
                         </div>
                     </div>
-                </ng-container>
+                    <ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)">
+                        <div class="card ms-5" *ngFor="let taskNote of task.taskNotes">
+                            <div class="card-body">
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
+                                    <p>{{ taskNote.ownerName }}</p>
+                                </div>
+                                <div>
+                                    <p>{{ taskNote.message }}</p>
+                                </div>
+                                <span *ngIf="taskNote.owner === user?.id" class="position-absolute bi bi-pencil p-2"
+                                      data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
+                            </div>
+                        </div>
+                    </ng-container>
 
-                <div class="d-flex justify-content-end mt-1">
-                    <span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
-                          (click)="showTaskNotes(task)">
-                        <ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                        <ng-container *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
-                    </span>
-                    <span role="button" class="badge bg-secondary p-2" (click)="openModalNewTaskNote(task)">{{'basic.comment-it' | translate}}</span>
+                    <div class="d-flex justify-content-end mt-1">
+                        <span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
+                              (click)="showTaskNotes(task)">
+                            <ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                            <ng-container *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
+                        </span>
+                        <span role="button" class="badge bg-secondary p-2" (click)="openModalNewTaskNote(task)">{{'basic.comment-it' | translate}}</span>
+                    </div>
                 </div>
+                <mat-paginator *ngIf="tasks.length > 0" class="rounded-1"
+                               [pageSizeOptions]="[10,20,30]"
+                               [length]="tasksLength"
+                               (page)="tasksHandlePageEvent($event)"
+                               [pageSize]="tasksPageSize"
+                               [pageIndex]="tasksPageIndex"
+                               showFirstLastButtons>
+                </mat-paginator>
             </div>
-            <mat-paginator *ngIf="tasks.length > 0" class="rounded-1"
-                           [pageSizeOptions]="[10,20,30]"
-                           [length]="tasksLength"
-                           (page)="tasksHandlePageEvent($event)"
-                           [pageSize]="tasksPageSize"
-                           [pageIndex]="tasksPageIndex"
-                           showFirstLastButtons>
-            </mat-paginator>
-        </div>
+        </app-toggle>
     </div>
 
 <!--    <div class="container spt-container">-->

matsen-tool/src/app/layout/two-column/two-column.component.html

@@ -52,7 +52,7 @@
             </li>
         </ul>
     </div>
-    <div class="col-10">
+    <div class="col-10 pb-5">
         <div class="pe-3 pt-3">
             <button class="btn btn-secondary mb-3" (click)="goBack()">{{'basic.back' | translate}}</button>
             <router-outlet></router-outlet>

matsen-tool/src/app/partners/partners-detail/partners-detail.component.html

@@ -48,11 +48,9 @@
 </div>
 <app-toggle #toggleContacts [headline]="'basic.contacts' | translate">
     <div class="spt-container">
-        <div class="contacts">
-            <div class="d-flex justify-content-end align-items-start mb-3 toggle-btn">
-                <button class="btn btn-primary" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }}
-                </button>
-            </div>
+        <div class="contacts position-relative">
+            <button class="btn btn-primary toggle-btn" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }}
+            </button>
             <div class="row">
                 <div class="col-4" *ngFor="let contact of contacts">
                     <div class="card">
@@ -91,10 +89,8 @@
 
 <app-toggle #toggleTasks [headline]="'basic.tasks' | translate">
     <div class="spt-container">
-        <div class="spt-accordion">
-            <div class="d-flex justify-content-end align-items-start mb-3 toggle-btn">
-                <button class="btn btn-primary" (click)="openModalNewTask()">{{ 'basic.new-task' | translate }}</button>
-            </div>
+        <div class="spt-accordion position-relative">
+            <button class="btn btn-primary toggle-btn" (click)="openModalNewTask()">{{ 'basic.new-task' | translate }}</button>
             <div class="tasks mb-3" *ngFor="let task of tasks">
                 <div class="card p-3">
                     <div class="position-relative" data-bs-toggle="collapse"
@@ -158,10 +154,8 @@
 </app-toggle>
 <app-toggle #togglePosts [headline]="'basic.posts' | translate">
     <div class="spt-container">
-        <div class="posts">
-            <div class="d-flex justify-content-end align-items-start mb-3 toggle-btn">
-                <button class="btn btn-primary" (click)="openModalNewPosting()">{{ 'basic.new-post' | translate }}</button>
-            </div>
+        <div class="posts position-relative">
+            <button class="btn btn-primary toggle-btn" (click)="openModalNewPosting()">{{ 'basic.new-post' | translate }}</button>
             <div class="post mb-3" *ngFor="let post of posts">
                 <div class="card">
                     <div class="card-body">

matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts

@@ -295,6 +295,8 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         const modalRefPosting = this.modalService.open(NewPostingComponent, this.modalOptions);
         let posting: PostJsonld = {} as PostJsonld;
         posting.partner = this.partner.id ?? null;
+        // TODO: REAL PRODUCT
+        posting.product = "/api/products/101";
         modalRefPosting.componentInstance.posting = posting;
         modalRefPosting.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {

matsen-tool/src/app/postings/new-posting/new-posting.component.ts

@@ -2,7 +2,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroup} from "@angular/forms";
 import {postForm} from "@app/_forms/apiForms";
-import {PostJsonld, PostService} from "@app/core/api/v1";
+import {PartnerJsonld, PostJsonld, PostService} from "@app/core/api/v1";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {ApiConverter} from "@app/_helpers/api.converter";
 import {Subscription} from "rxjs";

matsen-tool/src/app/sales/sales-detail/sales-detail.component.html

@@ -23,59 +23,58 @@
     </div>
 </div>
 
-<div class="spt-container">
-    <div class="posts">
-        <div class="d-flex justify-content-between align-items-start">
-            <h2>{{'basic.posts' | translate}}</h2>
-            <button class="btn btn-primary" (click)="openModalNewPosting()">{{'basic.new-post' | translate}}</button>
-        </div>
-        <div class="post mb-3" *ngFor="let post of posts">
-            <div class="card">
-                <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
-                        <p>{{ post.ownerName }}</p>
-                    </div>
-                    <div>
-                        <h3>{{ post.headline }}</h3>
-                        <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p>
-                    </div>
-                    <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
-                          data-action="edit" (click)="openModalEditPosting(post)"></span>
-                </div>
-            </div>
-            <div *ngIf="post.id && commentsVisibility.get(post.id)">
-                <div class="card ms-5" *ngFor="let comment of post.comments">
+<app-toggle #togglePosts [headline]="'basic.posts' | translate">
+    <div class="spt-container">
+        <div class="posts position-relative">
+            <button class="btn btn-primary toggle-btn" (click)="openModalNewPosting()">{{'basic.new-post' | translate}}</button>
+            <div class="post mb-3" *ngFor="let post of posts">
+                <div class="card">
                     <div class="card-body">
                         <div class="d-flex justify-content-between align-items-center">
-                            <p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
-                            <p>{{ comment.ownerName }}</p>
+                            <p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
+                            <p>{{ post.ownerName }}</p>
                         </div>
                         <div>
-                            <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
+                            <h3>{{ post.headline }}</h3>
+                            <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p>
+                        </div>
+                        <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
+                              data-action="edit" (click)="openModalEditPosting(post)"></span>
+                    </div>
+                </div>
+                <div *ngIf="post.id && commentsVisibility.get(post.id)">
+                    <div class="card ms-5" *ngFor="let comment of post.comments">
+                        <div class="card-body">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
+                                <p>{{ comment.ownerName }}</p>
+                            </div>
+                            <div>
+                                <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
+                            </div>
+                            <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
+                                  data-action="edit" (click)="openModalEditComment(comment)"></span>
                         </div>
-                        <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
-                              data-action="edit" (click)="openModalEditComment(comment)"></span>
                     </div>
                 </div>
-            </div>
 
-            <div class="d-flex justify-content-end mt-1">
-                <span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
-                      (click)="showComments(post)">
-                    <ng-container *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                    <ng-container *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
-                </span>
-                <span role="button" class="badge bg-secondary p-2" (click)="openModalNewComment(post)">{{'basic.comment-it' | translate}}</span>
+                <div class="d-flex justify-content-end mt-1">
+                    <span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
+                          (click)="showComments(post)">
+                        <ng-container *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                        <ng-container *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
+                    </span>
+                    <span role="button" class="badge bg-secondary p-2" (click)="openModalNewComment(post)">{{'basic.comment-it' | translate}}</span>
+                </div>
             </div>
+            <mat-paginator *ngIf="posts.length > 0" class="rounded-1"
+                           [pageSizeOptions]="[10,20,30]"
+                           [length]="postsLength"
+                           (page)="postsHandlePageEvent($event)"
+                           [pageSize]="postsPageSize"
+                           [pageIndex]="postsPageIndex"
+                           showFirstLastButtons>
+            </mat-paginator>
         </div>
-        <mat-paginator *ngIf="posts.length > 0" class="rounded-1"
-                       [pageSizeOptions]="[10,20,30]"
-                       [length]="postsLength"
-                       (page)="postsHandlePageEvent($event)"
-                       [pageSize]="postsPageSize"
-                       [pageIndex]="postsPageIndex"
-                       showFirstLastButtons>
-        </mat-paginator>
     </div>
-</div>
+</app-toggle>

matsen-tool/src/assets/scss/_basics.scss

@@ -1,5 +1,11 @@
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
 
 body {
   background: #d2d2d2;
@@ -27,6 +33,7 @@ img {
 }
 
 .spt-container {
+  min-height: 1px;
   margin-bottom: 3rem;
 }
 
@@ -39,12 +46,15 @@ img {
   position: absolute;
   right: 0;
   top: -16px;
+
   &[data-importance="low"] {
     background: #77bb33;
   }
+
   &[data-importance="medium"] {
     background: #ffee55;
   }
+
   &[data-importance="high"] {
     background: #bb1414;
   }
@@ -58,6 +68,52 @@ img {
   }
 }
 
+.toggle {
+  background: $color-matsen;
+  color: #fff;
+  padding: 3px 10px 3px 40px;
+  border-radius: 6px;
+  margin-bottom: 1rem;
+  position: relative;
+  cursor: pointer;
+
+  * {
+    margin: 0 !important;
+  }
+
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    top: 17px;
+    width: 15px;
+    height: 2px;
+    background: #fff;
+    @include transition();
+  }
+
+  &:before {
+    transform: rotate(45deg);
+    left: 10px;
+  }
+
+  &:after {
+    transform: rotate(-45deg);
+    left: 20px;
+  }
+  &.collapsed {
+    &:before {
+      transform: rotate(-45deg);
+    }
+    &:after {
+      transform: rotate(45deg);
+    }
+  }
+}
+
 .toggle-btn {
-  margin-top: -3.25rem;
-}
+  position: absolute;
+  right: 0;
+  top: -3.38rem;
+}
+

matsen-tool/src/assets/scss/_form.scss

@@ -5,7 +5,7 @@
     align-items: center;
     cursor: pointer;
     padding: 2px 0;
-    border-radius: 5px;
+    border-radius: 6px;
     @include transition();
     &:hover {
       background: $color-matsen;

matsen-tool/src/assets/scss/_sales.scss

@@ -1,15 +1,15 @@
 .sales-summary-container {
 
   .sales-summary-bar {
-    border-radius: 5px;
+    border-radius: 6px;
     background: #bbb;
     margin: 0 0 0.5rem 0;
     div {
       animation: expand 2.5s ease;
-      border-radius: 5px;
+      border-radius: 6px;
       span {
         display: block;
-        border-radius: 5px;
+        border-radius: 6px;
         padding: 15px;
         white-space: nowrap;
       }