From b763e438b8eec067c743a15a5bd2d18f43029187 Mon Sep 17 00:00:00 2001 From: smanylov Date: Thu, 15 Jan 2026 13:11:53 +0700 Subject: [PATCH] edit styles --- src/app/[locale]/pages/marking-audio/page.tsx | 4 +- src/app/[locale]/pages/marking-photo/page.tsx | 4 +- src/app/[locale]/pages/marking-video/page.tsx | 4 +- src/app/components/dropDownList.tsx | 8 +- src/app/components/upload-section-file.tsx | 35 ++++---- src/app/styles/global-styles.scss | 80 +++++++++++++++++++ src/app/styles/pages-styles.scss | 32 +++++--- 7 files changed, 127 insertions(+), 40 deletions(-) diff --git a/src/app/[locale]/pages/marking-audio/page.tsx b/src/app/[locale]/pages/marking-audio/page.tsx index 17774ed..02a3364 100644 --- a/src/app/[locale]/pages/marking-audio/page.tsx +++ b/src/app/[locale]/pages/marking-audio/page.tsx @@ -51,12 +51,12 @@ export default async function Page() { description="multi-layered-protection-for-your-audios" /> -
+{/*
-
+
*/} diff --git a/src/app/[locale]/pages/marking-photo/page.tsx b/src/app/[locale]/pages/marking-photo/page.tsx index c3fbce1..8d149f0 100644 --- a/src/app/[locale]/pages/marking-photo/page.tsx +++ b/src/app/[locale]/pages/marking-photo/page.tsx @@ -48,12 +48,12 @@ export default async function Page() { /> -
+ {/*
-
+
*/} diff --git a/src/app/[locale]/pages/marking-video/page.tsx b/src/app/[locale]/pages/marking-video/page.tsx index bb89d72..8ee95b9 100644 --- a/src/app/[locale]/pages/marking-video/page.tsx +++ b/src/app/[locale]/pages/marking-video/page.tsx @@ -51,12 +51,12 @@ export default async function Page() { description="multi-layered-protection-for-your-videos" /> -
+ {/*
-
+
*/} diff --git a/src/app/components/dropDownList.tsx b/src/app/components/dropDownList.tsx index e926a1b..d242d6b 100644 --- a/src/app/components/dropDownList.tsx +++ b/src/app/components/dropDownList.tsx @@ -31,7 +31,7 @@ export default function DropDownList({ children, value, callBack, translatedValu callBack(childValue || ""); setIsOpen(false); }, - className: `flex items-center w-full px-4 py-2 text-sm text-left hover:bg-blue-100 cursor-pointer select-none ${value === childValue ? "font-bold" : ""}`, + className: `dropdown-item ${value === childValue ? "current" : ""}`, key: index, }); } @@ -39,12 +39,12 @@ export default function DropDownList({ children, value, callBack, translatedValu }); return ( -
+
{isOpen && ( -
+

    {t('drag-the-file-here')}

    -

    + {/*

    {t('or')} +

    */} + + {fileType === "image" && ( +

    + {t('image-resolution')}: 100x100 - 10000x10000 {t('pixels')} +

    + )} +

    + {t('file-format')}: {acceptString}

    +

    + {t('file-size')}: {t('to')} {(maxFileSize / 1024 / 1024)} {t('mb')} +

    + - {fileType === "image" && ( -

    - {t('image-resolution')}: 100x100 - 10000x10000 {t('pixels')} -

    - )} -

    - {t('file-size')}: {t('to')} {(maxFileSize / 1024 / 1024)} {t('mb')} -

    -

    - {t('file-format')}: {acceptString} -

    - {error && (

    {error}

    diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index c25c771..d0b89cb 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -458,6 +458,86 @@ } } +.dropdown-wrapper { + position: relative; + width: 100%; + + .dropdown-button { + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + padding: 8px 16px; + + font-size: 14px; + font-weight: 500; + line-height: 1.25; + + background-color: #ffffff; + border: 2px solid #e2e8f0; + border-radius: 12px; + + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + + transition: background-color 0.2s ease-in-out; + + &:hover { + background-color: #f9fafb; + } + + &:focus { + outline: none; + box-shadow: 0 0 0 2px rgba(99, 101, 241, 0.53); + outline: 2px solid transparent; + outline-offset: 2px; + } + } + + .dropdown-list { + position: absolute; + right: 0; + z-index: 10; + width: 100%; + margin-top: 8px; + + transform-origin: top right; + + background-color: #ffffff; + border: 2px solid #e2e8f0; + border-radius: 12px; + + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); + + &:focus { + outline: none; + } + } + + .dropdown-item { + display: flex; + align-items: center; + + width: 100%; + padding: 8px 16px; + + font-size: 14px; + text-align: left; + + cursor: pointer; + user-select: none; + + &:hover { + background-color: #dbeafe; + } + + &.current { + font-weight: 700; + } + } +} + .yaPreloadingSuggestBlockContainer { height: 52px !important; } \ No newline at end of file diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index b917c06..0be16f0 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -329,12 +329,23 @@ .drag-drop-zone { border: 3px dashed v.$p-color; - border-radius: 15px; - padding: 40px 20px; + border-radius: .75rem; + padding: 2rem; text-align: center; background: linear-gradient(135deg, #f0f9ff, #e0f2fe); margin-bottom: 20px; - transition: all 0.3s ease; + transition: all .2s ease-in-out; + + &.dragging { + border-color: #3b82f6; + background-color: #eff6ff; + } + + &:hover { + border-color: #764ba2; + background: linear-gradient(135deg, #e0f2fe, #ddd6fe); + transform: scale(1.01); + } .icon { width: 70px; @@ -352,12 +363,13 @@ .description { color: v.$text-s; margin-bottom: 5px; - text-align: start; + text-align: center; } .btn-primary { background: v.$p-color; - margin-bottom: 40px; + margin-bottom: 10px; + margin-top: 20px; } } @@ -529,8 +541,10 @@ padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; - border: 1px solid; - border-radius: 0.375rem; + border: 2px solid #e2e8f0; + border-radius: 10px; + box-shadow: 0 1px 2px #0000000d; + /* */ &:hover { background-color: v.$bg-light; @@ -548,12 +562,12 @@ gap: 0.25rem; button { - border: 1px solid v.$p-color; + border: 2px solid v.$p-color; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.25rem; padding-bottom: 0.25rem; - border-radius: 0.375rem; + border-radius: 10px; &.current { background-color: v.$p-color;