From f0534bd0f5505ac5dbdbbfa63a28b0d7219fd6f1 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 24 Feb 2026 17:17:47 +0100 Subject: [PATCH] Fix style --- .../SettingsModal/SettingsModal.module.css | 71 +++++++++++++------ 1 file changed, 48 insertions(+), 23 deletions(-) diff --git a/src/pages/Profile/components/SettingsModal/SettingsModal.module.css b/src/pages/Profile/components/SettingsModal/SettingsModal.module.css index d6b0b12..7808db3 100644 --- a/src/pages/Profile/components/SettingsModal/SettingsModal.module.css +++ b/src/pages/Profile/components/SettingsModal/SettingsModal.module.css @@ -1,73 +1,98 @@ .content { width: 100%; - padding: 16px; + padding: 20px; display: flex; flex-direction: column; - gap: 20px; + gap: 28px; } .modifyIcon { - height: 28px; - width: 28px; + height: 26px; + width: 26px; + transition: transform 0.2s ease, opacity 0.2s ease; +} + +.modifyIcon:hover { + transform: rotate(15deg); + opacity: 0.8; } .section { display: flex; flex-direction: column; - gap: 12px; - margin-top: 10px; + gap: 16px; + padding: 18px; + border-radius: 12px; + background: var(--glass-bg, rgba(255, 255, 255, 0.25)); + backdrop-filter: blur(6px); } .section h3 { - font-size: 1.1rem; - margin-bottom: 5px; + font-size: 1.15rem; + font-weight: 600; } .section h4 { - font-size: 0.95rem; + font-size: 0.9rem; font-weight: 500; -} - -.submitBtn { - width: 100%; - margin-top: 15px; + opacity: 0.85; } .section button { width: 100%; } -@media (min-width: 600px) { +.submitBtn { + width: 100%; + text-align: center; + margin-top: 10px; +} + +.alignText { + text-align: center; + line-height: 1.5; +} + +.section :global(input) { + width: 100%; + box-sizing: border-box; +} + +@media (min-width: 640px) { .content { - padding: 24px; + padding: 28px; + gap: 32px; } - .section h3 { - font-size: 1.2rem; + .section { + padding: 22px; + gap: 18px; } .submitBtn { width: auto; align-self: center; - min-width: 200px; + min-width: 220px; } .section button { width: fit-content; } } + @media (min-width: 900px) { .content { - padding: 30px; - gap: 30px; + padding: 36px; + gap: 36px; } .section { - gap: 14px; + padding: 26px; + border-radius: 16px; } .modifyIcon { height: 30px; width: 30px; } -} +} \ No newline at end of file