styling

src/popup2/app.component.ts

@@ -42,7 +42,7 @@ import { routerTransition } from './app-routing.animations';
 })
 export class AppComponent implements OnInit {
     toasterConfig: ToasterConfig = new ToasterConfig({
-        showCloseButton: true,
+        showCloseButton: false,
         mouseoverTimerStop: true,
         animation: 'slideUp',
         limit: 2,

src/popup2/components/pop-out.component.html

@@ -1,3 +1,3 @@
 <button (click)="expand()" title="{{'popOutNewWindow' | i18n}}">
-    <i class="fa fa-external-link fa-rotate-270 fa-lg"></i>
+    <i class="fa fa-external-link fa-rotate-270 fa-lg fa-fw"></i>
 </button>

src/popup2/tools/password-generator-history.component.html

@@ -1,7 +1,7 @@
 <header>
     <div class="left">
         <button appBlurClick type="button" (click)="close()">
-            <i class="fa fa-chevron-left"></i>
+            <span class="header-icon"><i class="fa fa-chevron-left"></i></span>
             <span>{{'back' | i18n}}</span>
         </button>
     </div>
@@ -19,10 +19,12 @@
         <div class="box-content">
             <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
                 <div class="row-main">
-                    <span class="text monospaced no-ellipsis">
-                        {{h.password}}
-                    </span>
-                    <span class="detail">{{h.date | date:'medium'}}</span>
+                    <div class="row-main-content">
+                        <span class="text monospaced no-ellipsis">
+                            {{h.password}}
+                        </span>
+                        <span class="detail">{{h.date | date:'medium'}}</span>
+                    </div>
                 </div>
                 <div class="action-buttons">
                     <a class="row-btn" href="#" appStopClick title="{{'copyPassword' | i18n}}"

src/popup2/vault/ciphers.component.html

@@ -1,7 +1,7 @@
 <header>
     <div class="left">
         <button type="button" appBlurClick (click)="back()">
-            <i class="fa fa-chevron-left"></i>
+            <span class="header-icon"><i class="fa fa-chevron-left"></i></span>
             <span>{{'back' | i18n}}</span>
         </button>
     </div>
@@ -10,9 +10,9 @@
                [(ngModel)]="searchText" appAutofocus>
         <i class="fa fa-search"></i>
     </div>
-    <div class="right">
-        <button type="button" appBlurClick (click)="addCipher()" title="{{'addItem' | i18n}}" *ngIf="showAdd">
-            <i class="fa fa-plus fa-lg"></i>
+    <div class="right" *ngIf="showAdd">
+        <button type="button" appBlurClick (click)="addCipher()" title="{{'addItem' | i18n}}">
+            <i class="fa fa-plus fa-lg fa-fw"></i>
         </button>
     </div>
 </header>

src/popup2/vault/current-tab.component.html

@@ -2,7 +2,7 @@
     <div class="left">
         <app-pop-out *ngIf="showPopout"></app-pop-out>
         <button type="button" appBlurClick (click)="refresh()" title="{{'refresh' | i18n}}" *ngIf="inSidebar">
-            <i class="fa fa-refresh fa-lg"></i>
+            <i class="fa fa-refresh fa-lg fa-fw"></i>
         </button>
     </div>
     <div class="search">
@@ -12,7 +12,7 @@
     </div>
     <div class="right">
         <button type="button" appBlurClick (click)="addCipher()" title="{{'addItem' | i18n}}">
-            <i class="fa fa-plus fa-lg"></i>
+            <i class="fa fa-plus fa-lg fa-fw"></i>
         </button>
     </div>
 </header>

src/popup2/vault/groupings.component.html

@@ -9,7 +9,7 @@
     </div>
     <div class="right">
         <button appBlurClick (click)="addCipher()" title="{{'addItem' | i18n}}">
-            <i class="fa fa-plus fa-lg"></i>
+            <i class="fa fa-plus fa-lg fa-fw"></i>
         </button>
     </div>
 </header>

src/scss/base.scss

@@ -106,6 +106,9 @@ header {
         flex: 1;
         display: flex;
         min-width: -webkit-min-content; /* Workaround to Chrome bug */
+        .header-icon {
+            margin-right: 5px;
+        }
     }
 
     .right {
@@ -116,6 +119,7 @@ header {
         display: flex;
         align-items: center;
         text-align: center;
+        min-width: 0;
     }
 
     app-pop-out > button, div > button, div > a {
@@ -149,10 +153,13 @@ header {
 
     .title {
         font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .search {
-        padding: 7px;
+        padding: 7px 10px;
         width: 100%;
         text-align: left;
         position: relative;
@@ -161,7 +168,7 @@ header {
         .fa {
             position: absolute;
             top: 15px;
-            left: 15px;
+            left: 10px;
             color: lighten($brand-primary, 30%);
         }
 
@@ -185,6 +192,14 @@ header {
             }
         }
     }
+
+    .left + .search {
+        padding-left: 0;
+    }
+
+    .search + .right {
+        margin-left: -10px;
+    }
 }
 
 .content {