Add 's' method to access theme props (#5163)

app/components/Tooltip.tsx

@@ -2,6 +2,7 @@ import Tippy, { TippyProps } from "@tippyjs/react";
 import * as React from "react";
 import styled, { createGlobalStyle } from "styled-components";
 import { roundArrow } from "tippy.js";
+import { s } from "@shared/styles";
 
 export type Props = Omit<TippyProps, "content" | "theme"> & {
   tooltip?: React.ReactChild | React.ReactChild[];
@@ -45,9 +46,9 @@ const Shortcut = styled.kbd`
   font: 10px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
     monospace;
   line-height: 10px;
-  color: ${(props) => props.theme.tooltipBackground};
+  color: ${s("tooltipBackground")};
   vertical-align: middle;
-  background-color: ${(props) => props.theme.tooltipText};
+  background-color: ${s("tooltipText")};
   border-radius: 3px;
 `;
 
@@ -60,8 +61,8 @@ export const TooltipStyles = createGlobalStyle`
   }
   .tippy-box{
       position:relative;
-      background-color: ${(props) => props.theme.tooltipBackground};
-      color: ${(props) => props.theme.tooltipText};
+      background-color: ${s("tooltipBackground")};
+      color: ${s("tooltipText")};
       border-radius:4px;
       font-size:13px;
       line-height:1.4;
@@ -113,7 +114,7 @@ export const TooltipStyles = createGlobalStyle`
   .tippy-arrow{
       width:16px;
       height:16px;
-      color: ${(props) => props.theme.tooltipBackground};
+      color: ${s("tooltipBackground")};
   }
   .tippy-arrow:before{
       content:"";
@@ -160,7 +161,7 @@ export const TooltipStyles = createGlobalStyle`
   .tippy-svg-arrow{
       width:16px;
       height:16px;
-      fill: ${(props) => props.theme.tooltipBackground};
+      fill: ${s("tooltipBackground")};
       text-align:initial
   }
   .tippy-svg-arrow,.tippy-svg-arrow>svg{