From 06344f83386ac5be64e4949bf39aba1e2a785b59 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sun, 28 Jun 2020 01:43:07 +0300
Subject: [PATCH] Move ripple config to $primevue

---
 public/themes/arya-blue/theme.css             | 22 ++++++++++++----
 public/themes/arya-green/theme.css            | 22 ++++++++++++----
 public/themes/arya-orange/theme.css           | 22 ++++++++++++----
 public/themes/arya-purple/theme.css           | 22 ++++++++++++----
 public/themes/bootstrap4-dark-blue/theme.css  | 22 ++++++++++++----
 .../themes/bootstrap4-dark-purple/theme.css   | 22 ++++++++++++----
 public/themes/bootstrap4-light-blue/theme.css | 22 ++++++++++++----
 .../themes/bootstrap4-light-purple/theme.css  | 22 ++++++++++++----
 public/themes/luna-amber/theme.css            | 22 ++++++++++++----
 public/themes/luna-blue/theme.css             | 22 ++++++++++++----
 public/themes/luna-green/theme.css            | 22 ++++++++++++----
 public/themes/luna-pink/theme.css             | 22 ++++++++++++----
 public/themes/md-dark-deeppurple/theme.css    | 26 ++++++++++++-------
 public/themes/md-dark-indigo/theme.css        | 26 ++++++++++++-------
 public/themes/md-light-deeppurple/theme.css   | 26 ++++++++++++-------
 public/themes/md-light-indigo/theme.css       | 26 ++++++++++++-------
 public/themes/mdc-dark-deeppurple/theme.css   | 26 ++++++++++++-------
 public/themes/mdc-dark-indigo/theme.css       | 26 ++++++++++++-------
 public/themes/mdc-light-deeppurple/theme.css  | 26 ++++++++++++-------
 public/themes/mdc-light-indigo/theme.css      | 26 ++++++++++++-------
 public/themes/nova-accent/theme.css           | 22 ++++++++++++----
 public/themes/nova-alt/theme.css              | 22 ++++++++++++----
 public/themes/nova-vue/theme.css              | 22 ++++++++++++----
 public/themes/nova/theme.css                  | 22 ++++++++++++----
 public/themes/rhea/theme.css                  | 22 ++++++++++++----
 public/themes/saga-blue/theme.css             | 22 ++++++++++++----
 public/themes/saga-green/theme.css            | 22 ++++++++++++----
 public/themes/saga-orange/theme.css           | 22 ++++++++++++----
 public/themes/vela-blue/theme.css             | 22 ++++++++++++----
 public/themes/vela-green/theme.css            | 22 ++++++++++++----
 public/themes/vela-orange/theme.css           | 22 ++++++++++++----
 public/themes/vela-purple/theme.css           | 22 ++++++++++++----
 src/App.vue                                   |  4 +--
 src/AppConfigurator.vue                       | 20 +++++++-------
 src/assets/styles/app/_config.scss            | 11 ++++----
 src/components/ripple/Ripple.js               | 10 ++++---
 src/main.js                                   |  3 ++-
 src/views/setup/Setup.vue                     |  8 ++++++
 38 files changed, 577 insertions(+), 215 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 7a5c43a86..2a34fb40f 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -440,6 +440,7 @@
   border-color: #64B5F6;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.5rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #121212;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #383838;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #383838;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #383838;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #383838;
