Some fixes #410

web/src/app/modules/view/server/scheduled-events/components/edit-scheduled-event-dialog/edit-scheduled-event-dialog.component.html

@@ -58,7 +58,7 @@
             <div style="display: flex; flex-direction: column; gap: 5px;">
               {{'view.server.scheduled_events.edit_dialog.event_info.end_date_time' | translate}}:
               <p-calendar formControlName="endTime" dateFormat="dd.mm.yy" [showIcon]="true"
-                          [showTime]="true" [stepMinute]="15"></p-calendar>
+                          [showTime]="true"></p-calendar>
             </div>
 
             <div style="display: flex; flex-direction: column; gap: 5px;">

web/src/styles/themes/default-dark-theme.scss

@@ -187,12 +187,15 @@
     }
   }
 
+
   .p-dialog-header {
-    background-color: $secondaryBackgroundColor !important;
+    background-color: $primaryBackgroundColor !important;
     color: $primaryTextColor !important;
   }
 
   .p-dialog-content {
+    background-color: $secondaryBackgroundColor !important;
+
     .content-data-name,
     .content-data-value {
       color: $primaryTextColor;
@@ -345,9 +348,11 @@
   }
 
   p-dropdown {
+
     .p-dropdown {
-      background-color: $primaryBackgroundColor !important;
-      border-color: $primaryTextColor !important;
+      border: $default-border;
+      border-radius: 10px;
+      background-color: $secondaryBackgroundColor !important;
       color: $primaryTextColor !important;
 
       span {
@@ -411,8 +416,6 @@
           }
         }
       }
-
-
     }
 
     .table-edit-input {
@@ -537,6 +540,10 @@
   }
 
   .icon-btn {
+    .p-button-label {
+      transition-duration: unset !important;
+    }
+
     &:hover {
       background-color: transparent !important;
       color: $primaryHeaderColor !important;
@@ -544,6 +551,7 @@
     }
   }
 
+  .danger-btn,
   .danger-icon-btn {
     background-color: transparent !important;
     color: $primaryTextColor !important;
@@ -560,25 +568,11 @@
     }
   }
 
-  .danger-btn {
-    background-color: $primaryErrorColor !important;
-    color: $primaryErrorColor !important;
-    border: 0 !important;
-
-    &:hover {
-      background-color: $primaryErrorColor !important;
-      color: $primaryTextColor !important;
-      border: 0;
-    }
-
-    .pi {
-      font-size: 1.275rem !important;
-    }
-  }
-
   .p-datatable .p-sortable-column.p-highlight,
-  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon,
+  .p-datatable .p-sortable-column:not(.p-highlight):hover {
     color: $primaryHeaderColor !important;
+    background-color: transparent !important;
   }
 
   .p-dropdown:not(.p-disabled):hover,
@@ -616,6 +610,27 @@
     }
   }
 
+  .p-selectbutton {
+    .p-highlight {
+      background-color: $primaryHeaderColor !important;
+    }
+
+    .p-button {
+
+      border: 1px solid $primaryHeaderColor !important;
+
+      &:hover {
+        background-color: $secondaryHeaderColor !important;
+        border: 1px solid $secondaryHeaderColor !important;
+      }
+
+      &:focus {
+        border-color: $primaryHeaderColor !important;
+        box-shadow: none !important;
+      }
+    }
+  }
+
   .p-multiselect {
     background-color: $primaryBackgroundColor !important;
     color: $primaryTextColor !important;
@@ -661,4 +676,141 @@
       }
     }
   }
