From bea707c1d1648cbc45b23ed0513eec938d749569 Mon Sep 17 00:00:00 2001 From: suyao Date: Tue, 27 Jan 2026 19:49:46 +0800 Subject: [PATCH] fix: ui --- .../Onboarding/styles/driver-theme.css | 71 +++++++++++++++---- .../UserGuide/CompletionModal/styles.ts | 7 +- .../components/UserGuide/GuidePage/styles.ts | 3 +- .../ProviderSettings/ModelList/ModelList.tsx | 7 +- 4 files changed, 70 insertions(+), 18 deletions(-) diff --git a/src/renderer/src/components/Onboarding/styles/driver-theme.css b/src/renderer/src/components/Onboarding/styles/driver-theme.css index 2544e74235..bff1fb17fe 100644 --- a/src/renderer/src/components/Onboarding/styles/driver-theme.css +++ b/src/renderer/src/components/Onboarding/styles/driver-theme.css @@ -132,9 +132,10 @@ /* User Guide specific styles matching Figma design */ /* Supports both light and dark modes */ +/* Default uses light mode colors, dark mode overrides below */ .driver-popover.user-guide-popover { - background: var(--color-background-soft) !important; - background-color: var(--color-background-soft) !important; + background: #f7f8f7 !important; + background-color: #f7f8f7 !important; background-image: none !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; @@ -146,8 +147,10 @@ opacity: 1 !important; } -/* Dark mode shadow adjustment */ +/* Dark mode: solid dark background */ .driver-popover.user-guide-popover.dark { + background: #222222 !important; + background-color: #222222 !important; box-shadow: 0px 4px 13.8px 0px rgba(0, 0, 0, 0.4) !important; } @@ -322,27 +325,45 @@ height: 24px !important; } -/* Arrow styles for user guide popover */ +/* Arrow styles for user guide popover - default (light mode) */ .driver-popover.user-guide-popover .driver-popover-arrow-side-left { - border-right-color: var(--color-background-soft) !important; + border-right-color: #f7f8f7 !important; } .driver-popover.user-guide-popover .driver-popover-arrow-side-right { - border-left-color: var(--color-background-soft) !important; + border-left-color: #f7f8f7 !important; } .driver-popover.user-guide-popover .driver-popover-arrow-side-top { - border-bottom-color: var(--color-background-soft) !important; + border-bottom-color: #f7f8f7 !important; } .driver-popover.user-guide-popover .driver-popover-arrow-side-bottom { - border-top-color: var(--color-background-soft) !important; + border-top-color: #f7f8f7 !important; +} + +/* Arrow styles for user guide popover - dark mode */ +.driver-popover.user-guide-popover.dark .driver-popover-arrow-side-left { + border-right-color: #222222 !important; +} + +.driver-popover.user-guide-popover.dark .driver-popover-arrow-side-right { + border-left-color: #222222 !important; +} + +.driver-popover.user-guide-popover.dark .driver-popover-arrow-side-top { + border-bottom-color: #222222 !important; +} + +.driver-popover.user-guide-popover.dark .driver-popover-arrow-side-bottom { + border-top-color: #222222 !important; } /* Step 2: Minimal popover for pointing to target elements */ +/* Default uses light mode colors, dark mode overrides below */ .driver-popover.user-guide-popover-minimal { - background: var(--color-background-soft) !important; - background-color: var(--color-background-soft) !important; + background: #f7f8f7 !important; + background-color: #f7f8f7 !important; background-image: none !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; @@ -356,7 +377,10 @@ opacity: 1 !important; } +/* Dark mode: solid dark background */ .driver-popover.user-guide-popover-minimal.dark { + background: #222222 !important; + background-color: #222222 !important; box-shadow: 0px 4px 13.8px 0px rgba(0, 0, 0, 0.4) !important; } @@ -511,19 +535,36 @@ background-color: #35c052 !important; } -/* Arrow styles for minimal popover */ +/* Arrow styles for minimal popover - default (light mode) */ .driver-popover.user-guide-popover-minimal .driver-popover-arrow-side-left { - border-right-color: var(--color-background-soft) !important; + border-right-color: #f7f8f7 !important; } .driver-popover.user-guide-popover-minimal .driver-popover-arrow-side-right { - border-left-color: var(--color-background-soft) !important; + border-left-color: #f7f8f7 !important; } .driver-popover.user-guide-popover-minimal .driver-popover-arrow-side-top { - border-bottom-color: var(--color-background-soft) !important; + border-bottom-color: #f7f8f7 !important; } .driver-popover.user-guide-popover-minimal .driver-popover-arrow-side-bottom { - border-top-color: var(--color-background-soft) !important; + border-top-color: #f7f8f7 !important; +} + +/* Arrow styles for minimal popover - dark mode */ +.driver-popover.user-guide-popover-minimal.dark .driver-popover-arrow-side-left { + border-right-color: #222222 !important; +} + +.driver-popover.user-guide-popover-minimal.dark .driver-popover-arrow-side-right { + border-left-color: #222222 !important; +} + +.driver-popover.user-guide-popover-minimal.dark .driver-popover-arrow-side-top { + border-bottom-color: #222222 !important; +} + +.driver-popover.user-guide-popover-minimal.dark .driver-popover-arrow-side-bottom { + border-top-color: #222222 !important; } diff --git a/src/renderer/src/components/UserGuide/CompletionModal/styles.ts b/src/renderer/src/components/UserGuide/CompletionModal/styles.ts index 9db9f225f1..abd0743634 100644 --- a/src/renderer/src/components/UserGuide/CompletionModal/styles.ts +++ b/src/renderer/src/components/UserGuide/CompletionModal/styles.ts @@ -86,8 +86,12 @@ export const AssistantsSection = styled.div` export const AssistantsGrid = styled.div` display: grid; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; + + @media (max-width: 560px) { + grid-template-columns: 1fr; + } ` export const AssistantCardContainer = styled.div` @@ -100,6 +104,7 @@ export const AssistantCardContainer = styled.div` border: 1px solid var(--color-border); background: var(--color-background); cursor: pointer; + min-width: 0; transition: all 0.2s ease; &:hover { diff --git a/src/renderer/src/components/UserGuide/GuidePage/styles.ts b/src/renderer/src/components/UserGuide/GuidePage/styles.ts index 0c500a2f76..15b6dd720a 100644 --- a/src/renderer/src/components/UserGuide/GuidePage/styles.ts +++ b/src/renderer/src/components/UserGuide/GuidePage/styles.ts @@ -240,7 +240,8 @@ export const RightPanel = styled.div<{ $gradient?: string }>` justify-content: center; padding: 40px; background: ${(props) => props.$gradient || gradients.assistants}; - border-radius: 24px; + border-top-left-radius: 24px; + border-bottom-left-radius: 24px; position: relative; overflow: hidden; margin: 0; diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx index 28dff97704..1fe13cee91 100644 --- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx +++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx @@ -179,7 +179,12 @@ const ModelList: React.FC = ({ providerId }) => { )} - {provider.id !== 'ovms' ? (