button styles and conditional add button

src/popup2/vault/ciphers.component.html

@@ -11,13 +11,22 @@
         <i class="fa fa-search"></i>
     </div>
     <div class="right">
-        <button type="button" appBlurClick (click)="addCipher()" title="{{'addItem' | i18n}}">
+        <button type="button" appBlurClick (click)="addCipher()" title="{{'addItem' | i18n}}" *ngIf="showAdd">
             <i class="fa fa-plus fa-lg"></i>
         </button>
     </div>
 </header>
 <content>
     <ng-container *ngIf="(ciphers | searchCiphers: searchText) as searchedCiphers">
+        <div class="no-items" *ngIf="!searchedCiphers.length">
+            <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
+            <ng-container *ngIf="loaded">
+                <p>{{'noItemsInList' | i18n}}</p>
+                <button (click)="addCipher()" class="btn block primary link" *ngIf="showAdd">
+                    {{'addItem' | i18n}}
+                </button>
+            </ng-container>
+        </div>
         <div class="box list only-list" *ngIf="searchedCiphers.length > 0">
             <div class="box-header">
                 {{groupingTitle}}
@@ -28,13 +37,5 @@
                                   (onSelected)="selectCipher($event)"></app-ciphers-list>
             </div>
         </div>
-        <div class="no-items" *ngIf="!searchedCiphers.length">
-            <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
-            <ng-container *ngIf="loaded">
-                <i class="fa fa-frown-o fa-4x"></i>
-                <p>{{'noItemsInList' | i18n}}</p>
-                <button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
-            </ng-container>
-        </div>
     </ng-container>
 </content>

src/popup2/vault/ciphers.component.ts

@@ -37,6 +37,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
     groupingTitle: string;
     searchText: string;
     state: any;
+    showAdd = true;
 
     constructor(cipherService: CipherService, private route: ActivatedRoute,
         private router: Router, private location: Location,
@@ -82,6 +83,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
                 }
                 await super.load((c) => c.folderId === folderId);
             } else if (params.collectionId) {
+                this.showAdd = false;
                 this.searchPlaceholder = this.i18nService.t('searchCollection');
                 const collection = await this.collectionService.get(params.collectionId);
                 if (collection != null) {

src/scss/buttons.scss

@@ -0,0 +1,58 @@
+@import "variables.scss";
+
+.btn {
+    background-color: $button-backgound-color;
+    border-radius: $border-radius;
+    padding: 7px 15px;
+    border: 1px solid $button-border-color;
+    font-size: $font-size-base;
+    color: $button-color;
+    white-space: nowrap;
+    text-align: center;
+    cursor: pointer;
+
+    &.primary {
+        color: $button-color-primary;
+    }
+
+    &.danger {
+        color: $button-color-danger;
+    }
+
+    &:hover:not([disabled]) {
+        cursor: pointer;
+        background-color: darken($button-backgound-color, 1.5%);
+        border-color: darken($button-border-color, 17%);
+        color: darken($button-color, 10%);
+
+        &.primary {
+            color: darken($button-color-primary, 6%);
+        }
+
+        &.danger {
+            color: darken($button-color-danger, 6%);
+        }
+    }
+
+    &:focus:not([disabled]) {
+        cursor: pointer;
+        background-color: darken($button-backgound-color, 6%);
+        border-color: darken($button-border-color, 25%);
+        outline: 0;
+    }
+
+    &[disabled] {
+        opacity: 0.65;
+        cursor: default;
+    }
+
+    &.block {
+        display: block;
+        width: 100%;
+    }
+
+    &.link {
+        border: none !important;
+        background: none !important;
+    }
+}

src/scss/popup.scss

@@ -2,6 +2,7 @@
 @import "variables.scss";
 @import "base.scss";
 @import "box.scss";
+@import "buttons.scss";
 @import "misc.scss";
 @import "plugins.scss";
 @import "environment.scss";