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

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

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

components/MarketSelect.tsx

@@ -35,8 +35,11 @@ const MarketSelect = () => {
             </div>
           ))}
         </div>
-        <div className="text-th-fgd-3 mr-10">
+        <div className="text-th-fgd-3 mr-10 text-xs">
-          <a href="https://old.mango.markets" className="hover:text-th-primary">
+          <a
+            href="https://old.mango.markets"
+            className="default-transition underline hover:text-th-primary hover:no-underline"
+          >
             Use Previous Version
           </a>
         </div>

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}`}>
+    <div className={`flex relative ${className} mr-4`}>
-      <Tooltip content="Reset layout">
+      <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>

components/ThemeSwitch.tsx

@@ -28,6 +28,7 @@ const ThemeSwitch = () => {
       value={theme}
       onChange={(theme) => setTheme(theme)}
       options={THEMES}
+      toolTipContent="Change Theme"
     />
   )
 }

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>
       }

components/TradingView/index.tsx

@@ -70,8 +70,8 @@ const TVChartContainer = () => {
       disabled_features: [
         'use_localstorage_for_settings',
         'timeframes_toolbar',
-        'volume_force_overlay',
+        // 'volume_force_overlay',
-        'left_toolbar',
+        // '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_resolutions',
-        'header_widget',
+        // '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(() => {
+      // tvWidget.headerReady().then(() => {
-        const button = tvWidget.createButton()
+      // const button = tvWidget.createButton()
-        button.setAttribute('title', 'Click to show a notification popup')
+      // button.setAttribute('title', 'Click to show a notification popup')
-        button.classList.add('apply-common-tooltip')
+      // button.classList.add('apply-common-tooltip')
-        button.addEventListener('click', () =>
+      // button.addEventListener('click', () =>
-          tvWidget.showNoticeDialog({
+      //   tvWidget.showNoticeDialog({
-            title: 'Notification',
+      //     title: 'Notification',
-            body: 'TradingView Charting Library API works correctly',
+      //     body: 'TradingView Charting Library API works correctly',
-            callback: () => {
+      //     callback: () => {
-              // console.log('It works!!');
+      //       // console.log('It works!!');
-            },
+      //     },
-          })
+      //   })
-        )
+      // )
-        button.innerHTML = 'Check API'
+      // button.innerHTML = 'Check API'
-      })
+      // })
     })
     //eslint-disable-next-line
   }, [selectedMarketName, theme])

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`}>
+      <div className={`${className} flex relative mr-4`}>
-        <button
+        <Tooltip
-          onClick={handleClick}
+          content={uiLocked ? 'Unlock Layout' : 'Lock Layout'}
-          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="text-xs py-1"
         >
-          {uiLocked ? (
+          <button
-            <LockClosedIcon className="w-5 h-5" />
+            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"
-            <LockOpenIcon className="w-5 h-5 animate-bounce" />
+          >
-          )}
+            {uiLocked ? (
-        </button>
+              <LockClosedIcon className="w-5 h-5" />
+            ) : (
+              <LockOpenIcon className="w-5 h-5 animate-bounce" />
+            )}
+          </button>
+        </Tooltip>
       </div>
     </>
   )

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

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>
+  )
+}

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

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);
+}