Submodules styling

src/apps/callflows/i18n/en-US.json

@@ -264,9 +264,9 @@
 			"user": "User",
 			"callflow": "Callflow",
 			"remove": "Remove",
-			"add_user": "Add User",
+			"add_user": "Add user to the directory",
 			"select": "Select",
-			"add_this_user": "Add this user to the directory",
+			"add_this_user": "Add",
 			"minimum_number_of_input": "Minimum number of input",
 			"minimum_number_of_input_placeholder": "Min of input",
 			"minimum_number_of_input_data_content": "Count of how many DTMFs must be collected before processing begins",
@@ -1115,9 +1115,9 @@
 			"nameDataContent": "Friendly name for this Queue",
 			"user": "User",
 			"actions": "Actions",
-			"addUser": "Add User",
+			"addUser": "Add user to the queue",
 			"select": "Select",
-			"addThisUser": "Add this user to the queue",
+			"addThisUser": "Add",
 			"queueTimeoutPlaceholder": "Queue timeout (s)",
 			"queueTimeoutDataContent": "How long caller stays in queue, in seconds",
 			"queueTimeout": "Queue timeout (s)",
@@ -1127,7 +1127,7 @@
 			"delete": "Delete",
 			"save": "Save",
 			"thereIsCurrentlyNoUser": "There is currently no user in this queue",
-			"userLabel": "User"
+			"userLabel": "Users list"
 		}
 	},
 	"oldCallflows": {

src/apps/callflows/style/app.css

@@ -9,6 +9,7 @@
 @import url('../submodules/groups/groups.css');
 @import url('../submodules/featurecodes/featurecodes.css');
 @import url('../submodules/temporalset/temporalset.css');
+@import url('../submodules/callcenter/callcenter.css');
 /* style.css */
 #ws_callflow > .callflow {
 	float: left;
@@ -19,9 +20,10 @@
 }
 
 #ws_callflow .callflow .root > .top_bar {
-	background-image: url(static/images/blue_bar.png);
+	background: #22A5FF;
 	height: 25px;
 	text-align: left;
+	border-radius: 6px 6px 0 0;
 }
 
 #ws_callflow .callflow .root > .top_bar > span {
@@ -31,7 +33,8 @@
 #ws_callflow .callflow .root > .top_bar .name {
 	float: left;
 	margin-left: 10px;
-	font-weight: bold;
+	font-weight: normal;
+	color: white;
 	cursor: default;
 }
 
@@ -44,12 +47,12 @@
 	background-position: bottom;
 	background-repeat: repeat-x;
 	height: 32px;
-	background-color: #424242;
+	background-color: #303039;
 }
 
 #ws_callflow .callflow .root > .content .number_row:last-child {
 	background: none;
-	background-color: #424242;
+	background-color: #303039;
 	height: 30px;
 	border-radius: 0px 0px 2px 2px;
 }
@@ -131,21 +134,23 @@
 	background-image: url(static/images/btn_delete_blue.png);
 }
 
-#ws_callflow .tool .icon {
-	margin: 2px;
-	display: inline-block;
+#ws_callflow .tool .fa {
+	margin: 2px 2px 5px;
+	color: white;
 }
 
 #ws_callflow .tools .category {
 	text-align: center;
-	background: url(static/images/background_category.png) no-repeat;
+	background: #22A5FF;
 	background-position: top center;
 	cursor: default;
+	border-bottom: 1px solid white;
 }
 
 #ws_callflow .tools .category .content {
-	background-color: #777777;
-	border: 1px solid #333333;
+	background-color: white;
+	border: 1px solid #22A5FF;
+	padding: 1px 0px 3px;
 }
 
 #ws_callflow .tools .open {
@@ -157,23 +162,56 @@
 }
 
 #ws_callflow .tools .active .open {
-	background-image: url(static/images/arrow_active.png);
-	color: #22A5FF;
+	color: white;
+	position: relative;
 }
 
-#ws_callflow .tools .inactive .open{
-	background-image: url(static/images/arrow_inactive.png);
+#ws_callflow .tools .active .open::before {
+	content: '\f078';
+	font: normal normal normal 14px/1 FontAwesome;
+	display: inline-block;
+	vertical-align: top;
+	width: 16px;
+	height: 14px;
+	position: absolute;
+	left: 5px;
+	top: 5px;
+	color: white;
+}
+
+#ws_callflow .tools .inactive .open {
+	color: white;
+	position: relative;
+	cursor: pointer;
+}
+
+#ws_callflow .tools .inactive .open:hover {
+	background: #0081D6;
+}
+
+#ws_callflow .tools .inactive .open::before {
+	content: '\f054';
+	font: normal normal normal 14px/1 FontAwesome;
+	display: inline-block;
+	vertical-align: top;
+	width: 16px;
+	height: 14px;
+	position: absolute;
+	left: 5px;
+	top: 5px;
+	color: white;
 }
 
 #ws_callflow .tools .tool {
-	background: #777777;
+	background: white;
 	float: left;
-	width: 82px;
+	width: 78px;
 	padding-left: 1px;
 	padding-top: 1px;
 	cursor: -moz-grab;
 	cursor: -webkit-grab;
 	cursor: grab;
+	margin: 1px 1px 1px 2px;
 }
 
 #ws_callflow .destination {
@@ -183,20 +221,28 @@
 
 #ws_callflow .tools .tool .action {
 	z-index: 19;
-	height:56px;
-	background: url(static/images/blackbox_small.png) no-repeat;
-	min-width: 82px;
+	height: 53px;
+	border-radius: 6px;
+	background: #22A5FF;
+	color: white;
+	border: 1px solid #22A5FF;
+	padding-top: 7px;
+}
+
+#ws_callflow .tools .tool .action:hover {
+	background: #303039;
+	border: 1px solid #303039;
 }
 
 #ws_callflow .tools .app_list_nav {
-	background: #777777;
-	padding-top: 1px;
+	background: white;
 }
 
 #ws_callflow .callflow .icons_black.node {
 	width: 143px;
 	height: 84px;
-	background: url(static/images/blackbox.png) no-repeat;
+	background: #303039;
+	border-radius: 6px;
 }
 
 #ws_callflow #ws_cf_flow .children .child:last-child:not(:first-child) {
@@ -265,6 +311,12 @@
 	background-image: url(static/images/tall_arrow.png);
 }
 
+#ws_callflow .children > .child > .fa {
+	font-size: 48px;
+	color: #303039;
+	margin: 9px 0 7px;
+}
+
 #ws_callflow .a_link_option {
 	color: #EEE;
 	font-size: 12px;
@@ -283,30 +335,36 @@
 }
 
 #ws_callflow .div_icon {
-	height: 50px;
+	height: 46px;
+	padding: 0 10px;
 }
 
-#ws_callflow .div_icon > span {
-	display: inline-block;
-	max-width: 100px;
-	vertical-align: middle;
+#ws_callflow .div_icon > .fa {
+	font-size: 23px;
+	margin-right: 7px;
+	color: white;
+	vertical-align: top;
 }
 
 #ws_callflow .module {
 	font-size: 13px;
 	height: 59px;
-	margin-top: 25px;
+	margin-top: 15px;
 	cursor: default;
 }
 
 #ws_callflow .div_icon .module_name {
 	text-transform: uppercase;
 	text-align: center;
+	vertical-align: top;
+	display: inline-block;
+	line-height: 15px;
+	width: 100%;
+	padding-top: 5px;
 }
 
 #ws_callflow .details {
 	font-size: 10px;
-	margin-top: -10px;
 	overflow: hidden;
 }
 
@@ -400,15 +458,37 @@
 }
 
 #ws_callflow .root .top_bar .edit_icon {
-	background: url('static/images/edit_icon.png') no-repeat scroll center center transparent;
 	cursor: pointer;
 	display: inline-block;
-	height: 18px;
-	margin: 3px 0px 0px 7px;
-	width: 20px;
+	margin: 3px 0 0 7px;
+	font-size: 16px;
+	line-height: 18px !important;
+	color: white;
+}
+
+#ws_callflow .root .top_bar .edit_icon i {
+	color: white;
 }
 
 /* callflow.css */
+.callflows-port .monster-button-primary {
+	color: white;
+}
+
+.callflows-port .buttons-wrapper .btn,
+.callflows-port .buttons-wrapper .monster-button {
+	margin-right: 10px;
+}
+
+.callflows-port .monster-button-primary:hover {
+	border-color: #0081D6;
+	background: #0081D6;
+}
+
+#callflow_container .tab-content {
+	overflow: visible;
+}
+
 #callflow_container .callflow-help, .popup_help .callflow-help {
 	background: url(static/images/callflow_help.gif) no-repeat center;
 	height: 644px;
@@ -516,16 +596,19 @@
 }
 
 #ws_callflow .tools .search-box {
-	background: #444;
+	border-left: 1px solid #22A5FF;
+	border-right: 1px solid #22A5FF;
+	position: relative;
 }
 
 #ws_callflow .tools .search-box input {
 	width: 120px;
 	height: 15px;
-	border-radius: 20px;
 	margin-top: 3px;
 	margin-bottom: 3px;
 	margin-left: 3px;
+	border: none;
+	box-shadow: none;
 }
 
 #ws_callflow .tool {
@@ -551,14 +634,14 @@
 }
 
 #ws_callflow .title {
-	background: url("static/images/blue_bar.png");
-	font-size: 12px;
+	background: #22A5FF;
+	font-size: 15px;
 	height: 25px;
 	line-height: 25px;
-	border-radius: 2px 2px 0px 0px;
+	border-radius: 6px 6px 0 0;
 	text-align: center;
 	color: #fff;
-	font-weight: bold;
+	font-weight: normal;
 }
 
 #callflow_container .wrapper_callflow_buttons {
@@ -591,7 +674,7 @@
 	background-color: #3D3D3D;
 	border: 1px solid #333333;
 	border-radius: 2px;
-	opacity: 80%;
+	opacity: 0.8;
 	padding: 5px 2px 5px 9px;
 	text-align: left;
 	font-size: 10px;
@@ -627,7 +710,6 @@
 
 /* JR's customization */
 #callflow_container {
-	color: #ebebeb;
 	min-height: 100%;
 }
 
@@ -677,15 +759,9 @@
 	line-height: 50px;
 	max-height: 50px;
 	font-weight: 600;
-	background-color: #ddd;
+	background-color: #eee;
 	width: 241px;
-
-	background-image: -webkit-linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 80%) 100%);
-	background-image:    -moz-linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 80%) 100%);
-	background-image:     -ms-linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 80%) 100%);
-	background-image:      -o-linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 80%) 100%);
-	background-image:         linear-gradient(top, hsl(0, 0%, 90%) 0%, hsl(0, 0%, 80%) 100%);
-	color: #555;
+	color: #303039;
 }
 
 #callflow_container .left-bar-container .list-add i {
@@ -693,13 +769,13 @@
 }
 
 #callflow_container .left-bar-container .list-add:hover {
-	background: #ccc;
-	/*color: #22a5ff;*/
+	background: #22A5FF;
+	color: white;
 	cursor: pointer;
 }
 
 #callflow_container .left-bar-container .list-add:hover i {
-	/*color: #22a5ff;*/
+	color: white;
 }
 
 #callflow_container .left-bar-container .list-loader {
@@ -726,7 +802,7 @@
 }
 
 #callflow_container .left-bar-container .list-element > div:hover {
-	background: #eee;
+	background: white;
 	cursor: pointer;
 	/*color: #22a5ff;*/
 }
