final styling, remove unused pkgs

package.json

@@ -19,11 +19,8 @@
     "@angular/platform-browser": "~12.1.1",
     "@angular/platform-browser-dynamic": "~12.1.1",
     "@angular/router": "~12.1.1",
-    "@morteza-jamali/lineicons": "^2.0.1",
     "@ng-bootstrap/ng-bootstrap": "^10.0.0",
     "bootstrap": "^4.6.0",
-    "bootstrap-icons": "^1.5.0",
-    "react-lineicons": "^3.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"

src/app/app.component.html

@@ -5,16 +5,17 @@
   <div class="unblur pt-2">
     <div class="container">
       <div class="mt-3 mb-2 pb-4 row justify-content-md-center">
-        <div class=col-4>
-          <div class="card blue-header">
-            <i class="lni"></i>
-            <h2 class="card-header">Make Transfer</h2>
+        <div class="col-lg-4 pb-3">
+          <div class="blue-header card-header">
+            <i class="lni lni-wallet"></i>
+            <h4 class="pl-3 d-inline">Make Transfer</h4>
           </div>
           <app-transaction-form (newTransfer)="recieveTransfer($event)"></app-transaction-form>
         </div>
-        <div class="col-8">
-          <div class="card blue-header">
-            <h2 class="card-header">Transactions List</h2>
+        <div class="col-lg-8">
+          <div class="blue-header card-header">
+            <i class="lni lni-list"></i>
+            <h4 class="pl-3 d-inline">Transactions List</h4>
           </div>
           <app-transaction-list [newTransaction]="transaction"></app-transaction-list>
         </div>

src/app/app.component.scss

@@ -4,7 +4,6 @@
   background-image: url(../assets/background.jpg);
   background-position: center;
   background-size: cover;
-  height: 100%;
 }
 
 .unblur {
@@ -13,10 +12,15 @@
 }
 
 .blue-header {
+  background-color: $primary-blue;  
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
-  h2 {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  h4, .lni {
     color: white;
   }
-  background-color: $primary-blue;  
+  i {
+    font-size: 20px
+  }
 }

src/app/app.component.ts

@@ -33,6 +33,4 @@ export class AppComponent {
       }
     }
   }
-
-
 }

src/app/transaction-form/transaction-form.component.html

@@ -1,6 +1,5 @@
-<div class="card">
+<div class="card top-flat">
   <div class="card-body">
-    <!-- <h5 class="card-title">Make Transfer</h5> -->
     <form [formGroup]="transactionForm">
       <div class="mb-3">
         <label for="fromAcc" class="form-label">From Account</label>
@@ -15,7 +14,9 @@
       <label for="amount" class="form-label">Amount</label>
       <div class="mb-3">
         <div class="input-group">
-          <span class="input-group-text">€</span>
+          <div class="input-group-prepend">
+            <span class="input-group-text">€</span>
+          </div>
           <input [ngClass]="{ 'is-invalid': isControlInvalid(cs.amount) }" id="amount" type="number"
             class="form-control" formControlName="amount" placeholder="specify an amount">
         </div>

src/app/transaction-form/transaction-form.component.scss

@@ -1,4 +1,9 @@
 .error {
   color: red;
   font-size: small;
+}
+
+.card {
+  border-bottom-left-radius: 1rem;
+  border-bottom-right-radius: 1rem;
 }

src/app/transaction-list/transaction-list.component.html

@@ -1,22 +1,22 @@
-<div class="card">
+<div class="card top-flat">
   <div class="card-body">
     <app-filter (inputChange)="updateFilter($event)"></app-filter>
     <div class="list-container">
       <p class="d-flex pt-5 justify-content-center" *ngIf="!transactions.length">Loading transactions...</p>
       <ul class="list-group" *ngFor="let t of transactions">
         <li *ngIf="shouldDisplayItem(t.merchant.name)" class="item list-group-item">
           <div class="row align-items-center">
-            <div class="col-2">
+            <div class="col-lg-2 col-auto">
               <div class="row align-items-center">
                 <span class="code col px-0 py-3" [ngStyle]="{'background-color': t.categoryCode}">&nbsp;</span>
                 <span class="col">{{dateString(t.dates.valueDate)}}</span>
               </div>
             </div>
-            <div class="col">
+            <div class="col-lg-7 col">
               <span class="mb-0">{{t.merchant.name}}</span><br>
               <span class="transaction-type">{{t.transaction.type}}</span>
             </div>
-            <div class="col text-right">
+            <div class="col-lg-3 col-auto text-right">
               <span [ngClass]="t.transaction.creditDebitIndicator">{{moneyString(t.transaction)}}</span>
             </div>
           </div>

src/styles.scss

@@ -1,34 +1,23 @@
 @import '~bootstrap/scss/bootstrap';
+@import url("https://cdn.lineicons.com/2.0/LineIcons.css");
 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap');
 
 * {
   font-family: 'Nunito', sans-serif;
 }
 
-html {
-  height: 100vh;
-}
+$or:orange;
 
-button, .button {
-  background-color: #ccc;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  color: black;
-  font-size: 1.2rem;
-  padding: 1rem;
-}
-button:hover {
-  background-color: black;
+.btn-primary {
+  @include button-variant($or, darken($or, 7.5%), darken($or, 10%), lighten($or,5%), lighten($or, 10%), darken($or,30%));
   color: white;
 }
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
+
+.btn-outline-primary {
+  @include button-outline-variant($or, #222222, lighten($or,5%), $or);
 }
 
-
-// .card {
-
-// }
+.top-flat {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}