From f05c6ccddd0e94caa7524e30daae8c32356759ae Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Fri, 8 Jun 2018 12:45:31 -0400
Subject: [PATCH] attachments list icon

---
 src/app/vault/attachments.component.html |  7 ++++--
 src/app/vault/ciphers.component.html     |  8 +++---
 src/scss/styles.scss                     | 32 +++++++++---------------
 3 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/app/vault/attachments.component.html b/src/app/vault/attachments.component.html
index 5e1b7ad74f..7a9801879e 100644
--- a/src/app/vault/attachments.component.html
+++ b/src/app/vault/attachments.component.html
@@ -4,7 +4,7 @@
             <div class="modal-header">
                 <h2 class="modal-title">
                     {{'attachments' | i18n}}
-                    <small>{{cipher.name}}</small>
+                    <small *ngIf="cipher">{{cipher.name}}</small>
                 </h2>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
@@ -14,9 +14,12 @@
                 <table class="table table-hover table-list" *ngIf="cipher && cipher.hasAttachments">
                     <tbody>
                         <tr *ngFor="let a of cipher.attachments">
+                            <td class="table-list-icon">
+                                <i class="fa fa-fw fa-lg fa-file-o" *ngIf="!a.downloading"></i>
+                                <i class="fa fa-spinner fa-lg fa-fw fa-spin" *ngIf="a.downloading"></i>
+                            </td>
                             <td>
                                 <a href="#" appStopClick appBlurCLick (click)="download(a)">{{a.fileName}}</a>
-                                <i class="fa fa-spinner fa-fw fa-spin text-muted" *ngIf="a.downloading"></i>
                                 <br>
                                 <small>{{a.sizeName}}</small>
                             </td>
diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index 4963166ab1..a58867ac8d 100644
--- a/src/app/vault/ciphers.component.html
+++ b/src/app/vault/ciphers.component.html
@@ -2,16 +2,16 @@
     <table class="table table-hover table-list table-ciphers" *ngIf="searchedCiphers.length > 0">
         <tbody>
             <tr *ngFor="let c of searchedCiphers">
-                <td (click)="checkCipher(c)">
+                <td (click)="checkCipher(c)" class="table-list-checkbox">
                     <input type="checkbox" [(ngModel)]="c.checked">
                 </td>
-                <td (click)="checkCipher(c)">
+                <td (click)="checkCipher(c)" class="table-list-icon">
                     <app-vault-icon [cipher]="c"></app-vault-icon>
                 </td>
                 <td (click)="checkCipher(c)">
                     <a href="#" appStopClick appStopProp (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
-                    <i class="fa fa-share-alt text-muted" appStopProp *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
-                    <i class="fa fa-paperclip text-muted" appStopProp *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
+                    <i class="fa fa-share-alt" appStopProp *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
+                    <i class="fa fa-paperclip" appStopProp *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
                     <br>
                     <small appStopProp>{{c.subTitle}}</small>
                 </td>
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 7cafebe806..8cc4a73447 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -162,7 +162,7 @@ form label {
         vertical-align: middle;
         line-height: 1;
 
-        small {
+        small, > .fa, .icon {
             color: $text-muted;
         }
     }
@@ -188,29 +188,21 @@ form label {
             visibility: hidden;
         }
     }
-}
 
-app-vault-icon .fa {
-    color: $text-muted;
-}
+    td.table-list-icon {
+        width: 45px;
+        max-width: 45px;
+        text-align: center;
 
-app-vault {
-    .table-ciphers {
-        td:first-child {
-            width: 35px;
-            max-width: 35px;
+        img {
+            @extend .rounded;
+            @extend .img-fluid;
         }
+    }
 
-        td:nth-child(2) {
-            width: 45px;
-            max-width: 45px;
-            text-align: center;
-
-            img {
-                @extend .rounded;
-                @extend .img-fluid;
-            }
-        }
+    td.table-list-checkbox {
+        width: 35px;
+        max-width: 35px;
     }
 }