@@ -935,19 +1011,20 @@
 }
 
 .callflows-port h3 {
-	font-size:14px;
+	font-size: 17px;
+	font-weight: 400;
 }
 
 .callflows-port h1 {
 	font-size:24px;
 	letter-spacing: 1px;
 	margin-top: 0;
+	font-weight: 400;
 }
 
 .callflows-port hr {
-	margin:0;
-	border-top:1px solid #404040;
-	border-bottom:1px solid #202020;
+	margin: 0;
+	border-bottom: 1px solid #d4d4d4;
 }
 
 .callflows-port .monster-button {
@@ -1020,38 +1097,24 @@
 }
 
 .callflows-port .pill-content {
-	background:#373737;
-	background:-moz-linear-gradient(top, #373737 0, #2e2e2e 50%, #2f2f2f 100%);
-	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #373737), color-stop(50%, #2e2e2e), color-stop(100%, #2f2f2f));
-	background:-webkit-linear-gradient(top, #373737 0, #2e2e2e 50%, #2f2f2f 100%);
-	background:-o-linear-gradient(top, #373737 0, #2e2e2e 50%, #2f2f2f 100%);
-	background:-ms-linear-gradient(top, #373737 0, #2e2e2e 50%, #2f2f2f 100%);
-	background:linear-gradient(top, #373737 0, #2e2e2e 50%, #2f2f2f 100%);
-	filter:progid:dximagetransform.microsoft.gradient(startColorstr='#373737', endColorstr='#2f2f2f', GradientType=0);
-	color: #EEE;
-	padding:30px;
-	border:1px solid #22A5FF;
-	box-shadow:1px 2px 5px 0px #363636;
-	-moz-box-shadow:4px 5px 10px 1px #262626;
-	-webkit-box-shadow:4px 5px 10px 1px #262626;
+	background: white;
+	color: #565656;
+	padding: 10px 0;
 }
 
 .callflows-port .pill-content h3,
 .callflows-port .row h3 {
-	margin-bottom:20px;
-	color:#0ac9ff;
+	margin-bottom: 4px;
+	color: #22A5FF;
 }
 
 .callflows-port .pill-content .edit_create {
 	margin-left:20px;
 	display:inline;
 }
-.callflows-port .pill-content .edit_create a {
-	color: #EEE;
-}
 
 .callflows-port .pill-content .edit_create > a:not(:first-child) {
-	margin-left:5px;
+	margin-left: 15px;
 }
 
 .callflows-port .btn.black:first-child {
@@ -1063,40 +1126,32 @@
 }
 
 .callflows-port .btn.black {
-	background:#434343;
-	background:-moz-linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #434343), color-stop(50%, #353535), color-stop(100%, #282828));
-	background:-webkit-linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	background:-o-linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	background:-ms-linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	background:linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	filter:progid:dximagetransform.microsoft.gradient(startColorstr='#434343', endColorstr='#282828', GradientType=0);
-	color:#e6e6e6;
-	text-shadow:none;
-	font-size:12px;
-	border:1px solid #1a1a1a;
+	background: white;
+	color: #565656;
+	text-shadow: none;
+	font-size: 13px;
+	border: 1px solid #bbbbbb;
 	border-radius: 0;
+	box-shadow: none;
+}
+
+.callflows-port .btn.black + .btn.black {
+	border-left: none;
 }
 
 .callflows-port .btn.black.activate {
-	box-shadow:inset 0 0 10px 1px #000;
+	border-color: #22A5FF;
+	color: white;
+	background: #22A5FF;
+	/*box-shadow:inset 0 0 10px 1px #000;
 	-moz-box-shadow:inset 0 0 10px 1px #000;
-	-webkit-box-shadow:inset 0 0 10px 1px #000;
+	-webkit-box-shadow:inset 0 0 10px 1px #000;*/
 }
 
 .callflows-port .btn.black:hover {
-	color:#e6e6e6;
-	background:#434343;
-	background:-moz-linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #434343), color-stop(50%, #353535), color-stop(100%, #282828));
-	background:-webkit-linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	background:-o-linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	background:-ms-linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	background:linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	filter:progid:dximagetransform.microsoft.gradient(startColorstr='#434343', endColorstr='#282828', GradientType=0);
-	box-shadow:inset 0 0 10px 1px #000;
-	-moz-box-shadow:inset 0 0 10px 1px #000;
-	-webkit-box-shadow:inset 0 0 10px 1px #000;
+	border-color: #22A5FF;
+	color: white;
+	background: #22A5FF;
 }
 
 .callflows-port .buttons-right {
@@ -1157,12 +1212,12 @@
 
 .callflows-port form label:not(.monster-invalid) {
 	float: left;
-	font-size: 13px;
+	font-size: 15px;
 	line-height: 18px;
 	padding-top: 6px;
 	text-align: right;
 	width: 130px;
-	color:#e6e6e6;
+	color: #565656;
 }
 
 .callflows-port form label.monster-switch {
@@ -1262,85 +1317,66 @@
 }
 
 .callflows-port .tabs > li {
-	background:#434343;
-	background:-moz-linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #434343), color-stop(50%, #353535), color-stop(100%, #282828));
-	background:-webkit-linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	background:-o-linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	background:-ms-linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	background:linear-gradient(top, #434343 0, #353535 50%, #282828 100%);
-	filter:progid:dximagetransform.microsoft.gradient(startColorstr='#434343', endColorstr='#282828', GradientType=0);
-	border-top:1px solid;
-	border-top-color:#262626;
-	border-left:1px solid;
-	border-left-color:#2f2f2f;
+	background: white;
+	border: none;
+	color: #565656;
 	float: left;
 	font-size: 12px;
-	margin-bottom: -1px;
 	position: relative;
+	border-radius: 6px 6px 0 0;
 }
 
 .callflows-port .tabs > li:first-child {
-	border-radius: 2px 0 0 0;
-	border-left: 1px solid;
-	border-left-color:#1a1a1a;
 }
 
 .callflows-port .tabs > li:last-child {
-	border-radius: 0 2px 0 0;
-	border-right: 1px solid;
-	border-right-color: #1a1a1a;
 }
 
 .callflows-port .tabs > li > a {
-	border-radius: 2px 2px 0 0;
+	border-radius: 6px 6px 0 0;
 	display: block;
 	line-height: 34px;
 	padding: 0 15px;
-	color: #fff;
+	color: #565656;
+	background: #e2e2e2;
+	margin-right: 2px;
+	margin-bottom: 3px;
+	font-size: 14px;
 }
 
 .callflows-port .tabs > li > a:hover {
 	text-decoration: none;
 }
 
-.callflows-port .tabs .active {
-	border-top:0;
-	border-bottom:1px solid #373737;
-}
-
-.callflows-port .tabs > li:first-child.active {
-	border-left:1px solid #22A5FF;
-}
-
-.callflows-port .tabs > li:last-child.active {
-	border-right:0;
+.callflows-port .tabs > li > a > .fa {
+	margin-right: 5px;
 }
 
 .callflows-port .tabs > li > a > .icon {
-	margin-right:3px;
+	margin-right: 3px;
 }
 
 .callflows-port .tabs > li > a:hover {
-	color:#fff;
-	background-color:transparent;
+	border-color: #22A5FF;
+	color: white;
+	background: #22A5FF;
+}
+
+.callflows-port .tabs > li > a:hover .fa {
+	color: white;
 }
 
 .callflows-port .tabs .active > a,
 .callflows-port .tabs .active > a:hover {
-	border:0;
-	background-color:none;
-	border-radius: 2px 2px 0 0;
-	color:#fff;
-	background:#373737;
-	border-top:1px solid;
-	border-top-color:#22A5FF;
-	border-left:1px solid;
-	border-left-color:#22A5FF;
-	border-right:1px solid;
-	border-right-color:#22A5FF;
 	font-weight:bold;
 	text-decoration: none;
+	border-color: #22A5FF;
+	color: white;
+	background: #22A5FF;
+}
+
+.callflows-port .tabs .active > a .fa {
+	color: white;
 }
 
 .callflows-port .tabs li:first-child.active > a {
@@ -1354,16 +1390,11 @@
 .callflows-port .help_box {
 	margin-bottom: 10px;
 	padding: 10px;
-	padding-bottom: 10px;
-	border: 1px solid #363636;
 	border-radius: 2px 2px 2px 2px;
 	background: #22A5FF;
-	background: -webkit-gradient(linear, left top, left bottom, from(#22A5FF), to(#036884)) !important;
-	background: -moz-linear-gradient(top,  #22A5FF,  #036884) !important;
-	box-shadow: 1px 1px 1px #333333;
 	text-align: center;
-	font-style: italic;
-	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#22A5FF', endColorstr='#036884') !important;
+	font-style: normal;
+	color: white;
 }
 
 /********** Misc images **********/
@@ -1585,4 +1616,116 @@
 
 .media-edit-callflow-popup #edit_link.active {
 	display: block;
+}
+
+.callflows-port .monster-button-danger,
+#callflow_container .monster-button-danger {
+	color: white;
+	border-color: #B91B0C;
+	background: #B91B0C;
+}
+
+.callflows-port .monster-button-danger:hover,
+#callflow_container .monster-button-danger:hover {
+	background: #D61C0D;
+}
+
+.callflows-port .monster-button-success,
+#callflow_container .monster-button-success {
+	color: white;
+	border-color: #22A5FF;
+	background: #22A5FF;
+}
+
+.callflows-port .monster-button-success:hover,
+#callflow_container .monster-button-success:hover {
+	border-color: #0081D6;
+	background: #0081D6;
+}
+
+.callflows-port .items-selector .box-selector .item-selector {
+	color: #303039;
+}
+
+.callflows-port .items-selector .box-selector .item-selector:hover {
+	background: #22A5FF;
+	color: white;
+}
+
+.callflows-port .table.table-striped {
+	border-left: 0;
+	border-right: 0;
+}
+
+.callflows-port .table.table-striped thead tr {
+	color: #303039;
+	background: #D9D9D9;
+	font-weight: bold;
+}
+
+.callflows-port .table.table-striped thead tr th {
+	border-bottom: 1px solid #A6A6A6;
+}
+
+.callflows-port .table.table-striped thead tr th:not(:last-child) {
+	border-right: 1px solid #A6A6A6;
+}
+
+.callflows-port .table.table-striped thead tr th .fa {
+	margin-right: 5px;
+	color: #303039;
+}
+
+.callflows-port .table.table-striped .link-icon {
+	font-size: 20px;
+	margin-right: 10px;
+	cursor: pointer;
+}
+
+.callflows-port .table.table-striped .link-icon .fa {
+	color: #5C5C61;
+}
+
+.callflows-port .table.table-striped .link-icon .fa:hover,
+.callflows-port .table.table-striped .link-icon .fa:active {
+	color: #22A5FF;
+}
+
+.callflows-port .form-horizontal label.control-label {
+	float: left;
+	width: 160px;
+	padding-top: 5px;
+	text-align: right;
+}
+
+
+.callflows-port .callflow-panel {
+	background: #22A5FF;
+	display: inline-block;
+	vertical-align: top;
+	margin-bottom: 20px;
+}
+
+.callflows-port .callflow-panel_title {
+	color: #eeeeee;
+	font-weight: bold;
+	height: 25px;
+	line-height: 25px;
+	text-align: center;
+	border-radius: 10px 10px 0 0;
+}
+
+.callflows-port .callflow-panel_body {
+	background: #EEEEEE;
+	padding: 15px 15px 20px;
+}
+
+.callflows-port .callflow-panel_body_item {
+	display: inline-block;
+	vertical-align: top;
+	margin: 0 10px 10px 0;
+}
+
+.callflows-port .link-with-icon .fa {
+	margin-right: 5px;
 }

src/apps/callflows/submodules/blacklist/blacklist.css

@@ -1,6 +1,5 @@
 #blacklist_wrapper .list-numbers {
 	display: block;
-	margin-left: 100px;
 	width: 470px;
 }
 
@@ -8,6 +7,11 @@
 	margin-bottom: 8px;
 }
 
+#blacklist_wrapper .list-numbers .delete-number .fa {
+	color: white;
+	font-size: 20px;
+}
+
 #blacklist_wrapper .list-numbers .add-number {
 	margin-bottom: 10px;
 	border-radius: 4px;
@@ -27,11 +31,12 @@
 }
 
 #blacklist_wrapper .number-wrapper {
-	background: #444;
-	border-top: 1px solid #22ccff;
-	border-right: 1px solid #22ccff;
-	border-left: 1px solid #22ccff;
+	background: #22A5FF;
+	border-top: 1px solid #22A5FF;
+	border-right: 1px solid #22A5FF;
+	border-left: 1px solid #22A5FF;
 	line-height: 30px;
+	color: white;
 }
 
 #blacklist_wrapper .number-wrapper.placeholder > div,
@@ -39,9 +44,14 @@
 	padding: 5px 10px;
 }
 
+#blacklist_wrapper .number-wrapper.placeholder .create-text {
+	color: #303039;
+}
+
 #blacklist_wrapper .number-wrapper.placeholder .create-text:hover {
