Merge branch...

Merge branch '219-design-new-layout-for-buttons-and-apply-wherever-required-to-be-consistent' into 'develop'

Resolve "Design new layout for buttons and apply wherever required to be consistent"

See merge request !26

src/app/appmarket/bulkDeployment/bulk-list/bulk-list.component.html

@@ -132,7 +132,7 @@
         </div>
     </div>
     <div class="nmaas-modal-footer">
-        <button type="button" class="btn btn-default" (click)="modal.hide()">{{'APP_CHANGE_STATE_MODAL.CANCEL_BUTTON' | translate}}</button>
+        <button type="button" class="btn btn-secondary" (click)="modal.hide()">{{'APP_CHANGE_STATE_MODAL.CANCEL_BUTTON' | translate}}</button>
         <button type="button" class="btn btn-primary"   [disabled]="false">{{'BULK.REMOVE.REMOVE' | translate}}</button>
     </div>
 </nmaas-modal>

src/app/appmarket/domains/domain-group-view/domain-group-view.component.html

@@ -40,7 +40,7 @@
             </div>
             <div class="panel-body">
                 <div *roles="['ROLE_SYSTEM_ADMIN']" style="display: flex; justify-content: end">
-                    <button  type="button" class="btn btn-success" (click)="showModalUser()">{{'DOMAINS.GROUP.ADD_USERS' | translate}}</button>
+                    <button  type="button" class="btn btn-secondary" (click)="showModalUser()">{{'DOMAINS.GROUP.ADD_USERS' | translate}}</button>
                 </div>
                 <div *roles="['ROLE_VL_MANAGER']" style="display: flex; justify-content: end">
                     <button  type="button" class="btn btn-warning" (click)="removeMyAccess()">{{'DOMAINS.GROUP.DELETE_MYSELF' | translate}}</button>
@@ -82,7 +82,7 @@
             </div>
             <div class="panel-body collapse" id="domains-list">
                 <div style="display: flex; justify-content: end">
-                    <button type="button" class="btn btn-success" (click)="showModal()">{{'DOMAINS.LIST.ADD' | translate}}</button>
+                    <button type="button" class="btn btn-secondary" (click)="showModal()">{{'DOMAINS.LIST.ADD' | translate}}</button>
                 </div>
                 <table class="table table-hover table-condensed" aria-describedby="Domains in Group table" style="margin-top: 2rem">
                     <thead>
@@ -118,7 +118,7 @@
             </div>
             <div class="panel-body collapse" id="app-status" >
                 <div style="display: flex; justify-content: end; margin-bottom: 2rem">
-                    <button  class="btn btn-primary"  type="button" (click)="toggleAll()">{{'SHARED.TOGGLE' | translate}}</button>
+                    <button  class="btn btn-secondary"  type="button" (click)="toggleAll()">{{'SHARED.TOGGLE' | translate}}</button>
                 </div>
                 <table class="table table-hover table-condensed" aria-describedby="Domain details table">
                     <thead>
@@ -181,8 +181,9 @@
                 </table>
             </div>
         </div>
-
-        <button  type="submit" class="btn btn-default" [disabled]="!domainForm.form.valid">{{ 'DOMAIN_DETAILS.SUBMIT_BUTTON' | translate }}</button>
+        <div class="flex justify-content-end">
+            <button  type="submit" class="btn btn-primary" [disabled]="!domainForm.form.valid">{{ 'DOMAIN_DETAILS.SUBMIT_BUTTON' | translate }}</button>
+        </div>
 
     </form>
 </div>
@@ -210,8 +211,8 @@
         </table>
     </div>
     <div class="nmaas-modal-footer">
-        <button type="button" class="btn btn-default" (click)="modal.hide()">{{'APP_CHANGE_STATE_MODAL.CANCEL_BUTTON' | translate}}</button>
         <button type="button" class="btn btn-primary" (click)="closeModal()" [disabled]="false">{{'DOMAINS.LIST.ADD' | translate}}</button>
+        <button type="button" class="btn btn-secondary" (click)="modal.hide()">{{'APP_CHANGE_STATE_MODAL.CANCEL_BUTTON' | translate}}</button>
     </div>
 </nmaas-modal>
 
