feat: new placeholder photos; error/not-found component

Author: kamil-plich

src/app/app.component.scss

@@ -24,7 +24,7 @@ $side-padding: calc((100% - #{$max-width}) / 2);
     justify-content: space-between;
 
     .toolbar-logo {
-        height: 100%;
+        height: 75%;
     }
 }
 

src/app/items/data/Item.ts

@@ -58,7 +58,7 @@ export class Item {
     }
 
     public fixPhotoUrl(index: number) {
-        this.photoUrls[index] = "assets/error-photo.png";
+        this.photoUrls[index] = "assets/could-not-load.png";
     }
 
     equals(other: Item): boolean {

src/app/items/item-photos/item-photos.component.html

@@ -12,7 +12,7 @@
     timings="250ms ease-in">
     <mat-carousel-slide *ngIf="item?.doesNotHavePhotos else slidesWithPhotos"
                         [hideOverlay]="true">
-        <div class="item-photo">
+        <div class="item-photo gradient-bg">
             <img [src]="'assets/no-photo.png'" alt="Item photo">
         </div>
     </mat-carousel-slide>

src/app/items/item-photos/item-photos.component.scss

@@ -11,10 +11,17 @@
 .item-photo {
     height: 100%;
     width: 100%;
+    border-radius: $dimen-xxs;
 
     img {
         object-fit: contain;
         height: 100%;
         width: 100%;
     }
 }
+
+.gradient-bg {
+    background: rgb(100,147,213);
+    background: linear-gradient(145deg, rgba(100,147,213,1) 0%, rgba(255,255,255,1) 85%);
+    padding: $dimen-l;
+}

src/app/my-account/data/items/AbstractUserItem.ts

@@ -35,7 +35,7 @@ export abstract class AbstractUserItem {
     }
 
     public fixPhotoUrl() {
-        this.photoUrl = "assets/error-photo.png";
+        this.photoUrl = "assets/could-not-load.png";
     }
 
     equals(other: AbstractUserItem): boolean {

src/app/shared/error/error.component.html

@@ -1 +1,3 @@
-<p>error works!</p>
+<div>
+    <img src="assets/error.png" alt="Error">
+</div>

src/app/shared/error/error.component.scss

@@ -0,0 +1,19 @@
+@import "src/dimens";
+
+div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    padding: $dimen-xl;
+
+    background: rgb(100,147,213);
+    background: linear-gradient(145deg, rgba(100,147,213,1) 0%, rgba(255,255,255,1) 85%);
+}
+
+img {
+    object-fit: contain;
+    max-height: 100%;
+    max-width: 100%;
+}

src/app/shared/not-found/not-found.component.html

@@ -1 +1,3 @@
-<p>not-found works!</p>
+<div>
+    <img src="assets/not-found.png" alt="Not found">
+</div>

src/app/shared/not-found/not-found.component.scss

@@ -0,0 +1,19 @@
+@import "src/dimens";
+
+div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    padding: $dimen-xl;
+
+    background: rgb(100,147,213);
+    background: linear-gradient(145deg, rgba(100,147,213,1) 0%, rgba(255,255,255,1) 85%);
+}
+
+img {
+    object-fit: contain;
+    max-height: 100%;
+    max-width: 100%;
+}