@@ -826,7 +833,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #121212;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #383838;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #383838;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #383838;
+}
 
 .p-password-panel {
   padding: 1rem;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 20100a210..7613edbaa 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -440,6 +440,7 @@
   border-color: #81C784;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.5rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #121212;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #383838;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #383838;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #383838;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #383838;
@@ -826,7 +833,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #121212;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #383838;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #383838;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #383838;
+}
 
 .p-password-panel {
   padding: 1rem;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 937954ac1..9252b3e99 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -440,6 +440,7 @@
   border-color: #FFD54F;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.5rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #121212;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #383838;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #383838;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #383838;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #383838;
@@ -826,7 +833,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #121212;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #383838;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #383838;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #383838;
+}
 
 .p-password-panel {
   padding: 1rem;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 8b8711c25..4eb834e40 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -440,6 +440,7 @@
   border-color: #BA68C8;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.5rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #121212;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #383838;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #383838;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #383838;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #383838;
@@ -826,7 +833,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #121212;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #383838;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #383838;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #383838;
+}
 
 .p-password-panel {
   padding: 1rem;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index f5db5f110..732ec9bca 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -440,6 +440,7 @@
   border-color: #8dd0ff;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.75rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #20262e;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #3f4b5b;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #3f4b5b;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #3f4b5b;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #3f4b5b;
@@ -826,7 +833,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #20262e;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #3f4b5b;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #3f4b5b;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #3f4b5b;
+}
 
 .p-password-panel {
   padding: 1.25rem;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 5be45a856..5bcd2c536 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -440,6 +440,7 @@
   border-color: #c298d8;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.75rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #20262e;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #3f4b5b;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #3f4b5b;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #3f4b5b;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #3f4b5b;
@@ -826,7 +833,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #20262e;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #3f4b5b;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #3f4b5b;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #3f4b5b;
+}
 
 .p-password-panel {
   padding: 1.25rem;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 2a1512fb3..9301d4f57 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -440,6 +440,7 @@
   border-color: #007bff;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.75rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #6c757d;
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: rgba(0, 0, 0, 0.03);
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: rgba(0, 0, 0, 0.03);
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid rgba(0, 0, 0, 0.125);
@@ -826,7 +833,7 @@
   color: #6c757d;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #6c757d;
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: rgba(0, 0, 0, 0.03);
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: rgba(0, 0, 0, 0.03);
+}
 
 .p-password-panel {
   padding: 1.25rem;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index b01d228ad..b7b1e3140 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -440,6 +440,7 @@
   border-color: #883cae;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.75rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #6c757d;
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: rgba(0, 0, 0, 0.03);
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: rgba(0, 0, 0, 0.03);
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid rgba(0, 0, 0, 0.125);
@@ -826,7 +833,7 @@
   color: #6c757d;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #6c757d;
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: rgba(0, 0, 0, 0.03);
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: rgba(0, 0, 0, 0.03);
+}
 
 .p-password-panel {
   padding: 1.25rem;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 869820d12..422db0f68 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -440,6 +440,7 @@
   border-color: #FFE082;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.429rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #191919;
+  background: transparent;
   color: #dedede;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #4b4b4b;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #4b4b4b;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #4b4b4b;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #191919;
@@ -826,7 +833,7 @@
   color: #9b9b9b;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #191919;
+  background: transparent;
   color: #dedede;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #4b4b4b;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #4b4b4b;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #4b4b4b;
+}
 
 .p-password-panel {
   padding: 0.571rem 1rem;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 5524d1d31..94e40ed5c 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -440,6 +440,7 @@
   border-color: #81D4FA;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.429rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #191919;
+  background: transparent;
   color: #dedede;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #4b4b4b;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #4b4b4b;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #4b4b4b;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #191919;
@@ -826,7 +833,7 @@
   color: #9b9b9b;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #191919;
+  background: transparent;
   color: #dedede;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #4b4b4b;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #4b4b4b;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #4b4b4b;
+}
 
 .p-password-panel {
   padding: 0.571rem 1rem;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index a958cbdf7..507e3a1bc 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -440,6 +440,7 @@
   border-color: #C5E1A5;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.429rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #191919;
+  background: transparent;
   color: #dedede;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #4b4b4b;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #4b4b4b;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #4b4b4b;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #191919;
@@ -826,7 +833,7 @@
   color: #9b9b9b;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #191919;
+  background: transparent;
   color: #dedede;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #4b4b4b;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #4b4b4b;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #4b4b4b;
+}
 
 .p-password-panel {
   padding: 0.571rem 1rem;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 5269f4cd4..d0e8a2c45 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -440,6 +440,7 @@
   border-color: #F48FB1;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.429rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #191919;
+  background: transparent;
   color: #dedede;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #4b4b4b;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #4b4b4b;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #4b4b4b;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #191919;
@@ -826,7 +833,7 @@
   color: #9b9b9b;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #191919;
+  background: transparent;
   color: #dedede;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #4b4b4b;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #4b4b4b;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #4b4b4b;
+}
 
 .p-password-panel {
   padding: 0.571rem 1rem;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index dfa1aa1b3..39a09cd3a 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -460,6 +460,7 @@
   border-color: #CE93D8;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 2rem;
 }