@@ -233,7 +234,7 @@
                 <tr class="table-row">
                     <td>{{user.username}}</td>
                     <td>{{user.firstname}} {{user.lastname}}</td>
-                    <td> <button *roles="['ROLE_SYSTEM_ADMIN']" type="button" class="btn btn-success" (click)="addUser(user)">{{'DOMAINS.GROUP.ADD' | translate}}</button> </td>
+                    <td> <button *roles="['ROLE_SYSTEM_ADMIN']" type="button" class="btn btn-secondary" (click)="addUser(user)">{{'DOMAINS.GROUP.ADD' | translate}}</button> </td>
                 </tr>
             </ng-template>
             </thead>
@@ -257,7 +258,7 @@
         </table>
     </div>
     <div class="nmaas-modal-footer">
-        <button type="button" class="btn btn-default" (click)="closeModalUserAccess()">{{'APP_CHANGE_STATE_MODAL.CANCEL_BUTTON' | translate}}</button>
         <button type="button" class="btn btn-primary" (click)="saveUsers()" [disabled]="false">{{'DOMAINS.GROUP.ADD_USERS' | translate}}</button>
+        <button type="button" class="btn btn-secondary" (click)="closeModalUserAccess()">{{'APP_CHANGE_STATE_MODAL.CANCEL_BUTTON' | translate}}</button>
     </div>
 </nmaas-modal>

src/app/appmarket/domains/domain/domain.component.html

@@ -225,7 +225,7 @@
 					</div>
 				</div>
 				<br>
-				<button type="button" class="btn btn-sm btn-default" (click)="addNetwork()" *ngIf="!isInMode(ComponentMode.VIEW)"><span class="glyphicon glyphicon-plus"></span> {{'DOMAIN_DETAILS.ADD' | translate}}</button>
+				<button type="button" class="btn btn-sm btn-primary" (click)="addNetwork()" *ngIf="!isInMode(ComponentMode.VIEW)"><span class="glyphicon glyphicon-plus"></span> {{'DOMAIN_DETAILS.ADD' | translate}}</button>
 			</div>
 		</div>
 
@@ -257,8 +257,9 @@
 			</div>
 		</div>
 
-
-		<button *ngIf="!isInMode(ComponentMode.VIEW)" type="submit" class="btn btn-default" [disabled]="!domainForm.form.valid">{{ 'DOMAIN_DETAILS.SUBMIT_BUTTON' | translate }}</button>
+		<div class="flex justify-content-end">
+			<button *ngIf="!isInMode(ComponentMode.VIEW)" type="submit" class="btn btn-primary" [disabled]="!domainForm.form.valid">{{ 'DOMAIN_DETAILS.SUBMIT_BUTTON' | translate }}</button>
+		</div>
 	</form>
 </div>
 

src/app/appmarket/domains/list/domainslist.component.html

@@ -6,7 +6,7 @@
                role="button">{{'DOMAINS.ADD_BUTTON' | translate}}</a>
         </div>
         <div *roles="['ROLE_SYSTEM_ADMIN']" class="flex" style="align-content: center; height: 35px; margin-top: 10px;">
-            <button class="btn btn-secondary" [routerLink]="['annotations']">{{'DOMAINS.ANNOTATIONS.EDIT' | translate}}</button>
+            <button class="btn btn-primary" [routerLink]="['annotations']">{{'DOMAINS.ANNOTATIONS.EDIT' | translate}}</button>
         </div>
         <div *roles="['ROLE_SYSTEM_ADMIN']" class="flex" style="align-content: center; height: 35px;  margin-top: 8px;">
             <span style="align-content: center; margin-right: 5px; margin-top: 10px;"> {{'DOMAINS.NOTACTIVE' | translate}}</span>

src/app/appmarket/domains/modals/removal-confirmation-modal/removal-confirmation-modal.component.html

@@ -7,7 +7,7 @@
         </p>
     </div>
     <div class="nmaas-modal-footer">
