diff --git a/src/pages/ExportPage.scss b/src/pages/ExportPage.scss index 20cdce0..fa5fe6f 100644 --- a/src/pages/ExportPage.scss +++ b/src/pages/ExportPage.scss @@ -721,11 +721,9 @@ .card-export-btn { margin-top: auto; - border: none; + border: 1px solid transparent; border-radius: 7px; padding: 7px 9px; - background: var(--primary); - color: #fff; cursor: pointer; font-size: 12px; font-weight: 600; @@ -734,19 +732,40 @@ justify-content: center; gap: 6px; - &:hover { + &.primary { + background: var(--primary); + color: #fff; + border-color: transparent; + } + + &.primary:hover { background: var(--primary-hover); } + &.secondary { + background: color-mix(in srgb, var(--bg-primary) 88%, var(--bg-secondary)); + color: var(--text-secondary); + border-color: color-mix(in srgb, var(--border-color) 85%, transparent); + } + + &.secondary:hover { + border-color: color-mix(in srgb, var(--primary) 28%, transparent); + color: var(--text-primary); + background: color-mix(in srgb, var(--bg-primary) 94%, var(--primary) 6%); + } + &:disabled { cursor: not-allowed; opacity: 0.86; } &.running { - background: var(--primary-hover); opacity: 0.65; } + + &.primary.running { + background: var(--primary-hover); + } } &.skeleton-card { diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx index 62f3547..89449ea 100644 --- a/src/pages/ExportPage.tsx +++ b/src/pages/ExportPage.tsx @@ -5364,6 +5364,7 @@ function ExportPage() { ? isSnsCardStatsLoading : false const isCardRunning = runningCardTypes.has(card.type) + const isPrimaryCard = card.type === 'text' return (