From 9794489573eaa3cd8bdc853c9d67db5145e22fe4 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sat, 20 Mar 2021 11:10:58 +0200
Subject: Major rework of post attachment styling

---
 .../post-attachment/post-attachment.component.css  | 50 +---------------------
 .../post-attachment/post-attachment.component.html | 20 ++++-----
 src/app/components/post/post.component.css         |  1 -
 src/app/components/post/post.component.html        |  2 +-
 4 files changed, 13 insertions(+), 60 deletions(-)

(limited to 'src/app')

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">
-- 
cgit v1.2.3