-        <button [disabled]="disableButton" role="button" type="button" class="btn btn-success" (click)="removeDomain()">{{ 'DOMAIN_DETAILS.MODAL.BUTTONS.CONFIRM' | translate}}</button>
-        <button type="button" class="btn btn-primary" (click)="modal.hide()">{{ 'DOMAIN_DETAILS.MODAL.BUTTONS.CANCEL' | translate}}</button>
+        <button [disabled]="disableButton" role="button" type="button" class="btn btn-primary" (click)="removeDomain()">{{ 'DOMAIN_DETAILS.MODAL.BUTTONS.CONFIRM' | translate}}</button>
+        <button type="button" class="btn btn-secondary" (click)="modal.hide()">{{ 'DOMAIN_DETAILS.MODAL.BUTTONS.CANCEL' | translate}}</button>
     </div>
 </nmaas-modal>

src/app/shared/admin/clusters/details/clusterdetails.component.html

@@ -231,7 +231,7 @@
                     <tr *ngIf="!isInMode(ComponentMode.VIEW)">
                         <td></td><td></td><td></td><td></td><td></td><td></td>
                         <td>
-                            <button type="button" class="btn btn-sm btn-success"
+                            <button type="button" class="btn btn-sm btn-secondary"
                                     (click)="addNetwork()">{{ 'CLUSTERS.ADD_BUTTON' | translate }}
                             </button>
                         </td>

src/app/shared/comments/comments.component.html

@@ -6,7 +6,7 @@
 					<label class="sr-only" for="comment">{{'COMMENTS.ADD_COMMENT' | translate}}:</label>
 					<textarea #textAreaNewComment name="comment" id="comment" placeholder="{{'COMMENTS.PLACEHOLDER' | translate}}"
 							  class="form-control mb-4" rows="2" required [(ngModel)]="newComment.comment" style="resize: none; height: 100px; border-radius: 10px"></textarea>
-					<button type="submit" class="btn btn-default pull-right">{{'COMMENTS.ADD_BUTTON' | translate}}</button>
+					<button type="submit" class="btn btn-primary pull-right">{{'COMMENTS.ADD_BUTTON' | translate}}</button>
 					<div class="alert alert-danger" *ngIf="commentErrorMsg">
 						{{commentErrorMsg}}
 					</div>

src/app/shared/comments/single-comment/single-comment.component.html

@@ -37,7 +37,7 @@
       <div class="form-group">
         <textarea #textAreaComment name="comment" id="comment2" placeholder="{{'COMMENTS.PLACEHOLDER' | translate}}"
                   class="form-control" rows="2"></textarea>
-        <button type="submit" class="btn btn-default pull-right">{{'COMMENTS.ADD_BUTTON' | translate}}</button>
+        <button type="submit" class="btn btn-primary pull-right">{{'COMMENTS.ADD_BUTTON' | translate}}</button>
       </div>
     </form>
   </div>

src/app/shared/common/password/password.component.html

@@ -42,7 +42,7 @@
 	</div>
 	<div class="nmaas-modal-footer">
 		<button type="submit" class="btn btn-primary" (click)="submit()">{{'PASSWORD.SUBMIT_BUTTON' | translate}}</button>
-		<button class="btn btn-danger" (click)="hide()">Cancel</button>
+		<button class="btn btn-secondary" (click)="hide()">Cancel</button>
 	</div>
 </nmaas-modal>
 

src/app/shared/contact/contact.component.html

@@ -26,7 +26,7 @@
         {{ 'CONTACT_FORM.MODAL.MESSAGE' | translate }}
     </div>
     <div class="nmaas-modal-footer">
-        <button type="button" class="btn btn-default" (click)="modal.hide()">
+        <button type="button" class="btn btn-primary" (click)="modal.hide()">
             {{'CONTACT_FORM.MODAL.CLOSE_BUTTON' | translate}}
         </button>
     </div>

src/app/shared/domain-namespace-annotations/domain-namespace-annotations.component.html

@@ -8,7 +8,7 @@
     </div>
     <div class="panel-body">
         <div  style="display: flex; justify-content: end">