-	background: #222;
+	background: #22A5FF;
 	cursor: pointer;
+	color: white;
 }
 
 #blacklist_wrapper .saved-numbers .number-wrapper:first-child {
@@ -53,7 +63,12 @@
 	border-bottom-right-radius: 4px;
 	border-bottom-left-radius: 4px;
 
-	border-bottom: 1px solid #22ccff;
+	border-bottom: 1px solid #22A5FF;
+}
+
+#blacklist_wrapper .saved-numbers .number-wrapper + .number-wrapper {
+	border-top: none;
+	margin-top: 1px;
 }
 
 #blacklist_wrapper .number-wrapper.placeholder {
@@ -72,8 +87,7 @@
 }
 
 #blacklist_wrapper .help-text-icon {
-	color: white;
+	color: #22A5FF;
 	margin-right: 10px;
-	margin-left: 100px;
 	margin-top :15px;
 }

src/apps/callflows/submodules/callcenter/callcenter.css

@@ -1,171 +1,8 @@
-.callflows-port #user-form input[disabled=disabled] {
-	background: #ccc;
+.callflows-port #queue-form .users-table {
+	max-width: 450px;
 }
 
-.callflows-port #user-form #equipment {
-	text-align: center;
-	font-size: 12px;
-	font-family: 'Helvetica';
-}
-
-.callflows-port #user-form #equipment .help_box {
-	color: #333333;
-	line-height: 12px;
-}
-
-.callflows-port #user-form #equipment .add_device {
-	margin-top: 15px;
-	display: inline-block;
-}
-
-.callflows-port #user-form #equipment .add_device:hover a {
-	color: #333333;
-}
-
-.callflows-port #user-form #equipment .add_device:hover .add_device_icon {
-	background-position: 0 -24px;
-	cursor: pointer;
-}
-
-.callflows-port #user-form #equipment #tab_devices  {
-	border: 2px solid #666666;
-	border-radius: 15px 15px 15px 15px;
-	color: #666666;
-	margin: 20px auto auto;
-	width: 560px;
-}
-
-.callflows-port #user-form #equipment #tab_devices .action_device {
-	color: #666666;
-	cursor: pointer;
-	text-decoration: underline;
-	line-height: 30px;
-}
-
-.callflows-port #user-form #equipment #tab_devices .action_device:not(:first-child) {
-	margin-left: 10px;
-}
-.callflows-port #user-form #equipment #tab_devices .action_device:hover {
-	color: #05addc;
-}
-
-.callflows-port #user-form #equipment #tab_devices .column:not(.fifth) {
-	border-right: 1px solid #A6A6A6;
-}
-
-.callflows-port #user-form #equipment #tab_devices .column {
-	float: left;
-	text-align: center;
-	height: 30px;
-	line-height: 30px;
-}
-
-.callflows-port #user-form #equipment #tab_devices .column.first {
-	width: 190px;
-	overflow: hidden;
-	text-align:center;
-}
-
-.callflows-port #user-form #equipment #tab_devices .column.second {
-	width: 99px;
-}
-
-.callflows-port #user-form #equipment #tab_devices .column.third {
-	min-width: 49px;
-}
-
-.callflows-port #user-form #equipment #tab_devices .rows .column.third {
-	background-image: url('../../style/static/images/red_phone.png');
-	background-repeat: no-repeat;
-	background-position: 16px center;
-}
-
-.callflows-port #user-form #equipment #tab_devices .rows .column.third.registered,.callflows-port #user-form #equipment #tab_devices .rows .column.third.cellphone {
-	background-image: url('../../style/static/images/green_phone.png');
-}
-
-.callflows-port #user-form #equipment #tab_devices .rows .column.third.disabled {
-	background-image: url('../../style/static/images/gray_phone.png') !important;
-}
-
-.callflows-port #user-form #equipment #tab_devices .column.fourth {
-	width: 59px;
-}
-
-.callflows-port #user-form #equipment #tab_devices .column.fourth .enabled_checkbox {
-	margin-top: 8px;
-}
-
-.callflows-port #user-form #equipment #tab_devices .column.fifth {
-	width: 159px;
-}
-
-.callflows-port #user-form #equipment #tab_devices .column.merged {
-	width: 560px;
-	border-right: none;
-}
-
-.callflows-port #user-form #equipment #tab_devices .row {
-	height: 30px;
-	margin-left: 0px;
-}
-
-.callflows-port #user-form #equipment #tab_devices .row.title {
-	background-color: #dddddd !important;
-	border-bottom: 2px solid #666666 !important;
-	border-radius: 15px 15px 0px 0px;
-	font-weight: bold;
-}
-
-.callflows-port #user-form #equipment #tab_devices .row:not(:last-child) {
-	border-bottom: 1px solid #A6A6A6;
-}
-
-.callflows-port #user-form #equipment #tab_devices .row:last-child {
-	border-radius: 0px 0px 15px 15px;
-}
-
-.callflows-port #user-form #equipment #tab_devices .row:nth-child(odd) {
-	background-color: #eeeeee;
-}
-
-.callflows-port #user-form #equipment #tab_devices .row:nth-child(even) {
-	background-color: #dddddd;
-}
-
-.callflows-port #user-form #username_label {
-	color: #05addc;
-	text-align: left;
-	font-weight: bold;
-}
-
-.callflows-port #user-form .shoutcast-div {
-	display: none;
-}
-
-.callflows-port #user-form .shoutcast-div.active {
-	display: block;
-}
-
-/* Hotdesk devices */
-.callflows-port #user-form #hotdesk_devices {
-	/*width: 400px;*/
-	width: 320px;
-}
-
-.callflows-port #user-form #hotdesk_devices .row .column:nth-child(1) {
-	width: 300px;
-}
-
-.callflows-port #user-form #hotdesk_devices .row .column:nth-child(2) {
-	width: 80px;
-}
-
-.callflows-port #user-form #hotdesk_devices .row .column.merged {
-	/* width: 400px; */
-	width: 320px;
-}
-
-.callflows-port #user-form #hotdesk_devices .row input[type="checkbox"] {
-	margin-top: 10px;
-}
+.callflows-port #queue-form .add-user-panel {
+	width: 100%;
+	max-width: 450px;
+}

src/apps/callflows/submodules/conference/conference.js

@@ -19,7 +19,7 @@ define(function(require){
 			$.extend(callflow_nodes, {
 				'conference[id=*]': {
 					name: self.i18n.active().callflows.conference.conference,
-					icon: 'conference',
+					icon: 'comments',
 					category: self.i18n.active().oldCallflows.basic_cat,
 					module: 'conference',
 					tip: self.i18n.active().callflows.conference.conference_tip,
@@ -106,7 +106,7 @@ define(function(require){
 
 				'conference[]': {
 					name: self.i18n.active().callflows.conference.conference_service,
-					icon: 'conference',
+					icon: 'comments',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'conference',
 					tip: self.i18n.active().callflows.conference.conference_service_tip,

src/apps/callflows/submodules/device/device.css

@@ -2,52 +2,40 @@
 ----TOP TABS MEDIA---------
 ****************************/
 .callflows-port .media_tabs {
-	background-color: #555555;
-	border: 1px solid #363636;
-	min-height: 90px;
-	padding: 10px;
 	position:relative;
 	overflow-x: auto;
-	white-space: nowrap;
+	background: #eee;
+	border: none;
+	height: auto;
+	min-height: 0;
+	padding: 10px 10px 5px;
 }
 
 .callflows-port .media_tabs .buttons {
-	width: 128px;
-	height: 90px;
-
-	line-height: 90px;
+	width: 145px;
+	height: 50px;
+	line-height: 50px;
 	display: inline-block;
 	position: relative;
-	margin: 0 10px 0 0;
-
-	text-align: center;
-
+	margin: 0 10px 10px 0;
+	padding-left: 20px;
+	text-align: left;
 	-moz-border-radius: 12px;
 	-webkit-border-radius: 12px;
 	border-radius: 4px;
-
 	cursor: pointer;
-	opacity: 0.4;
-
-	background: #05addc;
-	background: -moz-linear-gradient(top,  #05addc 0%, #0099b7 25%, #008ca8 50%, #0099b7 75%, #05addc 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05addc), color-stop(25%,#0099b7), color-stop(50%,#008ca8), color-stop(75%,#0099b7), color-stop(100%,#05addc));
-	background: -webkit-linear-gradient(top,  #05addc 0%,#0099b7 25%,#008ca8 50%,#0099b7 75%,#05addc 100%);
-	background: -o-linear-gradient(top,  #05addc 0%,#0099b7 25%,#008ca8 50%,#0099b7 75%,#05addc 100%);
-	background: -ms-linear-gradient(top,  #05addc 0%,#0099b7 25%,#008ca8 50%,#0099b7 75%,#05addc 100%);
-	background: linear-gradient(to bottom,  #05addc 0%,#0099b7 25%,#008ca8 50%,#0099b7 75%,#05addc 100%);
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05addc', endColorstr='#05addc',GradientType=0 );
-
+	opacity: 0.5;
+	background: #22A5FF;
 }
 
 .callflows-port .media_tabs .buttons:hover {
 	-moz-box-shadow: 3px 5px 10px #383838;
 	-webkit-box-shadow: 3px 5px 10px #383838;
 	box-shadow: 3px 5px 10px #383838;
-	opacity: 0.6;
+	opacity: 1;
 }
 
-.callflows-port .media_tabs .buttons.current, 
+.callflows-port .media_tabs .buttons.current,
 .callflows-port .media_tabs .buttons.current:hover {
 	-moz-box-shadow: 3px 5px 10px #383838;
 	-webkit-box-shadow: 3px 5px 10px #383838;
@@ -55,10 +43,21 @@
 	opacity: 1;
 }
 
+.callflows-port .media_tabs .buttons .fa {
+	margin-right: 10px;
+	color: white;
+	font-size: 24px;
+	vertical-align: -3px;
+}
+
+.callflows-port .media_tabs .buttons .fa-mobile {
+	font-size: 30px;
+	vertical-align: -4px;
+}
+
 .callflows-port .media_tabs .buttons .label_device {
-	font-size: 12px;
+	font-size: 16px;
 	text-transform: uppercase;
-	font-weight: bold;
 	color: white;
 }
 

src/apps/callflows/submodules/directory/directory.css

@@ -1,11 +1,8 @@
 .callflows-port #directory-form #basic #tab_users  {
-	border: 2px solid #666666;
-	border-radius: 15px 15px 0px 0px;
-	color: #666666;
-	margin: 20px auto auto;
-	width: 480px;
+	color: #303039;
+	margin: 20px 0 0;
+	width: 495px;
 	max-height: 342px;
-	float: left;
 }
 
 .callflows-port #directory-form #basic #tab_users .rows {
@@ -14,7 +11,7 @@
 }
 
 .callflows-port #directory-form #basic #tab_users .action_user {
-	color: #666666;
+	color: #303039;
 	cursor: pointer;
 	text-decoration: underline;
 	line-height: 32px;
@@ -23,10 +20,15 @@
 .callflows-port #directory-form #basic #tab_users .action_user:not(:first-child) {
 	margin-left: 10px;
 }
+
 .callflows-port #directory-form #basic #tab_users .action_user:hover {
 	color: #05addc;
 }
 
+.callflows-port #directory-form #basic #tab_users .action_user.fa {
+	font-size: 21px;
+}
+
 .callflows-port #directory-form #basic #tab_users .column.first:not(:last-child) {
 	border-right: 1px solid #A6A6A6;
 }
@@ -38,12 +40,21 @@
 	line-height: 32px;
 }
 
+.callflows-port #directory-form #basic #tab_users .column i.fa {
+	margin-right: 5px;
+	color: #303039;
+}
+
+.callflows-port #directory-form #basic #tab_users .column .action_user {
+	text-decoration: none;
+}
+
 .callflows-port #directory-form #basic #tab_users select {
 	height: 22px;
 }
 
 .callflows-port #directory-form #basic #tab_users .column.first {
-	width: 230px;
+	width: 260px;
 	overflow: hidden;
 	text-align:center;
 }
@@ -58,7 +69,8 @@
 }
 
 .callflows-port #directory-form #basic #tab_users .column.second select {
-	margin: 0;
+	margin: 5px 0 0;
+	vertical-align: top;
 	max-width: 140px;
 	padding: 0;
 }
