Merge pull request #164 from takenet/feature/448400_rebranding_key_va…

…lue_component Rebranding changes in KeyValue component
takenet · May 25, 2023 · cadc8a8 · cadc8a8
2 parents e00af67 + 71dbae7
commit cadc8a8
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 9 deletions.
diff --git a/src/components/blipInputDpr/blipInputDpr.scss b/src/components/blipInputDpr/blipInputDpr.scss
@@ -16,6 +16,10 @@
     input::-ms-reveal {
         display: none;
     }
+
+    .icon-check {
+        color: $color-success;
+    }
 }
 
 // Needed to force padding despite icon class

diff --git a/src/components/blipInputDpr/blipInputDprView.html b/src/components/blipInputDpr/blipInputDprView.html
@@ -33,11 +33,15 @@
             autocomplete="{{$ctrl.inputAutocomplete}}"
             placeholder="{{$ctrl.placeholder}}"
             id="{{$ctrl.fieldId}}" />
-        <i ng-if="!($ctrl.unmaskablePassword && $ctrl.type === 'password')"
-            class="dib fr mh2 icon icon-material bp-c-true-dark bp-input-check"
-            ng-class="{ 'invisible': $ctrl.disabled || focused || !$ctrl.parentForm[$ctrl.fieldName].$viewValue || !$ctrl.parentForm[$ctrl.fieldName].$valid }">
-            &#xE5CA;
-        </i>
+
+        <bds-icon
+            ng-if="!($ctrl.unmaskablePassword && $ctrl.type === 'password')"
+            name="checkball"
+            theme="solid"
+            class="dib fr mh2 icon-check"
+            ng-class="{ 'invisible': $ctrl.disabled || focused || !$ctrl.parentForm[$ctrl.fieldName].$viewValue || !$ctrl.parentForm[$ctrl.fieldName].$valid }"
+        >
+        </bds-icon>
         <img
             icon-src="EyePassword"
             class="mh2 bp-input-check pb2"

diff --git a/src/components/keyValue/KeyValue.scss b/src/components/keyValue/KeyValue.scss
@@ -24,4 +24,15 @@
             left: -12px;
         }
     }
+
+    .remove-item {
+        &:hover{
+            color: $color-content-default;
+            background: transparent;
+        }
+    }
+
+    .input-text {
+        width: 43%;
+    }
 }
diff --git a/src/components/keyValue/KeyValueItemView.html b/src/components/keyValue/KeyValueItemView.html
@@ -14,15 +14,21 @@
         parent-form="$ctrl.formReference"
         field-name="key"
         type="text"
-        class="w-45"
+        class="input-text"
         required></blip-input-dpr>
     <blip-input-dpr
         ng-model="$ctrl.value"
         label="{{ $ctrl.valuePlaceholder || 'Value' }}"
         parent-form="$ctrl.formReference"
         field-name="value"
         type="text"
-        class="w-45"
+        class="input-text"
         required></blip-input-dpr>
-    <i ng-click="$ctrl.delete()" class="self-center icon-close lh-solid"></i>
+    <bds-button-icon 
+        variant="secondary" 
+        icon="trash" 
+        size="short" 
+        class="fr mt3 remove-item" 
+        ng-click="$ctrl.delete()">
+    </bds-button-icon>
 </div>
diff --git a/src/components/keyValue/KeyValueView.html b/src/components/keyValue/KeyValueView.html
@@ -20,7 +20,7 @@
     </ul>
 </form>
 <!-- Add item form -->
-<div class="ph4 flex justify-center">
+<div class="flex justify-center">
     <button type="button" ng-click="$ctrl.addNewItem()"
         class="bp-btn bp-btn--bot bp-btn--dashed flex justify-center items-center h3-1 w-100 b"
         translate>