Merge pull request #3 from Team-Kaleidoscope/major-redesign

Major redesign

3 files changed, 18 insertions, 62 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..6cdab0b 100644
--- a/src/app/components/post-attachment/post-attachment.component.css
+++ b/src/app/components/post-attachment/post-attachment.component.css
@@ -1,29 +1,3 @@
-/* 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;
-}
-
 /* Full attachment */
 
 .show-full-attachment {
@@ -33,9 +7,6 @@
   width: 100vw;
   height: 100vh;
   background-color: #000000AF;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   z-index: 2;
 }
 
@@ -46,27 +17,7 @@
 
 .attachment-download {
   max-width: 420px !important;
-  margin: 0 .4em;
+  background-color: var(--card-bg);
   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..e5e4b5a 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="form-attachment border-faded-slim flexible flex-row flex-no-wrap padding-dot2 hover-half-opacity margin-top-bot-dot2" (click)="toggleShowFull()">
+	<div class="flex-col flex-justify-center margin-right-dot2" [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 border-faded-slim padding-dot4 hover-half-opacity click-effect border-radius-dot3" *ngIf="!isImage" href="{{paramURL}}">
+		Download attachment
+	</a>
 </div>
diff --git a/src/app/components/post-attachment/post-attachment.component.ts b/src/app/components/post-attachment/post-attachment.component.ts
index 1d00def..1aeca37 100644
--- a/src/app/components/post-attachment/post-attachment.component.ts
+++ b/src/app/components/post-attachment/post-attachment.component.ts
@@ -18,7 +18,12 @@ export class PostAttachmentComponent implements OnInit {
   ngOnInit(): void {
     this.isImage = this.paramURL.includes('image') && !this.paramURL.endsWith('pdf');
     this.fileType = this.isImage ? 'img' : 'raw';
-    this.fileName = this.paramURL.match('(?<=\/)(?:.(?!\/))+$')?.pop() ?? 'Attachment';
+    if (this.fileType === 'img') {
+      this.fileName = this.paramURL.match(/(?!\/)+?[^\/]+?(?=\.)/g)?.pop() ?? 'Attachment';
+    }
+    else {
+      this.fileName = this.paramURL.match(/[^\/]+?$/g)?.pop() ?? 'Attachment';
+    }
   }
 
   toggleShowFull(): void {