@@ -69,13 +81,12 @@
 
 .callflows-port #directory-form #basic #tab_users .row-user {
 	height: 32px;
-	margin-left: 0px;
+	margin-left: 0;
 }
 
 .callflows-port #directory-form #basic #tab_users .row-user.title {
-	background-color: #dddddd !important;
-	border-bottom: 2px solid #666666 !important;
-	border-radius: 13px 13px 0px 0px;
+	background-color: #D9D9D9 !important;
+	border-bottom: 1px solid #A6A6A6 !important;
 	font-weight: bold;
 }
 
@@ -84,25 +95,23 @@
 }
 
 .callflows-port #directory-form #basic #tab_users .row-user:nth-child(odd) {
-	background-color: #eeeeee;
+	background-color: #eee;
 }
 
 .callflows-port #directory-form #basic #tab_users .row-user:nth-child(even) {
-	background-color: #dddddd;
+	background-color: #eee;
 }
 
 .callflows-port #directory-form #basic .add_user {
-	margin: 20px 0 0 20px;
-	color: #666666;
-	background: #666666;
-	width: 230px;
-	border-radius: 15px 15px 15px 15px;
-	float: right;
+	background: #22A5FF;
+	display: inline-block;
+	vertical-align: top;
+	min-width: 495px;
 }
 
 .callflows-port #directory-form #basic .add_user .add_content_wrapper {
 	background: #EEEEEE;
-	border-radius: 0 0 15px 15px;
+	padding: 0 15px 10px;
 }
 
 .callflows-port #directory-form #basic .add_user .add_user_title {
@@ -119,8 +128,15 @@
 }
 
 .callflows-port #directory-form #basic .add_user .add_user_fields {
-	margin: auto;
-	width: 200px;
+	display: inline-block;
+	vertical-align: top;
+}
+
+.callflows-port #directory-form #basic .add_user .add_user_fields .user-item-wrapper,
+.callflows-port #directory-form #basic .add_user .add_user_fields .callflow-item-wrapper {
+	display: inline-block;
+	vertical-align: top;
+	width: 190px;
 }
 
 .callflows-port #directory-form #basic .add_user .add_user_fields .tooltip-wrapper {
@@ -132,9 +148,9 @@
 }
 
 .callflows-port #directory-form #basic .add_user .add_user_div {
-	margin: 10px auto auto auto;
-	width: 200px;
-	padding-bottom: 15px;
+	display: inline-block;
+	vertical-align: top;
+	margin: 28px 0 0;
 }
 
 .callflows-port #directory-form #basic .add_user .add_user_div a {

src/apps/callflows/submodules/faxbox/faxbox.css

@@ -1,6 +1,6 @@
 .callflows-port form .input a {
 	color: #05ADDC;
-	font-size: 13px;
+	font-size: 15px;
 	line-height: 30px;
 }
 

src/apps/callflows/submodules/faxbox/faxbox.js

@@ -19,7 +19,7 @@ define(function(require){
 			$.extend(callflow_nodes, {
 				'faxbox[id=*]': {
 					name: self.i18n.active().callflows.faxbox.faxboxes_label,
-					icon: 'printer2',
+					icon: 'fax',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'faxbox',
 					tip: self.i18n.active().callflows.faxbox.faxbox_tip,

src/apps/callflows/submodules/groups/groups.css

@@ -159,17 +159,19 @@
 /* Groups entity */
 #group-form #table_wrapper {
     display: inline-block;
-    text-align: center;
+	vertical-align: top;
+    text-align: left;
     width: 100%;
 }
 
 #group-form #tab_users  {
-    border: 2px solid #666666;
-    border-radius: 5px 5px 0px 0px;
-    color: #666666;
+    color: #303039;
     width: 330px;
     max-height: 342px;
     display: inline-block;
+	vertical-align: top;
+	margin: 0 15px 15px 0;
+	font-size: 16px;
 }
 
 #group-form #tab_users .rows {
@@ -203,28 +205,59 @@
 }
 
 #group-form #tab_users .column.first {
-    width: 250px;
+    width: 230px;
     overflow: hidden;
-    text-align:center;
+    text-align: left;
     cursor: move;
+	padding-left: 20px;
+}
+
+#group-form #tab_users .column.first i.fa {
+	font-size: 20px;
+	margin-right: 5px;
+	width: 20px;
 }
 
 #group-form #tab_users .column.second {
-    width: 59px;
+    width: 79px;
 }
 
 #group-form #tab_users .column.merged {
     width: 330px;
 }
 
+#group-form #tab_users .column .action_endpoint {
+	cursor: pointer;
+}
+
+#group-form #tab_users .column .action_endpoint i.fa {
+	font-size: 20px;
+}
+
+#group-form #tab_users .column .action_endpoint:hover,
+#group-form #tab_users .column .action_endpoint:hover i.fa {
+	color: #22A5FF;
+}
+
 #group-form #tab_users .row {
     height: 30px;
     margin-left: 0px;
 }
 
+#group-form #tab_users .row:hover {
+	background: #DDDDDD !important;
+}
+
+#group-form #tab_users .row:hover i.fa {
+	color: #303039;
+}
+
+#group-form #tab_users #row_no_data {
+	padding-bottom: 5px;
+}
+
 #group-form #tab_users .row.title {
-    background-color: #dddddd !important;
-    border-bottom: 2px solid #666666 !important;
+    background-color: #D9D9D9 !important;
     border-radius: 5px 5px 0px 0px;
     font-weight: bold;
 }
@@ -246,14 +279,15 @@
 }
 
 #group-form .add_endpoint_wrapper{
-    float: right;
-    width: 230px;
 }
 
 #group-form .add_endpoint {
-    color: #666666;
-    background: #666666;
-    border-radius: 5px 5px 5px 5px;
+    color: white;
+	background: #22A5FF;
+	border-radius: 5px 5px 5px 5px;
+	display: inline-block;
+	vertical-align: top;
+	margin: 0 15px 15px 0;
 }
 
 #group-form .add_endpoint:not(:last-child) {
@@ -269,13 +303,18 @@
 
 #group-form .add_endpoint .add_endpoint_title {
     color: #eeeeee;
-    font-weight: bold;
+    font-weight: normal;
     height: 25px;
     line-height: 25px;
     text-align: center;
     border-radius: 5px 5px 0 0;
 }
 
+#group-form .add_endpoint .add_endpoint_title i.fa {
+	margin-right: 5px;
+	color: white;
+}
+
 #group-form .add_endpoint .add_endpoint_div {
     margin-top: 10px;
 }

src/apps/callflows/submodules/groups/groups.js

