More timeframes to charts and chart theming (#2)

* topbar action tooltips. flip refresh icon. max with borrow button * more timeframes and chart theming * fix asymmetric header button
2021-04-25 08:02:13 +10:00 · 2021-04-25 08:02:13 +10:00 · fc751fe00c
parent 861eb34a76
commit fc751fe00c
12 changed files with 817 additions and 51 deletions
--- a/components/AccountSelect.tsx
+++ b/components/AccountSelect.tsx
@ -6,7 +6,7 @@ import useMarketList from '../hooks/useMarketList'
 import { nativeToUi } from '@blockworks-foundation/mango-client/lib/utils'
 import useMangoStore from '../stores/useMangoStore'
 import { SRM_DECIMALS } from '@project-serum/serum/lib/token-instructions'
-import { RefreshIcon } from '@heroicons/react/outline'
+import { RefreshClockwiseIcon } from './icons'

 type AccountSelectProps = {
  accounts: any[]
@ -60,7 +60,7 @@ const AccountSelect = ({
            onClick={handleRefreshBalances}
          >
            <div className="flex items-center text-th-fgd-1 font-normal underline cursor-pointer hover:text-th-primary hover:no-underline">
-              <RefreshIcon
+              <RefreshClockwiseIcon
                className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`}
              />
              Refresh
--- a/components/DropMenu.tsx
+++ b/components/DropMenu.tsx
@ -1,13 +1,37 @@
+import { FunctionComponent, ReactNode } from 'react'
 import { Listbox } from '@headlessui/react'
+import Tooltip from './Tooltip'

-const DropMenu = ({ button, buttonClassName, value, onChange, options }) => {
+type DropMenuProps = {
+  button: ReactNode
+  buttonClassName?: string
+  onChange: (...args: any[]) => any
+  options: Array<any>
+  toolTipContent?: string
+  value?: any
+}
+
+const DropMenu: FunctionComponent<DropMenuProps> = ({
+  button,
+  buttonClassName,
+  value,
+  onChange,
+  options,
+  toolTipContent,
+}) => {
  return (
    <div className={`relative`}>
      <Listbox value={value} onChange={onChange}>
        {({ open }) => (
          <>
            <Listbox.Button className={`${buttonClassName} default-transition`}>
-              {button}
+              {toolTipContent && !open ? (
+                <Tooltip content={toolTipContent} className="text-xs py-1">
+                  {button}
+                </Tooltip>
+              ) : (
+                button
+              )}
            </Listbox.Button>
            {open ? (
              <Listbox.Options
--- a/components/MarketSelect.tsx
+++ b/components/MarketSelect.tsx
@ -35,8 +35,11 @@ const MarketSelect = () => {
            </div>
          ))}
        </div>
-        <div className="text-th-fgd-3 mr-10">
-          <a href="https://old.mango.markets" className="hover:text-th-primary">
+        <div className="text-th-fgd-3 mr-10 text-xs">
+          <a
+            href="https://old.mango.markets"
+            className="default-transition underline hover:text-th-primary hover:no-underline"
+          >
            Use Previous Version
          </a>
        </div>
--- a/components/ResetLayout.tsx
+++ b/components/ResetLayout.tsx
@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { RefreshIcon } from '@heroicons/react/outline'
+import { RefreshClockwiseIcon } from './icons'
 import { defaultLayouts } from './TradePageGrid'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 import Tooltip from './Tooltip'
@ -24,13 +24,15 @@ const ResetLayout = ({ className = '' }) => {
  }

  return (
-    <div className={`flex relative ${className}`}>
-      <Tooltip content="Reset layout">
+    <div className={`flex relative ${className} mr-4`}>
+      <Tooltip content="Reset Layout" className="text-xs py-1">
        <button
          onClick={() => handleResetLayout()}
-          className="flex items-center justify-center rounded-full bg-th-bkg-3 w-8 h-8 mr-4 hover:text-th-primary focus:outline-none"
+          className="flex items-center justify-center rounded-full bg-th-bkg-3 w-8 h-8 hover:text-th-primary focus:outline-none"
        >
-          <RefreshIcon className={`w-5 h-5 ${spin ? 'animate-spin' : null}`} />
+          <RefreshClockwiseIcon
+            className={`w-5 h-5 ${spin ? 'animate-spin' : null}`}
+          />
        </button>
      </Tooltip>
    </div>
--- a/components/ThemeSwitch.tsx
+++ b/components/ThemeSwitch.tsx
@ -28,6 +28,7 @@ const ThemeSwitch = () => {
      value={theme}
      onChange={(theme) => setTheme(theme)}
      options={THEMES}
+      toolTipContent="Change Theme"
    />
  )
 }
--- a/components/Tooltip.tsx
+++ b/components/Tooltip.tsx
@ -4,9 +4,14 @@ import 'tippy.js/animations/scale.css'

 type TooltipProps = {
  content: ReactNode
+  className?: string
 }

-const Tooltip: FunctionComponent<TooltipProps> = ({ children, content }) => {
+const Tooltip: FunctionComponent<TooltipProps> = ({
+  children,
+  content,
+  className,
+}) => {
  return (
    <Tippy
      animation="scale"
@ -14,7 +19,9 @@ const Tooltip: FunctionComponent<TooltipProps> = ({ children, content }) => {
      maxWidth="30rem"
      interactive
      content={
-        <div className="rounded p-3 text-sm bg-th-bkg-3 shadow-lg text-th-fgd-2 outline-none focus:outline-none">
+        <div
+          className={`rounded p-3 text-sm bg-th-bkg-3 shadow-md text-th-fgd-2 outline-none focus:outline-none ${className}`}
+        >
          {content}
        </div>
      }
--- a/components/TradingView/index.tsx
+++ b/components/TradingView/index.tsx
@ -70,8 +70,8 @@ const TVChartContainer = () => {
      disabled_features: [
        'use_localstorage_for_settings',
        'timeframes_toolbar',
-        'volume_force_overlay',
-        'left_toolbar',
+        // 'volume_force_overlay',
+        // 'left_toolbar',
        'show_logo_on_all_charts',
        'caption_buttons_text_if_possible',
        'header_settings',
@ -79,14 +79,14 @@ const TVChartContainer = () => {
        'header_compare',
        'compare_symbol',
        'header_screenshot',
-        'header_widget_dom_node',
+        // 'header_widget_dom_node',
        'header_saveload',
        'header_undo_redo',
        'header_interval_dialog_button',
        'show_interval_dialog_on_key_press',
        'header_symbol_search',
-        'header_resolutions',
-        'header_widget',
+        // 'header_resolutions',
+        // 'header_widget',
      ],
      enabled_features: ['study_templates'],
      load_last_chart: true,
@ -96,6 +96,8 @@ const TVChartContainer = () => {
      autosize: defaultProps.autosize,
      studies_overrides: defaultProps.studiesOverrides,
      theme: theme === 'Light' ? 'Light' : 'Dark',
+      custom_css_url: '/tradingview-chart.css',
+      loading_screen: { backgroundColor: 'rgba(0,0,0,0.1)' },
      overrides: {
        'paneProperties.background':
          theme === 'Dark' ? '#2B2B2B' : theme === 'Light' ? '#fff' : '#1D1832',
@ -122,21 +124,21 @@ const TVChartContainer = () => {
    tvWidgetRef.current = tvWidget

    tvWidget.onChartReady(() => {
-      tvWidget.headerReady().then(() => {
-        const button = tvWidget.createButton()
-        button.setAttribute('title', 'Click to show a notification popup')
-        button.classList.add('apply-common-tooltip')
-        button.addEventListener('click', () =>
-          tvWidget.showNoticeDialog({
-            title: 'Notification',
-            body: 'TradingView Charting Library API works correctly',
-            callback: () => {
-              // console.log('It works!!');
-            },
-          })
-        )
-        button.innerHTML = 'Check API'
-      })
+      // tvWidget.headerReady().then(() => {
+      // const button = tvWidget.createButton()
+      // button.setAttribute('title', 'Click to show a notification popup')
+      // button.classList.add('apply-common-tooltip')
+      // button.addEventListener('click', () =>
+      //   tvWidget.showNoticeDialog({
+      //     title: 'Notification',
+      //     body: 'TradingView Charting Library API works correctly',
+      //     callback: () => {
+      //       // console.log('It works!!');
+      //     },
+      //   })
+      // )
+      // button.innerHTML = 'Check API'
+      // })
    })
    //eslint-disable-next-line
  }, [selectedMarketName, theme])
--- a/components/UiLock.tsx
+++ b/components/UiLock.tsx
@ -2,6 +2,7 @@ import { LockClosedIcon, LockOpenIcon } from '@heroicons/react/outline'
 import { Transition } from '@headlessui/react'
 import useMangoStore from '../stores/useMangoStore'
 import ResetLayout from './ResetLayout'
+import Tooltip from './Tooltip'

 const UiLock = ({ className = '' }) => {
  const set = useMangoStore((s) => s.set)
@ -29,17 +30,22 @@ const UiLock = ({ className = '' }) => {
          <ResetLayout />
        </Transition>
      ) : null}
-      <div className={`${className} flex relative`}>
-        <button
-          onClick={handleClick}
-          className="flex items-center justify-center rounded-full bg-th-bkg-3 w-8 h-8 mr-4 hover:text-th-primary focus:outline-none"
+      <div className={`${className} flex relative mr-4`}>
+        <Tooltip
+          content={uiLocked ? 'Unlock Layout' : 'Lock Layout'}
+          className="text-xs py-1"
        >
-          {uiLocked ? (
-            <LockClosedIcon className="w-5 h-5" />
-          ) : (
-            <LockOpenIcon className="w-5 h-5 animate-bounce" />
-          )}
-        </button>
+          <button
+            onClick={handleClick}
+            className="flex items-center justify-center rounded-full bg-th-bkg-3 w-8 h-8 hover:text-th-primary focus:outline-none"
+          >
+            {uiLocked ? (
+              <LockClosedIcon className="w-5 h-5" />
+            ) : (
+              <LockOpenIcon className="w-5 h-5 animate-bounce" />
+            )}
+          </button>
+        </Tooltip>
      </div>
    </>
  )
--- a/components/WithdrawModal.tsx
+++ b/components/WithdrawModal.tsx
@ -17,6 +17,7 @@ import { notify } from '../utils/notifications'
 import Switch from './Switch'
 import Tooltip from './Tooltip'
 import { InformationCircleIcon } from '@heroicons/react/outline'
+import { Transition } from '@headlessui/react'

 const WithdrawModal = ({ isOpen, onClose }) => {
  const [inputAmount, setInputAmount] = useState('')
@ -207,7 +208,7 @@ const WithdrawModal = ({ isOpen, onClose }) => {
                  : setMaxForSelectedAccount
              }
            >
-              Max
+              {includeBorrow ? 'Max with Borrow' : 'Max'}
            </div>
          </div>
        </div>
@ -225,7 +226,17 @@ const WithdrawModal = ({ isOpen, onClose }) => {
          />
        </div>
        {includeBorrow ? (
-          <div className="p-2 bg-th-bkg-1 rounded-md mt-4">
+          <Transition
+            appear={true}
+            className="p-2 bg-th-bkg-1 rounded-md mt-4"
+            show={includeBorrow}
+            enter="transition-opacity duration-500"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition-opacity duration-500"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
            <div className="flex justify-between pb-2">
              <div className="text-th-fgd-3">Borrow Amount</div>
              <div className="text-th-fgd-1">{`${getBorrowAmount()} ${getSymbolForTokenMintAddress(
@ -241,7 +252,7 @@ const WithdrawModal = ({ isOpen, onClose }) => {
                %
              </div>
            </div>
-          </div>
+          </Transition>
        ) : null}
        <div className={`mt-5 flex justify-center`}>
          <Button
--- a/components/icons.jsx
+++ b/components/icons.jsx
@ -70,7 +70,7 @@ export const ResizeIcon = ({ className }) => {
 export const MoveIcon = ({ className }) => {
  return (
    <svg
-      className={`feather feather-move ${className}`}
+      className={`${className}`}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
@ -90,3 +90,22 @@ export const MoveIcon = ({ className }) => {
    </svg>
  )
 }
+
+export const RefreshClockwiseIcon = ({ className }) => {
+  return (
+    <svg
+      className={`${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+    >
+      <path
+        d="M20 4.00188L19.418 9.00188M19.418 9.00188C18.7542 7.36001 17.5643 5.98479 16.035 5.09174C14.5056 4.19869 12.7232 3.83829 10.967 4.06702C9.21086 4.29575 7.58021 5.10068 6.33063 6.35566C5.08105 7.61064 4.28316 9.24474 4.062 11.0019M19.418 9.00188H15M4 20.0019L4.581 15.0019M4.581 15.0019C5.2458 16.6428 6.43597 18.0169 7.96517 18.9092C9.49436 19.8014 11.2763 20.1614 13.0319 19.9328C14.7875 19.7041 16.4178 18.8998 17.6675 17.6456C18.9171 16.3915 19.7156 14.7583 19.938 13.0019M4.581 15.0019H9"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -19,10 +19,6 @@ function App({ Component, pageProps }) {
          href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap"
          rel="stylesheet"
        />
-        {/* <link
-          href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
-          rel="stylesheet"
-        /> */}
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta
--- a/public/tradingview-chart.css
+++ b/public/tradingview-chart.css
@ -0,0 +1,695 @@
+:root:not(.theme-dark) {
+  --black: #fff;
+  --primary: #ff9c24;
+  --bkg-dark: rgba(0, 0, 0, 0.05);
+  --bkg-darker: rgba(0, 0, 0, 0.1);
+  --bkg-darkest: rgba(0, 0, 0, 0.2);
+  --text: rgba(0, 0, 0, 0.6);
+
+  --tv-color-platform-background: transparent;
+  --tv-color-pane-background: transparent;
+  --tv-color-pane-background-secondary: var(--bkg-dark);
+  --tv-color-toolbar-button-background-hover: transparent;
+  --tv-color-toolbar-button-background-secondary-hover: var(--bkg-darker);
+  --tv-color-toolbar-button-background-expanded: var(--bkg-dark);
+  --tv-color-pane-background-secondary: var(--bkg-dark);
+  --tv-color-toolbar-button-text: var(--text);
+  --tv-color-toolbar-button-text-hover: var(--primary);
+  --tv-color-toolbar-button-text-active: var(--primary);
+  --tv-color-toolbar-button-text-active-hover: var(--primary);
+  --tv-color-item-active-text: var(--primary);
+  --tv-color-toolbar-toggle-button-background-active: var(--primary);
+  --tv-color-toolbar-toggle-button-background-active-hover: var(--primary);
+}
+
+.theme-dark:root {
+  --black: #141414;
+  --primary: #f2c94c;
+  --bkg-light: rgba(255, 255, 255, 0.1);
+  --bkg-dark: rgba(0, 0, 0, 0.1);
+  --bkg-darker: rgba(0, 0, 0, 0.2);
+  --bkg-darkest: rgba(0, 0, 0, 0.4);
+  --text: rgba(255, 255, 255, 0.6);
+
+  --tv-color-platform-background: transparent;
+  --tv-color-pane-background: transparent;
+  --tv-color-pane-background-secondary: var(--bkg-dark);
+  --tv-color-toolbar-button-background-hover: transparent;
+  --tv-color-toolbar-button-background-secondary-hover: var(--bkg-darker);
+  --tv-color-toolbar-button-background-expanded: var(--bkg-darkest);
+  --tv-color-toolbar-button-text: var(--text);
+  --tv-color-toolbar-button-text-hover: var(--primary);
+  --tv-color-toolbar-button-text-active: var(--primary);
+  --tv-color-toolbar-button-text-active-hover: var(--primary);
+  --tv-color-item-active-text: var(--primary);
+  --tv-color-toolbar-toggle-button-background-active: var(--primary);
+  --tv-color-toolbar-toggle-button-background-active-hover: var(--primary);
+}
+
+/* light theme */
+
+html .loading-indicator {
+  background: transparent;
+}
+
+html .tv-spinner {
+  color: var(--primary);
+}
+
+/* header buttons */
+
+html .group-wWM3zP_M {
+  background-color: var(--bkg-dark);
+  border-radius: 50%;
+  margin-left: 8px;
+  transform: scale(0.9);
+  width: 38px;
+}
+
+.group-wWM3zP_M:first-child {
+  border-bottom-left-radius: 50%;
+}
+
+.group-wWM3zP_M:last-child {
+  border-bottom-right-radius: 50%;
+}
+
+/* Spacer between header buttons */
+
+.fill-2axUON87 {
+  background-color: transparent !important;
+}
+
+/* menu items category label */
+
+html .summary-3_6tmh1R {
+  color: var(--text);
+}
+
+html .summary-3_6tmh1R:hover {
+  background-color: transparent;
+  color: var(--primary);
+}
+
+/* menu items */
+
+html .item-2xPVYue0:hover {
+  background: transparent;
+  color: var(--primary);
+}
+
+html .item-2xPVYue0.isActive-2j-GhQs_,
+html .item-2xPVYue0.isActive-2j-GhQs_:active {
+  background: var(--primary);
+  color: var(--black);
+}
+
+html .item-2xPVYue0.isActive-2j-GhQs_:hover {
+  background: var(--primary);
+  color: var(--black);
+}
+
+/* indicators panel */
+
+.wrapper-3ePvQMAQ {
+  background: var(--black);
+}
+
+.close-3NTwKnT_ {
+  color: var(--text);
+}
+
+html .close-3NTwKnT_:hover {
+  background: transparent;
+  color: var(--primary);
+}
+
+html .container-1e-eHKCj:not(.disabled-3lywlGlv):hover {
+  background: transparent;
+}
+
+html .container-1e-eHKCj:not(.disabled-3lywlGlv):hover .title-34aDs39w {
+  color: var(--primary);
+}
+
+/* indicator templates */
+
+html .item-2xPVYue0:hover .title-Iod5hZQV {
+  color: var(--primary);
+}
+
+/* search highlight */
+
+.highlighted-3Ob1jr_R,
+html .highlighted-3Ob1jr_R {
+  color: var(--primary);
+}
+
+html .container-1e-eHKCj:not(.disabled-3lywlGlv):hover .highlighted-3Ob1jr_R {
+  color: var(--black);
+}
+
+/* left toolbar */
+
+/* icons */
+
+html .button-263WXsg- .icon-1Y-3MM9F svg {
+  transform: scale(0.8);
+}
+
+html .button-263WXsg- .bg-1kRv1Pf2 {
+  border-radius: 50%;
+}
+
+html .button-263WXsg- .bg-1kRv1Pf2:hover {
+  background-color: var(--bkg-dark);
+}
+
+html .container-3_8ayT2Q:hover .arrow-WcYWFXUn {
+  stroke: var(--black);
+}
+
+html .toggleButton-3TAD9tll .arrow-liYbPQ3o {
+  stroke: var(--black);
+}
+
+/* floating toolbar */
+
+html .tv-grouped-floating-toolbar__widget-wrapper {
+  background-color: var(--black);
+}
+
+html .tv-floating-toolbar__widget {
+  border-left-color: var(--bkg-dark);
+}
+
+html
+  .tv-linetool-properties-toolbar__color-picker
+  .colorpicker-widget
+  + svg
+  .bg {
+  fill: var(--black);
+}
+
+.tv-floating-toolbar__drag {
+  background: var(--black);
+}
+
+html .tv-floating-toolbar {
+  border-color: var(--bkg-dark);
+  background-color: var(--black);
+  box-shadow: 0 2px 4px 0 0.2 #000;
+}
+
+.tv-linetool-properties-toolbar__icon svg {
+  fill: var(--text);
+}
+
+html .tv-grouped-floating-toolbar__widget-wrapper:hover {
+  background-color: var(--bkg-light);
+}
+
+/* modal tabs */
+
+html .tab-1Yr0rq0J.active-37sipdzm {
+  color: var(--primary);
+}
+
+html .slider-2TOmsMP8 .inner-21p4mP7K {
+  background-color: var(--primary);
+}
+
+.tab-1l4dFt6c.withHover-1_-qVdZP:hover,
+html .tab-1l4dFt6c.withHover-1_-qVdZP:hover {
+  color: var(--primary);
+}
+
+/* modal primary button */
+
+html .appearance-default-dMjF_2Hu.intent-primary-1-IOYcbg,
+html .appearance-default-dMjF_2Hu.intent-primary-1-IOYcbg:link,
+html .appearance-default-dMjF_2Hu.intent-primary-1-IOYcbg:visited {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  color: var(--black);
+}
+
+html
+  .appearance-default-dMjF_2Hu.intent-primary-1-IOYcbg:hover:not(:disabled):not([aria-disabled='true']) {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--black);
+  filter: brightness(1.2);
+}
+
+/* modal secondary button */
+
+html .appearance-stroke-12lxiUSM.intent-primary-1-IOYcbg,
+html .appearance-stroke-12lxiUSM.intent-primary-1-IOYcbg:link,
+html .appearance-stroke-12lxiUSM.intent-primary-1-IOYcbg:visited {
+  border-color: var(--primary);
+  background-color: transparent;
+  color: var(--primary);
+}
+
+html
+  .appearance-stroke-12lxiUSM.intent-primary-1-IOYcbg:hover:not(:disabled):not([aria-disabled='true']) {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--black);
+}
+
+/* range sliders */
+
+html .rangeSliderMiddle-3BlpfHSS {
+  background-color: var(--primary);
+}
+
+/* checkboxes */
+
+html
+  .checkbox-3xZUD-2M
+  .wrapper-1AZBBaMW
+  .input-ly-CSnj5:checked
+  + .box-20C92a5S {
+  border-color: var(--primary);
+  background-color: var(--primary);
+}
+
+html
+  .checkbox-3xZUD-2M
+  .wrapper-1AZBBaMW
+  .input-ly-CSnj5:checked
+  + .box-20C92a5S.check-13mv3fTM
+  .icon-3dOOKDQo {
+  stroke: var(--black);
+}
+
+html
+  .checkbox-3xZUD-2M:hover
+  .input-ly-CSnj5:checked:not(:focus):not(:disabled)
+  + .box-20C92a5S {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  filter: brightness(1.2);
+}
+
+html
+  .checkbox-3xZUD-2M
+  .wrapper-1AZBBaMW
+  .input-ly-CSnj5:active:not(:disabled)
+  + .box-20C92a5S,
+html
+  .checkbox-3xZUD-2M
+  .wrapper-1AZBBaMW
+  .input-ly-CSnj5:focus
+  + .box-20C92a5S {
+  border-color: var(--primary);
+}
+
+/* input */
+
+html .inputWithErrorWrapper-3VldItns.focused-3rk113Ah {
+  border-color: var(--primary);
+}
+
+html .inputWithErrorWrapper-3VldItns.focused-3rk113Ah:hover {
+  border-color: var(--primary);
+}
+
+html
+  .row-1NK-hr1x
+  .inputWithErrorWrapper-3VldItns.focused-3rk113Ah.thickBorder-17UV-SuS {
+  box-shadow: none !important;
+}
+
+/* dropdown */
+
+html .container-AqxbM340.intent-primary-npIFDxc3 {
+  border-color: var(--primary);
+  box-shadow: none;
+}
+
+/* dot menu */
+
+html .container-AqxbM340.intent-primary-npIFDxc3 .shadow-rtripSA4 {
+  border-color: var(--primary);
+}
+
+/* container */
+
+html .container-RYiwcUsM {
+  background: var(--black);
+}
+
+.chart-widget .selected-2qw9PFUJ .buttons-1-XhYDHM,
+.chart-widget
+  .selected-2qw9PFUJ
+  .buttons-1-XhYDHM
+  .button-22Ex8G2W:not(:first-child),
+.chart-widget .selected-2qw9PFUJ .buttonsWrapper-3eBZpnXm,
+.chart-widget .selected-2qw9PFUJ .titleWrapper-1Zs2rjQ6 {
+  border-color: var(--primary);
+}
+
+/* inner chart menu */
+
+html .item-stVdeCwG.interactive-3E0jwVyG:hover {
+  background-color: transparent;
+  color: var(--primary);
+}
+
+html .item-stVdeCwG.interactive-3E0jwVyG.hovered-2HCCgw6c,
+html .item-stVdeCwG.interactive-3E0jwVyG:active {
+  background-color: transparent;
+  color: var(--primary);
+}
+
+.selected-2qw9PFUJ .button-22Ex8G2W:hover:after {
+  background-color: var(--bkg-dark);
+}
+
+/* dark theme */
+
+html.theme-dark .loading-indicator {
+  background: transparent;
+}
+
+html.theme-dark .tv-spinner {
+  color: var(--primary);
+}
+
+/* header buttons */
+
+html.theme-dark .group-wWM3zP_M {
+  background-color: var(--bkg-light);
+  border-radius: 50%;
+  margin-left: 8px;
+  transform: scale(0.9);
+  width: 38px;
+}
+
+/* Spacer between header buttons */
+
+.fill-2axUON87 {
+  background-color: transparent !important;
+}
+
+/* menu dropdown */
+
+html.theme-dark .menuWrap-1gEtmoET {
+  background: var(--black);
+}
+
+/* menu items category label */
+
+html.theme-dark .summary-3_6tmh1R {
+  color: var(--text);
+}
+
+html.theme-dark .summary-3_6tmh1R:hover {
+  background-color: transparent;
+  color: var(--primary);
+}
+
+/* menu items */
+
+html.theme-dark .item-2xPVYue0 {
+  background: var(--black);
+}
+
+html.theme-dark .item-2xPVYue0:hover {
+  background: transparent;
+  color: var(--primary);
+}
+
+html.theme-dark .item-2xPVYue0.isActive-2j-GhQs_,
+html.theme-dark .item-2xPVYue0.isActive-2j-GhQs_:active {
+  background: var(--primary);
+  color: var(--black);
+}
+
+html.theme-dark .item-2xPVYue0.isActive-2j-GhQs_:hover {
+  background: var(--primary);
+  color: var(--black);
+}
+
+/* indicators panel */
+
+.wrapper-3ePvQMAQ {
+  background: var(--black);
+}
+
+.close-3NTwKnT_ {
+  color: var(--text);
+}
+
+html.theme-dark .close-3NTwKnT_:hover {
+  background: transparent;
+  color: var(--primary);
+}
+
+html.theme-dark .container-1e-eHKCj:not(.disabled-3lywlGlv):hover {
+  background: transparent;
+}
+
+html.theme-dark
+  .container-1e-eHKCj:not(.disabled-3lywlGlv):hover
+  .title-34aDs39w {
+  color: var(--primary);
+}
+
+/* indicator templates */
+
+html.theme-dark .item-2xPVYue0:hover .title-Iod5hZQV {
+  color: var(--primary);
+}
+
+/* search highlight */
+
+.highlighted-3Ob1jr_R,
+html.theme-dark .highlighted-3Ob1jr_R {
+  color: var(--primary);
+}
+
+html.theme-dark
+  .container-1e-eHKCj:not(.disabled-3lywlGlv):hover
+  .highlighted-3Ob1jr_R {
+  color: var(--black);
+}
+
+/* left toolbar */
+
+/* icons */
+
+html.theme-dark .button-263WXsg- .icon-1Y-3MM9F svg {
+  transform: scale(0.8);
+}
+
+html.theme-dark .button-263WXsg- .bg-1kRv1Pf2 {
+  border-radius: 50%;
+}
+
+html.theme-dark .button-263WXsg- .bg-1kRv1Pf2:hover {
+  background-color: var(--bkg-light);
+}
+
+html.theme-dark .container-3_8ayT2Q:hover .arrow-WcYWFXUn {
+  stroke: var(--black);
+}
+
+html.theme-dark .toggleButton-3TAD9tll .arrow-liYbPQ3o {
+  stroke: var(--black);
+}
+
+/* floating toolbar */
+
+html.theme-dark .tv-grouped-floating-toolbar__widget-wrapper {
+  background-color: var(--black);
+}
+
+html.theme-dark .tv-floating-toolbar__widget {
+  border-left-color: var(--bkg-light);
+}
+
+html.theme-dark
+  .tv-linetool-properties-toolbar__color-picker
+  .colorpicker-widget
+  + svg
+  .bg {
+  fill: var(--black);
+}
+
+.tv-floating-toolbar__drag {
+  background: var(--black);
+}
+
+html.theme-dark .tv-floating-toolbar {
+  border-color: var(--bkg-light);
+  background-color: var(--black);
+  box-shadow: 0 2px 4px 0 0.2 #000;
+}
+
+.tv-linetool-properties-toolbar__icon svg {
+  fill: var(--text);
+}
+
+html.theme-dark .tv-grouped-floating-toolbar__widget-wrapper:hover {
+  background-color: var(--bkg-light);
+}
+
+/* modal tabs */
+
+html.theme-dark .tab-1Yr0rq0J.active-37sipdzm {
+  color: var(--primary);
+}
+
+html.theme-dark .slider-2TOmsMP8 .inner-21p4mP7K {
+  background-color: var(--primary);
+}
+
+.tab-1l4dFt6c.withHover-1_-qVdZP:hover,
+html.theme-dark .tab-1l4dFt6c.withHover-1_-qVdZP:hover {
+  color: var(--primary);
+}
+
+/* modal primary button */
+
+html.theme-dark .appearance-default-dMjF_2Hu.intent-primary-1-IOYcbg,
+html.theme-dark .appearance-default-dMjF_2Hu.intent-primary-1-IOYcbg:link,
+html.theme-dark .appearance-default-dMjF_2Hu.intent-primary-1-IOYcbg:visited {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  color: var(--black);
+}
+
+html.theme-dark
+  .appearance-default-dMjF_2Hu.intent-primary-1-IOYcbg:hover:not(:disabled):not([aria-disabled='true']) {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--black);
+  filter: brightness(0.8);
+}
+
+/* modal secondary button */
+
+html.theme-dark .appearance-stroke-12lxiUSM.intent-primary-1-IOYcbg,
+html.theme-dark .appearance-stroke-12lxiUSM.intent-primary-1-IOYcbg:link,
+html.theme-dark .appearance-stroke-12lxiUSM.intent-primary-1-IOYcbg:visited {
+  border-color: var(--primary);
+  background-color: transparent;
+  color: var(--primary);
+}
+
+html.theme-dark
+  .appearance-stroke-12lxiUSM.intent-primary-1-IOYcbg:hover:not(:disabled):not([aria-disabled='true']) {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--black);
+}
+
+/* range sliders */
+
+html.theme-dark .rangeSliderMiddle-3BlpfHSS {
+  background-color: var(--primary);
+}
+
+/* checkboxes */
+
+html.theme-dark
+  .checkbox-3xZUD-2M
+  .wrapper-1AZBBaMW
+  .input-ly-CSnj5:checked
+  + .box-20C92a5S {
+  border-color: var(--primary);
+  background-color: var(--primary);
+}
+
+html.theme-dark
+  .checkbox-3xZUD-2M
+  .wrapper-1AZBBaMW
+  .input-ly-CSnj5:checked
+  + .box-20C92a5S.check-13mv3fTM
+  .icon-3dOOKDQo {
+  stroke: var(--black);
+}
+
+html.theme-dark
+  .checkbox-3xZUD-2M:hover
+  .input-ly-CSnj5:checked:not(:focus):not(:disabled)
+  + .box-20C92a5S {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  filter: brightness(0.8);
+}
+
+html.theme-dark
+  .checkbox-3xZUD-2M
+  .wrapper-1AZBBaMW
+  .input-ly-CSnj5:active:not(:disabled)
+  + .box-20C92a5S,
+html.theme-dark
+  .checkbox-3xZUD-2M
+  .wrapper-1AZBBaMW
+  .input-ly-CSnj5:focus
+  + .box-20C92a5S {
+  border-color: var(--primary);
+}
+
+/* input */
+
+html.theme-dark .inputWithErrorWrapper-3VldItns.focused-3rk113Ah {
+  border-color: var(--primary);
+}
+
+html.theme-dark .inputWithErrorWrapper-3VldItns.focused-3rk113Ah:hover {
+  border-color: var(--primary);
+}
+
+html.theme-dark
+  .row-1NK-hr1x
+  .inputWithErrorWrapper-3VldItns.focused-3rk113Ah.thickBorder-17UV-SuS {
+  box-shadow: none !important;
+}
+
+/* dropdown */
+
+html.theme-dark .container-AqxbM340.intent-primary-npIFDxc3 {
+  border-color: var(--primary);
+  box-shadow: none;
+}
+
+/* dot menu */
+
+html.theme-dark .container-AqxbM340.intent-primary-npIFDxc3 .shadow-rtripSA4 {
+  border-color: var(--primary);
+}
+
+/* container */
+
+html.theme-dark .container-RYiwcUsM {
+  background: var(--black);
+}
+
+.chart-widget--themed-dark .selected-2qw9PFUJ .buttons-1-XhYDHM,
+.chart-widget--themed-dark
+  .selected-2qw9PFUJ
+  .buttons-1-XhYDHM
+  .button-22Ex8G2W:not(:first-child),
+.chart-widget--themed-dark .selected-2qw9PFUJ .buttonsWrapper-3eBZpnXm,
+.chart-widget--themed-dark .selected-2qw9PFUJ .titleWrapper-1Zs2rjQ6 {
+  border-color: var(--primary);
+}
+
+/* inner chart menu */
+
+html.theme-dark .item-stVdeCwG.interactive-3E0jwVyG:hover {
+  background-color: transparent;
+  color: var(--primary);
+}
+
+html.theme-dark .item-stVdeCwG.interactive-3E0jwVyG.hovered-2HCCgw6c,
+html.theme-dark .item-stVdeCwG.interactive-3E0jwVyG:active {
+  background-color: transparent;
+  color: var(--primary);
+}