promocode success label

src/app/cart/cart.page.html

@@ -166,12 +166,15 @@
                             </div> -->
                             <hr />
                             <div class="coupon_code">
-                                <input class="" placeholder="COUPON CODE: GET50" #promo /><button class="add_btn" (click)="promoApply(promo.value)">
-                                    APPLY
-                                </button>
-                                <span *ngIf="discountApplied" style="color: red">Promocode applied successfully
+                                <div class="promo-row">
+                                    <input class="" placeholder="COUPON CODE: GET50" #promo /><button class="add_btn" (click)="promoApply(promo.value)">
+                                        APPLY
+                                    </button>
+                                </div>
+                                <span *ngIf="discountApplied" class="promo-success">Promocode applied successfully
                                 </span>
                             </div>
+
                             <br />
 
                             <h6>

src/app/cart/cart.page.scss

@@ -205,35 +205,44 @@
                 }
                 .coupon_code {
                     padding-top: 20px;
-                    padding-bottom: 50px;
+                    padding-bottom: 40px;
                     border-bottom: 1px solid #b0aec7;
-                    display: flex;
-                    justify-content: space-between;
-                    input {
-                        width: 75%;
-                        border: 1px solid #b0aec7;
-                        border-radius: 20px;
-                        height: 35px;
-                        padding-left: 20px;
-                        font-weight: 900;
-                        color: #29285b;
-                        outline: none;
-                        transition: all .4s ease-in-out;
-                        &::placeholder {
-                            color: rgba(215, 213, 228, 1);
+                    .promo-row {
+                        display: flex;
+                        justify-content: space-between;
+                        input {
+                            width: 75%;
+                            border: 1px solid #b0aec7;
+                            border-radius: 20px;
+                            height: 35px;
+                            padding-left: 20px;
+                            font-weight: 900;
+                            color: #29285b;
+                            outline: none;
+                            transition: all .4s ease-in-out;
+                            &::placeholder {
+                                color: rgba(215, 213, 228, 1);
+                            }
+                            &:focus {
+                                border: 1px solid #f3d09f;
+                                box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
+                            }
                         }
-                        &:focus {
-                            border: 1px solid #f3d09f;
-                            box-shadow: 3px 3px 6px 0px rgba(202, 154, 83, 0.11);
+                        .add_btn {
+                            color: #29285b;
+                            width: 25%;
+                            height: 35px;
+                            background: transparent;
+                            font-size: 17px;
+                            font-weight: bolder;
                         }
                     }
-                    .add_btn {
-                        color: #29285b;
-                        width: 25%;
-                        height: 35px;
-                        background: transparent;
-                        font-size: 17px;
-                        font-weight: bolder;
+                    .promo-success {
+                        color: #31b131;
+                        font-size: 16px;
+                        text-align: left;
+                        display: block;
+                        margin-top: 5px;
                     }
                 }
                 .total_div {

src/app/productdetail/productdetail.page.scss

@@ -134,12 +134,11 @@
                         top: 0px;
                         bottom: 0px;
                         padding: 4px;
-                        padding-top: 35px;
-                        padding-bottom: 35px;
                         text-align: center;
                         display: flex;
                         align-items: center;
                         font-size: 14px;
+                        justify-content: center;
                     }
                     #custom_check_button label {
                         width: 100%;