@@ -315,7 +315,7 @@ define(function(require){
 			$.extend(callflow_nodes, {
 				'ring_group[]': {
 					name: self.i18n.active().oldCallflows.ring_group,
-					icon: 'ring_group',
+					icon: 'users',
 					category: self.i18n.active().oldCallflows.basic_cat,
 					module: 'ring_group',
 					tip: self.i18n.active().oldCallflows.ring_group_tip,
@@ -356,7 +356,7 @@ define(function(require){
 				},
 				'page_group[]': {
 					name: self.i18n.active().oldCallflows.page_group,
-					icon: 'ring_group',
+					icon: 'users',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'page_group',
 					tip: self.i18n.active().oldCallflows.page_group_tip,
@@ -519,7 +519,7 @@ define(function(require){
 
 				'ring_group_toggle[action=login]': {
 					name: self.i18n.active().callflows.ringGroupToggle.loginTitle,
-					icon: 'ring_group',
+					icon: 'users',
 					category: self.i18n.active().callflows.ringGroupToggle.category,
 					module: 'ring_group_toggle',
 					tip: self.i18n.active().callflows.ringGroupToggle.loginTip,
@@ -598,7 +598,7 @@ define(function(require){
 
 				'ring_group_toggle[action=logout]': {
 					name: self.i18n.active().callflows.ringGroupToggle.logoutTitle,
-					icon: 'ring_group',
+					icon: 'users',
 					category: self.i18n.active().callflows.ringGroupToggle.category,
 					module: 'ring_group_toggle',
 					tip: self.i18n.active().callflows.ringGroupToggle.logoutTip,

src/apps/callflows/submodules/media/media.js

@@ -318,7 +318,7 @@ define(function(require){
 			$.extend(callflow_nodes, {
 				'play[id=*]': {
 					name: self.i18n.active().callflows.media.play_media,
-					icon: 'play',
+					icon: 'music',
 					category: self.i18n.active().oldCallflows.basic_cat,
 					module: 'play',
 					tip: self.i18n.active().callflows.media.play_media_tip,

src/apps/callflows/submodules/menu/menu.js

@@ -344,7 +344,7 @@ define(function(require){
 			$.extend(callflow_nodes, {
 				'menu[id=*]': {
 					name: self.i18n.active().callflows.menu.menu_title,
-					icon: 'menu1',
+					icon: 'bars',
 					category: self.i18n.active().oldCallflows.basic_cat,
 					module: 'menu',
 					tip: self.i18n.active().callflows.menu.menu_tip,

src/apps/callflows/submodules/misc/misc.js

@@ -56,7 +56,7 @@ define(function(require){
 				},
 				'callflow[id=*]': {
 					name: self.i18n.active().oldCallflows.callflow,
-					icon: 'callflow',
+					icon: 'share-alt',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'callflow',
 					tip: self.i18n.active().oldCallflows.callflow_tip,
@@ -134,7 +134,7 @@ define(function(require){
 				},
 				'do_not_disturb[action=activate]': {
 					name: self.i18n.active().callflows.doNotDisturb.activate.label,
-					icon: 'x_circle',
+					icon: 'bell-slash',
 					category: self.i18n.active().callflows.doNotDisturb.categoryName,
 					module: 'do_not_disturb',
 					tip: self.i18n.active().callflows.doNotDisturb.activate.tip,
@@ -160,7 +160,7 @@ define(function(require){
 				},
 				'do_not_disturb[action=deactivate]': {
 					name: self.i18n.active().callflows.doNotDisturb.deactivate.label,
-					icon: 'x_circle',
+					icon: 'bell-slash',
 					category: self.i18n.active().callflows.doNotDisturb.categoryName,
 					module: 'do_not_disturb',
 					tip: self.i18n.active().callflows.doNotDisturb.deactivate.tip,
@@ -186,7 +186,7 @@ define(function(require){
 				},
 				'do_not_disturb[action=toggle]': {
 					name: self.i18n.active().callflows.doNotDisturb.toggle.label,
-					icon: 'x_circle',
+					icon: 'bell-slash',
 					category: self.i18n.active().callflows.doNotDisturb.categoryName,
 					module: 'do_not_disturb',
 					tip: self.i18n.active().callflows.doNotDisturb.toggle.tip,
@@ -212,7 +212,7 @@ define(function(require){
 				},
 				'call_forward[action=activate]': {
 					name: self.i18n.active().oldCallflows.enable_call_forwarding,
-					icon: 'rightarrow',
+					icon: 'mail-reply',
 					category: self.i18n.active().oldCallflows.call_forwarding_cat,
 					module: 'call_forward',
 					tip: self.i18n.active().oldCallflows.enable_call_forwarding_tip,
@@ -238,7 +238,7 @@ define(function(require){
 				},
 				'call_forward[action=deactivate]': {
 					name: self.i18n.active().oldCallflows.disable_call_forwarding,
-					icon: 'rightarrow',
+					icon: 'mail-reply',
 					category: self.i18n.active().oldCallflows.call_forwarding_cat,
 					module: 'call_forward',
 					tip: self.i18n.active().oldCallflows.disable_call_forwarding_tip,
@@ -264,7 +264,7 @@ define(function(require){
 				},
 				'call_forward[action=update]': {
 					name: self.i18n.active().oldCallflows.update_call_forwarding,
-					icon: 'rightarrow',
+					icon: 'mail-reply',
 					category: self.i18n.active().oldCallflows.call_forwarding_cat,
 					module: 'call_forward',
 					tip: self.i18n.active().oldCallflows.update_call_forwarding_tip,
@@ -290,7 +290,7 @@ define(function(require){
 				},
 				'dynamic_cid[]': {
 					name: self.i18n.active().oldCallflows.dynamic_cid,
-					icon: 'rightarrow',
+					icon: 'mail-reply',
 					category: self.i18n.active().oldCallflows.caller_id_cat,
 					module: 'dynamic_cid',
 					tip: self.i18n.active().oldCallflows.dynamic_cid_tip,
@@ -307,7 +307,7 @@ define(function(require){
 				},
 				'prepend_cid[action=prepend]': {
 					name: self.i18n.active().oldCallflows.prepend,
-					icon: 'plus_circle',
+					icon: 'plus-circle',
 					category: self.i18n.active().oldCallflows.caller_id_cat,
 					module: 'prepend_cid',
 					tip: self.i18n.active().oldCallflows.prepend_tip,
@@ -371,7 +371,7 @@ define(function(require){
 				},
 				'prepend_cid[action=reset]': {
 					name: self.i18n.active().oldCallflows.reset_prepend,
-					icon: 'loop2',
+					icon: 'undo',
 					category: self.i18n.active().oldCallflows.caller_id_cat,
 					module: 'prepend_cid',
 					tip: self.i18n.active().oldCallflows.reset_prepend_tip,
@@ -397,7 +397,7 @@ define(function(require){
 				},
 				'manual_presence[]': {
 					name: self.i18n.active().oldCallflows.manual_presence,
-					icon: 'lightbulb_on',
+					icon: 'lightbulb-o',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'manual_presence',
 					tip: self.i18n.active().oldCallflows.manual_presence_tip,
@@ -445,7 +445,7 @@ define(function(require){
 				},
 				'language[]': {
 					name: self.i18n.active().oldCallflows.language,
-					icon: 'earth',
+					icon: 'language',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'language',
 					tip: self.i18n.active().oldCallflows.language_tip,
@@ -491,7 +491,7 @@ define(function(require){
 				},
 				'group_pickup[]': {
 					name: self.i18n.active().oldCallflows.group_pickup,
-					icon: 'sip',
+					icon: 'hand-pointer-o',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'group_pickup',
 					tip: self.i18n.active().oldCallflows.group_pickup_tip,
@@ -547,7 +547,7 @@ define(function(require){
 				},
 				'receive_fax[]': {
 					name: self.i18n.active().oldCallflows.receive_fax,
-					icon: 'sip',
+					icon: 'hand-pointer-o',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'receive_fax',
 					tip: self.i18n.active().oldCallflows.receive_fax_tip,
@@ -623,7 +623,7 @@ define(function(require){
 				},
 				'record_call[action=start]': {
 					name: self.i18n.active().oldCallflows.start_call_recording,
-					icon: 'conference',
+					icon: 'comments',
 					category: self.i18n.active().oldCallflows.call_recording_cat,
 					module: 'record_call',
 					tip: self.i18n.active().oldCallflows.start_call_recording_tip,
@@ -672,7 +672,7 @@ define(function(require){
 				},
 				'record_call[action=stop]': {
 					name: self.i18n.active().oldCallflows.stop_call_recording,
-					icon: 'conference',
+					icon: 'comments',
 					category: self.i18n.active().oldCallflows.call_recording_cat,
 					module: 'record_call',
 					tip: self.i18n.active().oldCallflows.stop_call_recording_tip,
@@ -695,7 +695,7 @@ define(function(require){
 				},
 				'pivot[]': {
 					name: self.i18n.active().oldCallflows.pivot,
-					icon: 'conference',
+					icon: 'comments',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'pivot',
 					tip: self.i18n.active().oldCallflows.pivot_tip,
@@ -749,7 +749,7 @@ define(function(require){
 				},
 				'disa[]': {
 					name: self.i18n.active().oldCallflows.disa,
-					icon: 'conference',
+					icon: 'comments',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'disa',
 					tip: self.i18n.active().oldCallflows.disa_tip,
@@ -826,7 +826,7 @@ define(function(require){
 				},
 				'collect_dtmf[]': {
 					name: self.i18n.active().callflows.collectDTMF.title,
-					icon: 'conference',
+					icon: 'comments',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'collect_dtmf',
 					tip: self.i18n.active().callflows.collectDTMF.tip,
@@ -890,7 +890,7 @@ define(function(require){
 				},
 				'sleep[]': {
 					name: self.i18n.active().callflows.sleep.name,
-					icon: 'dot_chat',
+					icon: 'commenting',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'sleep',
 					tip: self.i18n.active().callflows.sleep.tip,
@@ -946,7 +946,7 @@ define(function(require){
 				},
 				'tts[]': {
 					name: self.i18n.active().callflows.tts.name,
-					icon: 'chat_circle',
+					icon: 'comment',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'tts',
 					tip: self.i18n.active().callflows.tts.tip,
@@ -1005,7 +1005,7 @@ define(function(require){
 				},
 				'response[]': {
 					name: self.i18n.active().oldCallflows.response,
-					icon: 'rightarrow',
+					icon: 'mail-reply',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'response',
 					tip: self.i18n.active().oldCallflows.response_tip,
@@ -1101,7 +1101,7 @@ define(function(require){
 				},
 				'missed_call_alert[]': {
 					name: self.i18n.active().callflows.missedCallAlert.title,
-					icon: 'bell1',
+					icon: 'bell',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'missed_call_alert',
 					tip: self.i18n.active().callflows.missedCallAlert.tip,

src/apps/callflows/submodules/resource/resource.js

@@ -17,7 +17,7 @@ define(function(require){
 			$.extend(callflow_nodes, {
 				'offnet[]': {
 					name: self.i18n.active().callflows.resource.global_carrier,
-					icon: 'offnet',
+					icon: 'hdd-o',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'offnet',
 					tip: self.i18n.active().callflows.resource.global_carrier_tip,
@@ -41,7 +41,7 @@ define(function(require){
 				},
 				'resources[]': {
 					name: self.i18n.active().callflows.resource.account_carrier,
-					icon: 'resource',
+					icon: 'hdd-o',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'resources',
 					tip: self.i18n.active().callflows.resource.account_carrier_tip,

src/apps/callflows/submodules/temporalset/temporalset.css

@@ -1,6 +1,5 @@
 .callflows-port #temporalset-form .items-selector-wrapper {
 	width: 535px;
-	margin-left: 99px;
 }
 
 .callflows-port .warning-no-save {

src/apps/callflows/submodules/timeofday/timeofday.css

@@ -9,22 +9,22 @@
 
 .callflows-port #timeofday-form #days_checkboxes .fake_checkbox {
 	float: left;
-	color: #eeeeee;
-	width: 15px;
-	height: 20px;
-	line-height: 20px;
+	color: #303039;
+	width: 31px;
+	height: 25px;
+	line-height: 25px;
 	text-align: center;
-	padding: 0px;
-	margin: 0px;
+	padding: 0;
+	margin: 0;
 	border-top: 1px solid #000000;
 	border-bottom: 1px solid #000000;
 	border-right: 1px solid #000000;
-	background-color: #989898;
+	background-color: white;
 	cursor: pointer;
 }
 
 .callflows-port #timeofday-form #days_checkboxes .fake_checkbox:first-child {
-	border-left: 1px solid #000000;
+	border-left: 1px solid #303039;
 	border-radius: 5px 0 0 5px;
 }
 
@@ -33,11 +33,13 @@
 }
 
 .callflows-port #timeofday-form #days_checkboxes .fake_checkbox:hover {
-	background-color: #BEBEBE;
+	background-color: #22A5FF;
+	color: white;
 }
 
 .callflows-port #timeofday-form #days_checkboxes .fake_checkbox.checked {
 	background-color: #05ADDC;
+	color: white;
 }
 
 .callflows-port #timeofday-form .time-wrapper label.monster-invalid {

src/apps/callflows/submodules/timeofday/timeofday.js

@@ -496,7 +496,7 @@ define(function(require){
 			$.extend(callflow_nodes, {
 				'temporal_route[]': {
 					name: self.i18n.active().callflows.timeofday.time_of_day,
-					icon: 'temporal_route',
+					icon: 'clock-o',
 					category: self.i18n.active().callflows.timeofday.time_of_day_cat,
 					module: 'temporal_route',
 					data: {},
@@ -622,7 +622,7 @@ define(function(require){
 				},
 				'temporal_route[action=disable]': {
 					name: self.i18n.active().callflows.timeofday.disable_time_of_day,
-					icon: 'temporal_route',
+					icon: 'clock-o',
 					category: self.i18n.active().callflows.timeofday.time_of_day_cat,
 					module: 'temporal_route',
 					data: {
@@ -717,7 +717,7 @@ define(function(require){
 				},
 				'temporal_route[action=enable]': {
 					name: self.i18n.active().callflows.timeofday.enable_time_of_day,
-					icon: 'temporal_route',
+					icon: 'clock-o',
 					category: self.i18n.active().callflows.timeofday.time_of_day_cat,
 					module: 'temporal_route',
 					data: {
@@ -810,7 +810,7 @@ define(function(require){
 				},
 				'temporal_route[action=reset]': {
 					name: self.i18n.active().callflows.timeofday.reset_time_of_day,
-					icon: 'temporal_route',
+					icon: 'clock-o',
 					category: self.i18n.active().callflows.timeofday.time_of_day_cat,
 					module: 'temporal_route',
 					data: {

src/apps/callflows/submodules/user/user.css

@@ -1,3 +1,10 @@
+.callflows-port #user-form .row.title .fa {
+	font-size: 16px;
+	margin-right: 5px;
+	color: #303039;
+	vertical-align: -1px;
+}
+
 .callflows-port #user-form input[disabled=disabled] {
 	background: #ccc;
 }
@@ -5,17 +12,16 @@
 .callflows-port #user-form #equipment {
 	text-align: center;
 	font-size: 12px;
-	font-family: 'Helvetica';
+	font-family: 'Helvetica', sans-serif;
 }
 
 .callflows-port #user-form #equipment .help_box {
-	color: #333333;
-	line-height: 12px;
 }
 
 .callflows-port #user-form #equipment .add_device {
 	margin-top: 15px;
 	display: inline-block;
+	color: white;
 }
 
 .callflows-port #user-form #equipment .add_device:hover a {
@@ -28,11 +34,11 @@
 }
 
 .callflows-port #user-form #equipment #tab_devices  {
-	border: 2px solid #666666;
-	border-radius: 15px 15px 15px 15px;
-	color: #666666;
+	border: none;
+	color: #303039;
 	margin: 20px auto auto;
 	width: 560px;
+	font-size: 13px;
 }
 
 .callflows-port #user-form #equipment #tab_devices .action_device {
@@ -42,11 +48,21 @@
 	line-height: 30px;
 }
 
+.callflows-port #user-form #equipment #tab_devices .action_device .fa {
+	font-size: 20px;
+	color: #303039;
+}
+
 .callflows-port #user-form #equipment #tab_devices .action_device:not(:first-child) {
 	margin-left: 10px;
 }
+
 .callflows-port #user-form #equipment #tab_devices .action_device:hover {
-	color: #05addc;
+	color: #22A5FF;
+}
+
+.callflows-port #user-form #equipment #tab_devices .action_device:hover .fa {
+	color: #22A5FF;
 }
 
 .callflows-port #user-form #equipment #tab_devices .column:not(.fifth) {
@@ -93,7 +109,7 @@
 }
 
 .callflows-port #user-form #equipment #tab_devices .column.fourth .enabled_checkbox {
-	margin-top: 8px;
+	margin: 0;
 }
 
 .callflows-port #user-form #equipment #tab_devices .column.fifth {
@@ -111,9 +127,8 @@
 }
 
 .callflows-port #user-form #equipment #tab_devices .row.title {
-	background-color: #dddddd !important;
-	border-bottom: 2px solid #666666 !important;
-	border-radius: 15px 15px 0px 0px;
+	background-color: #D9D9D9 !important;
+	border-bottom: 1px solid #A6A6A6 !important;
 	font-weight: bold;
 }
 
@@ -122,7 +137,6 @@
 }
 
 .callflows-port #user-form #equipment #tab_devices .row:last-child {
-	border-radius: 0px 0px 15px 15px;
 }
 
 .callflows-port #user-form #equipment #tab_devices .row:nth-child(odd) {

src/apps/callflows/submodules/user/user.js

@@ -127,7 +127,7 @@ define(function(require){
 				},
 				'hotdesk[action=login]': {
 					name: self.i18n.active().callflows.user.hot_desk_login,
-					icon: 'hotdesk_login',
+					icon: 'sign-in',
 					category: self.i18n.active().callflows.user.hotdesking_cat,
 					module: 'hotdesk',
 					tip: self.i18n.active().callflows.user.hot_desk_login_tip,
@@ -153,7 +153,7 @@ define(function(require){
 				},
 				'hotdesk[action=logout]': {
 					name: self.i18n.active().callflows.user.hot_desk_logout,
-					icon: 'hotdesk_logout',
+					icon: 'sign-out',
 					category: self.i18n.active().callflows.user.hotdesking_cat,
 					module: 'hotdesk',
 					tip: self.i18n.active().callflows.user.hot_desk_logout_tip,
@@ -179,7 +179,7 @@ define(function(require){
 				},
 				'hotdesk[action=toggle]': {
 					name: self.i18n.active().callflows.user.hot_desk_toggle,
-					icon: 'hotdesk_toggle',
+					icon: 'toggle-off',
 					category: self.i18n.active().callflows.user.hotdesking_cat,
 					module: 'hotdesk',
 					tip: self.i18n.active().callflows.user.hot_desk_toggle_tip,

src/apps/callflows/submodules/vmbox/vmbox.js

@@ -385,7 +385,7 @@ define(function(require){
 				getVoicemailNode = function(hasCategory) {
 					var action = {
 						name: self.i18n.active().callflows.vmbox.voicemail,
-						icon: 'voicemail',
+						icon: 'envelope',
 						module: 'voicemail',
 						tip: self.i18n.active().callflows.vmbox.voicemail_tip,
 						data: {
@@ -495,7 +495,7 @@ define(function(require){
 
 				'voicemail[action=check]': {
 					name: self.i18n.active().callflows.vmbox.check_voicemail,
-					icon: 'voicemail',
+					icon: 'envelope',
 					category: self.i18n.active().oldCallflows.advanced_cat,
 					module: 'voicemail',
 					tip: self.i18n.active().callflows.vmbox.check_voicemail_tip,

src/apps/callflows/views/blacklist-addNumber.html

@@ -2,6 +2,8 @@
 	{{number}}
 	
 	<div class="actions-number pull-right">
-		<a class="delete-number icon medium trash" href="javascript:void(0);"></a>
+		<a class="delete-number" href="javascript:void(0);">
+			<i class="fa fa-trash-o"></i>
+		</a>
 	</div>
 </div>

src/apps/callflows/views/blacklist-edit.html

@@ -51,7 +51,7 @@
 				</div>
 			</form>
 
-			<div class="buttons-right">
+			<div class="buttons-wrapper">
 				{{#if data.id}}
 					<button class="monster-button monster-button-danger blacklist-delete">{{ i18n.delete }}</button>
 				{{/if}}

src/apps/callflows/views/callcenter-queue-edit.html

@@ -5,7 +5,7 @@
 		<h1>{{ i18nApp.createQueue }}</h1>
 	{{/if}}
 
-	<form id="queue-form" action="" method="post" class="form-vertical">
+	<form id="queue-form" action="" method="post" class="form-horizontal">
 		<div class="control-group">
 			<label class="control-label" for="name">{{ i18nApp.name }}</label>
 			<div class="controls">
@@ -27,29 +27,36 @@
 			</div>
 		</div>
 
-		<div class="control-group">
-			<label class="control-label" for="users-list">{{ i18nApp.userLabel }}</label>
-			<div class="controls">
-				<table class="table">
-					<thead>
-					<tr>
-						<th>{{ i18nApp.user }}</th>
-						<th>{{ i18nApp.actions }}</th>
-					</tr>
-					</thead>
-					<tbody class="js-user-table-body"></tbody>
-				</table>
-				<h4>{{ i18nApp.addUser }}</h4>
-				<select name="user_id" id="users-list">
-					<option id="empty_option_user" value="empty_option_user">-- {{ i18nApp.select }} --</option>
-					{{#each field_data.users}}
-						<option value="{{ id }}" id="option_user_{{ id }}">{{ first_name }} {{ last_name }}</option>
-					{{/each}}
-				</select>
-				<a class="js-add-user-btn" href="" data-queue_id="{{ data.id }}">
-					<i class="fa fa-arrow-up"></i>
-					{{ i18nApp.addThisUser }}
-				</a>
+		<h4>{{ i18nApp.userLabel }}</h4>
+		<table class="users-table table table-striped">
+			<thead>
+			<tr>
+				<th>{{ i18nApp.user }}</th>
+				<th>{{ i18nApp.actions }}</th>
+			</tr>
+			</thead>
+			<tbody class="js-user-table-body"></tbody>
+		</table>
+
+		<div class="add-user-panel callflow-panel">
+			<div class="callflow-panel_title">
+				{{ i18nApp.addUser }}
+			</div>
+			<div class="callflow-panel_body">
+				<div class="callflow-panel_body_item">
+					<select name="user_id" id="users-list">
+						<option id="empty_option_user" value="empty_option_user">-- {{ i18nApp.select }} --</option>
+						{{#each field_data.users}}
+							<option value="{{ id }}" id="option_user_{{ id }}">{{ first_name }} {{ last_name }}</option>
+						{{/each}}
+					</select>
+				</div>
+				<div class="callflow-panel_body_item">
+					<a class="js-add-user-btn add-user-btn btn" href="" data-queue_id="{{ data.id }}">
+						<i class="fa fa-plus"></i>
+						 {{ i18nApp.addThisUser }}
+					</a>
+				</div>
 			</div>
 		</div>
 

src/apps/callflows/views/callcenter-user-row.html

@@ -2,10 +2,10 @@
 	<tr class="js-user-table-item" id="row_user_{{ user_id }}" data-id="{{ user_id }}">
 		<td>{{ user_name }}</td>
 		<td>
-			<a class="js-edit-user" data-id="{{ user_id }}">
+			<a class="js-edit-user link-icon" data-id="{{ user_id }}">
 				<i class="fa fa-pencil"></i>
 			</a>
-			<a class="js-delete-user" data-id="{{ user_id }}">
+			<a class="js-delete-user link-icon" data-id="{{ user_id }}">
 				<i class="fa fa-trash"></i>
 			</a>
 		</td>

src/apps/callflows/views/conference-edit.html

@@ -10,8 +10,8 @@
 	<div>
 		<ul class="tabs" data-tabs="tabs">
 			<li class="active"><a href="#basic">{{ i18n.callflows.conference.basic }}</a></li>
-			<li><a href="#options"><span class="icon wrench_screw"></span>{{ i18n.callflows.conference.options }}</a></li>
-			<li><a href="#conference_server"><span class="icon conference"></span>{{ i18n.callflows.conference.conference_server }}</a></li>
+			<li><a href="#options"><i class="fa fa-wrench"></i>{{ i18n.callflows.conference.options }}</a></li>
+			<li><a href="#conference_server"><i class="fa fa-comments"></i>{{ i18n.callflows.conference.conference_server }}</a></li>
 		</ul>
 
 		<form id="conference_form" action="" method="post" >
@@ -124,7 +124,7 @@
 			</div>
 		</form>
 
-		<div class="buttons-right">
+		<div class="buttons-wrapper">
 			{{#if data.id}}
 				<button class="monster-button monster-button-danger conference-delete">{{ i18n.callflows.conference.delete }}</button>
 			{{/if}}

src/apps/callflows/views/device-ata.html

@@ -256,7 +256,7 @@
 				</div>
 			</div>
 		</form>
-		<div class="buttons-right">
+		<div class="buttons-wrapper">
 			{{#if data.id}}
 				<button class="monster-button monster-button-danger device-delete">{{ i18n.callflows.device.delete }}</button>
 			{{/if}}

src/apps/callflows/views/device-cellphone.html

@@ -15,7 +15,7 @@
 	<div>
 		<ul class="tabs" data-tabs="tabs">
 			<li class="active"><a href="#basic">{{ i18n.callflows.device.basic }}</a></li>
-			<li><a href="#options"><span class="icon wrench_screw"></span>{{ i18n.callflows.device.options }}</a></li>
+			<li><a href="#options"><i class="fa fa-wrench"></i>{{ i18n.callflows.device.options }}</a></li>
 		</ul>
 		<form id="device-form" action="" method="post">
 			<div class="pill-content">
@@ -121,7 +121,7 @@
 				</div>
 			</div>
 		</form>
-		<div class="buttons-right">
+		<div class="buttons-wrapper">
 			{{#if data.id}}
 				<button class="monster-button monster-button-danger device-delete">{{ i18n.delete }}</button>
 			{{/if}}

src/apps/callflows/views/device-fax.html

@@ -279,7 +279,7 @@
 				</div>
 			</div>
 		</form>
-		<div class="buttons-right">
+		<div class="buttons-wrapper">
 			{{#if data.id}}
 				<button class="monster-button monster-button-danger device-delete">{{ i18n.callflows.device.delete }}</button>
 			{{/if}}

src/apps/callflows/views/device-general_edit.html

@@ -2,42 +2,42 @@
 	<div>
 		<div class="media_tabs">
 			<span class="buttons" device_type="sip_device">
-				<span class="icon white phone"/>
+				<i class="fa fa-fax"></i>
 				<span class="label_device">{{ i18n.callflows.device.voip_phone }}</span>
 			</span>
 
 			<span class="buttons" device_type="cellphone">
-				<span class="icon white active_phone"/>
+				<i class="fa fa-mobile"></i>
 				<span class="label_device">{{ i18n.callflows.device.cell_phone }}</span>
 			</span>
 
 			<span class="buttons" device_type="smartphone">
-				<span class="icon white active_phone"/>
+				<i class="fa fa-mobile"></i>
 				<span class="label_device">{{ i18n.callflows.device.smart_phone }}</span>
 			</span>
 
 			<span class="buttons" device_type="landline">
-				<span class="icon white active_phone"/>
+				<i class="fa fa-phone"></i>
 				<span class="label_device">{{ i18n.callflows.device.landline }}</span>
 			</span>
-			
+
 			<span class="buttons" device_type="softphone">
-				<span class="icon white menu1"/>
+				<i class="fa fa-laptop"></i>
 				<span class="label_device">{{ i18n.callflows.device.soft_phone }}</span>
 			</span>
 
 			<span class="buttons" device_type="fax">
-				<span class="icon white phone"/>
+				<i class="fa fa-fax"></i>
 				<span class="label_device">{{ i18n.callflows.device.fax }}</span>
 			</span>
 
 			<span class="buttons" device_type="ata">
-				<span class="icon white phone"/>
+				<i class="fa fa-fax"></i>
 				<span class="label_device">{{ i18n.callflows.device.ata }}</span>
 			</span>
 
-			 <span class="buttons" device_type="sip_uri">
-				<span class="icon white phone"/>
+			<span class="buttons" device_type="sip_uri">
+				<i class="fa fa-fax"></i>
 				<span class="label_device">{{ i18n.callflows.device.sip_uri }}</span>
 			</span>
 		</div>

src/apps/callflows/views/device-landline.html

@@ -15,7 +15,7 @@
 	<div>
 		<ul class="tabs" data-tabs="tabs">
 			<li class="active"><a href="#basic">{{ i18n.callflows.device.basic }}</a></li>
-			<li><a href="#options"><span class="icon wrench_screw"></span>{{ i18n.callflows.device.options }}</a></li>
+			<li><a href="#options"><i class="fa fa-wrench"></i>{{ i18n.callflows.device.options }}</a></li>
 		</ul>
 		<form id="device-form" action="" method="post">
 			<div class="pill-content">
@@ -121,7 +121,7 @@
 				</div>
 			</div>
 		</form>
-		<div class="buttons-right">
+		<div class="buttons-wrapper">
 			{{#if data.id}}
 				<button class="monster-button monster-button-danger device-delete">{{ i18n.callflows.device.delete }}</button>
 			{{/if}}

src/apps/callflows/views/device-sip_device.html

@@ -433,7 +433,7 @@
 			</div>
 		</form>
 
-		<div class="buttons-right">
+		<div class="buttons-wrapper">
 			{{#if data.id}}
 				<button class="monster-button monster-button-danger device-delete">{{ i18n.callflows.device.delete }}</button>
 			{{/if}}

src/apps/callflows/views/device-sip_uri.html

@@ -92,7 +92,7 @@
 				</div>
 			</div>
 		</form>
-		<div class="buttons-right">
+		<div class="buttons-wrapper">
 			{{#if data.id}}
 				<button class="monster-button monster-button-danger device-delete">{{ i18n.callflows.device.delete }}</button>
 			{{/if}}

src/apps/callflows/views/device-smartphone.html

@@ -15,7 +15,7 @@
 	<div>
 		<ul class="tabs" data-tabs="tabs">
 			<li class="active"><a href="#basic">{{ i18n.callflows.device.basic }}</a></li>
-			<li><a href="#options"><span class="icon wrench_screw"></span>{{ i18n.callflows.device.options }}</a></li>
+			<li><a href="#options"><i class="fa fa-wrench"></i>{{ i18n.callflows.device.options }}</a></li>
 			<li><a href="#sip_settings">{{ i18n.callflows.device.wifi_calling }}</a></li>
 			<li><a href="#restrictions">{{ i18n.callflows.device.restrictions }}</a></li>
 		</ul>
@@ -221,7 +221,7 @@
 				</div>
 			</div>
 		</form>
-		<div class="buttons-right">
+		<div class="buttons-wrapper">
 			{{#if data.id}}
 				<button class="monster-button monster-button-danger device-delete">{{ i18n.callflows.device.delete }}</button>
 			{{/if}}

src/apps/callflows/views/device-softphone.html

@@ -365,7 +365,7 @@
 				</div>
 			</div>
 		</form>
-		<div class="buttons-right">
+		<div class="buttons-wrapper">
 			{{#if data.id}}
 				<button class="monster-button monster-button-danger device-delete">{{ i18n.callflows.device.delete }}</button>
 			{{/if}}

src/apps/callflows/views/directory-edit.html

@@ -15,7 +15,7 @@
 	<div>
 		<ul class="tabs" data-tabs="tabs">
 			<li class="active"><a href="#basic">{{ i18n.callflows.directory.basic }}</a></li>
-			<li><a href="#options"><span class="icon wrench_screw"></span>{{ i18n.callflows.directory.options }}</a></li>
+			<li><a href="#options"><i class="fa fa-wrench"></i>{{ i18n.callflows.directory.options }}</a></li>
 		</ul>
 		<form id="directory-form" action="" method="post">
 			<div class="pill-content">
@@ -28,60 +28,60 @@
 					</div>
 
 					<div class="clearfix">
-						<div id="tab_users">
-							<div class="row row-user title">
-								<div class="column first">{{ i18n.callflows.directory.user }}&nbsp;&nbsp;<span class="icon medium user"/></div>
-								<div class="column second">{{ i18n.callflows.directory.callflow }}&nbsp;&nbsp;<span class="icon medium callflow"/></div>
-								<div class="column third">{{ i18n.callflows.directory.remove }}</div>
-							</div>
-							<div class="rows">
-							</div>
-						</div>
-
 						<div class="add_user">
 							<div class="add_user_title">{{ i18n.callflows.directory.add_user }}</div>
 							<div class="add_content_wrapper">
 								<div class="add_user_fields">
-									<ul class="controls">
-										<div id="user_list_select">
-											<li>
-												<label>{{ i18n.callflows.directory.user }}</label>
-												<select name="select_user_id" id="select_user_id">
-													<option id="empty_option_user" value="empty_option_user">-- {{ i18n.callflows.directory.select }} --</option>
-													{{#each field_data.users}}
-														<option value="{{ id }}" id="option_user_{{ id }}">{{ first_name }} {{ last_name }}</option>
-													{{/each}}
-												</select>
-											</li>
-											<div class="clear"/>
-										</div>
-										<li id="callflow_li">
-											</span>
-											<label>{{ i18n.callflows.directory.callflow }}</label>
-											<select name="callflow_id" id="callflow_id">
-												<option id="empty_option_callflow" value="empty_option_callflow">-- {{ i18n.callflows.directory.select }} --</option>
-												{{#each field_data.callflows}}
-													<option value="{{ id }}" id="option_callflow_{{ id }}">
-														&nbsp;
-														{{#if name}}
-															{{name}}&nbsp;
-														{{else}}
-															{{#each numbers}} {{this}}&nbsp;{{/each}}
-														{{/if}}
-													</option>
-												{{/each}}
-											</select>
-										</li>
-										<div class="clear"/>
-									</ul>
+									<div id="user_list_select" class="user-item-wrapper">
+										<label>{{ i18n.callflows.directory.user }}</label>
+										<select name="select_user_id" id="select_user_id">
+											<option id="empty_option_user" value="empty_option_user">-- {{ i18n.callflows.directory.select }} --</option>
+											{{#each field_data.users}}
+												<option value="{{ id }}" id="option_user_{{ id }}">{{ first_name }} {{ last_name }}</option>
+											{{/each}}
+										</select>
+									</div>
+									<div id="callflow_li" class="callflow-item-wrapper">
+										<label>{{ i18n.callflows.directory.callflow }}</label>
+										<select name="callflow_id" id="callflow_id">
+											<option id="empty_option_callflow" value="empty_option_callflow">-- {{ i18n.callflows.directory.select }} --</option>
+											{{#each field_data.callflows}}
+												<option value="{{ id }}" id="option_callflow_{{ id }}">
+													&nbsp;
+													{{#if name}}
+														{{name}}&nbsp;
+													{{else}}
+														{{#each numbers}} {{this}}&nbsp;{{/each}}
+													{{/if}}
+												</option>
+											{{/each}}
+										</select>
+									</div>
 								</div>
-								<div class="add_user_div">
+								<div class="add_user_div btn">
 									<span class="fa fa-plus-circle"/>&nbsp;
 									<a class="add_user_link" href="javascript:void(0);" data-directory_id="{{ data.id }}">{{ i18n.callflows.directory.add_this_user }}</a>
-									<div class="clear"/>
 								</div>
 							</div>
 						</div>
+
+						<div id="tab_users">
+							<div class="row row-user title">
+								<div class="column first">
+									<i class="fa fa-users"></i>
+									{{ i18n.callflows.directory.user }}
+								</div>
+								<div class="column second">
+									<i class="fa fa-link"></i>
+									{{ i18n.callflows.directory.callflow }}
+								</div>
+								<div class="column third">
+									{{ i18n.callflows.directory.remove }}
+								</div>
+							</div>
+							<div class="rows">
+							</div>
+						</div>
 					</div>
 				</div>
 
@@ -130,7 +130,7 @@
 				</div>
 			</div>
 		</form>
-		<div class="buttons-right">
+		<div class="buttons-wrapper">
 			{{#if data.id}}
 				<button class="monster-button monster-button-danger directory-delete">{{ i18n.callflows.directory.delete }}</button>
 			{{/if}}

src/apps/callflows/views/directory-userRow.html

@@ -18,7 +18,9 @@
 					{{/select}}
 				</select>
 			</div>
-			<div class="column third"><a class="action_user delete fa fa-trash-o" data-id="{{ user_id }}"></a></div>
+			<div class="column third">
+				<a class="action_user delete fa fa-trash-o" data-id="{{ user_id }}"></a>
+			</div>
 	{{else}}
 		<div class="row row-user" id="row_no_data">
 			<div class="column merged">{{ i18n.callflows.directory.there_is_currently_no_user }}</div>

src/apps/callflows/views/faxbox-edit.html

@@ -19,7 +19,7 @@
 		{{#if faxbox.cloud_connector_claim_url}}
 		<li><a href="#google">{{ i18n.callflows.faxbox.google }}</a></li>
 		{{/if}}
-		<li><a href="#options"><span class="icon wrench_screw"></span>{{ i18n.callflows.faxbox.options }}</a></li>
+		<li><a href="#options"><i class="fa fa-wrench"></i>{{ i18n.callflows.faxbox.options }}</a></li>
 	</ul>
 	 <form id="faxbox_form" action="" method="post">
 		<div class="pill-content">
@@ -161,7 +161,7 @@
 		</div>
 	 </form>
 
-	 <div class="buttons-right">
+	 <div class="buttons-wrapper">
 		{{#if faxbox.id}}
 			<button class="monster-button monster-button-danger faxbox-delete">{{ i18n.callflows.faxbox.delete }}</button>
 		{{/if}}

src/apps/callflows/views/groups-edit.html

@@ -26,20 +26,14 @@
 						</div>
 					</div>
 
-					<div class="row">
+					<div>
 						<div id="table_wrapper">
-							<div id="tab_users">
-								<div class="row title">
-									<div class="column first">{{ @root.i18n.callflows.groups.endpoints }}</div>
-									<div class="column second">{{ @root.i18n.callflows.groups.remove }}</div>
-								</div>
-								<div class="rows">
-								</div>
-							</div>
-
 							<div class="add_endpoint_wrapper">
 								<div class="add_endpoint">
-									<div class="add_endpoint_title"><span class="icon user"/>{{ @root.i18n.callflows.groups.add_user }}</div>
+									<div class="add_endpoint_title">
+										<i class="fa fa-users"></i>
+										{{ @root.i18n.callflows.groups.add_user }}
+									</div>
 									<div class="add_content_wrapper">
 										<select name="extra.select_user_id" id="select_user_id">
 											<option id="empty_option_user" value="empty_option_user">-- {{ @root.i18n.callflows.groups.select }} --</option>
@@ -51,7 +45,10 @@
 								</div>
 
 								<div class="add_endpoint">
-									<div class="add_endpoint_title"><span class="icon device"/>{{ @root.i18n.callflows.groups.add_device }}</div>
+									<div class="add_endpoint_title">
+										<i class="fa fa-fax"></i>
+										{{ @root.i18n.callflows.groups.add_device }}
+									</div>
 									<div class="add_content_wrapper">
 										<select name="extra.select_device_id" id="select_device_id">
 											<option id="empty_option_device" value="empty_option_device">-- {{ @root.i18n.callflows.groups.select }} --</option>
@@ -62,12 +59,21 @@
 									</div>
 								</div>
 							</div>
+
+							<div id="tab_users">
+								<div class="row title">
+									<div class="column first">{{ @root.i18n.callflows.groups.endpoints }}</div>
+									<div class="column second">{{ @root.i18n.callflows.groups.remove }}</div>
+								</div>
+								<div class="rows">
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 		</form>
-		<div class="buttons-right">
+		<div class="buttons-wrapper">
 			{{#if data.id}}
 				<button class="monster-button monster-button-danger group-delete">{{ @root.i18n.callflows.groups.delete }}</button>
 			{{/if}}

src/apps/callflows/views/groups-endpoint_row.html

@@ -1,8 +1,12 @@
 <div>
 	{{#if endpoint_id}}
 		<div class="row" id="row_endpoint_{{endpoint_id}}" data-id="{{endpoint_id}}" data-type="{{endpoint_type}}">
-			<div class="column first">{{#compare endpoint_type "===" "user"}}<span class="icon medium userportal">{{else}}<span class="icon medium device">{{/compare}}</span>&nbsp;&nbsp;{{endpoint_name}}</div>
-			<div class="column second"><a class="action_endpoint delete icon medium trash" data-id="{{endpoint_id}}"></a></div>
+			<div class="column first">{{#compare endpoint_type "===" "user"}}<i class="fa fa-user"></i>{{else}}<i class="fa fa-fax"></i>{{/compare}} {{endpoint_name}}</div>
+			<div class="column second">
+				<a class="action_endpoint delete" data-id="{{endpoint_id}}">
+					<i class="fa fa-trash"></i>
+				</a>
+			</div>
 	{{else}}
 		<div class="row" id="row_no_data">
 			<div class="column merged">{{ @root.i18n.callflows.groups.there_are_currently_no_endpoint }}</div>

src/apps/callflows/views/media-edit.html

@@ -13,7 +13,7 @@
 	<div>
 		<ul class="tabs">
 			<li class="active"><a href="#basic">{{ i18n.callflows.media.basic }}</a></li>
-			<li><a href="#options"><span class="icon wrench_screw"></span>{{ i18n.callflows.media.options }}</a></li>
+			<li><a href="#options"><i class="fa fa-wrench"></i>{{ i18n.callflows.media.options }}</a></li>
 		</ul>
 		 <form id="media-form" action="" enctype="multipart/form-data" method="post">
 			<div class="pill-content">
@@ -151,7 +151,7 @@
 				</div>
 			</div>
 		 </form>
-		 <div class="buttons-right">
+		 <div class="buttons-wrapper">
 			{{#if data.id}}
 				<button class="monster-button monster-button-danger media-delete">{{ i18n.callflows.media.delete }}</button>
 			{{/if}}

src/apps/callflows/views/menu-edit.html

@@ -14,8 +14,8 @@
 	<div>
 		<ul class="tabs">
 			<li class="active"><a href="#basic">{{ i18n.callflows.menu.basic }}</a></li>
-			<li><a href="#extension_dialing"><span class="icon sip"></span>{{ i18n.callflows.menu.extension_dialing }}</a></li>
-			<li><a href="#options"><span class="icon wrench_screw"></span>{{ i18n.callflows.menu.options }}</a></li>
+			<li><a href="#extension_dialing"><i class="fa fa-tty"></i>{{ i18n.callflows.menu.extension_dialing }}</a></li>
+			<li><a href="#options"><i class="fa fa-wrench"></i>{{ i18n.callflows.menu.options }}</a></li>
 		</ul>
 
 		 <form id="menu-form" action="" method="post">

src/apps/callflows/views/node.html

@@ -2,7 +2,7 @@
 	<div id="{{ node.id }}" class="delete"/>
 	<div class="module">
 		<div class="div_icon">
-			<span class="icon {{ callflow.icon }}"/>
+			<i class="fa fa-{{ callflow.icon }}"/>
 			<span class="module_name">{{ callflow.name }}</span>
 		</div>
 		<div class="details">{{ node.caption }}</div>

src/apps/callflows/views/root.html

@@ -1,6 +1,6 @@
 <div class="root">
 	<div class="top_bar">
-		<span class="name">{{ name }}</span><span class="edit_icon"/>
+		<span class="name">{{ name }}</span><span class="edit_icon"><i class="fa fa-pencil-square-o"></i></span>
 		<div class="tooltip"/>
 	</div>
 	<div class="content"></div>

src/apps/callflows/views/temporalset-callflowEdit.html

@@ -25,7 +25,7 @@
 				</div>
 			</div>
 		</form>
-		<div class="buttons-right">
+		<div class="buttons-wrapper">
 			{{#unless data.extra.showSave}}
 				<div class="warning-no-save">{{ i18n.callflows.temporalset.noSave }}</div>
 			{{/unless}}

src/apps/callflows/views/tools.html

@@ -13,7 +13,7 @@
 				{{#each actions}}
 					<div class="tool" help="{{tip}}" data-name="{{name}}">
 						<div name="{{key}}" class="action">
-							<div class="icon medium app_sm {{icon}}"></div>
+							<i class="fa fa-lg fa-{{icon}}"></i>
 							<div class="tool_name">{{name}}</div>
 						</div>
 					</div>

src/apps/callflows/views/user-deviceRow.html

@@ -8,8 +8,12 @@
 		<input type="checkbox" class="enabled_checkbox" data-device_id="{{id}}"{{#unless not_enabled}} checked="checked"{{/unless}}/>
 	</div>
 		<div class="column fifth">
-			<a class="action_device edit icon medium pencil" data-id="{{id}}"></a>
-			<a class="action_device delete icon medium trash" data-id="{{id}}"></a>
+			<a class="action_device edit" data-id="{{id}}">
+				<i class="fa fa-pencil"></i>
+			</a>
+			<a class="action_device delete" data-id="{{id}}">
+				<i class="fa fa-trash-o"></i>
+			</a>
 		</div>
 {{else}}
 	<div class="column merged">{{ i18n.callflows.user.there_is_currently_no_devices }}</div>

src/apps/callflows/views/user-edit.html

@@ -142,14 +142,22 @@
 					</div>
 					<div id="tab_devices">
 						<div class="row title">
-							<div class="column first">{{ i18n.callflows.user.device_name }}&nbsp;&nbsp;<span class="icon medium device"/></div>
-							<div class="column second">{{ i18n.callflows.user.type }}&nbsp;&nbsp;<span class="icon medium iphone" style="margin-bottom: 4px;"/></div>
+							<div class="column first">
+								<i class="fa fa-fax"></i>
+								{{ i18n.callflows.user.device_name }}
+							</div>
+							<div class="column second">
+								<i class="fa fa-mobile"></i>
+								{{ i18n.callflows.user.type }}
+							</div>
 							<div class="column third">{{ i18n.callflows.user.status }}</div>
 							<div class="column fourth">{{ i18n.callflows.user.enabled }}</div>
-							<div class="column fifth">{{ i18n.callflows.user.actions }}&nbsp;&nbsp;<span class="icon medium settings" style="margin-bottom: 2px;"/></div>
-						</div>
-						<div class="rows">
+							<div class="column fifth">
+								<i class="fa fa-cog"></i>
+								{{ i18n.callflows.user.actions }}
+							</div>
 						</div>
+						<div class="rows"></div>
 					</div>
 
 					{{#if field_data.new_user}}
@@ -555,26 +563,29 @@
 
 					<!--<div class="help_box">In order to actually log out from the devices listed below, you need to tick the checkbox on the right of the device and then press the Save button!</div>-->
 
-					<div id="hotdesk_devices" class="small-table">
-						<div class="row title">
-							<div class="column">{{ i18n.callflows.user.devices }}&nbsp;&nbsp;<span class="icon medium device"/></div>
-							<!--<div class="column">Log out</div>-->
-						</div>
-						<div class="rows">
+					<table id="hotdesk_devices" class="table table-striped">
+						<thead>
+							<tr>
+								<th>
+									<i class="fa fa-fax"></i>
+									{{ i18n.callflows.user.devices }}
+								</th>
+							</tr>
+						</thead>
+						<tbody>
 							{{#if field_data.device_list}}
 								{{#each field_data.device_list}}
-									<div id="row_hotdesk_{{@key}}" data-id="{{@key}}">
-										<div class="column">{{name}}</div>
-										<!-- <div class="column"><input type="checkbox" name="hotdesk.log_out[]" value="{{@key}}"></input></a></div> -->
-									</div>
+									<tr id="row_hotdesk_{{@key}}" data-id="{{@key}}">
+										<td>{{name}}</td>
+									</tr>
 								{{/each}}
 							{{else}}
-								<div id="row_no_data">
-									<div class="column merged">{{ i18n.callflows.user.this_user_is_not_logged }}</div>
-								</div>
+								<tr id="row_no_data">
+									<td>{{ i18n.callflows.user.this_user_is_not_logged }}</td>
+								</tr>
 							{{/if}}
-						</div>
-					</div>
+						</tbody>
+					</table>
 				{{/if}}
 			</div>
 
@@ -617,7 +628,7 @@
 			</div>
 		</div>
 	</form>
-	<div class="buttons-right">
+	<div class="buttons-wrapper">
 		{{#if data.id}}
 			<button class="monster-button monster-button-danger user-delete">{{ i18n.callflows.user.delete }}</button>
 		{{/if}}

src/apps/callflows/views/vmbox-edit.html

@@ -13,7 +13,7 @@
 	<div>
 		<ul class="tabs">
 			<li class="active"><a href="#basic">{{ i18n.callflows.vmbox.basic }}</a></li>
-			<li><a href="#options"><span class="icon wrench_screw"></span>{{ i18n.callflows.vmbox.options }}</a></li>
+			<li><a href="#options"><i class="fa fa-wrench"></i>{{ i18n.callflows.vmbox.options }}</a></li>
 		</ul>
 		<form id="vmbox-form" action="" method="post">
 			<div class="pill-content">
@@ -250,7 +250,7 @@
 			</div>
 		</form>
 
-		 <div class="buttons-right">
+		 <div class="buttons-wrapper">
 			{{#if data.id}}
 				<button class="monster-button monster-button-danger vmbox-delete">{{ i18n.callflows.vmbox.delete }}</button>
 			{{/if}}