-            <button  type="button" class="btn btn-success" (click)="addAnnotation()">{{'DOMAINS.ANNOTATIONS.ADD'| translate}}</button>
+            <button type="button" class="btn btn-primary" (click)="addAnnotation()">{{'DOMAINS.ANNOTATIONS.ADD'| translate}}</button>
         </div>
         <div class="grid flex flex-grow-1">
             <div class="col-4">
@@ -63,8 +63,8 @@
 
     </div>
     <div class="nmaas-modal-footer">
-        <button type="button" class="btn btn-default" (click)="modal.hide()">{{'APP_CHANGE_STATE_MODAL.CANCEL_BUTTON' | translate}}</button>
         <button type="button" class="btn btn-primary" (click)="closeModal()" [disabled]="isKeyNotUniqueAdd(newAnnotations) || !isKeyPatternCorrect">{{'DOMAINS.ADD_BUTTON' | translate}}</button>
+        <button type="button" class="btn btn-secondary" (click)="modal.hide()">{{'APP_CHANGE_STATE_MODAL.CANCEL_BUTTON' | translate}}</button>
     </div>
 </nmaas-modal>
 
@@ -94,7 +94,7 @@
 
     </div>
     <div class="nmaas-modal-footer">
-        <button type="button" class="btn btn-default" (click)="editModal.hide()">{{'APP_CHANGE_STATE_MODAL.CANCEL_BUTTON' | translate}}</button>
         <button type="button" class="btn btn-primary" (click)="closeModalEdit()" [disabled]="isEditAnnotationCorrect(editAnnotation) || !isKeyPatternCorrect">{{'DOMAINS.EDIT_BUTTON' | translate}}</button>
+        <button type="button" class="btn btn-secondary" (click)="editModal.hide()">{{'APP_CHANGE_STATE_MODAL.CANCEL_BUTTON' | translate}}</button>
     </div>
 </nmaas-modal>

src/app/shared/modal/appinstall/appinstallmodal.component.html

@@ -29,7 +29,7 @@
 		</div>
 	</div>
 	<div class="nmaas-modal-footer">
-		<button type="button" class="btn btn-default" (click)="modal.hide()">{{'INSTALL_MODAL.CLOSE_BUTTON' | translate}}</button>
 		<button type="button" class="btn btn-primary" (click)="create()" [disabled]="instance_name.invalid || clicked">{{'INSTALL_MODAL.DEPLOY_BUTTON' | translate}}</button>
+		<button type="button" class="btn btn-secondary" (click)="modal.hide()">{{'INSTALL_MODAL.CLOSE_BUTTON' | translate}}</button>
 	</div>
 </nmaas-modal>

src/app/shared/modal/modal-notification-send/modal-notification-send.component.html

@@ -14,6 +14,6 @@
   </div>
     <div class="nmaas-modal-footer">
       <button type="submit" class="btn btn-primary text-center" [disabled]="!f.valid" form="notification-form">{{'MESSAGE_MODAL.CONFIRM' | translate}}</button>
-      <button type="button" (click)="modal.hide()" class="btn ntn-secondary text-center">{{'MESSAGE_MODAL.DISMISS' | translate}}</button>
+      <button type="button" (click)="modal.hide()" class="btn btn-secondary text-center">{{'MESSAGE_MODAL.DISMISS' | translate}}</button>
     </div>
 </nmaas-modal>

src/app/shared/users/details/userdetails.component.html

@@ -2,6 +2,16 @@
 	<div class="panel-heading">{{'USER_DETAILS.HEADER' | translate}}</div>
 	<div class="panel-body">
 		<form *ngIf="user" (submit)="submit()" class="form-horizontal" #userDetailsForm="ngForm">
+			<div class="flex justify-content-end mb-4">
+				<button *ngIf="!isInMode(ComponentMode.VIEW)" type="button"
+						class="btn btn-text" (click)="onModeChange()">{{'USER_DETAILS.VIEW_BUTTON' | translate}}</button>
+				<button *ngIf="!isInMode(ComponentMode.VIEW)" type="submit" [disabled]="userDetailsForm.invalid"
+						class="btn btn-primary">{{'USER_DETAILS.SUBMIT_BUTTON' | translate}}</button>
+				<button *ngIf="isInMode(ComponentMode.VIEW) && isModeAllowed(ComponentMode.EDIT) && authService.hasRole('ROLE_SYSTEM_ADMIN')" type="button"
+						class="btn btn-text" (click)="onModeChange()">{{'USER_DETAILS.EDIT_BUTTON' | translate}}</button>
+			</div>
+
+
 
 			<div class="form-group">
 				<label class="col-sm-2 control-label">{{'USER_DETAILS.USERNAME' | translate}}</label>
