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

6 files changed, 101 insertions, 33 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">
diff --git a/src/assets/icons/tabler-icon-x.svg b/src/assets/icons/tabler-icon-x.svg
new file mode 100644
index 0000000..28725c8
--- /dev/null
+++ b/src/assets/icons/tabler-icon-x.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-x"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="tabler-icon-x.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="737"
+     inkscape:window-height="480"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg8" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <line
+     x1="18"
+     y1="6"
+     x2="6"
+     y2="18"
+     id="line4"
+     style="stroke:#ffeede" />
+  <line
+     x1="6"
+     y1="6"
+     x2="18"
+     y2="18"
+     id="line6"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/styles.css b/src/styles.css
index 93ed57b..b166d70 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -277,6 +277,15 @@ input[type=file]::file-selector-button {
   padding-left: 0.3em;
 }
 
+.bot-padding-bigger {
+  padding-bottom: 0.5em;
+}
+
+.top-bot-padding-bigger {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+}
+
 .top-bot-padding-small {
   padding-top: 0.2em;
   padding-bottom: 0.2em;
@@ -446,6 +455,10 @@ input[type=file]::file-selector-button {
 
 /* Form attachments (the ones that are shown while creating and editing a post) */
 
+.form-attachment {
+  background-color: #424242;
+}
+
 .form-attachments {
   display: flex;
   flex-wrap: wrap;
@@ -454,20 +467,6 @@ input[type=file]::file-selector-button {
   margin: 0 0.3em;
 }
 
-.form-attachment {
-  border: 2px solid black;
-  border-radius: 0.6em;
-  margin-top: 0.2em;
-  margin-right: 0.2em;
-  padding: 0.2em;
-  display: flex;
-  align-items: center;
-}
-
-.form-attachment:last-child {
-  margin-right: 0;
-}
-
 .remove-form-attachment {
   font-size: 0.9em;
   color: var(--failure);