diff --git a/src/renderer/src/components/CustomSelect.jsx b/src/renderer/src/components/CustomSelect.jsx index 88b87cb..a1ba385 100644 --- a/src/renderer/src/components/CustomSelect.jsx +++ b/src/renderer/src/components/CustomSelect.jsx @@ -10,11 +10,9 @@ export default function CustomSelect({ value, onChange, options, label }) { {label && }
- + {selectedOption.name} - - + - + {options.map((option) => ( - {({ selected, active }) => ( + {({ selected }) => ( <> {option.name} diff --git a/src/renderer/src/index.css b/src/renderer/src/index.css index a527cf0..87a8f8a 100644 --- a/src/renderer/src/index.css +++ b/src/renderer/src/index.css @@ -43,10 +43,12 @@ body { /* Glassmorphism utility */ .glass { - background: var(--panel-bg); - backdrop-filter: blur(12px); - border: 1px solid var(--glass-border); - border-radius: 12px; + background: rgba(255, 255, 255, 0.03); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); } /* Custom Titlebar */ @@ -268,39 +270,52 @@ body { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); - border-radius: 8px; - padding: 10px 12px; + border-radius: 10px; + padding: 12px 16px; color: var(--text-main); font-size: 14px; outline: none; cursor: pointer; - transition: border-color 0.2s; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + align-items: center; + justify-content: space-between; +} + +.select-custom:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(0, 242, 255, 0.3); } .select-custom:focus { border-color: var(--primary-cyan); + box-shadow: 0 0 0 2px rgba(0, 242, 255, 0.1); } .btn-primary { width: 100%; - padding: 14px; - border-radius: 30px; + padding: 16px; + border-radius: 12px; border: none; - background: linear-gradient(90deg, #8a2be2, #4b0082); - color: white; - font-weight: 600; + background: linear-gradient(135deg, var(--primary-cyan), var(--primary-magenta)); + color: #0b0c14; + font-weight: 700; font-size: 14px; text-transform: uppercase; - letter-spacing: 1px; + letter-spacing: 2px; cursor: pointer; - transition: all 0.3s; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + box-shadow: 0 0 20px rgba(0, 242, 255, 0.2); } .btn-primary:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4); - filter: brightness(1.2); + transform: translateY(-3px) scale(1.02); + box-shadow: 0 10px 25px rgba(255, 0, 229, 0.4); + filter: brightness(1.1); +} + +.btn-primary:active { + transform: translateY(-1px) scale(0.98); } /* Status Bar */ @@ -333,26 +348,40 @@ body { /* Custom Select Styles */ .relative { position: relative; } .absolute { position: absolute; } +.inset-y-0 { top: 0; bottom: 0; } +.left-0 { left: 0; } +.right-0 { right: 0; } .z-50 { z-index: 50; } .mt-1 { margin-top: 4px; } .w-full { width: 100%; } +.flex { display: flex; } +.items-center { align-items: center; } +.justify-between { justify-content: space-between; } +.text-left { text-align: left; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.block { display: block; } +.h-4 { height: 16px; } +.w-4 { width: 16px; } .bg-dark-glass { - background: rgba(15, 15, 25, 0.9); + background: rgba(15, 15, 25, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 10px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 12px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); + overflow: hidden; } .max-height-60 { max-height: 240px; } +.overflow-auto { overflow: auto; } +.rounded-md { border-radius: 8px; } +.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .py-1 { padding-top: 4px; padding-bottom: 4px; } .py-2 { padding-top: 8px; padding-bottom: 8px; } +.pl-3 { padding-left: 12px; } .pl-10 { padding-left: 40px; } .pr-4 { padding-right: 16px; } -.pl-3 { padding-left: 12px; } .select-none { user-select: none; } .cursor-default { cursor: default; } @@ -360,6 +389,22 @@ body { .font-medium { font-weight: 500; } .text-primary-cyan { color: var(--primary-cyan); } +.text-white { color: #ffffff; } + +/* Scrollbar styling for dropdown */ +.bg-dark-glass::-webkit-scrollbar { + width: 6px; +} +.bg-dark-glass::-webkit-scrollbar-track { + background: transparent; +} +.bg-dark-glass::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + border-radius: 10px; +} +.bg-dark-glass::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.2); +} /* Animation for select dropdown */ .transition { transition-property: opacity, transform; }