+
+  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
+    background: $primaryHeaderColor !important;
+  }
+
+  .p-inputswitch.p-focus .p-inputswitch-slider {
+    box-shadow: none !important;
+  }
+
+  p-inputNumber {
+    background-color: $primaryBackgroundColor !important;
+  }
+
+  p-calendar > span > button {
+    background-color: $primaryHeaderColor !important;
+    border: 1px solid $primaryHeaderColor !important;
+
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+
+  .p-calendar {
+    .p-datepicker:not(.p-datepicker-inline) {
+      background-color: $secondaryBackgroundColor !important;
+    }
+
+    .p-datepicker {
+      color: $primaryTextColor !important;
+
+      .p-datepicker-header {
+        color: $primaryHeaderColor !important;
+        background-color: $primaryBackgroundColor !important;
+
+        .p-datepicker-title .p-datepicker-year,
+        .p-datepicker-title .p-datepicker-month,
+        .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+          color: $primaryTextColor !important;
+
+          &:hover {
+            color: $primaryHeaderColor !important;
+          }
+
+          &:focus {
+            box-shadow: none !important;
+          }
+        }
+      }
+    }
+
+    table td > span {
+      color: $primaryTextColor !important;
+
+      &:hover {
+        color: $primaryHeaderColor !important;
+        background-color: $primaryBackgroundColor !important;
+      }
+
+      &:focus {
+        box-shadow: none !important;
+      }
+    }
+
+    table td.p-datepicker-today > span {
+      color: $primaryHeaderColor !important;
+      background-color: $primaryBackgroundColor !important;
+    }
+
+    table td > span.p-highlight {
+      color: $primaryHeaderColor !important;
+      background-color: $primaryBackgroundColor !important;
+    }
+
+    .p-yearpicker .p-yearpicker-year,
+    .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight) {
+      color: $primaryTextColor !important;
+      background-color: $secondaryBackgroundColor !important;
+
+      &:hover {
+        color: $primaryHeaderColor !important;
+      }
+
+      &:focus {
+        box-shadow: none !important;
+      }
+    }
+  }
+
+  .edit-dialog {
+    textarea {
+      background-color: $secondaryBackgroundColor;
+      color: $primaryTextColor;
+
+      &:hover {
+        border-color: $primaryHeaderColor;
+      }
+
+      &:focus {
+        border-color: $primaryHeaderColor;
+      }
+    }
+
+    .p-dialog-content {
+      .p-tabview {
+        .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
+          box-shadow: none !important;
+        }
+
+        .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+          color: $primaryHeaderColor !important;
+          border-color: $primaryHeaderColor !important;
+        }
+
+        .p-tabview-nav,
+        .p-tabview-nav li .p-tabview-nav-link,
+        .p-tabview-panels {
+          background-color: $secondaryBackgroundColor !important;
+          color: $primaryTextColor !important;
+        }
+      }
+    }
+  }
+
+  .p-radiobutton {
+    .p-radiobutton-box.p-highlight {
+      border-color: $primaryHeaderColor !important;
+      background: $primaryHeaderColor !important;
+    }
+
+    .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+      border-color: $primaryHeaderColor !important;
+    }
+
+    .p-radiobutton-box:not(.p-disabled).p-focus {
+      box-shadow: none !important;
+    }
+  }
 }

web/src/styles/themes/default-light-theme.scss

@@ -544,6 +544,7 @@
     }
   }
 
+  .danger-btn,
   .danger-icon-btn {
     background-color: transparent !important;
     color: $primaryTextColor !important;
@@ -560,22 +561,6 @@
     }
   }
 
-  .danger-btn {
-    background-color: $primaryErrorColor !important;
-    color: $primaryErrorColor !important;
-    border: 0 !important;
-
-    &:hover {
-      background-color: $primaryErrorColor !important;
-      color: $primaryTextColor !important;
-      border: 0;
-    }
-
-    .pi {
-      font-size: 1.275rem !important;
-    }
-  }
-
   .p-datatable .p-sortable-column.p-highlight,
   .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
     color: $primaryHeaderColor !important;
@@ -602,16 +587,23 @@
     color: $primaryHeaderColor !important;
   }
 
