Improve style and correct typos (#16498)

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/base/left-side-nav/project-quotas/project-quotas/edit-project-quotas/edit-project-quotas.component.scss

@@ -23,7 +23,7 @@
     }
 
     .quota-input {
-      width: 1.5rem;
+      width: 2.25rem;
       margin-left: 1rem;
       margin-right: 0.2rem;
     }
@@ -38,8 +38,8 @@
 
     .clr-select-wrapper {
       position: absolute;
-      right: -5rem;
+      right: -8rem;
-      top: -0.08rem;
+      top: -0.11rem;
     }
 
   }
@@ -58,7 +58,7 @@
     }
 
     .clr-select-wrapper {
-      right: -4rem;
+      right: -5.5rem;
     }
   }
 }
@@ -72,16 +72,16 @@ select {
 .progress-div {
   position: absolute;
   padding-right: 0.6rem;
-  width: 9rem;
+  width: 7.5rem;
   top: 0.2rem;
   right: -13.3rem;
 }
 
 .progress-label {
   position: absolute;
-  right: -3rem;
+  right: -4rem;
   margin-top: 0;
-  width: 4rem;
+  width: 5rem;
   font-weight: 100;
   font-size: 10px;
 }
@@ -92,4 +92,4 @@ select {
       margin-left: -12px;
     }
   }
-}
+}

src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.html

@@ -108,7 +108,7 @@
                   <clr-dropdown class="width-tag-label">
                     <button type="button" class="width-100 dropdown-toggle btn btn-link statistic-data label-text" clrDropdownTrigger>
                       <ng-template ngFor let-label [ngForOf]="filter.value.value" let-m="index">
-                        <hbr-label-piece [hasIcon]="false" [label]="getLabel(label)" [labelWidth]="84"></hbr-label-piece>
+                        <hbr-label-piece *ngIf="m < 1" [hasIcon]="false" [label]="getLabel(label)" [labelWidth]="84"></hbr-label-piece>
                       </ng-template>
                       <span class="ellipsis color-white-dark" *ngIf="filter.value.value.length>1">···</span>
                       <div *ngFor="let label1 of filter.value.value;let k = index" hidden="true">

src/portal/src/app/base/left-side-nav/system-robot-accounts/list-all-projects/list-all-projects.component.html

@@ -7,7 +7,7 @@
             </button>
             <clr-dropdown-menu [style.height.px]="230" clrPosition="bottom-left" *clrIfOpen>
                 <div>
-                    <button class="btn btn-link btn-sm select-all-for-dropdown" (click)="selectAllPermissionOrUnselectAll(defaultAccesses);resetAccess(defaultAccesses)">
+                    <button class="btn btn-link btn-sm select-all-for-dropdown ml-20px" (click)="selectAllPermissionOrUnselectAll(defaultAccesses);resetAccess(defaultAccesses)">
                         <span *ngIf="isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.SELECT_ALL" | translate}}</span>
                         <span *ngIf="!isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.UNSELECT_ALL" | translate}}</span>
                     </button>

src/portal/src/app/base/left-side-nav/system-robot-accounts/new-robot/new-robot.component.html

@@ -28,7 +28,7 @@
                                    pattern='^[a-z0-9]+(?:[._-][a-z0-9]+)*$'
                                    maxLengthExt="255"
                                    autocomplete="off"
-                                   size="30" name="name" #name="ngModel"  (input)="inputName()">
+                                   size="30" name="name" #name="ngModel"  (keyup)="inputName()">
                             <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                             <span class="spinner spinner-inline" [hidden]="!checkNameOnGoing"></span>
                         </div>

src/portal/src/app/base/left-side-nav/system-robot-accounts/new-robot/new-robot.component.ts

@@ -86,7 +86,7 @@ export class NewRobotComponent implements OnInit, OnDestroy {
                 if (this.isEditMode && this.originalRobotForEdit && this.originalRobotForEdit.name === name) {
                   return false;
                 }
-                return  name.length > 0;
+                return  name?.length > 0;
               }),
               switchMap((name) => {
                 this.isNameExisting = false;

src/portal/src/app/base/project/robot-account/add-robot/add-robot.component.html

@@ -28,7 +28,7 @@
                                    pattern='^[a-z0-9]+(?:[._-][a-z0-9]+)*$'
                                    maxLengthExt="255"
                                    autocomplete="off"
-                                   size="30" name="name" #name="ngModel"  (input)="inputName()">
+                                   size="30" name="name" #name="ngModel"  (keyup)="inputName()">
                             <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                             <span class="spinner spinner-inline" [hidden]="!checkNameOnGoing"></span>
                         </div>

src/portal/src/app/base/project/robot-account/add-robot/add-robot.component.ts

@@ -75,7 +75,7 @@ export class AddRobotComponent implements OnInit, OnDestroy {
                 if (this.isEditMode && this.originalRobotForEdit && this.originalRobotForEdit.name === name) {
                   return false;
                 }
-                return  name.length > 0;
+                return  name?.length > 0;
               }),
               switchMap((name) => {
                 this.isNameExisting = false;

src/portal/src/i18n/lang/en-us-lang.json

@@ -364,7 +364,7 @@
         "PULL": "Pull",
         "FILTER_PLACEHOLDER": "Filter Robot Accounts",
         "ROBOT_NAME": "Cannot contain special characters(~#$%) and maximum length should be 255 characters.",
-        "ACCOUNT_EXISTING": "Robot Account is already exists.",
+        "ACCOUNT_EXISTING": "Robot Account already exists.",
         "ALERT_TEXT": "This is the only time to copy this secret.You won't have another opportunity",
         "CREATED_SUCCESS": "Created '{{param}}' successfully.",
         "COPY_SUCCESS": "Copy secret successfully of '{{param}}'",