@@ -471,7 +472,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #1e1e1e;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -530,9 +531,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: rgba(255, 255, 255, 0.06);
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid rgba(255, 255, 255, 0.12);
@@ -846,7 +853,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #1e1e1e;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -927,10 +934,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: rgba(255, 255, 255, 0.06);
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
 .p-password-panel {
   padding: 1rem;
@@ -4698,10 +4710,6 @@
 .p-panel .p-panel-footer {
   border: 0 none;
 }
-.p-panel .p-panel-header {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
 .p-panel .p-panel-title {
   font-size: 1.25rem;
 }
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 585874f9e..46786120b 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -460,6 +460,7 @@
   border-color: #9FA8DA;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 2rem;
 }
@@ -471,7 +472,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #1e1e1e;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -530,9 +531,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: rgba(255, 255, 255, 0.06);
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid rgba(255, 255, 255, 0.12);
@@ -846,7 +853,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #1e1e1e;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -927,10 +934,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: rgba(255, 255, 255, 0.06);
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
 .p-password-panel {
   padding: 1rem;
@@ -4698,10 +4710,6 @@
 .p-panel .p-panel-footer {
   border: 0 none;
 }
-.p-panel .p-panel-header {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
 .p-panel .p-panel-title {
   font-size: 1.25rem;
 }
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 4be23fdc4..fdfc3da63 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -460,6 +460,7 @@
   border-color: #673AB7;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 2rem;
 }
@@ -471,7 +472,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: rgba(0, 0, 0, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -530,9 +531,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #f5f5f5;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #e0e0e0;
@@ -846,7 +853,7 @@
   color: rgba(0, 0, 0, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: rgba(0, 0, 0, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -927,10 +934,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #f5f5f5;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
 
 .p-password-panel {
   padding: 1rem;
@@ -4698,10 +4710,6 @@
 .p-panel .p-panel-footer {
   border: 0 none;
 }
-.p-panel .p-panel-header {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
 .p-panel .p-panel-title {
   font-size: 1.25rem;
 }
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 9e4bb2c66..55aec53c9 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -460,6 +460,7 @@
   border-color: #3F51B5;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 2rem;
 }
@@ -471,7 +472,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: rgba(0, 0, 0, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -530,9 +531,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #f5f5f5;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #e0e0e0;
@@ -846,7 +853,7 @@
   color: rgba(0, 0, 0, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: rgba(0, 0, 0, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -927,10 +934,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #f5f5f5;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
 
 .p-password-panel {
   padding: 1rem;
@@ -4698,10 +4710,6 @@
 .p-panel .p-panel-footer {
   border: 0 none;
 }
-.p-panel .p-panel-header {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
 .p-panel .p-panel-title {
   font-size: 1.25rem;
 }
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 435de5d03..f1cbff673 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -460,6 +460,7 @@
   border-color: #673AB7;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.75rem;
 }
@@ -471,7 +472,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #1e1e1e;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -530,9 +531,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: rgba(255, 255, 255, 0.06);
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid rgba(255, 255, 255, 0.12);
@@ -846,7 +853,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #1e1e1e;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -927,10 +934,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: rgba(255, 255, 255, 0.06);
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
 .p-password-panel {
   padding: 0.75rem;
@@ -4698,10 +4710,6 @@
 .p-panel .p-panel-footer {
   border: 0 none;
 }
-.p-panel .p-panel-header {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
 .p-panel .p-panel-title {
   font-size: 1.25rem;
 }
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index ce4ffd35d..9f89b3107 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -460,6 +460,7 @@
   border-color: #3F51B5;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.75rem;
 }
@@ -471,7 +472,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #1e1e1e;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -530,9 +531,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: rgba(255, 255, 255, 0.06);
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid rgba(255, 255, 255, 0.12);
@@ -846,7 +853,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #1e1e1e;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -927,10 +934,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: rgba(255, 255, 255, 0.06);
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
 .p-password-panel {
   padding: 0.75rem;
@@ -4698,10 +4710,6 @@
 .p-panel .p-panel-footer {
   border: 0 none;
 }
-.p-panel .p-panel-header {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
 .p-panel .p-panel-title {
   font-size: 1.25rem;
 }
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index d6e709841..39c23ab4a 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -460,6 +460,7 @@
   border-color: #673AB7;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.75rem;
 }
@@ -471,7 +472,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: rgba(0, 0, 0, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -530,9 +531,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #f5f5f5;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #e0e0e0;
@@ -846,7 +853,7 @@
   color: rgba(0, 0, 0, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: rgba(0, 0, 0, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -927,10 +934,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #f5f5f5;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
 
 .p-password-panel {
   padding: 0.75rem;
@@ -4698,10 +4710,6 @@
 .p-panel .p-panel-footer {
   border: 0 none;
 }
-.p-panel .p-panel-header {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
 .p-panel .p-panel-title {
   font-size: 1.25rem;
 }
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 04aa68596..2e5267d81 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -460,6 +460,7 @@
   border-color: #3F51B5;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.75rem;
 }
@@ -471,7 +472,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: rgba(0, 0, 0, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -530,9 +531,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #f5f5f5;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #e0e0e0;
@@ -846,7 +853,7 @@
   color: rgba(0, 0, 0, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: rgba(0, 0, 0, 0.6);
   width: 2.357rem;
   border-top-right-radius: 4px;
@@ -927,10 +934,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #f5f5f5;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
 
 .p-password-panel {
   padding: 0.75rem;
@@ -4698,10 +4710,6 @@
 .p-panel .p-panel-footer {
   border: 0 none;
 }
-.p-panel .p-panel-header {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
 .p-panel .p-panel-title {
   font-size: 1.25rem;
 }
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index da229a9f5..9c20f5a53 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -436,6 +436,7 @@
   border-color: #007ad9;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.429rem;
 }
@@ -447,7 +448,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #848484;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -506,9 +507,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #f4f4f4;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #007ad9;
@@ -822,7 +829,7 @@
   color: #666666;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #848484;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -903,10 +910,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #f4f4f4;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
 
 .p-password-panel {
   padding: 0.571rem 1rem;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index f5ea060e8..646a90c45 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -440,6 +440,7 @@
   border-color: #007ad9;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.429rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #848484;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #f4f4f4;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #333333;
@@ -826,7 +833,7 @@
   color: #666666;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #848484;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #f4f4f4;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
 
 .p-password-panel {
   padding: 0.571rem 1rem;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 2a3ff9923..16b2282db 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -440,6 +440,7 @@
   border-color: #41b883;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.429rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #848484;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #f4f4f4;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #c8c8c8;
@@ -826,7 +833,7 @@
   color: #666666;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #848484;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #f4f4f4;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
 
 .p-password-panel {
   padding: 0.571rem 1rem;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 485121b61..91d48a3c0 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -440,6 +440,7 @@
   border-color: #007ad9;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.429rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #848484;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #f4f4f4;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #c8c8c8;
@@ -826,7 +833,7 @@
   color: #666666;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #848484;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #f4f4f4;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
 
 .p-password-panel {
   padding: 0.571rem 1rem;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index cb18053f0..66c659b2a 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -436,6 +436,7 @@
   border-color: #7B95A3;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.429rem;
 }
@@ -447,7 +448,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #666666;
   width: 2.357rem;
   border-top-right-radius: 2px;
@@ -506,9 +507,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #f4f4f4;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #7B95A3;
@@ -822,7 +829,7 @@
   color: #a6a6a6;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #666666;
   width: 2.357rem;
   border-top-right-radius: 2px;
@@ -903,10 +910,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #f4f4f4;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
 
 .p-password-panel {
   padding: 0.571rem 1rem;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 156c2c0e5..e561e96f4 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -440,6 +440,7 @@
   border-color: #2196F3;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.5rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #6c757d;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #f8f9fa;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #f8f9fa;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #f8f9fa;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #dee2e6;
@@ -826,7 +833,7 @@
   color: #6c757d;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #6c757d;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #f8f9fa;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #f8f9fa;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #f8f9fa;
+}
 
 .p-password-panel {
   padding: 1rem;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 2c76579fd..26f42e5d9 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -440,6 +440,7 @@
   border-color: #4CAF50;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.5rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #6c757d;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #f8f9fa;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #f8f9fa;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #f8f9fa;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #dee2e6;
@@ -826,7 +833,7 @@
   color: #6c757d;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #6c757d;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #f8f9fa;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #f8f9fa;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #f8f9fa;
+}
 
 .p-password-panel {
   padding: 1rem;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index ceaef3279..282d9b61c 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -440,6 +440,7 @@
   border-color: #FFC107;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.5rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #6c757d;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #f8f9fa;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #f8f9fa;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #f8f9fa;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #dee2e6;
@@ -826,7 +833,7 @@
   color: #6c757d;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #ffffff;
+  background: transparent;
   color: #6c757d;
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #f8f9fa;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #f8f9fa;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #f8f9fa;
+}
 
 .p-password-panel {
   padding: 1rem;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 97e6b2bfa..6e66b2f08 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -440,6 +440,7 @@
   border-color: #64B5F6;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.5rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #17212f;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #304562;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #304562;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #304562;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #304562;
@@ -826,7 +833,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #17212f;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #304562;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #304562;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #304562;
+}
 
 .p-password-panel {
   padding: 1rem;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index c48032dc8..5eba49ddf 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -440,6 +440,7 @@
   border-color: #81C784;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.5rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #17212f;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #304562;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #304562;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #304562;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #304562;
@@ -826,7 +833,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #17212f;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #304562;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #304562;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #304562;
+}
 
 .p-password-panel {
   padding: 1rem;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 605038ea7..d5f8bd65e 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -440,6 +440,7 @@
   border-color: #FFD54F;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.5rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #17212f;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #304562;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #304562;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #304562;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #304562;
@@ -826,7 +833,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #17212f;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #304562;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #304562;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #304562;
+}
 
 .p-password-panel {
   padding: 1rem;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 2e5a3327c..ffd83f9fe 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -440,6 +440,7 @@
   border-color: #BA68C8;
 }
 .p-dropdown .p-dropdown-label {
+  background: transparent;
   border: 0 none;
   padding-right: 1.5rem;
 }
@@ -451,7 +452,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #17212f;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -510,9 +511,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-dropdown-trigger {
+.p-input-filled .p-dropdown {
   background: #304562;
 }
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #304562;
+}
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #304562;
+}
 
 .p-editor-container .p-editor-toolbar {
   border: 1px solid #304562;
@@ -826,7 +833,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #17212f;
+  background: transparent;
   color: rgba(255, 255, 255, 0.6);
   width: 2.357rem;
   border-top-right-radius: 3px;
@@ -907,10 +914,15 @@
   border-width: 1px;
 }
 
-.p-input-filled .p-multiselect-label,
-.p-input-filled .p-multiselect-trigger {
+.p-input-filled .p-multiselect {
   background: #304562;
 }
+.p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #304562;
+}
+.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #304562;
+}
 
 .p-password-panel {
   padding: 1rem;
diff --git a/src/App.vue b/src/App.vue
index d97714b50..2f2e18264 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -121,7 +121,7 @@ export default {
             this.$appState.darkTheme = event.dark;
 
             if (event.theme.startsWith('md')) {
-                this.$appState.ripple = true;
+                this.$primevue.ripple = true;
             }
         },
         addClass(element, className) {
@@ -158,7 +158,7 @@ export default {
             return [{
                 'layout-news-active': this.newsActive,
                 'p-input-filled': this.$appState.inputStyle === 'filled',
-                'p-ripple-disabled': this.$appState.ripple === false
+                'p-ripple-disabled': this.$primevue.ripple === false
             }];
         }
     },
diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue
index 55cdbe614..19bb1c152 100755
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -310,14 +310,6 @@ export default {
             }
         }
     },
-    computed: {
-        containerClass() {
-            return ['layout-config', {'layout-config-active': this.active}];
-        },
-        rippleActive() {
-            return this.$appState.ripple;
-        }
-    },
     methods: {
         toggleConfigurator(event) {
             this.active = !this.active;
@@ -365,8 +357,16 @@ export default {
             document.documentElement.style.fontSize = this.scale + 'px';
         },
         onRippleChange(value) {
-            this.$appState.ripple = value;
+            this.$primevue.ripple = value;
         }
-    }
+    },
+    computed: {
+        containerClass() {
+            return ['layout-config', {'layout-config-active': this.active}];
+        },
+        rippleActive() {
+            return this.$primevue.ripple;
+        }
+    },
 }
 </script>
diff --git a/src/assets/styles/app/_config.scss b/src/assets/styles/app/_config.scss
index 64cccb5a6..7c5543ffe 100644
--- a/src/assets/styles/app/_config.scss
+++ b/src/assets/styles/app/_config.scss
@@ -16,8 +16,10 @@
 
         .layout-config-content-wrapper {
             .layout-config-button {
+                opacity: .9;
+
                 i {
-                    transform: rotate(360deg);
+                    transform: rotate(0deg);
                 }
             }
         }
@@ -48,16 +50,13 @@
             border-top-right-radius: 3px;
             border-bottom-left-radius: 3px;
             border-bottom-right-radius: 3px;
-            transition: background-color .2s, box-shadow .2s;
-            box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
-                        0 5px 22px 4px rgba(0, 0, 0, 0.12),
-                        0 12px 17px 2px rgba(0, 0, 0, 0.14);
+            box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 
             i {
                 font-size: 26px;
                 line-height: inherit;
                 cursor: pointer;
-                transform: rotate(0deg);
+                transform: rotate(360deg);
                 transition: transform 1s;
             }
         }
diff --git a/src/components/ripple/Ripple.js b/src/components/ripple/Ripple.js
index 2373f5c3f..9c54cd51d 100644
--- a/src/components/ripple/Ripple.js
+++ b/src/components/ripple/Ripple.js
@@ -21,6 +21,7 @@ function create(el) {
 function remove(el) {
     let ink = getInk(el);
     if (ink) {
+        unbindEvents(el);
         ink.removeEventListener('animationend', onAnimationEnd);
         ink.remove();
     }
@@ -75,13 +76,14 @@ function getInk(el) {
 }
 
 const Ripple = {
-    inserted(el) {
-        create(el);
-        bindEvents(el);
+    inserted(el, binding, vnode) {
+        if (vnode.context.$primevue && vnode.context.$primevue.ripple) {
+            create(el);
+            bindEvents(el);
+        }
     },
     unbind(el) {
         remove(el);
-        unbindEvents(el);
     }
 };
 
diff --git a/src/main.js b/src/main.js
index 2578db6f0..5d1153be6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -90,7 +90,8 @@ Vue.use(Vuelidate);
 Vue.use(ToastService);
 Vue.directive('tooltip', Tooltip);
 
-Vue.prototype.$appState = Vue.observable({ inputStyle: 'outlined', darkTheme: false, ripple: false });
+Vue.prototype.$appState = Vue.observable({inputStyle: 'outlined', darkTheme: false});
+Vue.prototype.$primevue = Vue.observable({ripple: true});
 
 Vue.config.productionTip = false;
 
diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue
index da6ec7daa..1e4b12cbd 100755
--- a/src/views/setup/Setup.vue
+++ b/src/views/setup/Setup.vue
@@ -143,6 +143,14 @@ primevue/resources/themes/luna-blue/theme.css
 primevue/resources/themes/luna-green/theme.css
 primevue/resources/themes/luna-pink/theme.css
 primevue/resources/themes/rhea/theme.css
+</CodeHighlight>
+
+            <h5>Ripple</h5>
+            <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at 
+                your app's entry file (e.g. main.js) using the <i>$primevue</i> instance variable.
+            </p>
+<CodeHighlight class="language-javascript">
+Vue.prototype.$primevue = {ripple: true};
 </CodeHighlight>
 
             <h5>Quickstart</h5>