diff --git a/astro.config.ts b/astro.config.ts index fcf2a3ae2..a93fee6e9 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -41,17 +41,35 @@ export default defineConfig({ astroCallouts(), solidityRemixCode(), expressiveCode({ - themes: ["dark-plus"], + // the blog's code panel (frontends blog.module.css) in light mode, a warm near-black in + // dark mode; the site switches themes with the `dark` class on , not the media query + themes: ["github-light", "github-dark"], + useDarkModeMediaQuery: false, + themeCssSelector: (theme) => (theme.type === "dark" ? ".dark" : false), defaultProps: { frame: "code", }, styleOverrides: { - borderRadius: "27px", - borderColor: "transparent", + borderRadius: "12px", + borderWidth: "1px", + borderColor: ({ theme }) => (theme.type === "dark" ? "#211F1D" : "#EFEBE6"), + codeBackground: ({ theme }) => (theme.type === "dark" ? "#141312" : "#FAF9F8"), + codeFontFamily: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace', + codeFontSize: "13.5px", + codeLineHeight: "1.65", + uiFontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', frames: { shadowColor: "transparent", editorTabBorderRadius: "0.5rem", - editorBackground: "#2b2b2b", + editorBackground: ({ theme }) => (theme.type === "dark" ? "#141312" : "#FAF9F8"), + editorTabBarBackground: ({ theme }) => (theme.type === "dark" ? "#1B1A18" : "#F4F2F0"), + editorActiveTabBackground: ({ theme }) => (theme.type === "dark" ? "#141312" : "#FAF9F8"), + editorActiveTabIndicatorTopColor: "transparent", + editorActiveTabIndicatorBottomColor: "transparent", + editorTabBarBorderBottomColor: ({ theme }) => (theme.type === "dark" ? "#211F1D" : "#EFEBE6"), + terminalBackground: ({ theme }) => (theme.type === "dark" ? "#141312" : "#FAF9F8"), + terminalTitlebarBackground: ({ theme }) => (theme.type === "dark" ? "#1B1A18" : "#F4F2F0"), + terminalTitlebarBorderBottomColor: ({ theme }) => (theme.type === "dark" ? "#211F1D" : "#EFEBE6"), }, }, }), diff --git a/public/assets/icons/apple-touch-icon-256x256.png b/public/assets/icons/apple-touch-icon-256x256.png index 5d2d96b1a..d66a95153 100644 Binary files a/public/assets/icons/apple-touch-icon-256x256.png and b/public/assets/icons/apple-touch-icon-256x256.png differ diff --git a/public/assets/icons/favicon-32x32.png b/public/assets/icons/favicon-32x32.png index b6291d994..d3aa36e67 100644 Binary files a/public/assets/icons/favicon-32x32.png and b/public/assets/icons/favicon-32x32.png differ diff --git a/public/assets/icons/favicon.ico b/public/assets/icons/favicon.ico index 756e7314f..b0b1bd844 100644 Binary files a/public/assets/icons/favicon.ico and b/public/assets/icons/favicon.ico differ diff --git a/public/favicon.ico b/public/favicon.ico index 756e7314f..b0b1bd844 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 101d0d08a..90fa57f12 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -166,7 +166,6 @@ "aboutScroll": { "title": "About Scroll", "bugBounty": "Bug Bounty", - "joinUs": "Join Us", "healthStatus": "Health Status", "privacyPolicy": "Privacy Policy", "termsAndConditions": "Terms and Conditions" @@ -176,7 +175,6 @@ "scrollDocsURL": "https://docs.scroll.io/", "blog": "Blog", "documentation": "Documentation", - "brandKit": "Brand Kit", "audits": "Audits" }, "followUs": { diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json index 6c9eef1a6..9a692d4aa 100644 --- a/public/locales/es/translation.json +++ b/public/locales/es/translation.json @@ -169,7 +169,6 @@ "aboutScroll": { "title": "Acerca de Scroll", "bugBounty": "Cazarecompensas de bugs", - "joinUs": "Únete a nosotros", "healthStatus": "Estado de servicios", "privacyPolicy": "Políticas de privacidad", "termsAndConditions": "Terminos y condiciones" @@ -179,7 +178,6 @@ "scrollDocsURL": "https://docs.scroll.io/es", "blog": "Blog", "documentation": "Documentación", - "brandKit": "Kit de Marca", "audits": "Auditorías" }, "followUs": { diff --git a/public/locales/tr/translation.json b/public/locales/tr/translation.json index fe090af2a..1ac0c25b8 100644 --- a/public/locales/tr/translation.json +++ b/public/locales/tr/translation.json @@ -167,7 +167,6 @@ "aboutScroll": { "title": "Scroll Hakkında", "bugBounty": "Hata Ödül Programı", - "joinUs": "Bize Katılın", "healthStatus": "Sağlık Durumu", "privacyPolicy": "Gizlilik Politikası", "termsAndConditions": "Şartlar ve Koşullar" @@ -177,7 +176,6 @@ "scrollDocsURL": "https://docs.scroll.io/", "blog": "Blog", "documentation": "Dokümantasyon", - "brandKit": "Marka Kiti", "audits": "Denetimler" }, "followUs": { diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json index afe3970de..b2a55f146 100644 --- a/public/locales/zh/translation.json +++ b/public/locales/zh/translation.json @@ -166,7 +166,6 @@ "aboutScroll": { "title": "关于 Scroll", "bugBounty": "漏洞赏金", - "joinUs": "加入我们", "healthStatus": "健康状况", "privacyPolicy": "隐私政策", "termsAndConditions": "条款和条件" @@ -176,7 +175,6 @@ "scrollDocsURL": "https://docs.scroll.io/", "blog": "博客", "documentation": "文档", - "brandKit": "品牌工具包", "audits": "审计" }, "followUs": { diff --git a/src/assets/svgs/home/Note.svg b/src/assets/svgs/home/Note.svg index 9f6db1d02..16d9b45ef 100644 --- a/src/assets/svgs/home/Note.svg +++ b/src/assets/svgs/home/Note.svg @@ -1,10 +1,10 @@ - - - - - + + + + + diff --git a/src/assets/svgs/home/home-sdk.svg b/src/assets/svgs/home/home-sdk.svg index d63c492c7..56644c6ba 100644 --- a/src/assets/svgs/home/home-sdk.svg +++ b/src/assets/svgs/home/home-sdk.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/assets/svgs/main/next.svg b/src/assets/svgs/main/next.svg index 7e53e0d72..d78a9ff49 100644 --- a/src/assets/svgs/main/next.svg +++ b/src/assets/svgs/main/next.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svgs/scroll-mark.svg b/src/assets/svgs/scroll-mark.svg new file mode 100644 index 000000000..b6866e14a --- /dev/null +++ b/src/assets/svgs/scroll-mark.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Aside.astro b/src/components/Aside.astro index dbbb3891b..8549deda6 100644 --- a/src/components/Aside.astro +++ b/src/components/Aside.astro @@ -21,7 +21,7 @@ const icons = {
- +
@@ -38,45 +38,60 @@ const icons = { diff --git a/src/components/Header/LanguageSelector/LanguageSelector.astro b/src/components/Header/LanguageSelector/LanguageSelector.astro index b950f43d4..84122e94f 100644 --- a/src/components/Header/LanguageSelector/LanguageSelector.astro +++ b/src/components/Header/LanguageSelector/LanguageSelector.astro @@ -10,7 +10,6 @@ const supportedLanguages = i18next.languages const { pathname } = Astro.url const { showFlag = false, languageMapping } = Astro.props -const { dark } = Astro.props const getLabel = (language) => { const flag = showFlag ? localeEmoji(language) + " " : "" @@ -26,13 +25,7 @@ const getLabel = (language) => { ---
-
+
{ {getLabel(supportedLanguages[0])}
-
    +
      { supportedLanguages.map((supportedLanguage, idx) => { let value = localizePath(pathname, supportedLanguage) const label = getLabel(supportedLanguage) return (
    • @@ -93,30 +80,36 @@ const getLabel = (language) => { padding-top: 4px; } .current-language { - width: 100px; - border-radius: 5px; - border-width: 1px; - border-style: solid; + width: 108px; + border-radius: 999px; + border: 1px solid var(--sc-line); display: flex; height: 36px; - padding: 0 12px; + padding: 0 14px; justify-content: space-between; align-items: center; cursor: pointer; + color: var(--sc-ink-2); + transition: color 0.25s var(--sc-ease), border-color 0.25s var(--sc-ease), background-color 0.25s var(--sc-ease); + } + + .language-selector:hover .current-language { + color: var(--sc-ink); + border-color: var(--sc-ink-4); + background: var(--sc-surface-2); } .options-list { - width: 100px; + width: 140px; font-size: 14px; font-weight: 500; - letter-spacing: 0.14px; - padding: 4px 12px; - border-radius: 5px; - border-width: 1px; - border-style: solid; + padding: 6px; + border-radius: 12px; + border: 1px solid var(--sc-line); + background: var(--sc-surface); + box-shadow: 0 20px 50px -24px rgba(46, 27, 112, 0.3); overflow: hidden; cursor: pointer; - transition: height 0.3s ease; display: flex; justify-content: center; align-items: center; @@ -129,7 +122,19 @@ const getLabel = (language) => { justify-content: space-between; align-items: center; flex-direction: row; - padding: 8px 0px; + padding: 8px 10px; + border-radius: 8px; + color: var(--sc-ink-2); + transition: color 0.2s var(--sc-ease), background-color 0.2s var(--sc-ease); + } + + .options-list li:hover, + .options-list li.is-current { + color: var(--sc-ink); + } + + .options-list li:hover { + background: var(--sc-surface-2); } .options-list li svg, @@ -140,11 +145,28 @@ const getLabel = (language) => { color: inherit; } + /* phones: the globe alone, so the bar keeps room for search and the menu */ + @media (max-width: 50em) { + .current-language { + width: 36px; + padding: 0; + justify-content: center; + } + .current-language span { + display: none; + } + .options-modal { + right: 0; + } + } + .options-list li span, .current-language span { flex: 1; text-align: left; margin-left: 8px; + font-size: 13px; + line-height: 1; color: inherit; } diff --git a/src/components/Header/ScrollBrand.astro b/src/components/Header/ScrollBrand.astro new file mode 100644 index 000000000..289ad65ad --- /dev/null +++ b/src/components/Header/ScrollBrand.astro @@ -0,0 +1,77 @@ +--- +/** + * The Scroll brand as scroll.io's landing page draws it (frontends/design/landing.html): the + * scroll mark and the word, 12 apart, with "Docs" on the faint pill the landing family puts + * behind its brand word. The mark is drawn in currentColor so it follows the theme. + */ +export type Props = { + href: string + label?: string +} + +const { href, label = "Docs" } = Astro.props +--- + + + + Scroll + {label} + + + diff --git a/src/components/Header/Search/Search.module.css b/src/components/Header/Search/Search.module.css index 59cb45200..bd99b3dd4 100644 --- a/src/components/Header/Search/Search.module.css +++ b/src/components/Header/Search/Search.module.css @@ -1,5 +1,10 @@ /** Style Algolia */ +#searchModal { + background: var(--sc-surface); + color: var(--sc-ink); +} + #searchModal.mini { position: fixed; top: 65px; @@ -15,6 +20,8 @@ height: fit-content; position: absolute; border-radius: 24px; + border: 1px solid var(--sc-line); + box-shadow: var(--sc-shadow-lift); padding-top: 0; width: 100%; } @@ -38,11 +45,13 @@ cursor: pointer; align-items: center; width: 100%; - height: 35px; - border-radius: 40px; - font-style: italic; - - @apply border-divider text-black gap-2 bg-[#f6f6f6]; + height: 36px; + border-radius: 999px; + border: 1px solid var(--sc-line); + background: var(--sc-surface-2); + color: var(--sc-ink-3); + gap: 0.5rem; + transition: color 0.25s var(--sc-ease), border-color 0.25s var(--sc-ease); } .searchInputMobile { @@ -58,7 +67,8 @@ .searchInput:hover, .searchInput:focus { - @apply text-black border-light; + color: var(--sc-ink); + border-color: var(--sc-ink-4); } .searchInput::placeholder, @@ -81,7 +91,9 @@ border: 1px solid; border-radius: 0.25rem; line-height: 14px; - @apply font-mono border-lighter text-light; + @apply font-mono; + border-color: var(--sc-line); + color: var(--sc-ink-3); } .keyboardHints { @@ -99,7 +111,7 @@ height: 1px; border: 0; margin: var(--space-0x) calc(var(--space-6x) * -1); - @apply bg-blue-200; + background: var(--sc-line-2); } .noQueryFallback { @@ -116,15 +128,15 @@ .closeButtonMobile { display: block; - border: 3px solid #ffffff; + color: var(--sc-ink); + border: 3px solid var(--sc-page); padding: 0; font-size: 16px; line-height: 24px; position: relative; right: -43px; box-sizing: content-box; - - @apply bg-pure-white; + background: var(--sc-page); } .hitWrapper ol { @@ -134,7 +146,8 @@ .hit { line-height: 32px; display: block; - @apply mb-2 text-black; + @apply mb-2; + color: var(--sc-ink); } .queryResults { @@ -146,7 +159,12 @@ } .queryResults h6 { - font-size: 14px; + font-family: var(--sc-mono); + font-size: 11px; + font-weight: 500; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--sc-ink-3); @apply mt-4; } @@ -161,7 +179,7 @@ } .hitList li:hover * { - color: var(--orange-500); + color: var(--sc-violet); } .hitList li a { @@ -203,13 +221,14 @@ height: fit-content; max-height: 80vh; position: absolute; - border-radius: 17.5px; + border-radius: 18px; padding-top: 0; - @apply bg-[#f6f6f6]; + border: 1px solid var(--sc-line); + box-shadow: var(--sc-shadow-lift); } #searchModal.large { - border-radius: 27.5px; + border-radius: 28px; } .queryResults { diff --git a/src/components/Header/Search/Search.tsx b/src/components/Header/Search/Search.tsx index 76d736187..174de30e3 100644 --- a/src/components/Header/Search/Search.tsx +++ b/src/components/Header/Search/Search.tsx @@ -41,16 +41,7 @@ export default function Search() { return (
      -
      +
      void }) => { }, [debouncedValue]) return ( -
      +
      {article.title} @@ -148,14 +153,7 @@ export function SearchModal({ size = "mini", isOpen, onClose }: { size: Size; is } return ( -
      +
      diff --git a/src/components/Header/SidebarToggle.module.css b/src/components/Header/SidebarToggle.module.css index 139ca1ebd..0acec9ee2 100644 --- a/src/components/Header/SidebarToggle.module.css +++ b/src/components/Header/SidebarToggle.module.css @@ -11,7 +11,3 @@ /* width: 23px; */ padding: 12px 0 0 20px; } - -.dark { - color: #fff8f3; -} diff --git a/src/components/Header/SidebarToggle.tsx b/src/components/Header/SidebarToggle.tsx index caf2e2cb8..ba3c23000 100644 --- a/src/components/Header/SidebarToggle.tsx +++ b/src/components/Header/SidebarToggle.tsx @@ -4,7 +4,7 @@ import { useState, useEffect } from "preact/hooks" import styles from "./SidebarToggle.module.css" import { clsx } from "~/lib" -const MenuToggle: FunctionalComponent<{ dark: boolean }> = ({ dark }) => { +const MenuToggle: FunctionalComponent = () => { const [sidebarShown, setSidebarShown] = useState(false) useEffect(() => { @@ -21,7 +21,8 @@ const MenuToggle: FunctionalComponent<{ dark: boolean }> = ({ dark }) => { type="button" aria-pressed={sidebarShown ? "true" : "false"} id="menu-toggle" - className={clsx(styles.button, "text-black", dark && "text-white", "dark:text-white-800")} + aria-label={sidebarShown ? "Close menu" : "Open menu"} + className={clsx(styles.button, "text-ink")} onClick={() => setSidebarShown(!sidebarShown)} > {sidebarShown ? ( diff --git a/src/components/Header/ThemeModeToggle.tsx b/src/components/Header/ThemeModeToggle.tsx index 777d63a61..e05c95c7e 100644 --- a/src/components/Header/ThemeModeToggle.tsx +++ b/src/components/Header/ThemeModeToggle.tsx @@ -4,8 +4,7 @@ import MoonSvg from "~/assets/svgs/header/moon.svg?react" import SunSvg from "~/assets/svgs/header/sun.svg?react" import { clsx } from "~/lib" -const ThemeModeToggle = (props) => { - const { dark } = props +const ThemeModeToggle = () => { const [themeMode, setThemeMode] = useStorage(localStorage, "THEME_MODE", "light") const [isDarkMode, setIsDarkMode] = useState(false) @@ -44,13 +43,14 @@ const ThemeModeToggle = (props) => { return ( ) } diff --git a/src/components/HomeSearch/index.module.css b/src/components/HomeSearch/index.module.css index 2bc1c0bc7..f525fe3f2 100644 --- a/src/components/HomeSearch/index.module.css +++ b/src/components/HomeSearch/index.module.css @@ -1,35 +1,46 @@ .container { position: relative; - width: 684px; + width: min(100%, 640px); + text-align: left; } + +/* the landing page's field: a white pill with a hairline, the glow of its buttons on hover */ .searchInput { display: flex; + align-items: center; + justify-content: space-between; box-sizing: border-box; - padding: 8px 22px; - font-weight: 500; + padding: 0 14px 0 24px; cursor: pointer; width: 100%; - height: 55px; - border-radius: 27.5px; - font-style: italic; - background: var(--white); + height: 56px; + border-radius: 999px; + background: var(--sc-surface); + border: 1px solid var(--sc-line); + color: var(--sc-ink-3); + box-shadow: var(--sc-shadow); + transition: color 0.25s var(--sc-ease), border-color 0.25s var(--sc-ease), transform 0.45s var(--sc-ease); +} + +.searchInput:hover { + color: var(--sc-ink); + border-color: var(--sc-ink-4); + transform: translateY(-1px); } -.searchInput img { - width: 22px; +.hint { + font-family: var(--sc-mono); + font-size: 12px; + line-height: 1; + padding: 5px 8px; + border-radius: 6px; + border: 1px solid var(--sc-line); + color: var(--sc-ink-3); } @media screen and (max-width: 50em) { - .container { - width: 100%; - } .searchInput { - width: 100%; - height: 48px; - padding: 8px 20px; - border-spacing: 24px; - } - .searchInput img { - width: 20px; + height: 50px; + padding: 0 12px 0 20px; } } diff --git a/src/components/HomeSearch/index.tsx b/src/components/HomeSearch/index.tsx index 309bfd307..f186054f7 100644 --- a/src/components/HomeSearch/index.tsx +++ b/src/components/HomeSearch/index.tsx @@ -26,7 +26,22 @@ export default function Search() { return (
      - + + /
      {isOpen && }
      diff --git a/src/components/LeftSidebar/LeftSidebar.astro b/src/components/LeftSidebar/LeftSidebar.astro index a306a36c6..be05c0392 100644 --- a/src/components/LeftSidebar/LeftSidebar.astro +++ b/src/components/LeftSidebar/LeftSidebar.astro @@ -153,7 +153,8 @@ const processedSidebarSections = sidebarSections.map((section) => { .menu-separator { width: calc(100vw - 40px); - @apply border-0 border-t-[1px] border-solid border-black dark:border-white-800; + @apply border-0 border-t-[1px] border-solid; + border-color: var(--sc-line); } .sidebar-nav-groups.nav-groups > :first-child { @apply pt-[15px]; @@ -171,7 +172,7 @@ const processedSidebarSections = sidebarSections.map((section) => { } .nav-groups > li + li { - margin-top: 1.8rem; + margin-top: 2rem; } .nav-groups > :first-child { @@ -183,27 +184,35 @@ const processedSidebarSections = sidebarSections.map((section) => { @apply mb-navbar; } + /* the group labels in the mono, as the blog sets its small labels */ .nav-group-title { - font-size: 16px; - font-weight: 600; - /* padding: 0.1rem 1rem; */ - padding: 0.1rem 0; + font-family: var(--sc-mono); + font-size: 11px; + font-weight: 500; + line-height: 1.4; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--sc-ink-3); + -webkit-text-stroke: 0; + padding: 0.1rem 10px; margin-bottom: 0.6rem; } + /* the rows carry their own 10px inset (the current page's pill needs it), so the labels share it */ .nav-link a { - margin: 1px; - /* padding: 0.3rem 1rem; */ font: inherit; - color: inherit; + color: var(--sc-ink-2); text-decoration: none; display: flex; - font-size: 16px; - /* line-height:1; */ - margin-bottom: 10px; + font-size: 14.5px; + line-height: 1.45; + margin: 0 0 2px; + padding: 6px 10px; + border-radius: 8px; font-weight: 500; justify-content: space-between; align-items: center; + transition: color 0.2s var(--sc-ease), background-color 0.2s var(--sc-ease); } .nav-link a span { @@ -215,20 +224,15 @@ const processedSidebarSections = sidebarSections.map((section) => { .nav-link a:hover, .nav-link a:focus { - /* @apply bg-bg-hover; */ - /* background-color: var(--orange-100); */ - color: var(--orange-500); + color: var(--sc-ink); + background: var(--sc-surface-2); } + /* the current page: the violet's ink on its soft wash */ .nav-link a[aria-current="page"] { - font-weight: 600; - color: var(--orange-500); - /* background-color: var(--orange-100); */ - /* @apply text-accent bg-bg-accent; */ - } - - :global(:root.theme-dark) .nav-link a[aria-current="page"] { - color: hsla(var(--color-base-white), 100%, 1); + font-weight: 500; + color: var(--sc-violet-ink); + background: var(--sc-violet-soft); } .nav-link + ul { @@ -246,12 +250,12 @@ const processedSidebarSections = sidebarSections.map((section) => { .nav-link.open + ul { display: block; - border-left-width: 1px; - border-left-style: solid; + margin: 2px 0 8px 2px; + border-left: 1px solid var(--sc-line); } .nested { - @apply pl-5; + @apply pl-4; } @media (min-width: 50em) { diff --git a/src/components/NavCard.astro b/src/components/NavCard.astro index 0845b8a84..f02efb492 100644 --- a/src/components/NavCard.astro +++ b/src/components/NavCard.astro @@ -20,79 +20,109 @@ const { icon, name, content, link } = Astro.props as Props {name} {content} - + {t("ui.readMore")} - +
      diff --git a/src/components/PageContent/AskAI.astro b/src/components/PageContent/AskAI.astro index 561e2b8d2..f04274fa4 100644 --- a/src/components/PageContent/AskAI.astro +++ b/src/components/PageContent/AskAI.astro @@ -128,31 +128,34 @@ const aiServices = [ position: relative; } + /* the landing page's outline pill, as the header's tools are */ .ask-ai-btn, .copy-btn { display: flex; align-items: center; gap: 6px; - background: var(--theme-bg); - border: 1px solid var(--theme-divider); - border-radius: 6px; - padding: 6px 10px; + background: var(--sc-surface); + border: 1px solid var(--sc-line); + border-radius: 999px; + padding: 7px 14px; font-size: 0.8125rem; - color: var(--theme-text-light); + font-weight: 500; + color: var(--sc-ink-2); cursor: pointer; - transition: all 0.15s ease; + transition: color 0.25s var(--sc-ease), border-color 0.25s var(--sc-ease), background-color 0.25s var(--sc-ease); white-space: nowrap; } .ask-ai-btn:hover, .copy-btn:hover { - border-color: var(--theme-accent); - color: var(--theme-accent); + color: var(--sc-ink); + border-color: var(--sc-ink-4); + background: var(--sc-surface-2); } .copy-btn.copied { - border-color: #10b981; - color: #10b981; + border-color: var(--sc-tip-ink); + color: var(--sc-tip-ink); } .chevron { @@ -168,11 +171,11 @@ const aiServices = [ top: calc(100% + 4px); left: 0; min-width: 160px; - background: var(--theme-bg); - border: 1px solid var(--theme-divider); - border-radius: 8px; - padding: 4px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + background: var(--sc-surface); + border: 1px solid var(--sc-line); + border-radius: 12px; + padding: 6px; + box-shadow: 0 20px 50px -24px rgba(46, 27, 112, 0.3); opacity: 0; visibility: hidden; transform: translateY(-4px); @@ -192,9 +195,9 @@ const aiServices = [ gap: 8px; padding: 8px 10px; font-size: 0.8125rem; - color: var(--theme-text); + color: var(--sc-ink); text-decoration: none; - border-radius: 4px; + border-radius: 8px; transition: background 0.15s ease; } @@ -245,7 +248,7 @@ const aiServices = [ .ask-ai-btn, .copy-btn { - padding: 8px; + padding: 9px; } } diff --git a/src/components/PageContent/Feedback.tsx b/src/components/PageContent/Feedback.tsx index 7abbb47af..7491f0175 100644 --- a/src/components/PageContent/Feedback.tsx +++ b/src/components/PageContent/Feedback.tsx @@ -97,8 +97,9 @@ export const Feedback = () => { }} style={{ cursor: "pointer", - marginRight: "10px", + marginRight: "8px", fontSize: 0, + color: rating >= i + 1 ? "var(--sc-violet)" : "var(--sc-ink-3)", }} > {rating >= i + 1 ? star : starOutline} @@ -112,7 +113,7 @@ export const Feedback = () => { }} > {isSent ? ( -
      +
      We appreciate your feedback! 🤎
      ) : ( @@ -123,7 +124,7 @@ export const Feedback = () => { >