Major redesign of form attachments (the ones you find on post creation and edit)

4 files changed, 13 insertions, 19 deletions

diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css
index 372792c..a0b6d2e 100644
--- a/src/app/components/feed/feed.component.css
+++ b/src/app/components/feed/feed.component.css
@@ -1,3 +1,7 @@
+section:empty {
+  display: none;
+}
+
 #create-post {
   width: 100%;
   margin-top: 1em;
@@ -8,19 +12,11 @@
   resize: vertical;
 }
 
-#attachments-btns {
-  padding: 0.5em 0;
-}
-
 #attachments-btns img, .file-button > input {
   height: 1.4em;
   width: 1.4em;
 }
 
-#new-post-attachments {
-  margin-bottom: 0.5em;
-}
-
 .file-button {
   position: relative;
 }
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index fb969da..3fd778a 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -5,17 +5,19 @@
 <main class="centered-content scroll-standalone under-navbar flex-col flex-justify-start" *ngIf="dataArrived">
 	<form id="create-post" class="card flex-col" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()">
 		<textarea id="new-post-message" class="faded-slim-border border-bottom-only padding-small" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea>
-		<section id="attachments-btns" class="flex-row flex-justify-start flex-center-align-children">
+		<section class="flex-row flex-justify-start flex-center-align-children top-bot-padding-bigger">
 			<div class="file-button hover-half-opacity click-effect">
 				<img src="/assets/icons/tabler-icon-paperclip.svg">
 				<input type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
 			</div>
 		</section>
-		<section id="new-post-attachments" class="flex-row faded-slim-border border-bottom-only">
-			<div *ngFor="let file of files" class="form-attachment">
-				{{ file.name ? file.name : 'Attachment' }}
-				<div class="remove-form-attachment" (click)="removeAttachment(file.name)">
-					☒
+		<section class="flex-row bot-padding-bigger">
+			<div *ngFor="let file of files" class="form-attachment faded-slim-border flexible flex-row flex-no-wrap flex-center-align-items padding-small margin-top-bot-small">
+				<div class="flexible">
+					{{ file.name ? file.name : 'Attachment' }}
+				</div>
+				<div class="flex-col hover-half-opacity border-radius-small click-effect" (click)="removeAttachment(file.name)">
+					<img src="/assets/icons/tabler-icon-x.svg">
 				</div>
 			</div>
 		</section>
diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css
index 3c25563..6cdab0b 100644
--- a/src/app/components/post-attachment/post-attachment.component.css
+++ b/src/app/components/post-attachment/post-attachment.component.css
@@ -1,7 +1,3 @@
-.attachment {
-  background-color: #424242;
-}
-
 /* Full attachment */
 
 .show-full-attachment {
diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html
index 12004dc..04ba633 100644
--- a/src/app/components/post-attachment/post-attachment.component.html
+++ b/src/app/components/post-attachment/post-attachment.component.html
@@ -1,4 +1,4 @@
-<figure class="attachment faded-slim-border flexible flex-row flex-no-wrap padding-small hover-half-opacity margin-top-bot-small" (click)="toggleShowFull()">
+<figure class="form-attachment faded-slim-border flexible flex-row flex-no-wrap padding-small hover-half-opacity margin-top-bot-small" (click)="toggleShowFull()">
 	<div class="flex-col flex-justify-center margin-right-small" [ngSwitch]="fileType">
 		<img *ngSwitchCase="'img'" src="/assets/icons/tabler-icon-photo.svg">
 		<img *ngSwitchDefault src="/assets/icons/tabler-icon-file.svg">