From 280d2d01939736f89b947a5670e6e3dd9fbfeec3 Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Tue, 7 Apr 2026 22:42:49 +0200
Subject: [PATCH] ux design

---
 .../ActionButtons/ActionButton.module.css     | 151 ++++++++----------
 .../FormGeneratorControls.module.css          |  85 +++++++---
 .../FormGeneratorForm.module.css              |  40 +++--
 .../FormGeneratorTable.module.css             |  59 ++++---
 .../DropdownSelect/DropdownSelect.module.css  |  10 +-
 .../UiComponents/Popup/Popup.module.css       |  41 +++--
 src/pages/Login.module.css                    |  68 ++++++--
 src/styles/buttons.css                        |  72 +++++++--
 8 files changed, 350 insertions(+), 176 deletions(-)

diff --git a/src/components/FormGenerator/ActionButtons/ActionButton.module.css b/src/components/FormGenerator/ActionButtons/ActionButton.module.css
index 6bd5717..6ce8724 100644
--- a/src/components/FormGenerator/ActionButtons/ActionButton.module.css
+++ b/src/components/FormGenerator/ActionButtons/ActionButton.module.css
@@ -9,19 +9,24 @@
   font-size: 12px;
   font-family: var(--font-family);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
   position: relative;
-  min-width: 26px;
-  min-height: 26px;
-  background: var(--color-gray, #718096);
+  min-width: 28px;
+  min-height: 28px;
+  background: linear-gradient(180deg, #8494a7 0%, #6b7b8d 100%);
   color: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
 
 .actionButton:hover {
-  background: var(--color-gray-hover, #4A5568);
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.actionButton:active {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
 .actionButton:disabled {
@@ -37,6 +42,7 @@
   transform: none !important;
   background: var(--color-gray-disabled, #CBD5E0) !important;
   color: var(--color-text-secondary, #718096) !important;
+  box-shadow: none !important;
 }
 
 .actionButton.disabled:hover {
@@ -45,9 +51,9 @@
   box-shadow: none !important;
 }
 
-.actionButton:focus {
+.actionButton:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(var(--color-secondary-rgb, 74, 111, 165), 0.25);
+  box-shadow: 0 0 0 2px var(--color-bg, #fff), 0 0 0 4px rgba(var(--color-secondary-rgb, 74, 111, 165), 0.5);
 }
 
 .actionIcon {
@@ -57,6 +63,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.1));
 }
 
 /* Loading State */
@@ -84,9 +91,10 @@
   gap: 2px;
   justify-content: center;
   align-items: center;
-  background: var(--color-gray, #718096);
+  background: linear-gradient(180deg, #8494a7 0%, #6b7b8d 100%);
   border-radius: 6px;
   padding: 2px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
 }
 
 .confirmButton {
@@ -95,10 +103,11 @@
   min-width: 24px;
   min-height: 24px;
   padding: 4px;
+  box-shadow: none !important;
 }
 
 .confirmButton:hover {
-  background: rgba(255, 255, 255, 0.15) !important;
+  background: rgba(255, 255, 255, 0.18) !important;
   transform: none;
 }
 
@@ -108,17 +117,18 @@
   min-width: 24px;
   min-height: 24px;
   padding: 4px;
+  box-shadow: none !important;
 }
 
 .cancelButton:hover {
-  background: rgba(255, 255, 255, 0.15) !important;
+  background: rgba(255, 255, 255, 0.18) !important;
   transform: none;
 }
 
 /* Action Button Container */
 .actionButtons {
   display: flex;
-  gap: 4px;
+  gap: 5px;
   justify-content: center;
   align-items: center;
   width: 100%;
@@ -127,105 +137,114 @@
 
 /* Button Variants */
 .actionButton.edit {
-  background: var(--color-secondary, #4A6FA5);
+  background: linear-gradient(180deg, #5a82b5 0%, var(--color-secondary, #4A6FA5) 100%);
   color: white;
 }
 
 .actionButton.edit:hover {
-  background: var(--color-secondary-hover, #3D5D8A);
+  background: linear-gradient(180deg, var(--color-secondary, #4A6FA5) 0%, var(--color-secondary-hover, #3D5D8A) 100%);
+  box-shadow: 0 3px 8px rgba(74, 111, 165, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .actionButton.delete {
-  background: var(--color-gray, #718096);
+  background: linear-gradient(180deg, #8494a7 0%, #6b7b8d 100%);
   color: white;
 }
 
 .actionButton.delete:hover {
-  background: var(--color-red, #C53030);
+  background: linear-gradient(180deg, #d44040 0%, var(--color-red, #C53030) 100%);
+  box-shadow: 0 3px 8px rgba(197, 48, 48, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .actionButton.download {
-  background: var(--color-gray, #718096);
+  background: linear-gradient(180deg, #8494a7 0%, #6b7b8d 100%);
   color: white;
 }
 
 .actionButton.download:hover {
-  background: var(--color-gray-hover, #4A5568);
+  background: linear-gradient(180deg, #6b7b8d 0%, var(--color-gray-hover, #4A5568) 100%);
 }
 
 .actionButton.view {
-  background: var(--color-secondary, #4A6FA5);
+  background: linear-gradient(180deg, #5a82b5 0%, var(--color-secondary, #4A6FA5) 100%);
   color: white;
 }
 
 .actionButton.view:hover {
-  background: var(--color-secondary-hover, #3D5D8A);
+  background: linear-gradient(180deg, var(--color-secondary, #4A6FA5) 0%, var(--color-secondary-hover, #3D5D8A) 100%);
+  box-shadow: 0 3px 8px rgba(74, 111, 165, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .actionButton.copy {
-  background: var(--color-gray, #718096);
+  background: linear-gradient(180deg, #8494a7 0%, #6b7b8d 100%);
   color: white;
 }
 
 .actionButton.copy:hover {
-  background: var(--color-gray-hover, #4A5568);
+  background: linear-gradient(180deg, #6b7b8d 0%, var(--color-gray-hover, #4A5568) 100%);
 }
 
 .actionButton.connect {
-  background: var(--color-secondary, #4A6FA5);
+  background: linear-gradient(180deg, #5a82b5 0%, var(--color-secondary, #4A6FA5) 100%);
   color: white;
 }
 
 .actionButton.connect:hover {
-  background: var(--color-secondary-hover, #3D5D8A);
+  background: linear-gradient(180deg, var(--color-secondary, #4A6FA5) 0%, var(--color-secondary-hover, #3D5D8A) 100%);
+  box-shadow: 0 3px 8px rgba(74, 111, 165, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .actionButton.refresh {
-  background: var(--color-gray, #718096);
+  background: linear-gradient(180deg, #8494a7 0%, #6b7b8d 100%);
   color: white;
 }
 
 .actionButton.refresh:hover {
-  background: var(--color-gray-hover, #4A5568);
+  background: linear-gradient(180deg, #6b7b8d 0%, var(--color-gray-hover, #4A5568) 100%);
 }
 
 .actionButton.remove {
-  background: var(--color-gray, #718096);
+  background: linear-gradient(180deg, #8494a7 0%, #6b7b8d 100%);
   color: white;
 }
 
 .actionButton.remove:hover {
-  background: var(--color-red, #C53030);
+  background: linear-gradient(180deg, #d44040 0%, var(--color-red, #C53030) 100%);
+  box-shadow: 0 3px 8px rgba(197, 48, 48, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 /* Generic Custom Action Button */
 .actionButton.custom {
-  background: var(--color-gray, #718096);
+  background: linear-gradient(180deg, #8494a7 0%, #6b7b8d 100%);
   color: white;
 }
 
 .actionButton.custom:hover {
-  background: var(--color-gray-hover, #4A5568);
+  background: linear-gradient(180deg, #6b7b8d 0%, var(--color-gray-hover, #4A5568) 100%);
 }
 
 /* Success State */
 .actionButton.success {
-  background: var(--color-success, #38A169) !important;
+  background: linear-gradient(180deg, #48bb78 0%, var(--color-success, #38A169) 100%) !important;
   color: white !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
 }
 
 .actionButton.success:hover {
-  background: var(--color-success-hover, #2F855A) !important;
+  background: linear-gradient(180deg, var(--color-success, #38A169) 0%, var(--color-success-hover, #2F855A) 100%) !important;
+  box-shadow: 0 3px 8px rgba(56, 161, 105, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
 }
 
 /* Error State */
 .actionButton.error {
-  background: var(--color-red, #C53030) !important;
+  background: linear-gradient(180deg, #e53e3e 0%, var(--color-red, #C53030) 100%) !important;
   color: white !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
 }
 
 .actionButton.error:hover {
-  background: #9B2C2C !important;
+  background: linear-gradient(180deg, var(--color-red, #C53030) 0%, #9B2C2C 100%) !important;
+  box-shadow: 0 3px 8px rgba(197, 48, 48, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
 }
 
 /* Responsive Design */
@@ -238,8 +257,8 @@
   .actionButton {
     padding: 4px;
     font-size: 11px;
-    min-width: 22px;
-    min-height: 22px;
+    min-width: 24px;
+    min-height: 24px;
   }
 
   .actionIcon {
@@ -251,67 +270,35 @@
 
 /* Dark theme support */
 @media (prefers-color-scheme: dark) {
+  .actionButton {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  }
+
+  .actionButton:hover {
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  }
+
   .actionButton.edit {
-    background: var(--color-secondary);
+    background: linear-gradient(180deg, #6a92c5 0%, var(--color-secondary) 100%);
   }
 
   .actionButton.edit:hover {
-    background: var(--color-secondary-hover);
+    background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
   }
 
   .actionButton.delete {
-    background: var(--color-gray);
+    background: linear-gradient(180deg, #9ca3af 0%, var(--color-gray) 100%);
   }
 
   .actionButton.delete:hover {
-    background: var(--color-red);
-  }
-
-  .actionButton.download {
-    background: var(--color-gray);
-  }
-
-  .actionButton.download:hover {
-    background: var(--color-gray-hover);
+    background: linear-gradient(180deg, #fc8181 0%, var(--color-red) 100%);
   }
 
   .actionButton.view {
-    background: var(--color-secondary);
+    background: linear-gradient(180deg, #6a92c5 0%, var(--color-secondary) 100%);
   }
 
   .actionButton.view:hover {
-    background: var(--color-secondary-hover);
-  }
-
-  .actionButton.copy {
-    background: var(--color-gray);
-  }
-
-  .actionButton.copy:hover {
-    background: var(--color-gray-hover);
-  }
-
-  .actionButton.connect {
-    background: var(--color-secondary);
-  }
-
-  .actionButton.connect:hover {
-    background: var(--color-secondary-hover);
-  }
-
-  .actionButton.refresh {
-    background: var(--color-gray);
-  }
-
-  .actionButton.refresh:hover {
-    background: var(--color-gray-hover);
-  }
-
-  .actionButton.custom {
-    background: var(--color-gray);
-  }
-
-  .actionButton.custom:hover {
-    background: var(--color-gray-hover);
+    background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
   }
 }
diff --git a/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.module.css b/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.module.css
index 397acad..329e7a3 100644
--- a/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.module.css
+++ b/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.module.css
@@ -42,30 +42,39 @@
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  height: 40px;
+  height: 36px;
   padding: 0 14px;
   border: 1px solid var(--color-border, #E2E8F0);
   border-radius: 6px;
-  background: var(--color-bg);
+  background: linear-gradient(180deg, var(--color-bg, #fff) 0%, #f0f2f5 100%);
   color: var(--color-text);
   font-size: 12px;
   font-family: var(--font-family);
-  font-weight: 400;
+  font-weight: 500;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
   flex-shrink: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 
 .csvExportButton:hover:not(:disabled) {
-  background: var(--color-gray, #718096);
+  background: linear-gradient(180deg, var(--color-gray, #718096) 0%, var(--color-gray-hover, #4A5568) 100%);
   color: #fff;
   border-color: var(--color-gray, #718096);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  transform: translateY(-1px);
+}
+
+.csvExportButton:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .csvExportButton:disabled {
   opacity: 0.5;
   cursor: not-allowed;
+  box-shadow: none;
 }
 
 .csvExportIcon {
@@ -78,29 +87,42 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   border: 1px solid var(--color-border, #E2E8F0);
   border-radius: 6px;
-  background: var(--color-bg);
+  background: linear-gradient(180deg, var(--color-bg, #fff) 0%, #f0f2f5 100%);
   color: var(--color-text);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   font-size: 16px;
   font-family: var(--font-family);
   flex-shrink: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 
 .refreshButton:hover:not(:disabled) {
-  background: var(--color-gray, #718096);
+  background: linear-gradient(180deg, var(--color-gray, #718096) 0%, var(--color-gray-hover, #4A5568) 100%);
   color: white;
   border-color: var(--color-gray, #718096);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  transform: translateY(-1px);
+}
+
+.refreshButton:hover:not(:disabled) .refreshIcon {
+  transform: rotate(45deg);
+}
+
+.refreshButton:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .refreshButton:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none;
+  box-shadow: none;
 }
 
 .refreshIcon {
@@ -365,28 +387,37 @@
   height: 30px;
   padding: 0;
   border: 1px solid var(--color-border, #E2E8F0);
-  background: var(--color-bg, #fff);
+  background: linear-gradient(180deg, var(--color-bg, #fff) 0%, #f4f5f7 100%);
   color: var(--color-text, #2D3748);
   border-radius: 6px;
   cursor: pointer;
   font-family: var(--font-family);
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 500;
   flex-shrink: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 
 .paginationButton:hover:not(:disabled) {
-  background: var(--color-gray-disabled, #EDF2F7);
+  background: linear-gradient(180deg, #edf0f4 0%, var(--color-gray-disabled, #CBD5E0) 100%);
   border-color: var(--color-gray, #718096);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  transform: translateY(-1px);
+}
+
+.paginationButton:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
 .paginationButton:disabled {
-  opacity: 0.5;
+  opacity: 0.35;
   cursor: not-allowed;
+  box-shadow: none;
 }
 
 .paginationInfo {
@@ -414,23 +445,30 @@
   min-width: 28px;
   height: 28px;
   padding: 0 6px;
-  border: 1px solid var(--color-border, #ddd);
-  background: var(--color-bg, #fff);
+  border: 1px solid var(--color-border, #E2E8F0);
+  background: linear-gradient(180deg, var(--color-bg, #fff) 0%, #f4f5f7 100%);
   color: var(--color-text);
-  border-radius: 4px;
+  border-radius: 5px;
   cursor: pointer;
   font-family: var(--font-family);
   font-size: 12px;
-  transition: all 0.15s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
 }
 
 .pageNumber:hover:not(:disabled) {
-  background: var(--color-secondary);
-  color: white;
-  border-color: var(--color-secondary);
+  background: linear-gradient(180deg, #edf0f4 0%, var(--color-gray-disabled, #CBD5E0) 100%);
+  border-color: var(--color-gray, #718096);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
+}
+
+.pageNumber:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
 }
 
 .pageNumber:disabled {
@@ -439,10 +477,11 @@
 
 /* Active/current page number */
 .pageNumberActive {
-  background: var(--color-secondary);
+  background: linear-gradient(180deg, #5a82b5 0%, var(--color-secondary) 100%);
   color: white;
   border-color: var(--color-secondary);
   font-weight: 600;
+  box-shadow: 0 1px 3px rgba(74, 111, 165, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
 
 /* Ellipsis indicator */
diff --git a/src/components/FormGenerator/FormGeneratorForm/FormGeneratorForm.module.css b/src/components/FormGenerator/FormGeneratorForm/FormGeneratorForm.module.css
index db5b91c..da0bc83 100644
--- a/src/components/FormGenerator/FormGeneratorForm/FormGeneratorForm.module.css
+++ b/src/components/FormGenerator/FormGeneratorForm/FormGeneratorForm.module.css
@@ -282,45 +282,63 @@
 .cancelButton {
   padding: 8px 16px;
   border: 1px solid var(--color-border, #E2E8F0);
-  background-color: var(--color-bg);
+  background: linear-gradient(180deg, var(--color-bg, #fff) 0%, #f0f2f5 100%);
   color: var(--color-text);
   border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 
 .cancelButton:hover:not(:disabled) {
-  background-color: var(--color-primary-hover);
-  border-color: var(--color-primary);
-  color: #181818;
+  background: linear-gradient(180deg, var(--color-gray, #718096) 0%, var(--color-gray-hover, #4A5568) 100%);
+  border-color: var(--color-gray);
+  color: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  transform: translateY(-1px);
+}
+
+.cancelButton:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .cancelButton:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
+  box-shadow: none;
 }
 
 .submitButton {
   padding: 8px 16px;
   border: none;
-  background-color: var(--color-secondary);
-  color: var(--color-bg);
+  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
+  color: #fff;
   border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
 
 .submitButton:hover:not(:disabled) {
-  background-color: var(--color-secondary-hover);
+  background: linear-gradient(180deg, var(--color-secondary-hover) 0%, var(--color-secondary-hover) 100%);
+  box-shadow: 0 2px 6px rgba(74, 111, 165, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transform: translateY(-1px);
+}
+
+.submitButton:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
 .submitButton:disabled {
-  background-color: #9ca3af;
+  background: linear-gradient(180deg, #b0b8c4 0%, #9ca3af 100%);
   cursor: not-allowed;
+  box-shadow: none;
 }
 
 /* Responsive design */
diff --git a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
index eca71cb..8bf544f 100644
--- a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
+++ b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
@@ -40,7 +40,7 @@
   flex-shrink: 0;
   background: var(--color-bg);
   border-bottom: 1px solid var(--color-border, #e2e8f0);
-  border-radius: 10px 10px 0 0;
+  border-radius: 8px 8px 0 0;
 }
 
 .topScrollbarInner {
@@ -57,7 +57,7 @@
   flex: 1 1 0;
   min-height: 0;
   max-height: 100%;
-  border-radius: 0 0 10px 10px;
+  border-radius: 0 0 8px 8px;
 }
 
 .emptyTable {
@@ -461,19 +461,24 @@ tbody .actionsColumn {
   font-size: 11px;
   font-family: var(--font-family);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
   position: relative;
   min-width: 26px;
   min-height: 26px;
-  background: var(--color-text-secondary, #64748b);
+  background: linear-gradient(180deg, #8494a7 0%, #6b7b8d 100%);
   color: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
 
 .actionButton:hover {
-  background: var(--color-text, #334155);
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.actionButton:active {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
 .actionIcon {
@@ -571,27 +576,36 @@ tbody .actionsColumn {
   height: 30px;
   padding: 0;
   border: 1px solid var(--color-border, #e2e8f0);
-  background: var(--color-bg, #fff);
+  background: linear-gradient(180deg, var(--color-bg, #fff) 0%, #f4f5f7 100%);
   color: var(--color-text, #334155);
   border-radius: 6px;
   cursor: pointer;
   font-family: var(--font-family);
-  transition: all 0.15s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 
 .paginationButton:hover:not(:disabled) {
-  background: var(--color-gray-disabled, #f1f5f9);
+  background: linear-gradient(180deg, #edf0f4 0%, var(--color-gray-disabled, #CBD5E0) 100%);
   border-color: var(--color-text-secondary, #94a3b8);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  transform: translateY(-1px);
+}
+
+.paginationButton:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
 .paginationButton:disabled {
   opacity: 0.35;
   cursor: not-allowed;
+  box-shadow: none;
 }
 
 .paginationInfo {
@@ -619,21 +633,29 @@ tbody .actionsColumn {
   height: 28px;
   padding: 0 6px;
   border: 1px solid var(--color-border, #e2e8f0);
-  background: var(--color-bg, #fff);
+  background: linear-gradient(180deg, var(--color-bg, #fff) 0%, #f4f5f7 100%);
   color: var(--color-text);
-  border-radius: 6px;
+  border-radius: 5px;
   cursor: pointer;
   font-family: var(--font-family);
   font-size: 12px;
-  transition: all 0.12s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
 }
 
 .pageNumber:hover:not(:disabled) {
-  background: var(--color-gray-disabled, #f1f5f9);
+  background: linear-gradient(180deg, #edf0f4 0%, var(--color-gray-disabled, #CBD5E0) 100%);
   border-color: var(--color-text-secondary, #94a3b8);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
+}
+
+.pageNumber:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
 }
 
 .pageNumber:disabled {
@@ -641,15 +663,16 @@ tbody .actionsColumn {
 }
 
 .pageNumberActive {
-  background: var(--color-text, #334155);
+  background: linear-gradient(180deg, #5a82b5 0%, var(--color-secondary) 100%);
   color: white;
-  border-color: var(--color-text, #334155);
+  border-color: var(--color-secondary);
   font-weight: 600;
+  box-shadow: 0 1px 3px rgba(74, 111, 165, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
 
 .pageNumberActive:hover:not(:disabled) {
-  background: var(--color-text, #1e293b);
-  border-color: var(--color-text, #1e293b);
+  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
+  border-color: var(--color-secondary-hover);
 }
 
 .pageEllipsis {
@@ -671,7 +694,7 @@ tbody .actionsColumn {
   align-items: center;
   justify-content: center;
   z-index: 10;
-  border-radius: 10px;
+  border-radius: 8px;
 }
 
 .loadingOverlay p {
diff --git a/src/components/UiComponents/DropdownSelect/DropdownSelect.module.css b/src/components/UiComponents/DropdownSelect/DropdownSelect.module.css
index 558da4e..169c630 100644
--- a/src/components/UiComponents/DropdownSelect/DropdownSelect.module.css
+++ b/src/components/UiComponents/DropdownSelect/DropdownSelect.module.css
@@ -14,22 +14,24 @@
   font-size: 14px;
   font-family: var(--font-family);
   cursor: pointer;
-  transition: all 0.2s ease;
-  background-color: var(--color-bg);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  background: linear-gradient(180deg, var(--color-bg, #fff) 0%, #f8f9fa 100%);
   color: var(--color-text);
   min-width: 100%;
   box-sizing: border-box;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 
 .dropdownButton:hover:not(.disabled):not(:disabled) {
   border-color: var(--color-secondary);
-  background-color: var(--color-bg);
+  background: linear-gradient(180deg, var(--color-bg, #fff) 0%, #f0f2f5 100%);
   color: var(--color-text);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
 }
 
 .dropdownButton:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(var(--color-secondary-rgb, 74, 111, 165), 0.15);
+  box-shadow: 0 0 0 2px var(--color-bg, #fff), 0 0 0 4px rgba(var(--color-secondary-rgb, 74, 111, 165), 0.3);
 }
 
 .dropdownButton.disabled,
diff --git a/src/components/UiComponents/Popup/Popup.module.css b/src/components/UiComponents/Popup/Popup.module.css
index ce95dcd..23b9985 100644
--- a/src/components/UiComponents/Popup/Popup.module.css
+++ b/src/components/UiComponents/Popup/Popup.module.css
@@ -18,12 +18,16 @@
   border: 1px solid var(--color-border, #E2E8F0);
   background: var(--color-bg);
   border-radius: 10px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.03),
+    0 4px 8px rgba(0, 0, 0, 0.04),
+    0 12px 24px rgba(0, 0, 0, 0.08),
+    0 24px 48px rgba(0, 0, 0, 0.06);
   max-height: 90vh;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  animation: popupSlideIn 0.2s ease-out;
+  animation: popupSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* Size variants */
@@ -105,22 +109,30 @@
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
   font-family: var(--font-family);
-  background: var(--color-secondary);
+  background: linear-gradient(180deg, #5a82b5 0%, var(--color-secondary) 100%);
   color: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
 
 .actionButton:hover {
-  background: var(--color-secondary-hover);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
+  box-shadow: 0 3px 8px rgba(74, 111, 165, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transform: translateY(-1px);
 }
 
+.actionButton:active {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
+}
 
 .actionButton:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
 }
 
 
@@ -140,14 +152,14 @@
 }
 
 .closeButton {
-  background: var(--color-gray-disabled, #CBD5E0);
+  background: linear-gradient(180deg, #e8ecf0 0%, var(--color-gray-disabled, #CBD5E0) 100%);
   border: none;
   font-size: 18px;
   color: var(--color-text, #2D3748);
   cursor: pointer;
   padding: 8px;
   border-radius: 6px;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   line-height: 1;
   margin-left: 8px;
   display: flex;
@@ -155,12 +167,19 @@
   justify-content: center;
   height: 35px;
   width: 35px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
 .closeButton:hover {
-  background-color: var(--color-gray, #718096);
+  background: linear-gradient(180deg, var(--color-gray, #718096) 0%, var(--color-gray-hover, #4A5568) 100%);
   color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+.closeButton:active {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 /* Content section */
diff --git a/src/pages/Login.module.css b/src/pages/Login.module.css
index cb0ec8d..7026fba 100644
--- a/src/pages/Login.module.css
+++ b/src/pages/Login.module.css
@@ -148,13 +148,13 @@
   height: 50px;
   padding: 12px 20px;
   border-radius: 6px;
-
   font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   border: none;
   text-align: center;
+  letter-spacing: 0.01em;
 }
 
 .buttonContent {
@@ -170,32 +170,56 @@
 }
 
 .loginButton {
-  background-color: var(--color-secondary);
+  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
   color: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
 
 .loginButton:hover {
-  background-color: var(--color-secondary-hover);
+  background: linear-gradient(180deg, var(--color-secondary-hover) 0%, var(--color-secondary-hover) 100%);
+  box-shadow: 0 3px 8px rgba(74, 111, 165, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transform: translateY(-1px);
+}
+
+.loginButton:active {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
 .microsoftButton {
-  background-color: var(--color-gray-disabled, #CBD5E0);
+  background: linear-gradient(180deg, #e8ecf0 0%, var(--color-gray-disabled, #CBD5E0) 100%);
   color: var(--color-text);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
 .microsoftButton:hover {
-  background-color: var(--color-gray, #718096);
+  background: linear-gradient(180deg, var(--color-gray, #718096) 0%, var(--color-gray-hover, #4A5568) 100%);
   color: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+  transform: translateY(-1px);
+}
+
+.microsoftButton:active {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
 }
 
 .googleButton {
-  background-color: var(--color-gray-disabled, #CBD5E0);
+  background: linear-gradient(180deg, #e8ecf0 0%, var(--color-gray-disabled, #CBD5E0) 100%);
   color: var(--color-text);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
 .googleButton:hover {
-  background-color: var(--color-gray, #718096);
+  background: linear-gradient(180deg, var(--color-gray, #718096) 0%, var(--color-gray-hover, #4A5568) 100%);
   color: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+  transform: translateY(-1px);
+}
+
+.googleButton:active {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
 }
 
 .divider {
@@ -259,14 +283,22 @@
   font-weight: 600;
   cursor: pointer;
   border: none;
-  background-color: var(--color-secondary);
+  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
   color: #fff;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   font-family: var(--font-family);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
 
 .ctaPrimary:hover {
-  background-color: var(--color-secondary-hover);
+  background: linear-gradient(180deg, var(--color-secondary-hover) 0%, var(--color-secondary-hover) 100%);
+  box-shadow: 0 3px 8px rgba(74, 111, 165, 0.3);
+  transform: translateY(-1px);
+}
+
+.ctaPrimary:active {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
 .ctaSecondary {
@@ -278,14 +310,22 @@
   font-weight: 600;
   cursor: pointer;
   border: 1px solid var(--color-secondary);
-  background-color: transparent;
+  background: linear-gradient(180deg, rgba(var(--color-secondary-rgb, 74, 111, 165), 0.03) 0%, rgba(var(--color-secondary-rgb, 74, 111, 165), 0.08) 100%);
   color: var(--color-secondary);
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   font-family: var(--font-family);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
 .ctaSecondary:hover {
-  background-color: color-mix(in srgb, var(--color-secondary) 10%, transparent);
+  background: linear-gradient(180deg, rgba(var(--color-secondary-rgb, 74, 111, 165), 0.08) 0%, rgba(var(--color-secondary-rgb, 74, 111, 165), 0.15) 100%);
+  box-shadow: 0 2px 6px rgba(74, 111, 165, 0.15);
+  transform: translateY(-1px);
+}
+
+.ctaSecondary:active {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
 }
 
 button:disabled {
diff --git a/src/styles/buttons.css b/src/styles/buttons.css
index 5021487..7d261a5 100644
--- a/src/styles/buttons.css
+++ b/src/styles/buttons.css
@@ -43,7 +43,7 @@
   --button-border-radius: 6px;
   
   /* Button Transitions */
-  --button-transition: all 0.15s ease;
+  --button-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* Base Button Styles */
@@ -63,15 +63,18 @@
   position: relative;
   white-space: nowrap;
   user-select: none;
+  letter-spacing: 0.01em;
 }
 
-.button:focus {
-  box-shadow: 0 0 0 2px rgba(var(--color-secondary-rgb, 74, 111, 165), 0.25);
+.button:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px rgba(var(--color-secondary-rgb, 74, 111, 165), 0.5);
 }
 
 .button:disabled {
   cursor: not-allowed;
   opacity: 0.5;
+  box-shadow: none;
+  transform: none;
 }
 
 .button.loading {
@@ -90,49 +93,91 @@
 
 /* Button Variants */
 .buttonPrimary {
-  background: var(--button-primary-bg);
+  background: linear-gradient(180deg, var(--button-primary-bg) 0%, var(--button-primary-bg-hover) 100%);
   color: var(--button-primary-text);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
 
 .buttonPrimary:hover:not(:disabled) {
-  background: var(--button-primary-bg-hover);
+  background: linear-gradient(180deg, var(--button-primary-bg-hover) 0%, var(--button-primary-bg-hover) 100%);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transform: translateY(-1px);
+}
+
+.buttonPrimary:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .buttonSecondary {
-  background: var(--button-secondary-bg);
+  background: linear-gradient(180deg, var(--color-bg, #fff) 0%, var(--button-secondary-bg) 100%);
   color: var(--button-secondary-text);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  border: 1px solid var(--color-border, #E2E8F0);
 }
 
 .buttonSecondary:hover:not(:disabled) {
-  background: var(--color-gray);
+  background: linear-gradient(180deg, var(--color-gray) 0%, var(--color-gray-hover) 100%);
   color: white;
+  border-color: var(--color-gray);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  transform: translateY(-1px);
+}
+
+.buttonSecondary:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .buttonDanger {
-  background: var(--button-danger-bg);
+  background: linear-gradient(180deg, var(--button-danger-bg) 0%, var(--button-danger-bg-hover) 100%);
   color: var(--button-danger-text);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .buttonDanger:hover:not(:disabled) {
-  background: var(--button-danger-bg-hover);
+  background: linear-gradient(180deg, var(--button-danger-bg-hover) 0%, var(--button-danger-bg-hover) 100%);
+  box-shadow: 0 2px 6px rgba(197, 48, 48, 0.25);
+  transform: translateY(-1px);
+}
+
+.buttonDanger:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
 .buttonSuccess {
-  background: var(--button-success-bg);
+  background: linear-gradient(180deg, var(--button-success-bg) 0%, var(--button-success-bg-hover) 100%);
   color: var(--button-success-text);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .buttonSuccess:hover:not(:disabled) {
-  background: var(--button-success-bg-hover);
+  background: linear-gradient(180deg, var(--button-success-bg-hover) 0%, var(--button-success-bg-hover) 100%);
+  box-shadow: 0 2px 6px rgba(56, 161, 105, 0.25);
+  transform: translateY(-1px);
+}
+
+.buttonSuccess:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
 .buttonWarning {
-  background: var(--button-warning-bg);
+  background: linear-gradient(180deg, var(--button-warning-bg) 0%, var(--button-warning-bg-hover) 100%);
   color: var(--button-warning-text);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15);
 }
 
 .buttonWarning:hover:not(:disabled) {
-  background: var(--button-warning-bg-hover);
+  background: linear-gradient(180deg, var(--button-warning-bg-hover) 0%, var(--button-warning-bg-hover) 100%);
+  box-shadow: 0 2px 6px rgba(214, 158, 46, 0.25);
+  transform: translateY(-1px);
+}
+
+.buttonWarning:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
 /* Button Sizes */
@@ -169,6 +214,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  transition: transform 0.2s ease;
 }
 
 .buttonIconLeft {