From f429996d5c890160a98980aa7b2d490c5888e66e Mon Sep 17 00:00:00 2001
From: addison <addisonbeck1@gmail.com>
Date: Thu, 25 Feb 2021 13:12:47 -0500
Subject: [PATCH 1/3] added status badges to Send

---
 src/app/send/send.component.html | 37 ++++++++++++++++++++++++-----
 src/locales/en/messages.json     | 12 ++++++++++
 src/scss/list.scss               | 40 ++++++++++++++++++++++++++++++++
 src/scss/variables.scss          |  3 +++
 4 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/src/app/send/send.component.html b/src/app/send/send.component.html
index 05153e710b..21210f339c 100644
--- a/src/app/send/send.component.html
+++ b/src/app/send/send.component.html
@@ -43,14 +43,39 @@
                 [infiniteScrollContainer]="'#items .content'" [fromRoot]="true" (scrolled)="loadMore()">
                 <a *ngFor="let s of filteredSends" appStopClick (click)="selectSend(s.id)"
                     href="#" title="{{'viewItem' | i18n}}" (contextmenu)="viewSendMenu(s)"
-                    [ngClass]="{'active': s.id === sendId}">
-                    <div class="icon" aria-hidden="true">
+                    [ngClass]="{'active': s.id === sendId}" class="flex-list-item">
+                    <div class="item-icon" aria-hidden="true">
                         <i class="fa fa-fw fa-lg" [ngClass]="s.type == 0 ? 'fa-file-o' : 'fa-file-text-o'"></i>
                     </div>
-                    <span class="text">
-                        {{s.name}}
-                    </span>
-                    <span class="detail">{{s.deletionDate | date}}</span>
+                    <div class="item-content">
+                        <div class="item-title">
+                            {{s.name}}
+                            <span class="title-badges">
+                                <span appStopClick class="text-badge" *ngIf="s.disabled">
+                                    {{'disabled' | i18n}}
+                                </span>
+                                <ng-container >
+                                    <i class="fa fa-key" appStopProp title="{{'password' | i18n}}" aria-hidden="true"></i>
+                                    <span class="sr-only">{{'password' | i18n}}</span>
+                                </ng-container>
+                                <ng-container >
+                                    <i class="fa fa-ban" appStopProp title="{{'maxAccessCountReached' | i18n}}"
+                                        aria-hidden="true"></i>
+                                    <span class="sr-only">{{'maxAccessCountReached' | i18n}}</span>
+                                </ng-container>
+                                <ng-container >
+                                    <i class="fa fa-clock-o" appStopProp title="{{'expired' | i18n}}" aria-hidden="true"></i>
+                                    <span class="sr-only">{{'expired' | i18n}}</span>
+                                </ng-container>
+                                <ng-container >
+                                    <i class="fa fa-trash" appStopProp title="{{'pendingDeletion' | i18n}}"
+                                        aria-hidden="true"></i>
+                                    <span class="sr-only">{{'pendingDeletion' | i18n}}</span>
+                                </ng-container>
+                            </span>
+                        </div>
+                        <span class="item-details">{{s.deletionDate | date}}</span>
+                    </div>
                 </a>
             </div>
             <div class="no-items" *ngIf="!filteredSends.length">
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 8d123a8156..768a562ffb 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -1638,5 +1638,17 @@
   },
   "copyLink": {
     "message": "Copy link"
+  },
+  "disabled": {
+    "message": "Disabled"
+  },
+  "maxAccessCountReached": {
+    "message": "Max access count reached"
+  },
+  "expired": {
+    "message": "Expired"
+  },
+  "pendingDeletion": {
+    "message": "Pending deletion"
   }
 }
diff --git a/src/scss/list.scss b/src/scss/list.scss
index d323c9dfe9..dc9149a963 100644
--- a/src/scss/list.scss
+++ b/src/scss/list.scss
@@ -101,3 +101,43 @@
         }
     }
 }
