FLOE-194: Placed Icons on an <a> in the <li>

This is more semantic and necessary for adding the arrow that will show which icon is active (used for the dialog)
FLOE-194: Converted the arrow to an active style

The arrow that sits between the icon and dialog is now part of the active styling of the icon. This will keep it centred below the icon as the dialog shifts (do to collision with the window border) below it. This shifting isn't dynamic, but calculated at the time the dialog is displayed.
FLOE-194: Added a header to the confirmationMatch

Added a header to the dialog.
FLOE-194: Themed the activation styling
FLOE-194: Themed feedback icon hover states
FLOE-194: Adjusted the styles of the dialog

Adjusted the dialog to have a border around the entire dialog and to drop the header specific background. Also flattened the shadows on the feedback tool and dialog in favour of a thicker border.
FLOE-194: Replace wording "happy" with "matchConfirmation".