-  .input-number {
-    span {
-      .p-button {
-        background-color: $primaryHeaderColor !important;
-        border: 1px solid $primaryHeaderColor !important;
+  .p-selectbutton {
+    .p-highlight {
+      background-color: $primaryHeaderColor !important;
+    }
 
-        &:hover {
-          background-color: $secondaryHeaderColor !important;
-          border: 1px solid $secondaryHeaderColor !important;
-        }
+    .p-button {
+
+      border: 1px solid $primaryHeaderColor !important;
+
+      &:hover {
+        background-color: $secondaryHeaderColor !important;
+        border: 1px solid $secondaryHeaderColor !important;
+      }
+
+      &:focus {
+        border-color: $primaryHeaderColor !important;
+        box-shadow: none !important;
       }
     }
   }
@@ -629,12 +621,12 @@
 
     .p-multiselect-panel {
       .p-multiselect-header {
-        background-color: $secondaryBackgroundColor !important;
+        background-color: $primaryBackgroundColor !important;
       }
 
       .p-multiselect-items,
       .p-multiselect-item {
-        background-color: $primaryBackgroundColor !important;
+        background-color: $secondaryBackgroundColor !important;
       }
 
       .p-multiselect-item {
@@ -661,4 +653,141 @@
       }
     }
   }
+
+  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
+    background: $primaryHeaderColor !important;
+  }
+
+  .p-inputswitch.p-focus .p-inputswitch-slider {
+    box-shadow: none !important;
+  }
+
+  p-inputNumber {
+    background-color: $primaryBackgroundColor !important;
+  }
+
+  p-calendar > span > button {
+    background-color: $primaryHeaderColor !important;
+    border: 1px solid $primaryHeaderColor !important;
+
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+
+  .p-calendar {
+    .p-datepicker:not(.p-datepicker-inline) {
+      background-color: $primaryBackgroundColor !important;
+    }
+
+    .p-datepicker {
+      color: $primaryTextColor !important;
+
+      .p-datepicker-header {
+        color: $primaryHeaderColor !important;
+        background-color: $primaryBackgroundColor !important;
+
+        .p-datepicker-title .p-datepicker-year,
+        .p-datepicker-title .p-datepicker-month,
+        .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+          color: $primaryTextColor !important;
+
+          &:hover {
+            color: $primaryHeaderColor !important;
+          }
+
+          &:focus {
+            box-shadow: none !important;
+          }
+        }
+      }
+    }
+
+    table td > span {
+      color: $primaryTextColor !important;
+
+      &:hover {
+        color: $primaryHeaderColor !important;
+        background-color: $primaryBackgroundColor !important;
+      }
+
+      &:focus {
+        box-shadow: none !important;
+      }
+    }
+
+    table td.p-datepicker-today > span {
+      color: $primaryHeaderColor !important;
+      background-color: $primaryBackgroundColor !important;
+    }
+
+    table td > span.p-highlight {
+      color: $primaryHeaderColor !important;
+      background-color: $primaryBackgroundColor !important;
+    }
+
+    .p-yearpicker .p-yearpicker-year,
+    .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight) {
+      color: $primaryTextColor !important;
+      background-color: $secondaryBackgroundColor !important;
+
+      &:hover {
+        color: $primaryHeaderColor !important;
+      }
+
+      &:focus {
+        box-shadow: none !important;
+      }
+    }
+  }
+
+  .edit-dialog {
+    textarea {
+      background-color: $primaryBackgroundColor;
+      color: $primaryTextColor;
+
+      &:hover {
+        border-color: $primaryHeaderColor;
+      }
+
+      &:focus {
+        border-color: $primaryHeaderColor;
+      }
+    }
+
+    .p-dialog-content {
+      .p-tabview {
+        .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
+          box-shadow: none !important;
+        }
+
+        .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+          color: $primaryHeaderColor !important;
+          border-color: $primaryHeaderColor !important;
+        }
+
+        .p-tabview-nav,
+        .p-tabview-nav li .p-tabview-nav-link,
+        .p-tabview-panels {
+          background-color: $primaryBackgroundColor !important;
+          color: $primaryTextColor !important;
+        }
+      }
+    }
+  }
+
+  .p-radiobutton {
+    .p-radiobutton-box.p-highlight {
+      border-color: $primaryHeaderColor !important;
+      background: $primaryHeaderColor !important;
+    }
+
+    .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+      border-color: $primaryHeaderColor !important;
+    }
+
+    .p-radiobutton-box:not(.p-disabled).p-focus {
+      box-shadow: none !important;
+    }
+  }
 }

web/src/styles/themes/sh-edraft-light-theme.scss

