[chore] UI changes

openwisp_notifications/static/openwisp-notifications/css/preferences.css

@@ -3,23 +3,128 @@
   display: none;
 }
 .global-settings-container {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
+  display: flex;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
+.icon {
+  min-width: 24px;
+  min-height: 24px;
+  padding-right: 6px;
+}
+.icon-web {
+  background: url("../../openwisp-notifications/images/icons/icon-web.svg")
+    0 0 no-repeat;
+}
+.icon-email {
+  background: url("../../openwisp-notifications/images/icons/icon-email.svg")
+    0 0 no-repeat;
+}
+.global-setting-text h2 {
+  margin: 0 0 5px 0;
+}
+.global-setting-text p {
+  color: #666;
+}
+.global-setting-divider {
+  width: 1px;
+  background-color: #e0e0e0;
+}
+.global-setting-dropdown {
+  position: relative;
+}
+.global-setting-dropdown-toggle .mg-arrow {
+  display: block;
+}
+.global-setting-dropdown-toggle {
+  display: flex;
+  padding: 10px 15px;
+  background-color: #f5f5f5;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.global-setting-dropdown-menu {
+  display: none;
+  position: absolute;
+  background-color: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  padding: 0;
+  margin: 0;
+}
+.global-setting-dropdown-menu li {
+  padding: 10px 15px;
+  cursor: pointer;
+}
+.global-setting-dropdown-menu-open {
+  display: block;
+}
+.global-setting {
+  flex: 1;
+  padding: 20px;
 }
 .global-settings-container {
-  margin-left: 20px;
+  width: 840px;
+}
+.global-setting-content {
+  display: flex;
+  margin-bottom: 10px;
+}
+.global-setting-content h2 {
+    color: #555;
+}
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 9999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.modal-content {
+  background-color: #fff;
+  margin: 15% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 400px;
+  border-radius: 5px;
+}
+.modal-header {
+  margin-bottom: 20px;
+}
+.modal-buttons {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+}
+#go-back,
+#confirm {
+  width: 100%;
 }
 .module h2 {
   padding: 15px 10px;
   cursor: pointer;
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: center;
   font-weight: bold;
   font-size: 14px;
   text-transform: uppercase;
+  padding: 6px;
+}
+.toggle-header {
+    border: none !important;
+}
+.org-name {
+    width: 40%;
+}
+.email-row {
+    position: relative;
 }
 .org-content {
   margin-top: 0;
@@ -32,8 +137,8 @@
 table {
   width: 100%;
 }
-th:not(:last-child),
-td:not(:last-child) {
+table:not(.toggle-header) th:not(:last-child),
+table:not(.toggle-header) td:not(:last-child) {
   border-right: 1px solid #ddd;
 }
 th:not(:first-child),
@@ -58,6 +163,9 @@ td:not(:first-child) {
   z-index: 9999;
   cursor: pointer;
 }
+.toast .icon {
+    background-repeat: no-repeat;
+}
 .toast .progress-bar {
   position: absolute;
   bottom: 0;
@@ -68,6 +176,9 @@ td:not(:first-child) {
   transition: width 3s linear;
 }
 span.toggle-icon {
+  position: absolute;
+  right: 15px;
+  top: 15px;
   width: 16px;
   height: 16px;
   margin-right: 5px;
@@ -157,7 +268,8 @@ input:checked + .slider:before {
   -ms-transform: translateX(20px);
   transform: translateX(20px);
 }
-.notification-web-header, .notification-email-header {
+.notification-web-header,
+.notification-email-header {
   text-align: center;
 }
 .notification-header-container {
@@ -175,3 +287,6 @@ input:checked + .slider:before {
 .module {
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
+ul > li {
+  list-style-type: none !important;
+}