fix survey banner border and link hover color (facebook#2729)

abhinay99190 · Aug 18, 2021 · 812e18e · 812e18e
1 parent 030685b
commit 812e18e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -132,12 +132,12 @@ module.exports = {
   ],
   themeConfig: {
     announcementBar: {
-      id: 'survey-2021-announcement', // Any value that will identify this message.
+      id: 'survey-2021-announcement',
       content:
         'We want to hear from you! <a href="https://surveys.savanta.com/survey/selfserve/21e3/210643?list=2" target="_blank" rel="noopener noreferrer">Take the 2021 React Community Survey!</a>',
-      backgroundColor: '#20232a', // Defaults to `#fff`.
-      textColor: '#fff', // Defaults to `#000`.
-      isCloseable: true, // Defaults to `true`.
+      backgroundColor: '#20232a', // var(--deepdark)
+      textColor: '#fff',
+      isCloseable: true,
     },
     prism: {
       defaultLanguage: 'jsx',

diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss
@@ -559,7 +559,7 @@ html[data-theme="dark"] .avatar__name a {
     display: flex;
     width: calc(100% + 40px);
     height: 4px;
-    margin-top: -4px;
+    margin-top: -3px;
     margin-left: -20px;
     margin-right: -20px;
     position: relative;
@@ -936,6 +936,10 @@ article header h2 a {
   --docusaurus-announcement-bar-height: auto !important;
 }
 
+div[class^="announcementBar"][role="banner"] {
+  border-bottom-color: var(--deepdark);
+}
+
 div[class^="announcementBarContent"] {
   line-height: 40px;
   font-size: 20px;
@@ -948,7 +952,7 @@ div[class^="announcementBarContent"] {
     color: var(--brand) !important;
 
     &:hover {
-      color: #fff !important;
+      color: var(--ifm-color-primary) !important;
     }
   }
 }