Merge pull request #790 from oasisprotocol/matevz/docs/rebrand-bump-d…

…ocusaurus

CSS et al: Rebranding

docs/dapp/README.mdx

@@ -36,7 +36,7 @@ and working examples for you to explore and extend.
 
 <DocCard item={findSidebarItem('/dapp/opl/')} />
 
-# Consensus Layer RPC Endpoints
+## Consensus Layer RPC Endpoints
 
 :::danger
 
@@ -94,6 +94,6 @@ at [github.com/oasisprotocol/docs].
 
 [github.com/oasisprotocol/docs]: https://github.com/oasisprotocol/docs/issues
 
-# See also
+## See also
 
 <DocCardList items={[findSidebarItem('https://api.docs.oasis.io/js/client'), findSidebarItem('https://pkg.go.dev/github.com/oasisprotocol/oasis-core/go')]} />

docusaurus.config.ts

@@ -12,7 +12,7 @@ const config: Config = {
   tagline: '',
   url: process.env.URL ?? 'https://docs.oasis.io',
   baseUrl: '/',
-  favicon: 'img/favicon.ico',
+  favicon: 'img/favicon.svg',
 
   organizationName: 'oasisprotocol', // Usually your GitHub org/user name.
   projectName: 'docs', // Usually your repo name.
@@ -88,10 +88,10 @@ const config: Config = {
   themeConfig:
     {
       navbar: {
-        title: 'Oasis Docs',
         logo: {
-          alt: 'OPF Logo',
-          src: 'img/logo.png',
+          alt: 'Oasis Docs',
+          src: 'img/logo.svg',
+          //srcDark: 'img/logo_dark.svg',
           // Uncomment src and style below to enable christmas mode ;)
           //src: 'img/logo_christmas.png',
           //style: {height: '48px', maxWidth: '58px', marginTop: '-15px', marginLeft: '-15px'},

package.json

@@ -20,10 +20,10 @@
     "fmt-markdown": "markdownlint-cli2-fix 'docs/**/*.md' 'docs/**/*.mdx'"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.1.1",
-    "@docusaurus/plugin-client-redirects": "^3.1.1",
-    "@docusaurus/preset-classic": "^3.1.1",
-    "@docusaurus/remark-plugin-npm2yarn": "^3.1.1",
+    "@docusaurus/core": "^3.2.1",
+    "@docusaurus/plugin-client-redirects": "^3.2.1",
+    "@docusaurus/preset-classic": "^3.2.1",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.2.1",
     "@easyops-cn/docusaurus-search-local": "^0.40.1",
     "@mdx-js/react": "^3.0.0",
     "@mermaid-js/mermaid-cli": "^10.6.1",
@@ -49,9 +49,9 @@
     ]
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.1.1",
-    "@docusaurus/tsconfig": "^3.1.1",
-    "@docusaurus/types": "^3.1.1",
+    "@docusaurus/module-type-aliases": "^3.2.1",
+    "@docusaurus/tsconfig": "^3.2.1",
+    "@docusaurus/types": "^3.2.1",
     "@types/plotly.js-basic-dist": "^1.54.4",
     "@types/react-plotly.js": "^2.6.3",
     "jest": "^29.7.0",

src/css/custom.css

@@ -6,25 +6,49 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #3884ff;
-  --ifm-color-primary-dark: #3884ff;
-  --ifm-color-primary-darker: #3884ff;
-  --ifm-color-primary-darkest: #3884ff;
-  --ifm-color-primary-light: #3884ff;
-  --ifm-color-primary-lighter: #3884ff;
-  --ifm-color-primary-lightest: #3884ff;
+  --ifm-color-primary: #0500e2;
+  --ifm-color-primary-dark: #0500e2;
+  --ifm-color-primary-darker: #0500e2;
+  --ifm-color-primary-darkest: #0500e2;
+  --ifm-color-primary-light: #0500e2;
+  --ifm-color-primary-lighter: #0500e2;
+  --ifm-color-primary-lightest: #0500e2;
   --ifm-code-font-size: 95%;
+  --ifm-font-family-base: "Roboto", sans-serif;
+  --ifm-font-family-monospace: "Roboto Mono", monospace;
+  --ifm-global-radius: 0;
+  --ifm-alert-border-width: 5px;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 html[data-theme='dark'] {
-  --ifm-color-primary: #3884ff;
-  --ifm-color-primary-dark: #3884ff;
-  --ifm-color-primary-darker: #3884ff;
-  --ifm-color-primary-darkest: #3884ff;
-  --ifm-color-primary-light: #3884ff;
-  --ifm-color-primary-lighter: #3884ff;
-  --ifm-color-primary-lightest: #3884ff;
+  --ifm-color-primary: #00ffff;
+  --ifm-color-primary-dark: #00ffff;
+  --ifm-color-primary-darker: #00ffff;
+  --ifm-color-primary-darkest: #00ffff;
+  --ifm-color-primary-light: #00ffff;
+  --ifm-color-primary-lighter: #00ffff;
+  --ifm-color-primary-lightest: #00ffff;
+}
+
+/* Custom fonts */
+@font-face {
+  font-family: "Roboto";
+  src: url("/static/fonts/Roboto-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Roboto Medium";
+  src: url("/static/fonts/Roboto-Medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("/static/fonts/RobotoMono-Regular.ttf") format("truetype");
+}
+
+article strong, h1 {
+  font-family: "Roboto Medium", sans-serif;
 }
 
 .docusaurus-highlight-code-line {
@@ -81,15 +105,34 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 /* Add vertical spacing between the individual DocCards outside of DocCardList
    component. */
 .markdown > a.card {
-	margin-bottom: 32px;
+  margin-bottom: 32px;
 }
 
-
 /* Reduce the font size to make the sidebar more appealing. */
 .theme-doc-sidebar-menu {
   font-size: 14px;
 }
 
+/* Make the search field more Oasis-like */
+.navbar__search-input {
+  border-radius: 0;
+  border: 1px solid black;
+}
+
+/* Make docccard and navcard border stronger */
+.card,
+.pagination-nav__link {
+  border: 1px solid black !important;
+}
+[data-theme='dark'] .card,
+[data-theme='dark'] .pagination-nav__link {
+  border: 1px solid white !important;
+}
+
+.card {
+  --ifm-link-hover-color: inherit !important;
+}
+
 /* Hack to make .svg and .png diagrams readable in dark theme */
 html[data-theme='dark'] main img {
   background-color: #fff;

src/staking_rewards/Chart.tsx

@@ -71,7 +71,7 @@ const StakingRewardsChart = () => {
         y: estimates.map(d => d.yearlyCompoundedRate),
         mode: 'lines',
         name: 'Annualized rewards',
-        marker: {color: '#4285F4'},
+        marker: {color: '#0500e2'},
         text: data.map(d => {
           const percentPerEpoch = 100 * d.scale * rewardFactorEpochSigned / rewardAmountDenominator;
           return `<i>Reward per epoch: ${percentPerEpoch}%<br>Epoch: ${d.untilEpoch}</i>`;