Username generator (#1456)

* username generator implemented

* disable type when coming from add/edit

* restyle buttons to new icon-btn

* update generated-wrapper styles

* only show policy messages for passwords

* make generated-wrapper a standalone style

* Update src/app/vault/password-generator.component.html

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

* aria-expanded on show options

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

src/scss/misc.scss

@@ -1,6 +1,7 @@
 @import "variables.scss";
 
-small {
+small,
+.small {
   font-size: $font-size-small;
 }
 
@@ -173,22 +174,44 @@ p.lead {
   }
 }
 
-.password-block {
+.modal-title {
+  margin: 0 10px 5px 10px;
+  text-transform: uppercase;
+  display: flex;
+
+  @include themify($themes) {
+    color: themed("headingColor");
+  }
+}
+
+.generated-block {
   font-size: $font-size-large;
   font-family: $font-family-monospace;
   min-height: 50px;
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  text-align: center;
 
   .modal-body & {
-    margin-top: 10px;
+    margin: 10px;
+  }
+
+  .generated-wrapper {
+    text-align: left;
+    width: 100%;
+  }
+
+  .action-buttons {
+    display: flex;
+    align-self: center;
+
+    button {
+      margin-left: 10px;
+    }
   }
 }
 
-.password-wrapper {
+.generated-wrapper {
   word-break: break-all;
   white-space: pre-wrap;
   min-width: 0;