Issue: Post details styling (#29)

client/src/app/posts/post-details/post-details.component.html

-<h2>{{post.getTitle}}</h2>
-
-<img [src]="post.getImageUrl">
-<h4>{{post.getPrice}} kr</h4>
-<p>{{post.getDescription}}</p>
-<br>
-<p>Publisert: {{post.getTimestamp}}</p>
-<p>Eier: {{post.getOwner}}</p>
-
-<div *ngIf="userId == post.getOwner">
-    <app-button text="Rediger annonse" (click)="editPost()"></app-button>
-    <app-button text="Slett annonse" (click)="deletePost()"></app-button>
+<div class="container">
+    <div class="greenBox">
+        <h2>{{post.getTitle}}</h2>
+        <div class="whiteBox">
+            <div class="pinkBox">
+                <img [src]="post.getImageUrl">
+            </div>
+
+            <hr>
+
+            <p>Pris:</p>
+            <h3>{{post.getPrice}} kr</h3>
+
+            <p id="description">{{post.getDescription}}</p>
+            <br>
+
+            <p id="timestamp">Publisert: {{post.getTimestamp}}</p>
+
+            <div *ngIf="userId == post.getOwner" class="buttonContainer">
+                <app-button class="ownerButton" text="Rediger annonse" (click)="editPost()"></app-button>
+                <app-button class="ownerButton" text="Slett annonse" (click)="deletePost()"></app-button>
+            </div>
+        </div>
+    </div>
 </div>

client/src/app/posts/post-details/post-details.component.scss

+div.container{
+    margin-top: 250px;
+    margin-bottom: 50px;
+    font-family: 'Josefin Sans', sans-serif;
+
+    div.greenBox{
+        background: linear-gradient(#24e072 0%, #14A35A 100%);
+        padding: 20px;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
+        width: 66%;
+        margin: auto;
+
+        h2{
+            color: white;
+            margin-bottom: 18px;
+        }
+
+        div.whiteBox{
+            background-color: white;
+            box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.5);
+            padding: 20px;
+
+            div.pinkBox{
+                background-color: #FFA1A1;
+                padding: 15px;
+                width: 66%;
+                margin: auto;
+                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
+
+                img{
+                    width: 100%;
+                }
+            }
+
+            div.buttonContainer{
+                margin-top: 30px;
+                display: grid;
+                gap: 15px;
+            }
+
+            hr{
+				margin: 20px;
+			}
+
+            p{
+				font-size: 16pt;
+			}
+
+            h3{
+                font-size: 30pt;
+                margin-left: 30px;
+            }
+
+            p#description{
+                margin-top: 30px;
+            }
+
+            p#timestamp{
+                margin-top: 30px;
+                font-size: 14pt;
+            }
+        }
+    }
+}
\ No newline at end of file

client/src/app/posts/post-form/post-form.component.html

@@ -18,7 +18,7 @@
 				</app-select>
 			</div>
 
-			<app-input [(inputModel)]="imageUrl" type="password" label="Bilde URL" (blur)="showImage(imageUrl)"></app-input>
+			<app-input [(inputModel)]="imageUrl" type="text" label="Bilde URL" (blur)="showImage(imageUrl)"></app-input>
 			<img [src]="displayImageUrl" (error)="showImage('https://i.stack.imgur.com/y9DpT.jpg')">
 
 			<p>{{statusMessage}}</p>