Merge branch 'master' of github.com:gcsolaroli/password-manager

Conflicts:
	frontend/delta/css/clipperz.css.map

frontend/delta/js/Clipperz/Crypto/AES.js

@@ -824,7 +824,8 @@ MochiKit.Base.update(Clipperz.Crypto.AES, {
 	//-----------------------------------------------------------------------------
 
 	'deferredDecrypt': function(aKey, someData) {
-		var deferredResult
+		var deferredResult;
+		var executionContext;
 		var nonce;
 		var message;
 		var key;

frontend/delta/js/Clipperz/PM/Crypto.js

@@ -21,6 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
+"use strict";
 if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
 if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
 if (typeof(Clipperz.PM.Crypto) == 'undefined') { Clipperz.PM.Crypto = {}; }
@@ -320,7 +321,7 @@ MochiKit.Base.update(Clipperz.PM.Crypto, {
 						deferredResult.addCallback(MochiKit.Async.wait, 0.1);
 						deferredResult.addCallback(Clipperz.Base.evalJSON);
 						deferredResult.addErrback(function(anError) {
-							Clipperz.logError("Error while decrypting data [4]");
+							Clipperz.logError("Error while decrypting data [3]");
 							throw Clipperz.Crypto.Base.exception.CorruptedMessage;
 						})
 					} else {

frontend/delta/js/Clipperz/PM/UI/Components.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI');
 
 //	code snippet taken on March 23, 2015 from here: https://github.com/JedWatson/classnames/blob/master/index.js

frontend/delta/js/Clipperz/PM/UI/Components/Button.js

@@ -21,6 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components');
 
 Clipperz.PM.UI.Components.ButtonClass = React.createClass({

frontend/delta/js/Clipperz/PM/UI/Components/Cards/CommandToolbar.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
 
 Clipperz.PM.UI.Components.Cards.CommandToolbarClass = React.createClass({

frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
 
 Clipperz.PM.UI.Components.Cards.EditClass = React.createClass({

frontend/delta/js/Clipperz/PM/UI/Components/Cards/EditToolbar.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
 
 Clipperz.PM.UI.Components.Cards.EditToolbarClass = React.createClass({

frontend/delta/js/Clipperz/PM/UI/Components/Cards/FavIcon.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 
 Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
 

frontend/delta/js/Clipperz/PM/UI/Components/Cards/List.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
 
 Clipperz.PM.UI.Components.Cards.ListClass = React.createClass({
@@ -79,7 +79,9 @@ Clipperz.PM.UI.Components.Cards.ListClass = React.createClass({
 		classes[this.props['style']] = true;
 
 		return	React.DOM.div({'key':'cardList', 'className':Clipperz.PM.UI.Components.classNames(classes)}, [
-					this.isFeatureEnabled('LIST_CARDS') ? React.DOM.ul({}, MochiKit.Base.map(this.renderItem, cards)) : null
+					React.DOM.div({'className':'cardListInnerWrapper'}, [
+						this.isFeatureEnabled('LIST_CARDS') ? React.DOM.ul({}, MochiKit.Base.map(this.renderItem, cards)) : null
+					])
 				]);
 	},
 	

frontend/delta/js/Clipperz/PM/UI/Components/Cards/PasswordGenerator.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
 
 Clipperz.PM.UI.Components.Cards.PasswordGeneratorClass = React.createClass({
@@ -38,16 +38,17 @@ Clipperz.PM.UI.Components.Cards.PasswordGeneratorClass = React.createClass({
 
 	getInitialState: function () {
 		return {
-			'length':	32,
+			'length':		24,
-			'options':	'closed',
+			'options':		'closed',
 			'chars_AZ':		true,
 			'chars_az':		true,
 			'chars_09':		true,
 			'chars_space':	false,
 			'chars_other':	true,
+
 			'charset':	'',
 			'password':	'',
-			'entropy': 0,
+			'entropy':	0,
 		};
 	},
 

frontend/delta/js/Clipperz/PM/UI/Components/Cards/TagEditor.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
 
 Clipperz.PM.UI.Components.Cards.TagEditorClass = React.createClass({

frontend/delta/js/Clipperz/PM/UI/Components/Cards/TextArea.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
 
 Clipperz.PM.UI.Components.Cards.TextAreaClass = React.createClass({

frontend/delta/js/Clipperz/PM/UI/Components/Cards/View.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
 
 Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({

frontend/delta/js/Clipperz/PM/UI/Components/Pages/LoginPage.js

@@ -60,6 +60,22 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
 	    this.setState(newState);
 	},
 
+	pollForChanges: function() {
+		if (this.props.mode == 'CREDENTIALS') {
+			var newState;
+
+			var usernameValue = this.refs['username'].getDOMNode().value;
+			var passphraseValue = this.refs['passphrase'].getDOMNode().value;
+
+			newState = {};
+
+			newState['username'] = (usernameValue) ? usernameValue : "";
+			newState['passphrase'] = (passphraseValue) ? passphraseValue : "";
+
+			this.setState(newState);
+		}
+	},
+
 	//=========================================================================
 
 	handleCredentialSubmit: function (event) {

frontend/delta/js/Clipperz/PM/UI/Components/Pages/MainPage.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components.Pages');
 
 Clipperz.PM.UI.Components.Pages.MainPageClass = React.createClass({

frontend/delta/js/Clipperz/PM/UI/Components/Panels/MainPanel.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components.Panels');
 
 Clipperz.PM.UI.Components.Panels.MainPanelClass = React.createClass({

frontend/delta/js/Clipperz/PM/UI/Components/Panels/SelectionPanel.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components.Panels');
 
 Clipperz.PM.UI.Components.Panels.SelectionPanelClass = React.createClass({

frontend/delta/js/Clipperz/PM/UI/Components/Selections.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components');
 
 Clipperz.PM.UI.Components.SelectionsClass = React.createClass({

frontend/delta/js/Clipperz/PM/UI/Components/TagIndexItem.js

@@ -21,7 +21,7 @@ refer to http://www.clipperz.com.
 
 */
 
-'use strict';
+"use strict";
 Clipperz.Base.module('Clipperz.PM.UI.Components');
 
 Clipperz.PM.UI.Components.TagIndexItemClass = React.createClass({

frontend/delta/js/Clipperz/PM/UI/MainController.js

@@ -294,6 +294,15 @@ console.log("THE BROWSER IS OFFLINE");
 		loginFormPage.setProps({'mode':this.loginMode()});
 		this.moveInPage(this.currentPage(), 'loginPage');
 		MochiKit.Async.callLater(0.5, MochiKit.Base.method(loginFormPage, 'setInitialFocus'));
+		MochiKit.Async.callLater(0.5, MochiKit.Base.method(this, 'recursivelyPollLoginFormForChanges'));
+	},
+
+	recursivelyPollLoginFormForChanges: function () {
+		this.pages()['loginPage'].pollForChanges();
+
+		if (this.currentPage() == 'loginPage') {
+			MochiKit.Async.callLater(0.5, MochiKit.Base.method(this, 'recursivelyPollLoginFormForChanges'));
+		}
 	},
 
 	showRegistrationForm_handler: function () {

frontend/delta/scss/core/flex.scss

@@ -102,10 +102,10 @@ http://jonibologna.com/flexbox-cheatsheet/
 
 
 @mixin flexbox {
-	display: -webkit-box;
+//	display: -webkit-box;
-	display: -webkit-flex;
+//	display: -webkit-flex;
-	display: -moz-flex;
+//	display: -moz-flex;
-	display: -ms-flexbox;
+//	display: -ms-flexbox;
 	display: flex;
 }
 
@@ -114,10 +114,10 @@ http://jonibologna.com/flexbox-cheatsheet/
 //----------------------------------
 
 @mixin inline-flex {
-	display: -webkit-inline-box;
+//	display: -webkit-inline-box;
-	display: -webkit-inline-flex;
+//	display: -webkit-inline-flex;
-	display: -moz-inline-flex;
+//	display: -moz-inline-flex;
-	display: -ms-inline-flexbox;
+//	display: -ms-inline-flexbox;
 	display: inline-flex;
 }
 
@@ -137,22 +137,22 @@ http://jonibologna.com/flexbox-cheatsheet/
 // http://w3.org/tr/css3-flexbox/#flex-direction-property
 
 @mixin flex-direction($value: row) {
-	@if $value == row-reverse {
+//	@if $value == row-reverse {
-		-webkit-box-direction: reverse;
+//		-webkit-box-direction: reverse;
-		-webkit-box-orient: horizontal;
+//		-webkit-box-orient: horizontal;
-	} @else if $value == column {
+//	} @else if $value == column {
-		-webkit-box-direction: normal;
+//		-webkit-box-direction: normal;
-		-webkit-box-orient: vertical;
+//		-webkit-box-orient: vertical;
-	} @else if $value == column-reverse {
+//	} @else if $value == column-reverse {
-		-webkit-box-direction: reverse;
+//		-webkit-box-direction: reverse;
-		-webkit-box-orient: vertical;
+//		-webkit-box-orient: vertical;
-	} @else {
+//	} @else {
-		-webkit-box-direction: normal;
+//		-webkit-box-direction: normal;
-		-webkit-box-orient: horizontal;
+//		-webkit-box-orient: horizontal;
-	}
+//	}
-	-webkit-flex-direction: $value;
+//	-webkit-flex-direction: $value;
-	-moz-flex-direction: $value;
+//	-moz-flex-direction: $value;
-	-ms-flex-direction: $value;
+//	-ms-flex-direction: $value;
 	flex-direction: $value;
 }
 	// Shorter version:
@@ -173,13 +173,13 @@ http://jonibologna.com/flexbox-cheatsheet/
 
 @mixin flex-wrap($value: nowrap) {
 	// No Webkit Box fallback.
-	-webkit-flex-wrap: $value;
+//	-webkit-flex-wrap: $value;
-	-moz-flex-wrap: $value;
+//	-moz-flex-wrap: $value;
-	@if $value == nowrap {
+//	@if $value == nowrap {
-		-ms-flex-wrap: none;
+//		-ms-flex-wrap: none;
-	} @else { 
+//	} @else { 
-		-ms-flex-wrap: $value; 
+//		-ms-flex-wrap: $value; 
-	}
+//	}
 	flex-wrap: $value;
 }
 
@@ -198,9 +198,9 @@ http://jonibologna.com/flexbox-cheatsheet/
 
 @mixin flex-flow($values: (row nowrap)) {
 	// No Webkit Box fallback.
-	-webkit-flex-flow: $values;
+//	-webkit-flex-flow: $values;
-	-moz-flex-flow: $values;
+//	-moz-flex-flow: $values;
-	-ms-flex-flow: $values;
+//	-ms-flex-flow: $values;
 	flex-flow: $values;
 }
 
@@ -216,10 +216,10 @@ http://jonibologna.com/flexbox-cheatsheet/
 // http://w3.org/tr/css3-flexbox/#order-property
 
 @mixin order($int: 0) {
-	-webkit-box-ordinal-group: $int + 1;
+//	-webkit-box-ordinal-group: $int + 1;
-	-webkit-order: $int;
+//	-webkit-order: $int;
-	-moz-order: $int;
+//	-moz-order: $int;
-	-ms-flex-order: $int;
+//	-ms-flex-order: $int;
 	order: $int;
 }
 
@@ -235,10 +235,10 @@ http://jonibologna.com/flexbox-cheatsheet/
 // http://w3.org/tr/css3-flexbox/#flex-grow-property
 
 @mixin flex-grow($int: 0) {
-	-webkit-box-flex: $int;
+//	-webkit-box-flex: $int;
-	-webkit-flex-grow: $int;
+//	-webkit-flex-grow: $int;
-	-moz-flex-grow: $int;
+//	-moz-flex-grow: $int;
-	-ms-flex-positive: $int;
+//	-ms-flex-positive: $int;
 	flex-grow: $int;
 }
 
@@ -254,9 +254,9 @@ http://jonibologna.com/flexbox-cheatsheet/
 // http://w3.org/tr/css3-flexbox/#flex-shrink-property
 
 @mixin flex-shrink($int: 1) {
-	-webkit-flex-shrink: $int;
+//	-webkit-flex-shrink: $int;
-	-moz-flex-shrink: $int;
+//	-moz-flex-shrink: $int;
-	-ms-flex-negative: $int;
+//	-ms-flex-negative: $int;
 	flex-shrink: $int;
 }
 
@@ -272,9 +272,9 @@ http://jonibologna.com/flexbox-cheatsheet/
 // http://www.w3.org/TR/css3-flexbox/#flex-basis-property
 
 @mixin flex-basis($value: auto) {
-	-webkit-flex-basis: $value;
+//	-webkit-flex-basis: $value;
-	-moz-flex-basis: $value;
+//	-moz-flex-basis: $value;
-	-ms-flex-preferred-size: $value;
+//	-ms-flex-preferred-size: $value;
 	flex-basis: $value;
 }
 
@@ -304,11 +304,11 @@ http://jonibologna.com/flexbox-cheatsheet/
 		$fg-boxflex: nth($fg, 1);
 	}
 
-	-webkit-box-flex: $fg-boxflex;
+//	-webkit-box-flex: $fg-boxflex;
-	-webkit-flex: $fg $fs $fb;
+//	-webkit-flex: $fg $fs $fb;
-	-moz-box-flex: $fg-boxflex;
+//	-moz-box-flex: $fg-boxflex;
-	-moz-flex: $fg $fs $fb;
+//	-moz-flex: $fg $fs $fb;
-	-ms-flex: $fg $fs $fb;
+//	-ms-flex: $fg $fs $fb;
 	flex: $fg $fs $fb;
 }
 
@@ -331,21 +331,21 @@ http://jonibologna.com/flexbox-cheatsheet/
 // http://w3.org/tr/css3-flexbox/#justify-content-property
 
 @mixin justify-content($value: flex-start) {
-	@if $value == flex-start {
+//	@if $value == flex-start {
-		-webkit-box-pack: start;
+//		-webkit-box-pack: start;
-		-ms-flex-pack: start;
+//		-ms-flex-pack: start;
-	} @else if $value == flex-end {
+//	} @else if $value == flex-end {
-		-webkit-box-pack: end;
+//		-webkit-box-pack: end;
-		-ms-flex-pack: end;
+//		-ms-flex-pack: end;
-	} @else if $value == space-between {
+//	} @else if $value == space-between {
-		-webkit-box-pack: justify;
+//		-webkit-box-pack: justify;
-		-ms-flex-pack: justify;
+//		-ms-flex-pack: justify;
-	} @else {
+//	} @else {
-		-webkit-box-pack: $value;
+//		-webkit-box-pack: $value;
-		-ms-flex-pack: $value;
+//		-ms-flex-pack: $value;
-	}
+//	}
-	-webkit-justify-content: $value;
+//	-webkit-justify-content: $value;
-	-moz-justify-content: $value;
+//	-moz-justify-content: $value;
 	justify-content: $value;
 }
 	// Shorter version:
@@ -369,18 +369,18 @@ http://jonibologna.com/flexbox-cheatsheet/
 // http://w3.org/tr/css3-flexbox/#align-items-property
 
 @mixin align-items($value: stretch) {
-	@if $value == flex-start {
+//	@if $value == flex-start {
-		-webkit-box-align: start;
+//		-webkit-box-align: start;
-		-ms-flex-align: start;
+//		-ms-flex-align: start;
-	} @else if $value == flex-end {
+//	} @else if $value == flex-end {
-		-webkit-box-align: end;
+//		-webkit-box-align: end;
-		-ms-flex-align: end;
+//		-ms-flex-align: end;
-	} @else {
+//	} @else {
-		-webkit-box-align: $value;
+//		-webkit-box-align: $value;
-		-ms-flex-align: $value;
+//		-ms-flex-align: $value;
-	}
+//	}
-	-webkit-align-items: $value;
+//	-webkit-align-items: $value;
-	-moz-align-items: $value;
+//	-moz-align-items: $value;
 	align-items: $value;
 }
 
@@ -393,15 +393,15 @@ http://jonibologna.com/flexbox-cheatsheet/
 
 @mixin align-self($value: auto) {
 	// No Webkit Box Fallback.
-	-webkit-align-self: $value;
+//	-webkit-align-self: $value;
-	-moz-align-self: $value;
+//	-moz-align-self: $value;
-	@if $value == flex-start {
+//	@if $value == flex-start {
-		-ms-flex-item-align: start;
+//		-ms-flex-item-align: start;
-	} @else if $value == flex-end {
+//	} @else if $value == flex-end {
-		-ms-flex-item-align: end;
+//		-ms-flex-item-align: end;
-	} @else {
+//	} @else {
-		-ms-flex-item-align: $value;
+//		-ms-flex-item-align: $value;
-	}
+//	}
 	align-self: $value;
 }
 
@@ -421,14 +421,14 @@ http://jonibologna.com/flexbox-cheatsheet/
 
 @mixin align-content($value: stretch) {
 	// No Webkit Box Fallback.
-	-webkit-align-content: $value;
+//	-webkit-align-content: $value;
-	-moz-align-content: $value;
+//	-moz-align-content: $value;
-	@if $value == flex-start {
+//	@if $value == flex-start {
-		-ms-flex-line-pack: start;
+//		-ms-flex-line-pack: start;
-	} @else if $value == flex-end {
+//	} @else if $value == flex-end {
-		-ms-flex-line-pack: end;
+//		-ms-flex-line-pack: end;
-	} @else {
+//	} @else {
-		-ms-flex-line-pack: $value;
+//		-ms-flex-line-pack: $value;
-	}
+//	}
 	align-content: $value;
 }

frontend/delta/scss/core/layout.scss

@@ -179,7 +179,7 @@ input[type=text] {
 
 		.extraFeatureContent {
 			.extraFeature {
-				height: calc(100% - $mainCardToolbarHeight);
+//				height: calc(100% - $mainCardToolbarHeight);
 			}
 		}
 		
@@ -279,6 +279,8 @@ input[type=text] {
 	}
 
 	.cardContent {
+		@include flex(1);
+		@include overflow-auto();
 	}
 }
 
@@ -363,7 +365,7 @@ div.cardContent {
 
 	@include flexbox();
 	@include flex-direction(row);
-	height: 100%;
+//	height: 100%;
 
 	div.cardListColumn.column {
 		@include flex($cardListWidth, 0);
@@ -372,7 +374,7 @@ div.cardContent {
 //		overflow:auto;
 //		@include overflow-auto;
 		overflow: hidden;
-		
+//		height: 100%;
 
 		z-index: 5;
 		box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1);
@@ -382,7 +384,9 @@ div.cardContent {
 		
 		&.addCard {
 			div.cardList {
-				padding-bottom: 100px;
+				.cardListInnerWrapper {
+					padding-bottom: #{$cardListPadding};
+				}
 			}
 		}
 		
@@ -602,40 +606,20 @@ div.dialogBox {
 	}
 }
 
+div.helpBox {
 	
-/* Firefox considers 100% respect to height of the whole window, this is rule is necessary to eliminate the card toolbar offset. */
+}
+
+//@include fixHeighHack ($mainCardToolbarHeight /*, $cardListPadding*/)
+
+/*
+//	Firefox considers 100% respect to height of the whole window, this is rule is necessary to eliminate the card toolbar offset.
 @-moz-document url-prefix() {
-	#mainPanel {
+	@include fixHeighHack ($mainCardToolbarHeight, $cardListPadding)
-		&.extra-wide {
-			.subpanel {
-				&.cardContent {
-					height: calc(100% - #{$mainCardToolbarHeight});
-				}
-			}
-		}
-
-		&.wide {
-				.cardContent {
-					height: calc(100% - #{$mainCardToolbarHeight});
-				}
-		}
-	}
 }
 
-@media screen and (-webkit-min-device-pixel-ratio:0) { 
+//	Chrome fix (without messing with Safari)
-	#mainPanel {
+@supports (-webkit-appearance:none) and (R:0) {
-		&.extra-wide {
+	@include fixHeighHack ($mainCardToolbarHeight, $cardListPadding)
-			.subpanel {
-				&.cardContent {
-					height: calc(100% - #{$mainCardToolbarHeight});
-				}
-			}
-		}
-
-		&.wide {
-				.cardContent {
-					height: calc(100% - #{$mainCardToolbarHeight});
-				}
-		}
-	}
 }
+*/

frontend/delta/scss/core/mixin.scss

@@ -216,4 +216,35 @@ refer to http://www.clipperz.com.
 	background-size: 3px 3px;
 }
 
+@mixin fixHeighHack ($offsetHeight /*, $padding*/) {
+/*
+	#mainPanel {
+		&.extra-wide {
+			.subpanel {
+				&.cardContent {
+					height: calc(100% - #{$offsetHeight});
+				}
+			}
+		}
 
+		&.wide {
+				.cardContent {
+					height: calc(100% - #{$offsetHeight});
+				}
+		}
+	}
+
+	div.cardContent {
+		div.cardListColumn.column {
+			&.addCard {
+				height: calc(100% + #{$offsetHeight});
+			}
+
+			div.cardList {
+//				height: calc(100% - #{$padding} - #{$offsetHeight});
+				height: calc(100% - #{$offsetHeight});
+			}
+		}
+	}
+*/
+}

frontend/delta/scss/core/parameters.scss

@@ -29,6 +29,7 @@ $cardContentPanelFlexWidth: 4;
 
 $mainCardToolbarHeight: 48px;
 
+$cardListPadding: 100px;
 $cardListWidth: 1;
 $cardDetailWidth: 2;
 

frontend/delta/scss/style/card.scss

@@ -578,7 +578,7 @@ $cardViewBasePadding: 10px;
 					@include icon-font();
 					color: #aaa;
 
-					width: 20px;
+					width: 21px;
 					height: 20px;
 					font-size: 15pt;
 					margin: $iconMargin;

frontend/delta/scss/style/selectionPanel.scss

@@ -209,6 +209,7 @@ refer to http://www.clipperz.com.
 	.showArchivedCards {
 		@include flexbox();
 		@include flex-direction(row);
+		border-top: 1px dotted #333;
 
 		padding: 10px;
 		font-size: 10pt;