@@ -43,14 +53,7 @@
 					<p class="form-control-static">{{user?.id}}</p>
 				</div>
 			</div>
-
-			<button *ngIf="!isInMode(ComponentMode.VIEW)" type="button"
-				class="btn btn-default" (click)="onModeChange()">{{'USER_DETAILS.VIEW_BUTTON' | translate}}</button>
-			<button *ngIf="!isInMode(ComponentMode.VIEW)" type="submit" [disabled]="userDetailsForm.invalid"
-				class="btn btn-danger">{{'USER_DETAILS.SUBMIT_BUTTON' | translate}}</button>
-			<button *ngIf="isInMode(ComponentMode.VIEW) && isModeAllowed(ComponentMode.EDIT) && authService.hasRole('ROLE_SYSTEM_ADMIN')" type="button"
-				class="btn btn-default" (click)="onModeChange()">{{'USER_DETAILS.EDIT_BUTTON' | translate}}</button>
-			<button (click)="passwordModal.show()" class="btn btn-success" *ngIf="canChangePassword() && !user.ssoUser" style="float: right;">{{'USER_DETAILS.CHANGE_PASSWORD_BUTTON' | translate}}</button>
+			<button (click)="passwordModal.show()" class="btn btn-secondary" *ngIf="canChangePassword() && !user.ssoUser" style="float: right;">{{'USER_DETAILS.CHANGE_PASSWORD_BUTTON' | translate}}</button>
 		</form>
 		<br>
 		<div class="alert alert-danger" *ngIf="errorMessage">

src/app/shared/users/list/userslist.component.html

@@ -176,7 +176,7 @@
                 </span>
             </td>
             <td *ngIf="isModeAllowed(ComponentMode.EDIT)" style="width: 170px">
-                <button class="btn btn-success" role="button"
+                <button class="btn btn-secondary" role="button"
                         (click)="addToCurrentDomain(user)"> {{'USERS.ADD_TO_DOMAIN_BUTTON' | translate}}</button>
             </td>
         </tr>

src/app/shared/users/new-ssh-key/new-ssh-key.component.html

-<button type="button" class="btn btn-success" (click)="modal.show()">{{'SSH_KEYS.BUTTON_NEW_KEY' | translate}}</button>
+<button type="button" class="btn btn-secondary" (click)="modal.show()">{{'SSH_KEYS.BUTTON_NEW_KEY' | translate}}</button>
 
 <nmaas-modal styleModal="info">
   <div class="nmaas-modal-header">{{'SSH_KEYS.MODAL.HEADER' | translate}}</div>
@@ -27,11 +27,10 @@
           <div *ngIf="key.errors.pattern">{{'SSH_KEYS.MODAL.ERROR.KEY_PATTERN' | translate}}</div>
         </div>
 
-        <input type="submit" class="btn btn-success" value="{{'SSH_KEYS.MODAL.BUTTON_ADD' | translate}}" [disabled]="!requestForm.valid">
-        <button type="button" class="btn btn-primary pull-right" (click)="modal.hide()">{{'SSH_KEYS.MODAL.BUTTON_CANCEL' | translate}}</button>
+        <input type="submit" style="border-radius: 4px" class="btn btn-primary" value="{{'SSH_KEYS.MODAL.BUTTON_ADD' | translate}}" [disabled]="!requestForm.valid">
+        <button type="button" class="btn btn-secondary pull-right" (click)="modal.hide()">{{'SSH_KEYS.MODAL.BUTTON_CANCEL' | translate}}</button>
 
       </form>
-      <hr/>
       <div *ngIf="error" class="alert alert-danger">
         {{error}}
       </div>

src/app/shared/users/preferences/preferences.component.html

