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

app/scenes/Search/components/RecentSearches.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Fade from "~/components/Fade";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
@@ -53,7 +54,7 @@ const Heading = styled.h2`
   font-weight: 500;
   font-size: 14px;
   line-height: 1.5;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   margin-bottom: 0;
 `;
 
@@ -70,7 +71,7 @@ const ListItem = styled.li`
 
   &:before {
     content: "·";
-    color: ${(props) => props.theme.textTertiary};
+    color: ${s("textTertiary")};
     position: absolute;
     left: -8px;
   }
@@ -78,24 +79,24 @@ const ListItem = styled.li`
 
 const RemoveButton = styled(NudeButton)`
   opacity: 0;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
 
   &:hover {
-    color: ${(props) => props.theme.text};
+    color: ${s("text")};
   }
 `;
 
 const RecentSearch = styled(Link)`
   display: flex;
   justify-content: space-between;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   cursor: var(--pointer);
   padding: 1px 4px;
   border-radius: 4px;
 
   &: ${hover} {
-    color: ${(props) => props.theme.text};
-    background: ${(props) => props.theme.secondaryBackground};
+    color: ${s("text")};
+    background: ${s("secondaryBackground")};
 
     ${RemoveButton} {
       opacity: 1;

app/scenes/Search/components/SearchInput.tsx

@@ -1,6 +1,7 @@
 import { SearchIcon } from "outline-icons";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
+import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 
 type Props = React.HTMLAttributes<HTMLInputElement> & {
@@ -57,26 +58,26 @@ const StyledInput = styled.input`
   font-weight: 400;
   outline: none;
   border: 0;
-  background: ${(props) => props.theme.sidebarBackground};
-  transition: ${(props) => props.theme.backgroundTransition};
+  background: ${s("sidebarBackground")};
+  transition: ${s("backgroundTransition")};
   border-radius: 4px;
 
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
 
   ::-webkit-search-cancel-button {
     -webkit-appearance: none;
   }
   ::-webkit-input-placeholder {
-    color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
   }
   :-moz-placeholder {
-    color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
   }
   ::-moz-placeholder {
-    color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
   }
   :-ms-input-placeholder {
-    color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
   }
 `;