lunch

angular.json

@@ -37,6 +37,7 @@
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
               "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/popper.js/dist/umd/popper.js",
               "node_modules/bootstrap/dist/js/bootstrap.js",
               "node_modules/slick-carousel/slick/slick.min.js"
             ],

package-lock.json

@@ -7303,6 +7303,11 @@
         "find-up": "^2.1.0"
       }
     },
+    "popper.js": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+    },
     "portfinder": {
       "version": "1.0.21",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.21.tgz",

package.json

@@ -24,6 +24,7 @@
     "jquery": "^3.4.1",
     "ng5-slider": "^1.2.4",
     "ngx-slick-carousel": "^0.4.4",
+    "popper.js": "^1.15.0",
     "rxjs": "~6.3.3",
     "slick-carousel": "^1.8.1",
     "tslib": "^1.9.0",

src/app/body/planning/planning.component.scss

@@ -713,19 +713,49 @@
                     }
                 }
                 .favourite_vendors{
-                    .fav_vendors{
-                        display: inline-block;
-                        margin-bottom: 10px;
-                        h3{
-                            padding-left: 10px;
-                            font-weight: 400;
-                            font-size: 16px;
-                            color: #767676;
-                            display: inline;
+                    .fav_top{
+                        width: 82%;
+                        .fav_vendors{
+                            display: inline-block;
+                            margin-bottom: 10px;
+                            h3{
+                                padding-left: 10px;
+                                font-weight: 400;
+                                font-size: 16px;
+                                color: #767676;
+                                display: inline;
+                            }
+                        }
+                        .filter_icon{
+                            float: right;
+                            .dropdown{
+                                button{
+                                    text-align: left;
+                                    width: 100%;
+                                    color: rgba(0, 0, 0, 0.87);
+                                    font-size: 16px;
+                                    padding-left: 20px;
+                                    padding-right: 20px;
+                                    height: 40px;
+                                    outline: none;
+                                    border: 1px solid #9e9e9e;
+                                    background: transparent;
+                                    &:after{
+                                        margin-top: 8px;
+                                        margin-left: 10px;
+                                        float: right;
+                                    }
+                                }
+                                .dropdown-menu{
+                                    width: 100%;
+                                    .dropdown-item{
+                                        color: #b638b6;
+                                        padding-top: 7px;
+                                        padding-bottom: 7px;
+                                    }
+                                }
+                            }
                         }
-                    }
-                    .filter_icon{
-                        float: right;
                     }
                     .vendor_left_side{
                         background-color: #f6f5f5;
@@ -903,12 +933,16 @@
                                     list-style: none;
                                     padding: 10px;
                                     input{
+                                        outline: none;
                                         width: 100%;
                                         height: 40px;
                                         border: 1px solid #9e9e9e;
+                                        padding-left: 10px;
                                         &::placeholder{
                                             color: #a8a8a8;
-                                            padding-left: 10px;
+                                        }
+                                        &:focus{
+                                            border: 2px solid #b638b6;
                                         }
                                     }
                                     label{
@@ -916,6 +950,30 @@
                                         color: #9e9e9e;
                                         display: block;
                                     }
+                                    .dropdown{
+                                        button{
+                                            text-align: left;
+                                            width: 100%;
+                                            color: #6f6f6f;
+                                            font-size: 14px;
+                                            height: 40px;
+                                            outline: none;
+                                            border: 1px solid #9e9e9e;
+                                            background: transparent;
+                                            &:after{
+                                                margin-top: 8px;
+                                                float: right;
+                                            }
+                                        }
+                                        .dropdown-menu{
+                                            width: 100%;
+                                            .dropdown-item{
+                                                color: #b638b6;
+                                                padding-top: 7px;
+                                                padding-bottom: 7px;
+                                            }
+                                        }
+                                    }
                                     select{
                                         outline: none;
                                         width: 100%;
@@ -929,7 +987,7 @@
                                     }
                                 }
                             }
-                            button{
+                            .bottom_button{
                                 outline: none;
                                 color: #fff;
                                 font-size: 18px;
@@ -974,11 +1032,15 @@
                         width: 100%;
                         height: 40px;
                         border: 1px solid #d7d7d7;
+                        outline: none;
                         &::placeholder{
                             color: #d7d7d7;
                             padding-left: 10px;
                             font-size: 16px;
                         }
+                        &:focus{
+                            border: 1px solid #b638b6;
+                        }
                     }
                     button{
                         outline: none;