+
+.list > a.flex-list-item {
+    display: flex;
+    align-items: center;
+
+    .item-icon {
+        margin-left: -5px;
+        margin-right: 4px;
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
+    }
+
+    .item-content {
+        .item-title {
+            .title-badges {
+                @include themify($themes) {
+                    color: themed('mutedColor');
+                }
+
+                .text-badge {
+                    padding-left: 2px;
+                    margin-right: 3px;
+                    font-size: $font-size-small;
+                    border-radius: 3px;
+                    @include themify($themes) {
+                        background-color: themed('mutedColorBackground');
+                    }
+                }
+            }
+        }
+
+        .item-details {
+            font-size: $font-size-small;
+            @include themify($themes) {
+                color: themed('mutedColor');
+            }
+        }
+    }
+}
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 98ab045672..7a005eccea 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -66,6 +66,7 @@ $themes: (
         headingButtonHoverColor: $gray-light,
         labelColor: $gray-light,
         mutedColor: $text-muted,
+        mutedColorBackground: lighten($text-muted, 35%),
         totpStrokeColor: $brand-primary,
         boxRowButtonColor: $brand-primary,
         boxRowButtonHoverColor: darken($brand-primary, 10%),
@@ -117,6 +118,7 @@ $themes: (
         headingButtonHoverColor: #ffffff,
         labelColor: #a3a3a3,
         mutedColor: #a3a3a3,
+        mutedColorBackground: darken(#a3a3a3, 35%),
         totpStrokeColor: #cacaca,
         boxRowButtonColor: #cacaca,
         boxRowButtonHoverColor: #ffffff,
@@ -168,6 +170,7 @@ $themes: (
         headingButtonHoverColor: $nord6,
         labelColor: $nord4,
         mutedColor: $nord4,
+        mutedColorBackground: darken($nord4, 35%),
         totpStrokeColor: $nord4,
         boxRowButtonColor: $nord4,
         boxRowButtonHoverColor: $nord6,

From ac4afc6ef15c038eda156abe4dd12fe95f70bcb5 Mon Sep 17 00:00:00 2001
From: addison <addisonbeck1@gmail.com>
Date: Thu, 25 Feb 2021 13:27:47 -0500
Subject: [PATCH 2/3] changed disabled badge style

---
 src/app/send/send.component.html | 15 ++++++++-------
 src/scss/list.scss               | 10 ----------
 src/scss/variables.scss          |  3 ---
 3 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/src/app/send/send.component.html b/src/app/send/send.component.html
index 21210f339c..81257a575b 100644
--- a/src/app/send/send.component.html
+++ b/src/app/send/send.component.html
@@ -51,23 +51,24 @@
                         <div class="item-title">
                             {{s.name}}
                             <span class="title-badges">
-                                <span appStopClick class="text-badge" *ngIf="s.disabled">
-                                    {{'disabled' | i18n}}
-                                </span>
-                                <ng-container >
+                                <ng-container ngIf="s.disabled">
+                                    <i class="fa fa-warning" appStopProp title="{{'disabled' | i18n}}" aria-hidden="true"></i>
+                                    <span class="sr-only">{{'disabled' | i18n}}</span>
+                                </ng-container>
+                                <ng-container *ngIf="s.password">
                                     <i class="fa fa-key" appStopProp title="{{'password' | i18n}}" aria-hidden="true"></i>
                                     <span class="sr-only">{{'password' | i18n}}</span>
                                 </ng-container>
-                                <ng-container >
+                                <ng-container *ngIf="s.maxAccessCountReached">
                                     <i class="fa fa-ban" appStopProp title="{{'maxAccessCountReached' | i18n}}"
                                         aria-hidden="true"></i>
                                     <span class="sr-only">{{'maxAccessCountReached' | i18n}}</span>
                                 </ng-container>
-                                <ng-container >
+                                <ng-container *ngIf="s.expired">
                                     <i class="fa fa-clock-o" appStopProp title="{{'expired' | i18n}}" aria-hidden="true"></i>
                                     <span class="sr-only">{{'expired' | i18n}}</span>
                                 </ng-container>
-                                <ng-container >
+                                <ng-container *ngIf="s.pendingDelete">
                                     <i class="fa fa-trash" appStopProp title="{{'pendingDeletion' | i18n}}"
                                         aria-hidden="true"></i>
                                     <span class="sr-only">{{'pendingDeletion' | i18n}}</span>
diff --git a/src/scss/list.scss b/src/scss/list.scss
index dc9149a963..5a50dd7ad5 100644
--- a/src/scss/list.scss
+++ b/src/scss/list.scss
@@ -120,16 +120,6 @@
                 @include themify($themes) {
                     color: themed('mutedColor');
                 }
-
-                .text-badge {
-                    padding-left: 2px;
-                    margin-right: 3px;
-                    font-size: $font-size-small;
-                    border-radius: 3px;
-                    @include themify($themes) {
-                        background-color: themed('mutedColorBackground');
-                    }
-                }
             }
         }
 
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 7a005eccea..98ab045672 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -66,7 +66,6 @@ $themes: (
         headingButtonHoverColor: $gray-light,
         labelColor: $gray-light,
         mutedColor: $text-muted,
-        mutedColorBackground: lighten($text-muted, 35%),
         totpStrokeColor: $brand-primary,
         boxRowButtonColor: $brand-primary,
         boxRowButtonHoverColor: darken($brand-primary, 10%),
@@ -118,7 +117,6 @@ $themes: (
         headingButtonHoverColor: #ffffff,
         labelColor: #a3a3a3,
         mutedColor: #a3a3a3,
-        mutedColorBackground: darken(#a3a3a3, 35%),
         totpStrokeColor: #cacaca,
         boxRowButtonColor: #cacaca,
         boxRowButtonHoverColor: #ffffff,
@@ -170,7 +168,6 @@ $themes: (
         headingButtonHoverColor: $nord6,
         labelColor: $nord4,
         mutedColor: $nord4,
-        mutedColorBackground: darken($nord4, 35%),
         totpStrokeColor: $nord4,
         boxRowButtonColor: $nord4,
         boxRowButtonHoverColor: $nord6,

From c620c419d7e20542dfb60bd1dd30b2ae757c2eae Mon Sep 17 00:00:00 2001
From: addison <addisonbeck1@gmail.com>
Date: Thu, 25 Feb 2021 13:33:56 -0500
Subject: [PATCH 3/3] missing *

---
 src/app/send/send.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/send/send.component.html b/src/app/send/send.component.html
index 81257a575b..63a6a18253 100644
--- a/src/app/send/send.component.html
+++ b/src/app/send/send.component.html
@@ -51,7 +51,7 @@
                         <div class="item-title">
                             {{s.name}}
                             <span class="title-badges">
-                                <ng-container ngIf="s.disabled">
+                                <ng-container *ngIf="s.disabled">
                                     <i class="fa fa-warning" appStopProp title="{{'disabled' | i18n}}" aria-hidden="true"></i>
                                     <span class="sr-only">{{'disabled' | i18n}}</span>
                                 </ng-container>