Major rework of post attachment styling

7 files changed, 181 insertions, 60 deletions

diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css
index 58e8a82..dd41340 100644
--- a/src/app/components/post-attachment/post-attachment.component.css
+++ b/src/app/components/post-attachment/post-attachment.component.css
@@ -1,27 +1,5 @@
-/* Attachment */
-
 .attachment {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  border: 2px solid black;
-  border-top: 0;
-  border-radius: 0 0 .6em .6em;
-  padding: .4em;
-  padding-top: 1em;
-  margin-top: calc(-0.8em - 2px);
-}
-
-.attachment:hover {
-  cursor: pointer;
-}
-
-.attachment-name {
-  flex: 1;
-}
-
-.attachment-type {
-  margin-left: .2em;
+  background-color: #424242;
 }
 
 /* Full attachment */
@@ -33,9 +11,6 @@
   width: 100vw;
   height: 100vh;
   background-color: #000000AF;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   z-index: 2;
 }
 
@@ -46,27 +21,6 @@
 
 .attachment-download {
   max-width: 420px !important;
-  margin: 0 .4em;
   text-decoration: none;
-  color: white;
-  border-color: white;
-  background-color: black;
-}
-
-.attachment-download:hover {
-  background-color: white;
-  color: var(--focus-color);
-}
-
-.close {
-  position: fixed;
-  top: .2em;
-  right: .2em;
-  font-size: 2em;
-  color: whitesmoke;
-}
-
-.close:hover {
-  color: var(--failure);
-  cursor: pointer;
+  color: inherit;
 }
diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html
index 401068c..8605ca0 100644
--- a/src/app/components/post-attachment/post-attachment.component.html
+++ b/src/app/components/post-attachment/post-attachment.component.html
@@ -1,16 +1,16 @@
-<figure class="attachment" (click)="toggleShowFull()">
-	<summary class="attachment-name">
+<figure class="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">
+	</div>
+	<summary class="flex-col flex-justify-center">
 		{{ fileName }}
 	</summary>
-	<summary class="attachment-type">
-		{{ fileType }}
-	</summary>
 </figure>
 
-<div class="show-full-attachment" *ngIf="showFull" (click)="toggleShowFull()">
+<div class="show-full-attachment flex-row flex-justify-center flex-center-align-items" *ngIf="showFull" (click)="toggleShowFull()">
 	<img class="attachment-img" *ngIf="isImage" src="{{paramURL}}">
-	<a class="attachment-download submit-btn" *ngIf="!isImage" href="{{paramURL}}">Download attachment</a>
-	<div class="close">
-		☒
-	</div>
+	<a class="attachment-download faded-slim-border padding-normal lighter-hover click-effect border-radius-smaller" *ngIf="!isImage" href="{{paramURL}}">
+		Download attachment
+	</a>
 </div>
diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css
index f263386..c5919fd 100644
--- a/src/app/components/post/post.component.css
+++ b/src/app/components/post/post.component.css
@@ -16,7 +16,6 @@
 }
 
 .message {
-  margin: 0.2em 0;
   word-break: break-word;
 }
 
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index a966d00..133b747 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -13,7 +13,7 @@
 				@{{ user.userName }}
 			</span>
 		</summary>
-		<article class="message">
+		<article class="message margin-top-bot-small">
 			{{ post.message }}
 		</article>
 		<section class="flex-row flexible-children">
diff --git a/src/assets/icons/tabler-icon-file.svg b/src/assets/icons/tabler-icon-file.svg
new file mode 100644
index 0000000..312c9f4
--- /dev/null
+++ b/src/assets/icons/tabler-icon-file.svg
@@ -0,0 +1,69 @@
+<?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-file"
+   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-file.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="1920"
+     inkscape:window-height="1053"
+     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="1"
+     inkscape:current-layer="svg8" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="m 14,3 v 4 a 1,1 0 0 0 1,1 h 4"
+     id="path4"
+     style="stroke:#ffeede" />
+  <path
+     d="M 17,21 H 7 A 2,2 0 0 1 5,19 V 5 A 2,2 0 0 1 7,3 h 7 l 5,5 v 11 a 2,2 0 0 1 -2,2 z"
+     id="path6"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/assets/icons/tabler-icon-photo.svg b/src/assets/icons/tabler-icon-photo.svg
new file mode 100644
index 0000000..eddf3cc
--- /dev/null
+++ b/src/assets/icons/tabler-icon-photo.svg
@@ -0,0 +1,84 @@
+<?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-photo"
+   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="svg12"
+   sodipodi:docname="tabler-icon-photo.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata18">
+    <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="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg12" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <line
+     x1="15"
+     y1="8"
+     x2="15.01"
+     y2="8"
+     id="line4"
+     style="stroke:#ffeede" />
+  <rect
+     x="4"
+     y="4"
+     width="16"
+     height="16"
+     rx="3"
+     id="rect6"
+     style="stroke:#ffeede" />
+  <path
+     d="m 4,15 4,-4 a 3,5 0 0 1 3,0 l 5,5"
+     id="path8"
+     style="stroke:#ffeede" />
+  <path
+     d="m 14,14 1,-1 a 3,5 0 0 1 3,0 l 2,2"
+     id="path10"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/styles.css b/src/styles.css
index 0a435a7..c06a9bd 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -122,6 +122,10 @@ input[type=file]::file-selector-button {
   flex-wrap: wrap;
 }
 
+.flex-no-wrap {
+  flex-wrap: nowrap;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -246,6 +250,17 @@ input[type=file]::file-selector-button {
   padding-bottom: 0.2em;
 }
 
+/* Margin */
+
+.margin-top-bot-small {
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
+}
+
+.margin-right-small {
+  margin-right: 0.2em;
+}
+
 /* Cards */
 
 .card {