diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..5d2ad15 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png new file mode 100644 index 0000000..1d53c93 Binary files /dev/null and b/public/favicon-96x96.png differ diff --git a/public/favicon.ico b/public/favicon.ico index 57614f9..fbc0d12 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..b7edf47 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,17 @@ + \ No newline at end of file diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 0000000..4f42323 --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1,21 @@ +{ + "name": "Common Cents", + "short_name": "Common Cents", + "icons": [ + { + "src": "/web-app-manifest-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "/web-app-manifest-512x512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/public/web-app-manifest-192x192.png b/public/web-app-manifest-192x192.png new file mode 100644 index 0000000..3f0b5fb Binary files /dev/null and b/public/web-app-manifest-192x192.png differ diff --git a/public/web-app-manifest-512x512.png b/public/web-app-manifest-512x512.png new file mode 100644 index 0000000..9aac5a0 Binary files /dev/null and b/public/web-app-manifest-512x512.png differ diff --git a/src/app/app.html b/src/app/app.html index 9ad329b..c065c67 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -2,6 +2,7 @@

Common Cents

The common sense expense tracker.

+
diff --git a/src/app/app.scss b/src/app/app.scss index 79354d0..46d0307 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -2,6 +2,17 @@ padding: 0.5rem; } +.app-header { + padding: 0.5rem; + display: flex; + flex-direction: column; + align-items: center; + + app-divider { + width: 100%; + } +} + h1 { font-size: 3.125rem; line-height: 100%; diff --git a/src/app/app.ts b/src/app/app.ts index aaf9e67..68f4f4a 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,9 +1,10 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import { Divider } from './components/divider/divider'; @Component({ selector: 'app-root', - imports: [RouterOutlet], + imports: [RouterOutlet, Divider], templateUrl: './app.html', styleUrl: './app.scss' }) diff --git a/src/app/components/divider/divider.html b/src/app/components/divider/divider.html new file mode 100644 index 0000000..b559386 --- /dev/null +++ b/src/app/components/divider/divider.html @@ -0,0 +1 @@ +
diff --git a/src/app/components/divider/divider.scss b/src/app/components/divider/divider.scss new file mode 100644 index 0000000..a2e02bf --- /dev/null +++ b/src/app/components/divider/divider.scss @@ -0,0 +1,4 @@ +.divider { + padding-top: 1rem; + border-bottom: 1px #80808042 solid; +} diff --git a/src/app/components/divider/divider.ts b/src/app/components/divider/divider.ts new file mode 100644 index 0000000..fb197c5 --- /dev/null +++ b/src/app/components/divider/divider.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-divider', + imports: [], + templateUrl: './divider.html', + styleUrl: './divider.scss' +}) +export class Divider { } diff --git a/src/app/components/expense-list/expense-list.component.html b/src/app/components/expense-list/expense-list.component.html index 18a7201..8cdabaa 100644 --- a/src/app/components/expense-list/expense-list.component.html +++ b/src/app/components/expense-list/expense-list.component.html @@ -1,6 +1,17 @@
-

Expenses

- @for (expense of expenses(); track expense.id) { - - } +
+

Expenses

+ +
+ +
+ @for (expense of expenses(); track expense.id) { + + } + @if (!expenses().length) { +
+ No expenses to display +
+ } +
diff --git a/src/app/components/expense-list/expense-list.component.scss b/src/app/components/expense-list/expense-list.component.scss index 818821c..1b125f4 100644 --- a/src/app/components/expense-list/expense-list.component.scss +++ b/src/app/components/expense-list/expense-list.component.scss @@ -2,3 +2,28 @@ display: grid; gap: 1rem; } + +.expense-list-header { + padding-top: 1rem; + display: flex; + flex-direction: column; + align-items: center; + + p { + font-size: 1.8rem; + line-height: 100%; + font-weight: 200; + margin: 0; + font-family: sans-serif; + } + + app-divider { + width: 100%; + } +} + +.expense-list { + display: grid; + gap: 1rem; + justify-content: center; +} diff --git a/src/app/components/expense-list/expense-list.component.ts b/src/app/components/expense-list/expense-list.component.ts index 9846fb4..532559e 100644 --- a/src/app/components/expense-list/expense-list.component.ts +++ b/src/app/components/expense-list/expense-list.component.ts @@ -3,10 +3,11 @@ import { ExpenseService } from '../../services/expense.service'; import { MatTableModule } from '@angular/material/table'; import { MatCardModule } from '@angular/material/card'; import { ExpenseComponent } from '../expense/expense.component'; +import {Divider} from '../divider/divider'; @Component({ selector: 'app-expense-list', - imports: [MatTableModule, MatCardModule, ExpenseComponent], + imports: [MatTableModule, MatCardModule, ExpenseComponent, Divider], templateUrl: './expense-list.component.html', styleUrl: './expense-list.component.scss' }) diff --git a/src/index.html b/src/index.html index 1da5b0f..66e56cd 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,11 @@ Common Cents - + + + + +