@@ -3,6 +3,15 @@
     <div class="panel-body">
         <form *ngIf="user" (submit)="submit()" class="form-horizontal" #userPreferencesForm="ngForm">
 
+            <div class="flex justify-content-end mb-4">
+                <button *ngIf="!isInMode(ComponentMode.VIEW)" type="button"
+                        class="btn btn-text" (click)="onModeChange()">{{'USER_DETAILS.VIEW_BUTTON' | translate}}</button>
+                <button *ngIf="!isInMode(ComponentMode.VIEW)" type="submit" [disabled]="userPreferencesForm.invalid"
+                        class="btn btn-primary">{{'USER_DETAILS.SUBMIT_BUTTON' | translate}}</button>
+                <button *ngIf="isInMode(ComponentMode.VIEW) && isModeAllowed(ComponentMode.EDIT)" type="button"
+                        class="btn btn-text" (click)="onModeChange()">{{'USER_DETAILS.EDIT_BUTTON' | translate}}</button>
+            </div>
+
             <div class="form-group" [ngClass]="{'has-error':  defaultDomain.invalid && (defaultDomain.dirty || defaultDomain.touched),
  			    		 	'has-success': defaultDomain.valid && (defaultDomain.dirty || defaultDomain.touched)}">
                 <label for="defaultDomain" class="col-sm-2 control-label">{{'USER_DETAILS.DEFAULT_DOMAIN' | translate}}:</label>
@@ -15,12 +24,6 @@
                 </div>
             </div>
 
-            <button *ngIf="!isInMode(ComponentMode.VIEW)" type="button"
-                    class="btn btn-default" (click)="onModeChange()">{{'USER_DETAILS.VIEW_BUTTON' | translate}}</button>
-            <button *ngIf="!isInMode(ComponentMode.VIEW)" type="submit" [disabled]="userPreferencesForm.invalid"
-                    class="btn btn-danger">{{'USER_DETAILS.SUBMIT_BUTTON' | translate}}</button>
-            <button *ngIf="isInMode(ComponentMode.VIEW) && isModeAllowed(ComponentMode.EDIT)" type="button"
-                    class="btn btn-default" (click)="onModeChange()">{{'USER_DETAILS.EDIT_BUTTON' | translate}}</button>
         </form>
     </div>
 </div>

src/app/shared/users/ssh-keys/ssh-keys.component.html

 <div style="margin-bottom: 120px;" class="panel panel-default">
     <div class="panel-heading">{{'SSH_KEYS.HEADER' | translate}}</div>
     <div class="panel-body">
+        <div class="flex justify-content-end mb-4">
+            <app-new-ssh-key (out)="getData()"></app-new-ssh-key>
+        </div>
         <table class="table table-hover" aria-describedby="User ssh keys table">
             <thead>
             <tr>
@@ -22,8 +25,5 @@
             </tr>
             </tbody>
         </table>
-      <div>
-          <app-new-ssh-key (out)="getData()"></app-new-ssh-key>
-      </div>
     </div>
 </div>

src/app/welcome/login/login.component.html

@@ -56,7 +56,7 @@
         {{'RESET_PASSWORD.MODAL.BODY' | translate}}
     </div>
     <div class="nmaas-modal-footer">
-        <button type="button" class="btn btn-default"
+        <button type="button" class="btn btn-primary"
                 routerLink="/welcome/login">{{'RESET_PASSWORD.MODAL.CLOSE_BUTTON' | translate}}</button>
     </div>
 </nmaas-modal>

src/app/welcome/passwordreset/password-reset.component.html

@@ -46,7 +46,7 @@
         </div>
         <div *ngIf="!user" class="form-group form-group-sm">
           <p class="alert alert-danger" style="text-align: center">{{'RESET_PASSWORD.INVALID_TOKEN' | translate}}</p>
-          <button class="btn btn-default text-center center-block" (click)="goBack()" type="button">{{'RESET_PASSWORD.GO_BACK' | translate}}</button>
+          <button class="btn btn-primary text-center center-block" (click)="goBack()" type="button">{{'RESET_PASSWORD.GO_BACK' | translate}}</button>
         </div>
       </div>
     </div>