Skip to content

AskDocs/Ask SpotterCode panel updates #540

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ShashiSubramanya wants to merge 4 commits into
base: main
Choose a base branch
from
+264 −87
Open

AskDocs/Ask SpotterCode panel updates #540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4aaa686
dark theme edits
ShashiSubramanya Aug 27, 2026
859ef2a
spottercode panel update for dark mode
ShashiSubramanya Sep 1, 2026
3fd7da6
ask spottercode CTA hover issue fix
ShashiSubramanya Sep 1, 2026
90ba477
Ask SpotterCode CTA button dark theme changes
ShashiSubramanya Sep 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 23 additions & 14 deletions src/components/Document/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,30 +23,36 @@
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
color: #1d232f !important;
background: #fff;
color: var(--primary-color) !important;
background: var(--panel-bg-color);
border-radius: 100px;
text-decoration: none;
white-space: nowrap;
pointer-events: all;
box-shadow:
0 4px 16px 0 rgba(25, 35, 49, 0.14),
0 1px 4px 0 rgba(25, 35, 49, 0.06);
box-shadow: var(--box-shadow-hover);
transition: box-shadow 0.15s ease;
font-family: 'Optimo-Plain', sans-serif;
border: 1px solid transparent;
isolation: isolate;

// Sparkle icon
// Sparkle icon — shape supplied as a mask so its color follows
// --rd-sys-color-content-brand, the same token the FloatingAssistant
// widget's own sparkle icon (IconColor.BLUE) resolves its fill from,
// keeping the two in sync in both themes.
&::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27' fill='%232770EF' stroke='none'%3E%3Cpath fill='%232770EF' stroke='none' d='M8.25809 7.21109C8.83155 5.59342 11.1191 5.59349 11.6927 7.21109L13.4163 12.0753C13.4919 12.2885 13.6602 12.4568 13.8733 12.5324L18.7376 14.256C20.3555 14.8294 20.3555 17.1172 18.7376 17.6906L13.8733 19.4142C13.6601 19.4898 13.4918 19.658 13.4163 19.8712L11.6927 24.7355C11.1191 26.353 8.83157 26.3531 8.25809 24.7355L6.53445 19.8712C6.4589 19.658 6.29064 19.4898 6.07742 19.4142L1.21316 17.6906C-0.404397 17.1171 -0.404379 14.8295 1.21316 14.256L6.07742 12.5324C6.29058 12.4568 6.45883 12.2885 6.53445 12.0753L8.25809 7.21109ZM20.2805 0.49136C20.6395 -0.163697 21.6064 -0.163877 21.9651 0.49136L22.0315 0.642727L22.888 3.05972L25.3059 3.91616C26.1625 4.21966 26.1622 5.43079 25.3059 5.73452L22.888 6.59097L22.0315 9.00894C21.7279 9.86544 20.5167 9.86552 20.2132 9.00894L19.3567 6.59097L16.9397 5.73452C16.0831 5.43098 16.0831 4.21969 16.9397 3.91616L19.3567 3.05972L20.2132 0.642727L20.2805 0.49136Z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: var(--rd-sys-color-content-brand, #2770EF);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27'%3E%3Cpath d='M8.25809 7.21109C8.83155 5.59342 11.1191 5.59349 11.6927 7.21109L13.4163 12.0753C13.4919 12.2885 13.6602 12.4568 13.8733 12.5324L18.7376 14.256C20.3555 14.8294 20.3555 17.1172 18.7376 17.6906L13.8733 19.4142C13.6601 19.4898 13.4918 19.658 13.4163 19.8712L11.6927 24.7355C11.1191 26.353 8.83157 26.3531 8.25809 24.7355L6.53445 19.8712C6.4589 19.658 6.29064 19.4898 6.07742 19.4142L1.21316 17.6906C-0.404397 17.1171 -0.404379 14.8295 1.21316 14.256L6.07742 12.5324C6.29058 12.4568 6.45883 12.2885 6.53445 12.0753L8.25809 7.21109ZM20.2805 0.49136C20.6395 -0.163697 21.6064 -0.163877 21.9651 0.49136L22.0315 0.642727L22.888 3.05972L25.3059 3.91616C26.1625 4.21966 26.1622 5.43079 25.3059 5.73452L22.888 6.59097L22.0315 9.00894C21.7279 9.86544 20.5167 9.86552 20.2132 9.00894L19.3567 6.59097L16.9397 5.73452C16.0831 5.43098 16.0831 4.21969 16.9397 3.91616L19.3567 3.05972L20.2132 0.642727L20.2805 0.49136Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27'%3E%3Cpath d='M8.25809 7.21109C8.83155 5.59342 11.1191 5.59349 11.6927 7.21109L13.4163 12.0753C13.4919 12.2885 13.6602 12.4568 13.8733 12.5324L18.7376 14.256C20.3555 14.8294 20.3555 17.1172 18.7376 17.6906L13.8733 19.4142C13.6601 19.4898 13.4918 19.658 13.4163 19.8712L11.6927 24.7355C11.1191 26.353 8.83157 26.3531 8.25809 24.7355L6.53445 19.8712C6.4589 19.658 6.29064 19.4898 6.07742 19.4142L1.21316 17.6906C-0.404397 17.1171 -0.404379 14.8295 1.21316 14.256L6.07742 12.5324C6.29058 12.4568 6.45883 12.2885 6.53445 12.0753L8.25809 7.21109ZM20.2805 0.49136C20.6395 -0.163697 21.6064 -0.163877 21.9651 0.49136L22.0315 0.642727L22.888 3.05972L25.3059 3.91616C26.1625 4.21966 26.1622 5.43079 25.3059 5.73452L22.888 6.59097L22.0315 9.00894C21.7279 9.86544 20.5167 9.86552 20.2132 9.00894L19.3567 6.59097L16.9397 5.73452C16.0831 5.43098 16.0831 4.21969 16.9397 3.91616L19.3567 3.05972L20.2132 0.642727L20.2805 0.49136Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
flex-shrink: 0;
position: relative;
z-index: 1;
Expand Down Expand Up @@ -81,11 +87,9 @@
}

&:hover {
color: #1d232f !important;
color: var(--primary-color) !important;
text-decoration: none;
box-shadow:
0 4px 16px 0 rgba(25, 35, 49, 0.14),
0 1px 4px 0 rgba(25, 35, 49, 0.06);
box-shadow: var(--box-shadow-hover);

&::after {
opacity: 1;
Expand All @@ -94,6 +98,11 @@
}
}

#wrapper[data-theme='dark'] .selection-cta-button,
#docsModal[data-theme='dark'] .selection-cta-button {
background: #26282C;
}

.documentWrapper {
width: calc(98%);
color: var(--primary-color);
Expand Down
7 changes: 7 additions & 0 deletions src/components/Document/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,13 @@ const Document = (props: {
if (target.closest('.selection-cta-button')) return;
if (target.closest('.floating-assistant__panel, .floating-assistant__chip-ring')) return;

// Only offer "Ask SpotterCode" for selections inside the main article
// body — not the left nav, header, footer, or right-side doc map/TOC.
if (!target.closest('.documentView')) {
setSelectionPos(null);
return;
}

// If mouse didn't move (plain click, not a drag-select), don't re-show
const moved = Math.abs(e.clientX - mouseDownX) > 3 || Math.abs(e.clientY - mouseDownY) > 3;
if (!moved) return;
Expand Down
Loading
Loading