@@ -544,6 +544,7 @@
     }
   }
 
+  .danger-btn,
   .danger-icon-btn {
     background-color: transparent !important;
     color: $primaryTextColor !important;
@@ -560,22 +561,6 @@
     }
   }
 
-  .danger-btn {
-    background-color: $primaryErrorColor !important;
-    color: $primaryErrorColor !important;
-    border: 0 !important;
-
-    &:hover {
-      background-color: $primaryErrorColor !important;
-      color: $primaryTextColor !important;
-      border: 0;
-    }
-
-    .pi {
-      font-size: 1.275rem !important;
-    }
-  }
-
   .p-datatable .p-sortable-column.p-highlight,
   .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
     color: $primaryHeaderColor !important;
@@ -661,4 +646,142 @@
       }
     }
   }
+
+
+  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
+    background: $primaryHeaderColor !important;
+  }
+
+  .p-inputswitch.p-focus .p-inputswitch-slider {
+    box-shadow: none !important;
+  }
+
+  p-inputNumber {
+    background-color: $primaryBackgroundColor !important;
+  }
+
+  p-calendar > span > button {
+    background-color: $primaryHeaderColor !important;
+    border: 1px solid $primaryHeaderColor !important;
+
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+
+  .p-calendar {
+    .p-datepicker:not(.p-datepicker-inline) {
+      background-color: $primaryBackgroundColor !important;
+    }
+
+    .p-datepicker {
+      color: $primaryTextColor !important;
+
+      .p-datepicker-header {
+        color: $primaryHeaderColor !important;
+        background-color: $primaryBackgroundColor !important;
+
+        .p-datepicker-title .p-datepicker-year,
+        .p-datepicker-title .p-datepicker-month,
+        .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+          color: $primaryTextColor !important;
+
+          &:hover {
+            color: $primaryHeaderColor !important;
+          }
+
+          &:focus {
+            box-shadow: none !important;
+          }
+        }
+      }
+    }
+
+    table td > span {
+      color: $primaryTextColor !important;
+
+      &:hover {
+        color: $primaryHeaderColor !important;
+        background-color: $primaryBackgroundColor !important;
+      }
+
+      &:focus {
+        box-shadow: none !important;
+      }
+    }
+
+    table td.p-datepicker-today > span {
+      color: $primaryHeaderColor !important;
+      background-color: $primaryBackgroundColor !important;
+    }
+
+    table td > span.p-highlight {
+      color: $primaryHeaderColor !important;
+      background-color: $primaryBackgroundColor !important;
+    }
+
+    .p-yearpicker .p-yearpicker-year,
+    .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight) {
+      color: $primaryTextColor !important;
+      background-color: $secondaryBackgroundColor !important;
+
+      &:hover {
+        color: $primaryHeaderColor !important;
+      }
+
+      &:focus {
+        box-shadow: none !important;
+      }
+    }
+  }
+
+  .edit-dialog {
+    textarea {
+      background-color: $primaryBackgroundColor;
+      color: $primaryTextColor;
+
+      &:hover {
+        border-color: $primaryHeaderColor;
+      }
+
+      &:focus {
+        border-color: $primaryHeaderColor;
+      }
+    }
+
+    .p-dialog-content {
+      .p-tabview {
+        .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
+          box-shadow: none !important;
+        }
+
+        .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+          color: $primaryHeaderColor !important;
+          border-color: $primaryHeaderColor !important;
+        }
+
+        .p-tabview-nav,
+        .p-tabview-nav li .p-tabview-nav-link,
+        .p-tabview-panels {
+          background-color: $primaryBackgroundColor !important;
+          color: $primaryTextColor !important;
+        }
+      }
+    }
+  }
+
+  .p-radiobutton {
+    .p-radiobutton-box.p-highlight {
+      border-color: $primaryHeaderColor !important;
+      background: $primaryHeaderColor !important;
+    }
+
+    .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+      border-color: $primaryHeaderColor !important;
+    }
+
+    .p-radiobutton-box:not(.p-disabled).p-focus {
+      box-shadow: none !important;
+    }
+  }
 }