JDS Components

src/base/variable.less

@@ -23,9 +23,8 @@
 // @PrimaryFont: 'Inter', sans-serif;
 
 // @WhiteColor: #ffffff;
-@PrimaryTextColor: #36cc9b;
+@PrimaryTextColor: #1ECCB0;
 // @LabelColor: #9b9b9b;
-
 // @BackgroundColor: #f9f9f9;
 
 // @PlaceholderColor: #a4a4a4;
@@ -86,7 +85,7 @@
 @LabelColor: #9b9b9b;
 @BackgroundColor: #f9f9f9;
 @PlaceholderColor: #a4a4a4;
-@HoverColor: #f3f3f3;
+@HoverColor: #1ECCB0;
 @WarningColor: #f5a300;
 @InfoColor: #605ae0;
 @SuccessColor: #0a5f23;
@@ -132,8 +131,8 @@
 @ColorPrimary20Dark: var(--ColorPrimary20Dark, #16164b);
 @ColorPrimary30: var(--ColorPrimary30, #9999ff);
 @ColorPrimary40: var(--ColorPrimary40, #6464ff);
-@ColorPrimary50: var(--ColorPrimary50, #3535f3);
-@ColorPrimary60: var(--ColorPrimary60, #000093);
+@ColorPrimary50: var(--ColorPrimary50, #000000);
+@ColorPrimary60: var(--ColorPrimary60, #1ECCB0);
 @ColorPrimary70: var(--ColorPrimary70, #00004c);
 @ColorPrimary80: var(--ColorPrimary80, #010029);
 @ColorPrimaryDisabled: var(--ColorPrimaryDisabled, rgba(0, 0, 0, 0));

src/components/NBtn/NBtn.less

@@ -2,6 +2,12 @@
 
 .n-button {
     height: 4rem;
+    padding: 10px 20px;
+    border: 1px solid #ddd;
+    color: @BlackColor;
+    background-color: @PrimaryTextColor!important;
+    border-radius: 4px;
+    font-size: 14px;
     cursor: pointer;
     box-shadow: none;
     font-family: @PrimaryFont;
@@ -19,6 +25,12 @@
     padding: 0rem 2rem;
     border-radius: 0.3rem;
     color: @WhiteColor;
+    height: 32px; 
+    border-radius: 1000px; 
+    justify-content: center; 
+    align-items: center;
+    font-weight: 700; 
+    line-height: 13px; 
 
     &:disabled {
         cursor: not-allowed;
@@ -72,6 +84,36 @@
     }
 }
 
+.n-button-add {
+    background-image: url("../../assets/ic_add.png");
+    background-repeat: no-repeat;
+    background-color: @PrimaryTextColor;
+    color: @BlackColor;
+    cursor: pointer;
+    border-radius: 3250px;
+    padding: 10px 21px 7px 10px;
+    display: flex;
+    flex-direction: row;
+    gap: 26px;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+    background-position: calc(100% - 3px) center;
+    width: 70px;
+  }
+  .n-button-delete {
+    position: absolute;
+    background-image: url("../../assets/ic_remove.png");
+    background-repeat: no-repeat;
+    cursor: pointer;
+    align-items: center;
+    background-position: calc(100% - 3px) center;
+    background-size: 15px;
+    padding: 10px 21px 7px 10px;
+    font-size: 12px;
+  }
+
 .hover-state {
     pointer-events: none;
 }
@@ -217,7 +259,7 @@
 }
 
 .n-button-rounded {
-    border-radius: 40px;
+    border-radius: 1000px;
 }
 
 .n-button-large {
@@ -232,7 +274,7 @@
 }
 
 .n-button-mid {
-    height: 4.8rem;
+   // height: 4.8rem;
     font-size: @BaseFontSize + 3;
     line-height: 2.5rem;
     min-width: 4.8rem;

src/components/NBtn/NBtn.vue

@@ -62,8 +62,8 @@ export default {
                 icon: this.icon,
                 size:this.size,
                 iconColor:this.iconColor,
-                flat: this.flat,
-                stroke: this.stroke,
+                //flat: this.flat,
+                //stroke: this.stroke,
             }
         }, this.$slots.default)
 
@@ -77,7 +77,9 @@ export default {
                 'n-button-large': this.size == 'large',
                 'n-button-mid': this.size == 'medium',
                 'n-button-small': this.size == 'small',
-                'n-button-focused': this.focused
+                'n-button-focused': this.focused,
+                'n-button-add': this.theme == 'add',
+                'n-button-delete': this.theme == 'delete'
             }],
             attrs: {
                 href: this.href,

src/components/NBtn/NBtnContent.vue

@@ -1,101 +1,82 @@
 <template>
-<div class="n-button-content" :class="'nitrozenButtonClass'">
-    <div class="social-icon" v-if="icon">
-        <nitrozen-icon v-if="icon" :name="icon" :size="getIconSize" :color="iconColor"/>
+    <div class="n-button-content abcd" :class="{'disable-click':showProgress}">
+        <div class="social-icon" v-if="icon">
+            <nitrozen-icon v-if="icon" :name="icon" :size="getIconSize" :color="iconColor"/>
+        </div>
+        <slot/>
+        <div v-if="showProgress" class="n-btn-spin">
+            <img class="n-btn-spinner" src="https://cdn.pixelbin.io/v2/falling-surf-7c8bb8/fyprod/wrkr/misc/general/free/original/loader.gif">
+        </div>
     </div>
-    <slot/>
-    <div v-if="showProgress" class="n-btn-spin">
-        <img class="n-btn-spinner" src="https://cdn.pixelbin.io/v2/falling-surf-7c8bb8/fyprod/wrkr/misc/general/free/original/loader.gif">
-    </div>
-</div>
-</template>
-
-<script>
-import NIcon from './../NIcon/NIcon.vue';
-export default {
-    components: {
-    'nitrozen-icon': NIcon,
-  },
-    name: 'nitrozen-button-content',
-    props: {
-        showProgress: {
-            type: Boolean,
-            default: false
-        },
-        icon: {
-            type: String
-        },
-        size: {
-            type: String
-        },
-        iconColor:{
-            type:String,
-            default:"#FFFFFF"
-        },
-        flat: {
-            type: Boolean
-        },
-        stroke: {
-            type: Boolean
+    </template>
+
+    <script>
+    import NIcon from './../NIcon/NIcon.vue';
+    export default {
+        components: {
+        'nitrozen-icon': NIcon,
+      },
+        name: 'nitrozen-button-content',
+        props: {
+            showProgress: {
+                type: Boolean,
+                default: false
+            },
+            icon: {
+                type: String
+            },
+            size: {
+                type: String
+            },
+            iconColor:{
+                type:String,
+                default:"#FFFFFF"
+            }
         },
-        theme: {
-            type: String
+        computed: {
+        getIconSize(){
+          let iconSize = {
+            'small': 10,
+            'medium': 14,
+            'large': 18
+          }
+          return iconSize[this.size]
         }
-    },
-    computed: {
-    getIconSize(){
-      let iconSize = {
-        'small': 10,
-        'medium': 14,
-        'large': 18
       }
-      return iconSize[this.size]
-    },
-    nitrozenButtonClass() {
-            return {
-                'disable-click':this.showProgress,
-                'n-flat-button': this.flat == true,
-                'n-flat-button-primary': this.flat == true && this.theme == 'primary',
-                'n-flat-button-secondary': this.flat == true && this.theme == 'secondary',
-                'n-button-stroke': this.stroke == true,
-                'n-button-stroke-primary': this.stroke == true && this.theme == 'primary',
-                'n-button-stroke-secondary': this.stroke == true && this.theme == 'secondary',
-        }
     }
-  }
-}
-</script>
-
-<style lang="less">
-.n-button-content {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    justify-content: center;
-    gap: 10px;
-}
-.n-btn-spinner{
-  text-align:center;
-}
-
-.n-btn-spin{
-  display: flex;
-  justify-content: center;
-}
-.social-icon{
-    float: left;
-    position: relative;
-    // left: -20px;
-    display: flex;
-    img{
-        background: white;
+    </script>
+
+    <style lang="less">
+    .n-button-content {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        justify-content: center;
+        gap: 10px;
+    }
+    .n-btn-spinner{
+      text-align:center;
+    }
+
+    .n-btn-spin{
+      display: flex;
+      justify-content: center;
+    }
+    .social-icon{
+        float: left;
+        position: relative;
+        // left: -20px;
+        display: flex;
+        img{
+            background: white;
+        }
+        svg{
+            height: 24px;
+            width: 24px;
+        }
     }
-    svg{
-        height: 24px;
-        width: 24px;
+    .disable-click {
+        pointer-events: none;
     }
-}
-.disable-click {
-    pointer-events: none;
-}
-</style>
+    </style>
+

src/components/NCode/NCode.less

@@ -17,11 +17,18 @@
   display: block;
   -webkit-tap-highlight-color: transparent;
   outline: none;
+  border: none;
   text-align: center;
-  border-radius: 1.6rem;
+  //border-radius: 1.6rem;
   height: 4.8rem;
   width: 4.8rem;
-
+  border-bottom: 2px solid @ColorPrimary80;
+  padding-bottom: @SpacingXs;
+  color:@ColorPrimaryGrey100;
+  border-radius: 0;
+  margin-bottom: 1px;  
+  font-size: 16px;
+  font-weight: bold;  
   &:focus,
   &:hover {
     border-color: @ColorPrimary60;
@@ -30,10 +37,14 @@
     @media screen and (max-width: 425px) {
       height: 3rem;
       width: 3rem;
-      border-radius: 1rem;
+      //border-radius: 1rem;
     }
 }
 
+.bounce {
+  animation: pulse .3s ease-in-out alternate;
+}
+
 .n-code-input-field:hover::placeholder {
   color: @ColorPrimaryGrey80;
   font-weight: 500;

src/components/NCode/NCode.vue

@@ -2,7 +2,7 @@
   <div class="n-code-main">
     <div class="n-code-label-container">
       <label class="n-code-label">
-        {{ label }} {{ required ? '*' : '' }}
+        OTP
         <nitrozen-tooltip
           v-if="tooltip"
           :tooltipText="tooltip"
@@ -61,7 +61,7 @@ export default {
   props: {
     fields: {
       type: Number,
-      default: 4,
+      default: 6,
     },
     label: {
       type: String,
@@ -96,9 +96,7 @@ export default {
     toolTipIcon: {
       type: String,
     },
-    getCode: {
-      type: Function,
-    },
+
     id: {
       type: [Number, String],
       default: () => 'nitrozen-input' + NitrozenUuid(),
@@ -107,8 +105,12 @@ export default {
   mounted() {
     let codeArrEnum = Array(this.fields).fill('');
     this.codeArr = [...codeArrEnum];
+
   },
   methods: {
+    getCode: function () {
+
+    },
     onInputChange: function (event, index) {
       // if the target event is empty then delete and go back
       // Replace the user input to allow only numbers