Merge pull request #77 from cardosogabriel/master

Finishing the navigation corrections

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css

@@ -11,77 +11,148 @@ body {
 /* Header */
 .header.rcue .navbar.primary .navbar-inner {
   min-height: 42px;
+}
+.header.rcue .navbar.primary .nav > li {
+  /*
+        .dropdown {
+            display: inline-block;
+            margin-left: 0.53846153846154em;
+            margin-top: 0.46153846153846em;
+            min-width: 15.3846153846154em;
+            width: auto;
+            
+            .dropdown-toggle {
+                font-size: 0.84615384615385em;
+                color: #fff;
+                display: inline-block;
+                line-height: 2.36363636363636em;
+                border: 1px solid #676c6e;
+                border-radius: 2px;
+                padding: 0 0.54545454545455em;
+                background: #555a5e url(img/sprite-arrow-down.svg) no-repeat right -26px;
+                display: block;
+                
+                &:hover,
+                &:focus {
+                    text-decoration: none;
+                }
+                
+                &:hover {
+                    border-color: #7e8385;
+                }
+            }
+            
+            .dropdown-menu {
+            
+                left: 0;
+                min-width: 0;
+                width: 100%;
+                overflow: hidden;
+            
+                li,
+                li.selected {
+                    width: auto;
+                    
+                    a {
+                        width: auto;
+                        border-top: 1px solid transparent;
+                        border-bottom: 1px solid transparent;
+                        
+                        &:hover {
+                            background-color: #D5ECF9;
+                            background-image: none;
+                            border-bottom: 1px solid #A7D7F1;
+                            border-top: 1px solid #A7D7F1;
+                            color: #4D5258;
+                        }
+                    }
+                }
+                
+                li.selected a {
+                    background-color: #2B99C0;
+                    background-image: linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                    background-image: -o-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                    background-image: -moz-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                    background-image: -webkit-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                    background-image: -ms-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                    background-image: -webkit-gradient(
+                      linear,
+                      left top,
+                      left bottom,
+                      color-stop(0.0, #2EA1CA),
+                      color-stop(1,0, #2792B6)
+                    );
+                    background-repeat: repeat-x;
+                    color: #FFFFFF;
+                }
+            }
+        
+            &.open .dropdown-toggle {
+                text-decoration: none;
+                box-shadow: inset 0px 2px 5px rgba(0,0,0,0.2);
+                border-color: #7e8385;
+            }
+        }
+*/
+
 }
 .header.rcue .navbar.primary .nav > li .dropdown-label {
   font-size: 0.84615384615385em;
   color: #dbdada;
   margin-left: 1.36363636363636em;
-  display: inline-block;
+  float: left;
-}
+  margin-top: 0.63636363636364em;
-.header.rcue .navbar.primary .nav > li .dropdown {
-  display: inline-block;
-  margin-left: 0.53846153846154em;
-  margin-top: 0.46153846153846em;
-  min-width: 15.3846153846154em;
-  width: auto;
-}
-.header.rcue .navbar.primary .nav > li .dropdown .dropdown-toggle {
-  font-size: 0.84615384615385em;
-  color: #fff;
-  display: inline-block;
   line-height: 2.36363636363636em;
+}
+.header.rcue .navbar.primary .nav > li .select-rcue {
+  font-size: 0.76923076923077em;
+  margin-left: 1em;
+  margin-top: 0.7em;
+  display: inline-block;
+  vertical-align: middle;
+  background-color: #555a5e;
+  background-image: none;
+  background-image: url(img/sprite-arrow-down.svg);
+  background-repeat: no-repeat;
+  background-position: right -26px;
   border: 1px solid #676c6e;
   border-radius: 2px;
-  padding: 0 0.54545454545455em;
+  padding-left: 0;
-  background: #555a5e url(img/sprite-arrow-down.svg) no-repeat right -26px;
-  display: block;
 }
-.header.rcue .navbar.primary .nav > li .dropdown .dropdown-toggle:hover,
+.header.rcue .navbar.primary .nav > li .select-rcue:hover {
-.header.rcue .navbar.primary .nav > li .dropdown .dropdown-toggle:focus {
-  text-decoration: none;
-}
-.header.rcue .navbar.primary .nav > li .dropdown .dropdown-toggle:hover {
   border-color: #7e8385;
 }
-.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu {
+.header.rcue .navbar.primary .nav > li .select-rcue select {
-  left: 0;
+  color: #fff;
-  min-width: 0;
-  width: 100%;
-  overflow: hidden;
 }
-.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li,
+.header.rcue .navbar.primary .nav > li .select-rcue select:-moz-focusring {
-.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li.selected {
+  color: transparent;
-  width: auto;
+  text-shadow: 0 0 0 #fff;
 }
-.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li a,
+.header.rcue .navbar.primary .nav > li .select-rcue select option {
-.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li.selected a {
+  background-color: #fff;
-  width: auto;
+  color: #333;
-  border-top: 1px solid transparent;
+  padding: 0.36363636363636em 0.90909090909091em;
-  border-bottom: 1px solid transparent;
 }
-.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li a:hover,
+.header.rcue .navbar.primary .nav > li a#refresh {
-.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li.selected a:hover {
+  border: none;
-  background-color: #D5ECF9;
+  margin: 0;
-  background-image: none;
+  padding: 0;
-  border-bottom: 1px solid #A7D7F1;
+  float: right;
-  border-top: 1px solid #A7D7F1;
+  font-size: 0.76923076923077em;
-  color: #4D5258;
+  margin-left: 1em;
+  margin-top: 1.4em;
 }
-.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li.selected a {
+.header.rcue .navbar.primary .nav > li a#refresh:hover {
-  background-color: #2B99C0;
+  background: none;
-  background-image: linear-gradient(top, #2ea1ca 0%, #2792b6 100%);
-  background-image: -o-linear-gradient(top, #2ea1ca 0%, #2792b6 100%);
-  background-image: -moz-linear-gradient(top, #2ea1ca 0%, #2792b6 100%);
-  background-image: -webkit-linear-gradient(top, #2ea1ca 0%, #2792b6 100%);
-  background-image: -ms-linear-gradient(top, #2ea1ca 0%, #2792b6 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2ea1ca), color-stop(1, 0, #2792b6));
-  background-repeat: repeat-x;
-  color: #FFFFFF;
 }
-.header.rcue .navbar.primary .nav > li .dropdown.open .dropdown-toggle {
+.header.rcue .navbar.primary .nav > li a#refresh .icon-spinner6 {
-  text-decoration: none;
+  margin-right: 0;
-  box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.2);
+  background-image: url('img/sprites-gray.png');
-  border-color: #7e8385;
+}
+.header.rcue .navbar.primary .nav > li a#refresh .icon-spinner6:hover {
+  background-image: url('img/sprites-white.png');
+  background-color: transparent;
 }
 .header.rcue .navbar.primary .button {
   font-size: 0.84615384615385em;
@@ -135,6 +206,7 @@ body {
   border-color: #cecece;
   font-size: 1em;
   margin-bottom: 0;
+  min-height: 4.4em;
 }
 #content-area .top-nav ul.rcue-tabs li {
   margin: 0 0.5em -1px 0;
@@ -241,10 +313,6 @@ body {
   top: 70px;
   width: 877.5px;
 }
-/* Page: Realm Users */
-.realm-users caption {
-  display: none;
-}
 table thead tr th {
   font-size: 1.1em;
 }
@@ -260,6 +328,9 @@ table thead tr:first-child th {
 table a:hover {
   color: #0099D3;
 }
+table + .feedback.inline.warning {
+  margin-top: 1em;
+}
 .advanced-search-comp {
   position: relative;
   display: inline-block;

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less

@@ -34,9 +34,71 @@ body {
             font-size: 0.84615384615385em;
             color: #dbdada;
             margin-left: 1.36363636363636em;
-            display: inline-block;
+            float: left;
+            margin-top: 0.63636363636364em;
+            line-height: 2.36363636363636em
         }
 
+        .select-rcue {
+            font-size: 0.76923076923077em;
+            margin-left: 1em;
+            margin-top: 0.7em;
+            display: inline-block;
+            vertical-align: middle;
+            background-color: #555a5e;
+            background-image: none;
+            background-image: url(img/sprite-arrow-down.svg);
+            background-repeat: no-repeat;
+            background-position: right -26px;
+            border: 1px solid #676c6e;
+            border-radius: 2px;
+            padding-left: 0;
+            
+            &:hover {
+                border-color: #7e8385;
+            }
+            
+            select {
+                color: #fff;
+                
+                &:-moz-focusring {
+                    color: transparent;
+                    text-shadow: 0 0 0 #fff;
+                }
+                
+                option {
+                    background-color: #fff;
+                    color: #333;
+                    padding: 0.36363636363636em 0.90909090909091em;
+                }
+            }
+        }
+        
+        a#refresh {
+            border: none;
+            margin: 0;
+            padding: 0;
+            float: right;
+            font-size: 0.76923076923077em;
+            margin-left: 1em;
+            margin-top: 1.4em;
+            
+            &:hover {
+                background: none;
+            }
+            
+            .icon-spinner6 {
+                margin-right: 0;
+                background-image: url('img/sprites-gray.png');
+                
+                &:hover {
+                    background-image: url('img/sprites-white.png');
+                    background-color: transparent;
+                }
+            }
+        }
+        
+/*
         .dropdown {
             display: inline-block;
             margin-left: 0.53846153846154em;
@@ -116,6 +178,7 @@ body {
                 border-color: #7e8385;
             }
         }
+*/
     }
     
     .button {
@@ -179,6 +242,7 @@ body {
             border-color: @border-dark-grey;
             font-size: 1em;
             margin-bottom: 0;
+            min-height: 4.4em;
             
             li {
                 margin: 0 0.5em -1px 0;
@@ -312,13 +376,6 @@ body {
     width: 877.5px;
 }
 
-
-/* Page: Realm Users */
-
-.realm-users caption {
-    display: none;
-}
-
 table {
 
     thead tr {
@@ -344,6 +401,10 @@ table {
         color: #0099D3;
     }
     
+    + .feedback.inline.warning {
+        margin-top: 1em; 
+    }
+
 }
 
 .advanced-search-comp {

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css

@@ -6,9 +6,14 @@ fieldset {
   color: #838383;
   font-style: italic;
 }
+select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #333;
+}
 input[type="text"],
 input[type="password"],
-input[type="email"] {
+input[type="email"],
+textarea {
   font-size: 1.1em;
   padding: 0 0.545454545454545em;
   min-width: 18.1818181818182em;
@@ -20,18 +25,21 @@ input[type="email"] {
 }
 input[type="text"]:hover,
 input[type="password"]:hover,
-input[type="email"]:hover {
+input[type="email"]:hover,
+textarea:hover {
   border-color: #62afdb;
 }
 input[type="text"]:focus,
 input[type="password"]:focus,
-input[type="email"]:focus {
+input[type="email"]:focus,
+textarea:focus {
   border-color: #62afdb;
   box-shadow: #62afdb 0 0 5px;
 }
 input[type="text"].error,
 input[type="password"].error,
-input[type="email"].error {
+input[type="email"].error,
+textarea.error {
   border-color: #ba1212;
   transition: all 0.33s ease-in-out;
   -moz-transition: all 0.33s ease-in-out;
@@ -39,15 +47,20 @@ input[type="email"].error {
 }
 input[type="text"].error:focus,
 input[type="password"].error:focus,
-input[type="email"].error:focus {
+input[type="email"].error:focus,
+textarea.error:focus {
   box-shadow: 0 0 5px #ba1212;
 }
+textarea {
+  padding: 0.45em 0.545454545454545em;
+  height: auto;
+}
 .input-below {
-    clear: both;
+  clear: both;
-    display: inline-block;
+  display: inline-block;
-    margin-left: 10.9090909090909em;
+  margin-left: 10.9090909090909em;
-    margin-top: 0.45454545454545em;
+  margin-top: 0.45454545454545em;
-    padding-left: 3.63636363636364em;
+  padding-left: 3.63636363636364em;
 }
 input[type="button"],
 button,
@@ -171,6 +184,23 @@ button.primary:enabled:active,
   background-color: #0099d4;
   box-shadow: inset 0 0 5px 3px #0074ae;
 }
+.destructive {
+  background-image: linear-gradient(top, #d90000 0%, #ad0101 100%);
+  background-image: -o-linear-gradient(top, #d90000 0%, #ad0101 100%);
+  background-image: -moz-linear-gradient(top, #d90000 0%, #ad0101 100%);
+  background-image: -webkit-linear-gradient(top, #d90000 0%, #ad0101 100%);
+  background-image: -ms-linear-gradient(top, #d90000 0%, #ad0101 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d90000), color-stop(1, 0, #ad0101));
+  border-color: #350000;
+  color: #FFFFFF;
+}
+.destructive:hover {
+  background-color: #AD0101;
+}
+.destructive:enabled:active {
+  background-color: #AD0101;
+  box-shadow: 0 0 5px 3px #750101 inset;
+}
 /* Code from Gabriel */
 button.primary,
 .button.primary {
@@ -285,6 +315,24 @@ button.primary:focus,
   background-image: url(img/feedback-warning-sign.svg);
   background-color: #fef1e9;
 }
+.feedback.info p {
+  border-color: #5994b2;
+  background-image: url(img/feedback-info-sign.svg);
+  background-color: #e4f3fa;
+}
+.feedback.inline {
+  opacity: 1;
+  position: relative;
+  margin-bottom: 20px;
+}
+.feedback.inline p {
+  border-width: 1px;
+}
+.feedback .button {
+  display: inline-block;
+  font-size: 0.90909090909091em;
+  margin-left: 0.90909090909091em;
+}
 button,
 a.button {
   background-color: #eeeeee;
@@ -366,6 +414,7 @@ fieldset.border-top {
   margin-bottom: 0;
   float: left;
   margin-top: 0.45454545454545em;
+  font-weight: 400;
 }
 .form-group > label.two-lines {
   margin-top: -2px;
@@ -612,6 +661,9 @@ input[type="email"].tiny {
   border-bottom: 1px solid #a7d7f1;
   color: #4d5258;
 }
+.select2-container-multi .select2-choices {
+  width: 40em;
+}
 .input-group input + .select-rcue {
   border-radius: 0 2px 2px 0;
   border-left: 0;
@@ -720,6 +772,9 @@ input[type="email"].tiny {
   font-size: 1.1em;
   margin-right: 0.90909090909091em;
 }
+.changing-selectors.application {
+  padding-left: 12em;
+}
 .changing-selectors .select-title {
   display: inline-block;
 }
@@ -783,11 +838,3 @@ input[type="email"].tiny {
 .breadcrumb > li + li:before {
   content: "» ";
 }
-
-.item-deletable:hover .btn-delete {
-    display: inline-block;
-}
-
-.btn-delete {
-    display: none;
-}

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less

@@ -11,10 +11,16 @@ fieldset {
     font-style: italic;
 }
 
+select:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 #333;
+}
+
+
 input[type="text"],
 input[type="password"],
 input[type="email"],
- {
+textarea {
     font-size: 1.1em;
     padding: 0 0.545454545454545em;
     min-width: 18.1818181818182em;
@@ -45,6 +51,19 @@ input[type="email"],
     }
 }
 
+textarea {
+    padding: 0.45em 0.545454545454545em;
+    height: auto;
+}
+
+.input-below {
+    clear: both;
+    display: inline-block;
+    margin-left: 10.9090909090909em;
+    margin-top: 0.45454545454545em;
+    padding-left: 3.63636363636364em;
+}
+
 input[type="button"],
 button,
 a.button {
@@ -180,6 +199,32 @@ button.primary:enabled:active,
   box-shadow: inset 0 0 5px 3px #0074ae;
 }
 
+.destructive {
+    background-image: linear-gradient(top, #D90000 0%, #AD0101 100%);
+    background-image: -o-linear-gradient(top, #D90000 0%, #AD0101 100%);
+    background-image: -moz-linear-gradient(top, #D90000 0%, #AD0101 100%);
+    background-image: -webkit-linear-gradient(top, #D90000 0%, #AD0101 100%);
+    background-image: -ms-linear-gradient(top, #D90000 0%, #AD0101 100%);
+    background-image: -webkit-gradient(
+        linear,
+        left top,
+        left bottom,
+        color-stop(0.0, #D90000),
+        color-stop(1,0, #AD0101)
+        );
+    border-color: #350000;
+    color: #FFFFFF;
+    
+    &:hover {
+        background-color: #AD0101;
+    }
+    
+    &:enabled:active {
+        background-color: #AD0101;
+        box-shadow: 0 0 5px 3px #750101 inset;
+    }
+}
+
 
 /* Code from Gabriel */
 
@@ -320,6 +365,32 @@ button.primary,
         }
         
     }
+    
+    &.info {
+        
+        p {
+            border-color: #5994b2;
+            background-image: url(img/feedback-info-sign.svg);
+            background-color: #e4f3fa;
+        }
+        
+    }
+    
+    &.inline {
+        opacity: 1;
+        position: relative;
+        margin-bottom: 20px;
+        
+        p {
+            border-width: 1px;
+        }
+    }
+    
+    .button {
+        display: inline-block;
+        font-size: 0.90909090909091em;
+        margin-left: 0.90909090909091em;
+    }
 }
 
 button,
@@ -416,6 +487,7 @@ fieldset.border-top {
         margin-bottom: 0;
         float: left;
         margin-top: 0.45454545454545em;
+        font-weight: 400;
         
         &.two-lines {
             margin-top: -2px;
@@ -731,6 +803,10 @@ input[type="email"] {
     }
 }
 
+.select2-container-multi .select2-choices  {
+    width: 40em;
+}
+
 .input-group input + .select-rcue {
     border-radius: 0 2px 2px 0;
     border-left: 0;
@@ -856,6 +932,10 @@ input[type="email"] {
 
 .changing-selectors {
 
+    &.application {
+        padding-left: 12em;
+    }
+
     .select-title {
     
         display: inline-block;

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/feedback-info-sign.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="svg7384" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="17px" height="17px" viewBox="0 0 17 17" enable-background="new 0 0 17 17" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path fill="#418093" d="M8.24,12.734c-0.544,0.018-1.048-0.486-1.031-1.031V7.766c-0.007-0.527,0.473-1.014,1-1.014
+				c0.528,0,1.008,0.486,1,1.014v3.938c0.008,0.467-0.354,0.914-0.813,1C8.345,12.719,8.292,12.729,8.24,12.734L8.24,12.734z"/>
+		</g>
+		<g>
+			<rect x="7.208" y="3.766" fill="#418093" width="2" height="2"/>
+		</g>
+	</g>
+	<g id="path3869_3_">
+		<path fill="#418093" d="M8.209,16.418C3.683,16.418,0,12.736,0,8.209C0,3.683,3.683,0,8.209,0s8.208,3.683,8.208,8.209
+			C16.418,12.736,12.736,16.418,8.209,16.418z M8.209,1.5C4.51,1.5,1.5,4.51,1.5,8.209s3.01,6.709,6.709,6.709
+			c3.699,0,6.708-3.01,6.708-6.709S11.908,1.5,8.209,1.5z"/>
+	</g>
+</g>
+</svg>

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/feedback-success-arrow-down.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1000px" height="11px" viewBox="0 0 1000 11" enable-background="new 0 0 1000 11" xml:space="preserve">
+<path fill="#E4F1E1" d="M1000,0c0,1.104-0.896,2-2,2H38l-8,9l-8-9H2C0.896,2,0,1.104,0,0"/>
+<path fill="#4B9E39" d="M999,0c0,0.551-0.448,1-1,1H38h-0.449l-0.298,0.335L30,9.495l-7.253-8.159L22.449,1H22H2
+	C1.449,1,1,0.551,1,0 M0,0c0,1.104,0.896,2,2,2h20l8,9l8-9h960c1.104,0,2-0.896,2-2"/>
+</svg>

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/feedback-success-sign.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="17px" height="17px" viewBox="0 0 17 17" enable-background="new 0 0 17 17" xml:space="preserve">
+<path fill="#58A846" d="M12.524,4.654l-5.472,5.893L4.57,8.022L3.145,9.425l3.222,3.276C6.555,12.893,6.811,13,7.079,13
+	c0.006,0,0.013,0,0.019,0c0.273-0.005,0.535-0.122,0.72-0.325L14,6.003L12.524,4.654z"/>
+</svg>

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/feedback-warning-sign.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="svg7384" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="18px" height="17px" viewBox="0 0 18 17" enable-background="new 0 0 18 17" xml:space="preserve">
+<g>
+	<path fill="#EE7700" d="M17.077,12.955L10.745,1.39c-0.518-0.838-1.271-1.343-2.064-1.387L8.572,0C7.773,0,7.057,0.478,6.54,1.364
+		L0.295,12.951c-0.41,0.738-0.391,1.695,0.047,2.439c0.381,0.646,1.002,1.02,1.703,1.02H15.2c0.77,0,1.498-0.436,1.902-1.137
+		C17.521,14.551,17.507,13.701,17.077,12.955z M1.61,13.672L7.847,2.099c0.131-0.224,0.396-0.598,0.75-0.598l0,0
+		c0.295,0.016,0.621,0.27,0.853,0.643l6.32,11.546c0.213,0.369,0.135,0.658,0.033,0.834c-0.133,0.23-0.377,0.387-0.604,0.387H2.045
+		c-0.203,0-0.336-0.154-0.411-0.281C1.492,14.387,1.428,14,1.61,13.672z"/>
+	<path fill="#EE7700" d="M8.732,10.672c0.527,0,1.007-0.486,1-1.014V5.72c0.018-0.544-0.486-1.048-1.031-1.031
+		C8.648,4.696,8.595,4.706,8.544,4.72c-0.459,0.087-0.82,0.533-0.812,1v3.938C7.725,10.186,8.205,10.672,8.732,10.672z"/>
+	<rect x="7.732" y="11.658" fill="#EE7700" width="1.999" height="2"/>
+</g>
+</svg>

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/login-register-email-separator.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="324px" height="400px" viewBox="0 0 324 400" enable-background="new 0 0 324 400" xml:space="preserve">
+<rect x="6.001" opacity="0.07" fill="#FFFFFF" enable-background="new    " width="0.997" height="190"/>
+<rect x="6" y="209" opacity="0.07" fill="#FFFFFF" enable-background="new    " width="1" height="191"/>
+<g opacity="0.15">
+	<path fill="#FFFFFF" d="M6.501,200.066c0,1.047-0.264,1.864-0.791,2.452S4.454,203.4,3.524,203.4c-0.574,0-1.084-0.135-1.529-0.404
+		c-0.445-0.27-0.789-0.656-1.031-1.16c-0.242-0.504-0.363-1.094-0.363-1.77c0-1.047,0.262-1.862,0.785-2.446
+		c0.523-0.584,1.25-0.876,2.18-0.876c0.898,0,1.612,0.299,2.142,0.896C6.238,198.237,6.501,199.047,6.501,200.066z M1.608,200.066
+		c0,0.821,0.164,1.446,0.492,1.875s0.811,0.645,1.447,0.645c0.636,0,1.12-0.214,1.45-0.643c0.33-0.428,0.495-1.053,0.495-1.877
+		c0-0.816-0.165-1.437-0.495-1.86s-0.817-0.636-1.462-0.636c-0.637,0-1.117,0.209-1.441,0.627
+		C1.77,198.615,1.608,199.238,1.608,200.066z"/>
+	<path fill="#FFFFFF" d="M11.136,196.744c0.285,0,0.541,0.023,0.768,0.07l-0.135,0.902c-0.266-0.059-0.5-0.088-0.703-0.088
+		c-0.52,0-0.964,0.211-1.333,0.633c-0.369,0.422-0.554,0.947-0.554,1.576v3.445H8.206v-6.422h0.803l0.111,1.189h0.047
+		c0.238-0.418,0.525-0.74,0.861-0.967C10.364,196.855,10.733,196.744,11.136,196.744z"/>
+</g>
+</svg>

admin-ui/src/main/resources/META-INF/resources/admin/index.html

@@ -64,8 +64,8 @@
 </div>
 
 
-<div class="alert-container" data-ng-show="notification" data-ng-click="notification = null">
+<div class="feedback-aligner" data-ng-show="notification" data-ng-click="notification = null">
-    <div class="alert alert-{{notification.type}}">{{notification.message}}</div>
+    <div class="alert alert-{{notification.type}}"><strong>{{notification.message}}</strong></div> <!-- Needs to be <div class="feedback success"> to have the original design -->
 </div>
 
 <div id="wrap">

admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/applications.js

@@ -222,7 +222,7 @@ module.controller('ApplicationDetailCtrl', function($scope, realm, application,
                     var l = headers().location;
                     var id = l.substring(l.lastIndexOf("/") + 1);
                     $location.url("/realms/" + realm.id + "/applications/" + id);
-                    Notifications.success("Created application");
+                    Notifications.success("The application has been created.");
                 });
             } else {
                 Application.update({

admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js

@@ -104,7 +104,7 @@ module.controller('RealmDetailCtrl', function($scope, Current, Realm, realm, $ht
                             }
                         }
                         $location.url("/realms/" + id);
-                        Notifications.success("Created realm");
+                        Notifications.success("The realm has been created.");
                     });
                 });
             } else {
@@ -122,7 +122,7 @@ module.controller('RealmDetailCtrl', function($scope, Current, Realm, realm, $ht
                         }
                     });
                     $location.url("/realms/" + id);
-                    Notifications.success("Saved changes to realm");
+                    Notifications.success("Your changes have been saved to the realm.");
                 });
             }
         } else {
@@ -300,7 +300,7 @@ module.controller('RoleDetailCtrl', function($scope, realm, role, Role, $locatio
             }, $scope.role, function() {
                 $scope.changed = false;
                 role = angular.copy($scope.role);
-                Notifications.success("Saved changes to role");
+                Notifications.success("Your changes have been saved to the role.");
             });
         }
     };

admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/users.js

@@ -151,7 +151,7 @@ module.controller('UserDetailCtrl', function($scope, realm, user, User, $locatio
                 user = angular.copy($scope.user);
 
                 $location.url("/realms/" + realm.id + "/users/" + $scope.user.username);
-                Notifications.success("Created user");
+                Notifications.success("The user has been created.");
             });
         } else {
             User.update({
@@ -160,7 +160,7 @@ module.controller('UserDetailCtrl', function($scope, realm, user, User, $locatio
             }, $scope.user, function () {
                 $scope.changed = false;
                 user = angular.copy($scope.user);
-                Notifications.success("Saved changes to user");
+                Notifications.success("Your changes have been saved to the user.");
             });
 
         }

admin-ui/src/main/resources/META-INF/resources/admin/partials/application-credentials.html

@@ -4,8 +4,6 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav">
                 <ul class="rcue-tabs">
-                    <li><a href="#/create/application/{{realm.id}}">New Application</a></li>
-                    <li><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
                     <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}">Settings</a></li>
                     <li class="active"><a href="#/realms/{{realm.id}}/applications/{{application.id}}/credentials">Credentials</a></li>
                     <li><a href="#">Installation</a></li>
@@ -15,8 +13,13 @@
                 </ul>
             </div>
             <div id="content">
-                <h2 class="pull-left" data-ng-hide="create">Application <span>{{application.name}}</span> Credentials</h2>
+                <ol class="breadcrumb" data-ng-hide="create">
-                <p class="subtitle"></p>
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}">{{application.name}}</a></li>
+                    <li class="active">Credentials</li>
+                </ol>
+                <h2 data-ng-hide="create"><span>{{application.name}}</span> Credentials</h2>
                 <form name="credentialForm" novalidate >
                     <fieldset data-ng-show="passwordRequired">
                         <legend uncollapsed><span class="text">Change Password</span></legend>
@@ -28,13 +31,13 @@
                             </div>
                         </div>
                         <div class="form-group">
-                            <label for="password">Confirm New Password</label>
+                            <label class="two-lines" for="password">New Password Confirmation</label>
                             <div class="controls">
-                                <input type="password" id="confirmPassword" name="confirmPassword" data-ng-model="confirmPassword" autofocus
+                                <input type="password" id="confirmPassword" name="confirmPassword" data-ng-model="confirmPassword"
                                        required>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="form-actions">
                             <button type="submit" data-ng-click="changePassword()" class="primary" ng-show="password != null">Save
                             </button>
                         </div>
@@ -50,7 +53,7 @@
                                 </button>
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="form-actions">
                             <label></label>
                             <button type="submit" data-ng-click="changeTotp()" class="primary" ng-show="totp != null">Save
                             </button>

admin-ui/src/main/resources/META-INF/resources/admin/partials/application-detail.html

@@ -4,8 +4,6 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav" data-ng-show="!create">
                 <ul class="rcue-tabs">
-                    <li><a href="#/create/application/{{realm.id}}">New Application</a></li>
-                    <li><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
                     <li class="active"><a href="#/realms/{{realm.id}}/applications/{{application.id}}">Settings</a></li>
                     <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}/credentials">Credentials</a></li>
                     <li><a href="#">Installation</a></li>
@@ -16,19 +14,28 @@
             </div>
             <div class="top-nav" data-ng-show="create">
                 <ul class="rcue-tabs">
-                    <li class="active"><a href="#/create/application/{{realm.id}}">New Application</a></li>
+                    <li></li>
-                    <li><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
                 </ul>
             </div>
             <div id="content">
-                <h2 class="pull-left" data-ng-show="create">New Application</h2>
+                <ol class="breadcrumb" data-ng-show="create">
-                <h2 class="pull-left" data-ng-hide="create">Application <span>{{application.name}}</span></h2>
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
-                <p class="subtitle"><span class="required">*</span> Required fields</p>
+                    <li><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
+                    <li class="active">Add Application</li>
+                </ol>
+                <h2 class="pull-left" data-ng-show="create"><span>{{realm.realm}}</span> Add Application</h2>
+                <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
+                <ol class="breadcrumb" data-ng-hide="create">
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}">{{application.name}}</a></li>
+                    <li class="active">Settings</li>
+                </ol>
+                <h2 data-ng-hide="create"><span>{{application.name}}</span> Settings</h2>
                 <form name="applicationForm" novalidate>
-                    <fieldset>
+                    <fieldset class="border-top">
-                        <legend uncollapsed><span class="text">Application Settings</span></legend>
                         <div class="form-group">
-                            <label for="name">Name</label><span class="required">*</span>
+                            <label for="name">Name <span class="required" data-ng-show="create">*</span></label>
                             <div class="controls">
                             <input type="text" id="name" name="name" data-ng-model="application.name" autofocus
                                    required>
@@ -36,7 +43,7 @@
                         </div>
 
                         <div class="form-group clearfix block">
-                            <label class="control-label">Enabled</label>
+                            <label for="enabled" class="control-label">Enabled</label>
                             <div class="onoffswitch">
                                 <input type="checkbox" data-ng-model="application.enabled" class="onoffswitch-checkbox"
                                        name="enabled" id="enabled">
@@ -106,11 +113,10 @@
 
                     <div class="form-actions" data-ng-show="!create">
                         <button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
-                            changes
                         </button>
                         <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
                         </button>
-                        <button type="submit" data-ng-click="remove()" class="danger">
+                        <button type="submit" data-ng-click="remove()" class="destructive">
                             Delete
                         </button>
                     </div>

admin-ui/src/main/resources/META-INF/resources/admin/partials/application-list.html

@@ -4,16 +4,21 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav">
                 <ul class="rcue-tabs">
-                    <li><a href="#/create/application/{{realm.id}}">New Application</a></li>
+                    <li></li>
-                    <li class="active"><a href="#">Applications</a></li>
                 </ul>
             </div>
             <div id="content">
-                <h2 class="pull-left">Applications</h2>
+                <ol class="breadcrumb">
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li class="active">Applications</li>
+                </ol>
+                <h2><span>{{realm.realm}}</span> Applications</h2>
+                <div class="feedback info" data-ng-show="!applications || applications.length == 0">
+                    <p><strong>You have not configured applications.</strong><br><a class="button" href="#/create/application/{{realm.id}}">Add Application</a></p>
+                </div>
                 <table>
-                    <caption data-ng-show="!applications || applications.length == 0">No configured applications...</caption>
                     <thead>
-                    <tr >
+                    <tr>
                         <th class="rcue-table-actions" colspan="3">
                             <div class="search-comp clearfix">
                                 <input type="text" placeholder="Search..." class="search">
@@ -23,8 +28,7 @@
                                 </button>
                             </div>
                             <div class="actions">
-                                <a class="button" href="#/create/application/{{realm.id}}">Add</a>
+                                <a class="button" href="#/create/application/{{realm.id}}">Add Application</a>
-                                <button class="remove disabled">Remove</button>
                             </div>
                         </th>
                     </tr>
@@ -46,7 +50,7 @@
                         </td>
                     </tr>
                     </tfoot>
-                    <tbody class="selectable-rows">
+                    <tbody>
                     <tr ng-repeat="app in applications">
                         <td><a href="#/realms/{{realm.id}}/applications/{{app.id}}">{{app.name}}</a></td>
                         <td>{{app.enabled}}</td>
@@ -54,6 +58,9 @@
                     </tr>
                     </tbody>
                 </table>
+                <div class="feedback warning inline">
+                    <p><strong>Your search returned no results.</strong><br>Try modifying the query and try again.</p>
+                </div>
             </div>
         </div>
         <div id="container-right-bg"></div>

admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-detail.html

@@ -4,20 +4,38 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav">
                 <ul class="rcue-tabs">
-                    <li class="active"><a href="#/create/role/{{realm.id}}/applications/{{application.id}}">New {{application.name}} Role</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}">Settings</a></li>
-                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}/roles">{{application.name}} Roles</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}/credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}">{{application.name}} Settings</a></li>
+                    <li><a href="#">Installation</a></li>
+                    <li class="active"><a href="#/realms/{{realm.id}}/applications/{{application.id}}/roles">Roles</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}/scope-mappings">Scope</a></li>
+                    <li><a href="#">Sessions</a></li>
                 </ul>
             </div>
             <div id="content">
-                <h2 class="pull-left" data-ng-show="create">New Application {{application.name}} Role</h2>
+                <ol class="breadcrumb" data-ng-show="create">
-                <h2 class="pull-left" data-ng-hide="create">Application {{application.name}} Role <span>{{role.name}}</span></h2>
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}">{{application.name}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}/roles">Roles</a></li>
+                    <li class="active">Add role</li>
+                </ol>
+                <h2 class="pull-left" data-ng-show="create"><span>{{application.name}}</span> Add Role</h2>
                 <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
+                
+                <ol class="breadcrumb" data-ng-hide="create">
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}">{{application.name}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}/roles">Roles</a></li>
+                    <li class="active">{{role.name}}</li>
+                </ol>
+
+                <h2 class="pull-left" data-ng-hide="create"><span>{{application.name}}</span> {{role.name}}</h2>
                 <form name="realmForm" novalidate>
-                    <fieldset>
+                    <fieldset class="border-top">
-                        <legend uncollapsed><span class="text">Details</span> </legend>
                         <div class="form-group">
-                            <label for="name">Role name </label><span class="required" data-ng-show="create">*</span>
+                            <label for="name">Role name <span class="required" data-ng-show="create">*</span></label>
 
                             <div class="controls">
                                 <input type="text" id="name" name="name" data-ng-model="role.name" autofocus
@@ -28,8 +46,10 @@
                             <label for="description">Description </label>
 
                             <div class="controls">
-                                <input type="text" id="description" name="description" data-ng-model="role.description" autofocus
+                                <textarea rows="5" cols="50" id="description" name="description" data-ng-model="role.description" required></textarea>
-                                       required>
+                            
+<!-- Replaced by the textarea above <input type="text" id="description" name="description" data-ng-model="role.description" autofocus
+                                       required> -->
                             </div>
                         </div>
                     </fieldset>
@@ -43,11 +63,10 @@
 
                     <div class="form-actions" data-ng-show="!create">
                         <button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
-                            changes
                         </button>
                         <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
                         </button>
-                        <button type="submit" data-ng-click="remove()" class="danger" data-ng-hide="changed">
+                        <button type="submit" data-ng-click="remove()" class="destructive" data-ng-hide="changed">
                             Delete
                         </button>
                     </div>

admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-list.html

@@ -4,32 +4,53 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav">
                 <ul class="rcue-tabs">
-                    <li><a href="#/create/role/{{realm.id}}/applications/{{application.id}}">New {{application.name}} Role</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}">Settings</a></li>
-                    <li class="active"><a href="#/realms/{{realm.id}}/applications/{{application.id}}/roles">{{application.name}} Roles</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}/credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}">{{application.name}} Settings</a></li>
+                    <li><a href="#">Installation</a></li>
+                    <li class="active"><a href="#/realms/{{realm.id}}/applications/{{application.id}}/roles">Roles</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}/scope-mappings">Scope</a></li>
+                    <li><a href="#">Sessions</a></li>
                 </ul>
             </div>
             <div id="content">
-                <h2 class="pull-left">Application <span>{{application.name}}</span> Roles</h2>
+                <ol class="breadcrumb" data-ng-hide="create">
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}">{{application.name}}</a></li>
+                    <li class="active">Roles</li>
+                </ol>
+                <h2><span>{{application.name}}</span> Roles</h2>
+                <div class="feedback info" data-ng-show="!roles || roles.length == 0">
+                    <p><strong>You have not configured application roles.</strong><br><a class="button" href="#/create/role/{{realm.id}}/applications/{{application.id}}">Add Role</a></p>
+                </div>
+                                
+
                 <table>
-                    <caption data-ng-show="roles && roles.length > 0">Table of realm roles</caption>
+                    <caption data-ng-show="roles && roles.length > 0" class="hidden">Table of realm roles</caption>
-                    <caption data-ng-show="!roles || roles.length == 0">No configured realm roles...</caption>
                     <thead>
-                    <tr data-ng-show="roles && roles.length > 5">
+                        <tr>
-                        <th class="rcue-table-actions" colspan="2">
+                            <th class="rcue-table-actions" colspan="2">
-                            <div class="search-comp clearfix">
+                                <div class="actions">
-                                <input type="text" placeholder="Search..." class="search">
+                                    <a class="button" href="#/create/role/{{realm.id}}/applications/{{application.id}}">Add Role</a>
-                                <button class="icon-search tooltipRightTrigger"
+                                    <!-- <button class="remove disabled">Remove</button> -->
-                                        data-original-title="Search by role name.">
+                                </div>
-                                    Icon: search
+                            </th>
-                                </button>
+                        </tr>
-                            </div>
+                        <tr data-ng-show="roles && roles.length > 5">
-                        </th>
+                            <th class="rcue-table-actions" colspan="2">
-                    </tr>
+                                <div class="search-comp clearfix">
-                    <tr>
+                                    <input type="text" placeholder="Search..." class="search">
-                        <th>Role Name</th>
+                                    <button class="icon-search tooltipRightTrigger"
-                        <th>Description</th>
+                                            data-original-title="Search by role name.">
-                    </tr>
+                                        Icon: search
+                                    </button>
+                                </div>
+                            </th>
+                        </tr>
+                        <tr>
+                            <th>Role Name</th>
+                            <th>Description</th>
+                        </tr>
                     </thead>
                     <tfoot data-ng-show="roles && roles.length > 5"> <!-- todo -->
                     <tr>
@@ -43,7 +64,7 @@
                         </td>
                     </tr>
                     </tfoot>
-                    <tbody class="selectable-rows">
+                    <tbody>
                     <tr ng-repeat="role in roles">
                         <td><a href="#/realms/{{realm.id}}/applications/{{application.id}}/roles/{{role.id}}">{{role.name}}</a></td>
                         <td>{{role.description}}</td>

admin-ui/src/main/resources/META-INF/resources/admin/partials/application-scope-mappings.html

@@ -4,8 +4,6 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav">
                 <ul class="rcue-tabs">
-                    <li><a href="#/create/application/{{realm.id}}">New Application</a></li>
-                    <li><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
                     <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}">Settings</a></li>
                     <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}/credentials">Credentials</a></li>
                     <li><a href="#">Installation</a></li>
@@ -15,11 +13,17 @@
                 </ul>
             </div>
             <div id="content">
+                <ol class="breadcrumb" data-ng-hide="create">
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications/{{application.id}}">{{application.name}}</a></li>
+                    <li class="active">Scope</li>
+                </ol>
                 <h2 class="pull-left"><span>{{application.name}}</span> Scope Mappings</h2>
                 <p class="subtitle"></p>
                 <form name="realmForm" novalidate>
-                    <legend uncollapsed><span class="text">Realm Roles</span> </legend>
+                    <fieldset>
-                    <fieldset class="border-top">
+                        <legend uncollapsed><span class="text">Realm Roles</span></legend>
                         <div class="form-group">
                             <div class="controls changing-selectors">
                                 <div class="select-title">
@@ -49,7 +53,7 @@
                     <fieldset ng-show="applications.length > 0">
                         <legend collapsed><span class="text">Application Roles</span> </legend>
                         <div class="form-group input-select">
-                            <label for="applications">Application: </label>
+                            <label for="applications">Application</label>
                             <div class="input-group">
                                 <div class="select-rcue">
                                     <select id="applications" name="applications" ng-change="changeApplication()" ng-model="targetApp" ng-options="a.name for a in applications">
@@ -58,7 +62,7 @@
                             </div>
                         </div>
                         <div class="form-group">
-                            <div class="controls changing-selectors">
+                            <div class="controls changing-selectors application">
                                 <div class="select-title">
                                     <label for="app-available">Available Roles</label>
                                     <select id="app-available" class="form-control" multiple size="5"

admin-ui/src/main/resources/META-INF/resources/admin/partials/menu.html

@@ -23,9 +23,11 @@
             <ul class="nav pull-left">
                 <li>
                     <span class="dropdown-label" data-ng-show="showNav()">Realm:</span>
-                    <div class="dropdown" data-ng-show="showNav()">
+                    <div class="select-rcue" data-ng-show="showNav()">
                         <select ng-change="changeRealm()" ng-model="current.realm" ng-options="r.realm for r in current.realms"></select>
                     </div>
+                    <a href="#/realms/{{realm.id}}" id="refresh"><span class="icon-spinner6">Icon: spinner</span></a>
+
                 </li>
             </ul>
             <div class="pull-right" data-ng-show="auth.loggedIn">

admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html

@@ -21,24 +21,24 @@
                 <form name="realmForm" novalidate>
                     <fieldset class="border-top">
                         <div class="form-group clearfix">
-                            <label for="user" class="control-label">Required User Credentials</label>
+                            <label for="user" class="control-label two-lines">Required User Credentials</label>
 
                             <div class="controls">
-                                <input id="user" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredCredentials" class="form-control tokenfield" placeholder="Type a role and enter">
+                                <input id="user" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredCredentials" placeholder="Type a role and enter">
                             </div>
                         </div>
                         <div class="form-group clearfix">
-                            <label for="application" class="control-label">Required Application Credentials</label>
+                            <label for="application" class="control-label two-lines">Required Application Credentials</label>
 
                             <div class="controls">
-                                <input id="application" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredApplicationCredentials" class="form-control tokenfield" placeholder="Type a role and enter">
+                                <input id="application" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredApplicationCredentials" placeholder="Type a role and enter">
                             </div>
                         </div>
                         <div class="form-group clearfix">
-                            <label for="oauth" class="control-label">Required OAuth Credentials</label>
+                            <label for="oauth" class="control-label two-lines">Required OAuth Credentials</label>
 
                             <div class="controls">
-                                <input id="oauth" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredOAuthClientCredentials" class="form-control tokenfield" placeholder="Type a role and enter">
+                                <input id="oauth" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredOAuthClientCredentials" placeholder="Type a role and enter">
                             </div>
                         </div>
                     </fieldset>

admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html

@@ -76,7 +76,7 @@
                             </div>
                         </div>
                         <div class="form-group clearfix block">
-                            <label for="accountManagement" class="control-label">User account management</label>
+                            <label for="accountManagement" class="control-label two-lines">User account management</label>
                             <div class="onoffswitch">
                                 <input type="checkbox" data-ng-model="realm.accountManagement" class="onoffswitch-checkbox"
                                        name="accountManagement" id="accountManagement">
@@ -129,7 +129,7 @@
                         </button>
                         <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
                         </button>
-                        <button type="submit" data-ng-click="remove()" class="danger" data-ng-hide="changed">
+                        <button type="submit" data-ng-click="remove()" class="destructive" data-ng-hide="changed">
                             Delete
                         </button>
                     </div>

admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-tokens.html

@@ -19,8 +19,7 @@
                 </ol>
                 <h2><span>{{realm.realm}}</span> Token Settings</h2>
                 <form name="realmForm" novalidate>
-                    <fieldset>
+                    <fieldset class="border-top">
-                        <legend uncollapsed><span class="text">Token Settings</span></legend>
                         <div class="form-group input-select">
                             <label for="tokenLifespan">Token lifespan</label>
                             <div class="input-group">

admin-ui/src/main/resources/META-INF/resources/admin/partials/role-detail.html

@@ -25,7 +25,7 @@
                     <li><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
                     <li class="active">Add Role</li>
                 </ol>
-                <h2 class="pull-left" data-ng-show="create">Add Realm Role</h2>
+                <h2 class="pull-left" data-ng-show="create"><span>{{realm.realm}}</span> Add Role</h2>
                 <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
                 <form name="realmForm" novalidate>
                     <fieldset class="border-top">
@@ -42,7 +42,6 @@
 
                             <div class="controls">
                                 <textarea rows="5" cols="50" id="description" name="description" data-ng-model="role.description" required></textarea>
-                                <!-- Replaced by the textarea above <input type="text" id="description" name="description" data-ng-model="role.description" required> -->
                             </div>
                         </div>
                     </fieldset>
@@ -59,7 +58,7 @@
                         </button>
                         <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
                         </button>
-                        <button type="submit" data-ng-click="remove()" class="danger" data-ng-hide="changed">
+                        <button type="submit" data-ng-click="remove()" class="destructive" data-ng-hide="changed">
                             Delete
                         </button>
                     </div>

admin-ui/src/main/resources/META-INF/resources/admin/partials/role-mappings.html

@@ -50,7 +50,7 @@
                     <fieldset ng-show="applications.length > 0">
                         <legend collapsed><span class="text">Application Roles</span> </legend>
                         <div class="form-group input-select">
-                            <label for="applications">Application: </label>
+                            <label for="applications">Application</label>
                             <div class="input-group">
                                 <div class="select-rcue">
                                     <select id="applications" name="applications" ng-change="changeApplication()" ng-model="application" ng-options="a.name for a in applications">
@@ -59,7 +59,7 @@
                             </div>
                         </div>
                         <div class="form-group" ng-show="application">
-                            <div class="controls changing-selectors">
+                            <div class="controls changing-selectors application">
                                 <div class="select-title">
                                     <label for="available-app">Available Roles</label>
                                     <select id="available-app" class="form-control" multiple size="5"

admin-ui/src/main/resources/META-INF/resources/admin/partials/user-detail.html

@@ -79,7 +79,7 @@
                         </button>
                         <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
                         </button>
-                        <button type="submit" data-ng-click="remove()" class="danger">
+                        <button type="submit" data-ng-click="remove()" class="destructive">
                             Delete
                         </button>
                     </div>

admin-ui/src/main/resources/META-INF/resources/admin/partials/user-list.html

@@ -28,7 +28,6 @@
                                 </div>
                                 <div class="actions">
                                     <a class="button" href="#/create/user/{{realm.id}}">Add User</a>
-                                    <button class="remove disabled">Remove</button>
                                 </div>
                             </th>
                         </tr>
@@ -53,7 +52,7 @@
                         </td>
                     </tr>
                     </tfoot>
-                    <tbody class="selectable-rows">
+                    <tbody>
                     <tr ng-repeat="user in users">
                         <td><a href="#/realms/{{realm.id}}/users/{{user.username}}">{{user.username}}</a></td>
                         <td>{{user.lastName}}</td>
@@ -62,6 +61,9 @@
                     </tr>
                     </tbody>
                 </table>
+                <div class="feedback warning inline">
+                    <p><strong>Your search returned no results.</strong><br>Try modifying the query and try again.</p>
+                </div>
             </div>
         </div>
         <div id="container-right-bg"></div>