Improved the submission filters UI. (#1579)

Closes
SoftUni-Internal/exam-systems-issues#1488

Author: deyordanov

Servers/UI/OJS.Servers.Ui/ClientApp/src/components/filters/Filter.module.scss

@@ -2,41 +2,74 @@
 @use 'src/styles/spacings';
 
 .popupContainer {
-  border-radius: 8px;
-  padding: spacings.$sp-16;
+  border-radius: 12px;
+  padding: spacings.$sp-24;
   width: auto;
+  min-width: 320px;
   z-index: 1300;
   box-shadow: colors.$box-shadow-color;
   border: 2px solid colors.$background-color-btn-primary;
+  transform-origin: top left;
+  opacity: 0;
+  transform: scale(0.95);
+  pointer-events: none;
+
+  &.open {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+  }
 
   & .closeIcon {
     cursor: pointer;
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    transition: transform 0.2s ease;
+
+    &:hover {
+      transform: scale(1.1);
+    }
   }
 
   & .fieldsContainer {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 1.5rem;
     justify-content: center;
     align-items: center;
-    margin-top: 1rem !important;
+    margin-top: 1.5rem !important;
+    padding: 0.5rem;
 
     & .title {
-      font-size: 1.3rem;
-      font-weight: bold;
+      font-size: 1.2rem;
+      font-weight: 600;
       display: flex;
       justify-content: space-between;
-      align-items: start;
+      align-items: center;
       width: 100%;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid rgba(colors.$background-color-btn-primary, 0.1);
     }
 
     & .hidden {
       visibility: hidden;
     }
 
+    & .removeFilterButton {
+      cursor: pointer;
+      transition: transform 0.2s ease;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+
     :global {
       .MuiInputLabel-root {
         color: colors.$background-color-btn-primary;
+        font-size: 0.9rem;
+        transform: translate(0, -1.5px) scale(0.85);
       }
 
       .MuiInput-underline::before {
@@ -55,47 +88,128 @@
         & .MuiInput-underline::before {
           border-bottom-style: solid;
           border-bottom-color: colors.$background-color-btn-primary;
+          opacity: 0.6;
         }
       }
+
+      .MuiSelect-select {
+        padding: 8px 0;
+      }
+
+      .MuiFormControl-root {
+        margin: 8px 0;
+      }
+    }
+  }
+
+  & .buttonsSection {
+    display: flex;
+    justify-content: space-between;
+    margin-top: spacings.$sp-24;
+    padding-top: spacings.$sp-16;
+    border-top: 1px solid rgba(colors.$background-color-btn-primary, 0.1);
+
+    button {
+      min-width: 120px;
+      padding: 8px 16px;
+      border-radius: 6px;
+      transition: all 0.2s ease;
+
+      &:hover:not(:disabled) {
+        transform: translateY(-1px);
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
     }
   }
 
   & .removeAllFilters {
     color: colors.$primary-red;
+
+    &:hover {
+      background-color: rgba(colors.$primary-red, 0.1);
+    }
+  }
+
+  & .addFilter {
+    background-color: rgba(colors.$background-color-btn-primary, 0.1);
+
+    &:hover:not(:disabled) {
+      background-color: rgba(colors.$background-color-btn-primary, 0.2);
+    }
   }
 
   &.lightTheme {
-    background-color: colors.$light-base-color-100;
-    color: colors.$light-text-color;
+    background-color: colors.$white-color;
+    color: colors.$primary-dark-grey-color;
 
     :global {
+      .MuiInputBase-input {
+        color: colors.$primary-dark-grey-color !important;
+      }
+
       .MuiInputBase-input.Mui-disabled {
-        -webkit-text-fill-color: colors.$light-text-color !important;
-        color: colors.$light-text-color !important;
+        -webkit-text-fill-color: colors.$primary-dark-grey-color !important;
+        color: colors.$primary-dark-grey-color !important;
+        opacity: 0.7;
+      }
+
+      .MuiInputLabel-root {
+        color: colors.$primary-dark-grey-color;
+      }
+
+      .MuiInput-underline::before {
+        border-bottom-color: colors.$light-base-color-500;
+      }
+
+      .MuiInput-underline:hover::before {
+        border-bottom-color: colors.$primary-blue;
+      }
+
+      .MuiInput-underline::after {
+        border-bottom-color: colors.$primary-blue;
       }
     }
 
     & .addFilter {
-      color: colors.$light-text-color;
+      color: colors.$primary-dark-grey-color;
+      background-color: colors.$light-base-color-200;
+
+      &:hover:not(:disabled) {
+        background-color: colors.$light-base-color-300;
+      }
 
       &:disabled {
-        opacity: 0.6;
+        opacity: 0.5;
+        background-color: colors.$light-base-color-200;
       }
     }
 
     .MuiSvgIcon-root {
-      color: colors.$light-text-color;
+      color: colors.$primary-dark-grey-color;
     }
 
     .option {
-      color: colors.$light-text-color;
-      background-color: colors.$light-base-color-400;
+      color: colors.$primary-dark-grey-color;
+      background-color: colors.$white-color;
 
       &:hover,
       &[aria-selected='true'] {
         background-color: colors.$light-base-color-200 !important;
       }
     }
+
+    & .title {
+      color: colors.$primary-dark-grey-color;
+      border-bottom-color: colors.$light-base-color-300;
+    }
+
+    & .buttonsSection {
+      border-top-color: colors.$light-base-color-300;
+    }
   }
 
   &.darkTheme {
@@ -133,46 +247,13 @@
   }
 }
 
-.buttonsSection {
-  display: flex;
-  justify-content: space-between;
-  margin-top: spacings.$sp-16;
-}
-
-.lightTextField {
-  :global {
-    .MuiOutlinedInput-root {
-      & .MuiOutlinedInput-notchedOutline {
-        border-color: colors.$light-base-color-100 !important;
-      }
-
-      & input {
-        color: colors.$light-text-color !important;
-      }
-    }
-  }
-}
-
-.darkTextField {
-  :global {
-    .MuiOutlinedInput-root {
-      & .MuiOutlinedInput-notchedOutline {
-        border-color: colors.$dark-text-color !important;
-      }
-
-      & input {
-        color: colors.$dark-text-color !important;
-      }
-    }
-  }
-}
-
 .divider {
   border: 0;
   height: 1px;
   width: 100%;
-  background-color: colors.$background-color-btn-primary !important;
+  background-color: rgba(colors.$background-color-btn-primary, 0.1) !important;
   border-radius: 1rem;
+  margin: 16px 0;
 }
 
 .input {
@@ -181,4 +262,5 @@
 
 .textField {
   width: 100%;
+  margin: 8px 0;
 }