diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4db7d78..e00de05 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -31,6 +31,8 @@ import { AuthGuard } from './service/auth-guard.service';
import { NotificationModule } from '@progress/kendo-angular-notification';
import { ChartsModule } from '@progress/kendo-angular-charts';
import 'hammerjs';
+import { BkpDividerComponent } from './bkp-divider/bkp-divider.component';
+import { BkpDividerShadowBottomComponent } from './bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component';
@@ -44,7 +46,9 @@ import 'hammerjs';
DashboardComponent,
AuthComponent,
CanvasComponent,
- LoanEditComponent
+ LoanEditComponent,
+ BkpDividerComponent,
+ BkpDividerShadowBottomComponent
],
imports: [
BrowserModule,
diff --git a/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.html b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.html
new file mode 100644
index 0000000..e8d03eb
--- /dev/null
+++ b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.html
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.scss b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.scss
new file mode 100644
index 0000000..33a2c56
--- /dev/null
+++ b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.scss
@@ -0,0 +1,74 @@
+/* horizontal divider https://codepen.io/MiKr13/pen/yjaNYp */
+
+.h-divider {
+ margin: auto;
+ /* margin-top: 80px; */
+ width: 100%;
+ position: relative;
+ }
+
+ .h-divider .shadow {
+ overflow: hidden;
+ height: 20px;
+ }
+
+ .h-divider .shadow:after {
+ content: '';
+ display: block;
+ margin: -25px auto 0;
+ width: 100%;
+ height: 25px;
+ border-radius: 125px/12px;
+ box-shadow: 0 0 8px black;
+ }
+
+ .h-divider .text {
+ width: 100px;
+ height: 45px;
+ padding: 10px;
+ position: absolute;
+ bottom: 100%;
+ margin-bottom: -33px;
+ left: 50%;
+ margin-left: -60px;
+ border-radius: 100%;
+ box-shadow: 0 2px 4px #999;
+ background: white;
+ }
+
+ .h-divider .text i {
+ position: absolute;
+ top: 4px;
+ bottom: 4px;
+ left: 4px;
+ right: 4px;
+ border-radius: 100%;
+ border: 1px dashed #aaa;
+ text-align: center;
+ line-height: 50px;
+ font-style: normal;
+ color: #999;
+ }
+
+ .h-divider .text2 {
+ width: 70px;
+ height: 70px;
+ position: absolute;
+ bottom: 100%;
+ margin-bottom: -35px;
+ left: 50%;
+ margin-left: -25px;
+ border-radius: 100%;
+ box-shadow: 0 2px 4px #999;
+ background: white;
+ }
+
+ .h-divider img {
+ position: absolute;
+ margin: 4px;
+ max-width: 60px;
+ border-radius: 100%;
+ border: 1px dashed #aaa;
+ }
+
+ /* end of horizontal dividor */
\ No newline at end of file
diff --git a/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.spec.ts b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.spec.ts
new file mode 100644
index 0000000..7944c9e
--- /dev/null
+++ b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BkpDividerShadowBottomComponent } from './bkp-divider-shadow-bottom.component';
+
+describe('BkpDividerShadowBottomComponent', () => {
+ let component: BkpDividerShadowBottomComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ BkpDividerShadowBottomComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(BkpDividerShadowBottomComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.ts b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.ts
new file mode 100644
index 0000000..63f0905
--- /dev/null
+++ b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'bkp-divider-shadow-bottom',
+ templateUrl: './bkp-divider-shadow-bottom.component.html',
+ styleUrls: ['./bkp-divider-shadow-bottom.component.scss']
+})
+export class BkpDividerShadowBottomComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/src/app/bkp-divider/bkp-divider.component.html b/src/app/bkp-divider/bkp-divider.component.html
new file mode 100644
index 0000000..9c881b8
--- /dev/null
+++ b/src/app/bkp-divider/bkp-divider.component.html
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/app/bkp-divider/bkp-divider.component.scss b/src/app/bkp-divider/bkp-divider.component.scss
new file mode 100644
index 0000000..31a5e55
--- /dev/null
+++ b/src/app/bkp-divider/bkp-divider.component.scss
@@ -0,0 +1,72 @@
+$link-color: #f52e62;
+$text-color: #3f517e;
+$hr-color: rgba(0,0,0,0.35);
+$hr-text-color: #453986;
+
+$letter-spacing: .32em;
+
+$background-color: #fff;
+
+div.divider {
+ font-family: "Share Tech Mono", monospace;
+ color: $text-color;
+ font-size: 2vh;
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &::before,
+ &::after {
+ content: '';
+ display: block;
+ height: 0.09em;
+ min-width: 30vw;
+ }
+
+ &::before {
+ background: linear-gradient(to right, rgba(240,240,240,0), #fff);
+ margin-right: 4vh;
+ }
+
+ &::after {
+ background: linear-gradient(to left, rgba(240,240,240,0), #fff);
+ margin-left: 4vh;
+ }
+ }
+
+
+
+
+ hr {
+ display: block;
+ margin: 10px 0 -15px;
+ width: 100%;
+ height: 1px;
+ border: 0;
+ background-color: $hr-color;
+
+ + h2 {
+ display: inline-block;
+ position: relative;
+ left: 50%;
+ margin: 0;
+ padding: 5px 10px;
+ border: 1px solid $hr-text-color;
+ //box-shadow: inset 0 0 0 1px $hr-text-color;
+ transform: translateX(-50%);
+ color: $hr-text-color;
+ font-size: 12px;
+ font-weight: 500;
+ letter-spacing: $letter-spacing;
+ text-align: center;
+ text-transform: uppercase;
+ background-color: $background-color;
+
+ // Cancel out offset created by letterspacing
+ &::first-letter {
+ margin-left: $letter-spacing;
+ }
+ }
+ }
\ No newline at end of file
diff --git a/src/app/bkp-divider/bkp-divider.component.spec.ts b/src/app/bkp-divider/bkp-divider.component.spec.ts
new file mode 100644
index 0000000..c446cd1
--- /dev/null
+++ b/src/app/bkp-divider/bkp-divider.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BkpDividerComponent } from './bkp-divider.component';
+
+describe('BkpDividerComponent', () => {
+ let component: BkpDividerComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ BkpDividerComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(BkpDividerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/bkp-divider/bkp-divider.component.ts b/src/app/bkp-divider/bkp-divider.component.ts
new file mode 100644
index 0000000..42db378
--- /dev/null
+++ b/src/app/bkp-divider/bkp-divider.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'bkp-divider',
+ templateUrl: './bkp-divider.component.html',
+ styleUrls: ['./bkp-divider.component.scss']
+})
+export class BkpDividerComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index dcf6276..c84159d 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,9 +1,9 @@
-
-
+
+
Daily summary
-
+
-
-
-
Recent Transactions
+
+
Recent
+ Transactions
+
-
-
-
-
Pending Payments
+
+
+
Pending Payments
-
-
+
+
\ No newline at end of file
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index 2f77536..9d406af 100644
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -1,162 +1,16 @@
-/* Timeline */
-.container.outer{
- width:100%;
- background: url('../../assets/img/body_bg.jpg') no-repeat center center fixed;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
- opacity:0.98;
-}
-.container.inner {
- width: 99%;
- min-height: calc(100vh - 48px);
- /* background-color:chartreuse; */
-}
-
-
-$link-color: #f52e62;
-$text-color: #3f517e;
-$hr-color: rgba(0,0,0,0.35);
-$hr-text-color: #453986;
-
-$letter-spacing: .32em;
-
-$background-color: #fff;
-
-div.divider {
- font-family: "Share Tech Mono", monospace;
- color: $text-color;
- font-size: 2vh;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
-
- display: flex;
- justify-content: center;
- align-items: center;
-
- &::before,
- &::after {
- content: '';
- display: block;
- height: 0.09em;
- min-width: 30vw;
- }
-
- &::before {
- background: linear-gradient(to right, rgba(240,240,240,0), #fff);
- margin-right: 4vh;
- }
-
- &::after {
- background: linear-gradient(to left, rgba(240,240,240,0), #fff);
- margin-left: 4vh;
- }
- }
-
-/* horizontal divider https://codepen.io/MiKr13/pen/yjaNYp */
-
-.h-divider {
- margin: auto;
- /* margin-top: 80px; */
- width: 80%;
- position: relative;
- }
-
- .h-divider .shadow {
- overflow: hidden;
- height: 20px;
- }
-
- .h-divider .shadow:after {
- content: '';
- display: block;
- margin: -25px auto 0;
- width: 100%;
- height: 25px;
- border-radius: 125px/12px;
- box-shadow: 0 0 8px black;
- }
-
- .h-divider .text {
- width: 100px;
- height: 45px;
- padding: 10px;
- position: absolute;
- bottom: 100%;
- margin-bottom: -33px;
- left: 50%;
- margin-left: -60px;
- border-radius: 100%;
- box-shadow: 0 2px 4px #999;
- background: white;
- }
-
- .h-divider .text i {
- position: absolute;
- top: 4px;
- bottom: 4px;
- left: 4px;
- right: 4px;
- border-radius: 100%;
- border: 1px dashed #aaa;
- text-align: center;
- line-height: 50px;
- font-style: normal;
- color: #999;
- }
-
- .h-divider .text2 {
- width: 70px;
- height: 70px;
- position: absolute;
- bottom: 100%;
- margin-bottom: -35px;
- left: 50%;
- margin-left: -25px;
- border-radius: 100%;
- box-shadow: 0 2px 4px #999;
- background: white;
- }
-
- .h-divider img {
- position: absolute;
- margin: 4px;
- max-width: 60px;
- border-radius: 100%;
- border: 1px dashed #aaa;
- }
-
- /* end of horizontal dividor */
-
-
- hr {
- display: block;
- margin: 10px 0 -15px;
- width: 100%;
- height: 1px;
- border: 0;
- background-color: $hr-color;
-
- + h2 {
- display: inline-block;
- position: relative;
- left: 50%;
- margin: 0;
- padding: 5px 10px;
- border: 1px solid $hr-text-color;
- //box-shadow: inset 0 0 0 1px $hr-text-color;
- transform: translateX(-50%);
- color: $hr-text-color;
- font-size: 12px;
- font-weight: 500;
- letter-spacing: $letter-spacing;
- text-align: center;
- text-transform: uppercase;
- background-color: $background-color;
-
- // Cancel out offset created by letterspacing
- &::first-letter {
- margin-left: $letter-spacing;
- }
- }
- }
\ No newline at end of file
+.container.outer{
+ width:100%;
+ background: url('../../assets/img/body_bg.jpg') no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ opacity:0.98;
+}
+.container.inner {
+ width: 99%;
+ min-height: calc(100vh - 48px);
+ /* background-color:chartreuse; */
+}
+
+
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 0d1c091..d9310de 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -3,7 +3,6 @@ import { sampleProducts } from '../models/sample_product';
-
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
diff --git a/src/app/dashboard/dist/dashboard.component.css b/src/app/dashboard/dist/dashboard.component.css
index 8907954..1d2d0e4 100644
--- a/src/app/dashboard/dist/dashboard.component.css
+++ b/src/app/dashboard/dist/dashboard.component.css
@@ -1,4 +1,3 @@
-/* Timeline */
.container.outer {
width: 100%;
background: url("../../assets/img/body_bg.jpg") no-repeat center center fixed;
@@ -13,129 +12,4 @@
width: 99%;
min-height: calc(100vh - 48px);
/* background-color:chartreuse; */
-}
-
-div.divider {
- font-family: "Share Tech Mono", monospace;
- color: #3f517e;
- font-size: 2vh;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
- display: flex;
- justify-content: center;
- align-items: center;
-}
-div.divider::before, div.divider::after {
- content: "";
- display: block;
- height: 0.09em;
- min-width: 30vw;
-}
-div.divider::before {
- background: linear-gradient(to right, rgba(240, 240, 240, 0), #fff);
- margin-right: 4vh;
-}
-div.divider::after {
- background: linear-gradient(to left, rgba(240, 240, 240, 0), #fff);
- margin-left: 4vh;
-}
-
-/* horizontal divider https://codepen.io/MiKr13/pen/yjaNYp */
-.h-divider {
- margin: auto;
- /* margin-top: 80px; */
- width: 80%;
- position: relative;
-}
-
-.h-divider .shadow {
- overflow: hidden;
- height: 20px;
-}
-
-.h-divider .shadow:after {
- content: "";
- display: block;
- margin: -25px auto 0;
- width: 100%;
- height: 25px;
- border-radius: 125px/12px;
- box-shadow: 0 0 8px black;
-}
-
-.h-divider .text {
- width: 100px;
- height: 45px;
- padding: 10px;
- position: absolute;
- bottom: 100%;
- margin-bottom: -33px;
- left: 50%;
- margin-left: -60px;
- border-radius: 100%;
- box-shadow: 0 2px 4px #999;
- background: white;
-}
-
-.h-divider .text i {
- position: absolute;
- top: 4px;
- bottom: 4px;
- left: 4px;
- right: 4px;
- border-radius: 100%;
- border: 1px dashed #aaa;
- text-align: center;
- line-height: 50px;
- font-style: normal;
- color: #999;
-}
-
-.h-divider .text2 {
- width: 70px;
- height: 70px;
- position: absolute;
- bottom: 100%;
- margin-bottom: -35px;
- left: 50%;
- margin-left: -25px;
- border-radius: 100%;
- box-shadow: 0 2px 4px #999;
- background: white;
-}
-
-.h-divider img {
- position: absolute;
- margin: 4px;
- max-width: 60px;
- border-radius: 100%;
- border: 1px dashed #aaa;
-}
-
-/* end of horizontal dividor */
-hr {
- display: block;
- margin: 10px 0 -15px;
- width: 100%;
- height: 1px;
- border: 0;
- background-color: rgba(0, 0, 0, 0.35);
-}
-hr + h2 {
- display: inline-block;
- position: relative;
- left: 50%;
- margin: 0;
- padding: 5px 10px;
- border: 1px solid #453986;
- transform: translateX(-50%);
- color: #453986;
- font-size: 12px;
- font-weight: 500;
- letter-spacing: 0.32em;
- text-align: center;
- text-transform: uppercase;
- background-color: #fff;
-}
-hr + h2::first-letter {
- margin-left: 0.32em;
}
\ No newline at end of file