Make triangle an SVG image and adjust height of submit button

lib/default-header.php

@@ -131,13 +131,16 @@
 
 			// Convert select element into improved drop down list
 			$("#userIdPSelection:enabled").improveDropDown({
-				iconPath:'<?php echo $imageURL ?>/drop_icon.png',
+				iconPath:'<?php echo $imageURL ?>/drop_icon.svg',
 				noMatchesText: '<?php echo getLocalString('no_idp_found', 'js') ?>',
 				noItemsText: '<?php echo getLocalString('no_idp_available', 'js') ?>',
 				disableRemoteLogos: <?php echo ($disableRemoteLogos) ? 'true' : 'false' ?>
 			});
 		<?php
 } ?>
+
+		// Ajust height of submit button to select
+		$('[name="Select"]').height($('#userIdPSelection').outerHeight());
 	}
 
 	// Call init function when DOM is ready

www/css/default-styles.css

@@ -106,7 +106,7 @@ pre {
 	position: absolute;
 	left: 50%;
 	top: 50%;
-	margin-left: -320px; 
+	margin-left: -320px;
 	margin-top: -200px;
 }
 
@@ -135,10 +135,11 @@ pre {
 	width: 100%;
 	margin-left: auto;
 	margin-right: auto;
-	background-color: #F0F0F0;
-	border-color: #969696;
+	background-color: #fafafa;
+	border-color: #c0c0c0;
 	border-width: 1px;
 	border-style: solid;
+	border-radius: 4px;
 	padding: 6px;
 }
 
@@ -152,31 +153,31 @@ pre {
 	.box {
 		width: auto;
 		box-shadow: none;
-		border-radius: 0;  
+		border-radius: 0;
 		-webkit-box-shadow: none;
 		-webkit-border-radius: 0;
 		-moz-box-shadow: none;
 		-moz-border-radius: 0;
 		padding: 0;
 	}
-	
+
 	#content, .content {
 		width: 96%;
 	}
-	
+
 	#container, .container {
 		width: 96%;
 		position: auto;
 		left: auto;
 		top: auto;
-		margin-left: 0; 
+		margin-left: 0;
 		margin-top: 0;
 	}
-	
+
 	#userIdPSelection, .userIdPSelection {
 		width: 60%;
 	}
-	
+
 	#userIdPSelection_iddwrap input {
 		width:90%!important;
 	}

www/images/drop_icon.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 43.3 43.3" style="enable-background:new 0 0 43.3 43.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_2_);}
+	.st2{fill:#020202;}
+</style>
+<title>drop_icon</title>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="21.64" y1="21.6356" x2="21.64" y2="43.2756" gradientTransform="matrix(1 0 0 -1 0 43.2756)">
+	<stop  offset="0" style="stop-color:#ECECEC"/>
+	<stop  offset="1" style="stop-color:#E8E8E8"/>
+</linearGradient>
+<rect y="0" class="st0" width="43.3" height="21.6"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="21.64" y1="14.9747" x2="21.64" y2="15.1398">
+	<stop  offset="0" style="stop-color:#9E9E9E"/>
+	<stop  offset="1" style="stop-color:#D6D6D6"/>
+</linearGradient>
+<rect y="21.6" class="st1" width="43.3" height="21.6"/>
+<polygon class="st2" points="21.6,29.5 36.2,14.8 7.1,14.8 "/>
+</svg>

www/js/embeddedWAYF.js

@@ -69,7 +69,7 @@ var wayf_discofeed_url = global.wayf_discofeed_url;
 // Internal variables
 var wayf_improved_dropdown_url = '<?php echo $javascriptURL ?>/improvedDropDown.js';
 var wayf_jquery_url = '<?php echo $javascriptURL ?>/jquery.js';
-var wayf_dropdown_icon_url = '<?php echo $imageURL ?>/drop_icon.png';
+var wayf_dropdown_icon_url = '<?php echo $imageURL ?>/drop_icon.svg';
 var wayf_disco_feed_idps;
 var wayf_html = "";
 var wayf_categories = {
@@ -658,12 +658,15 @@ function runImproveDropDown(){
 
   // Convert select element into improved drop down list
   $("#user_idp:enabled").improveDropDown({
-    iconPath: '<?php echo $imageURL ?>/drop_icon.png',
+    iconPath: '<?php echo $imageURL ?>/drop_icon.svg',
     noMatchesText: '<?php echo $noIdPFoundText ?>',
     noItemsText: '<?php echo $noIdPAvailableText ?>',
     disableRemoteLogos: wayf_disable_remote_idp_logos,
     enableValueMatching: wayf_enable_entityid_matching
   });
+
+  // Ajust height of submit button to select
+  $('[name="Select"]').height($('#userIdPSelection').outerHeight());
 }
 <?php else: ?>