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

app/scenes/CollectionPermissions/components/CollectionGroupMemberListItem.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import { CollectionPermission } from "@shared/types";
 import CollectionGroupMembership from "~/models/CollectionGroupMembership";
 import Group from "~/models/Group";
@@ -66,7 +67,7 @@ const Select = styled(InputSelect)`
   font-size: 14px;
   border-color: transparent;
   box-shadow: none;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
 
   select {
     margin: 0;

app/scenes/CollectionPermissions/components/MemberListItem.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import { CollectionPermission } from "@shared/types";
 import Membership from "~/models/Membership";
 import User from "~/models/User";
@@ -94,7 +95,7 @@ const Select = styled(InputSelect)`
   font-size: 14px;
   border-color: transparent;
   box-shadow: none;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
 
   select {
     margin: 0;

app/scenes/DesktopRedirect.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
 import PageTitle from "~/components/PageTitle";
@@ -40,7 +41,7 @@ const DesktopRedirect = () => {
 };
 
 const Note = styled(Text)`
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   text-align: center;
   font-size: 14px;
   margin-top: 8px;

app/scenes/Document/Shared.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { RouteComponentProps, useLocation, Redirect } from "react-router-dom";
 import styled, { ThemeProvider } from "styled-components";
 import { setCookie } from "tiny-cookie";
+import { s } from "@shared/styles";
 import { CustomTheme, NavigationNode } from "@shared/types";
 import DocumentModel from "~/models/Document";
 import Error404 from "~/scenes/Error404";
@@ -197,7 +198,7 @@ function SharedDocumentScene(props: Props) {
 }
 
 const Content = styled(Text)`
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   text-align: center;
   margin-top: -8px;
 `;

app/scenes/Document/components/CommentThread.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
 import Comment from "~/models/Comment";
 import Document from "~/models/Document";
 import Avatar from "~/components/Avatar";
@@ -199,7 +200,7 @@ const Reply = styled.button`
   padding: 8px;
   margin: 0;
   background: none;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   font-size: 14px;
   -webkit-appearance: none;
   cursor: var(--pointer);

app/scenes/Document/components/CommentThreadItem.tsx

@@ -4,6 +4,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
 import { Minute } from "@shared/utils/time";
 import Comment from "~/models/Comment";
 import Avatar from "~/components/Avatar";
@@ -223,7 +224,7 @@ const Menu = styled(CommentMenu)<{ dir?: "rtl" | "ltr" }>`
   &:hover,
   &[aria-expanded="true"] {
     opacity: 1;
-    background: ${(props) => props.theme.sidebarActiveBackground};
+    background: ${s("sidebarActiveBackground")};
   }
 `;
 
@@ -246,13 +247,12 @@ export const Bubble = styled(Flex)<{
   position: relative;
   flex-grow: 1;
   font-size: 15px;
-  color: ${(props) => props.theme.text};
-  background: ${(props) => props.theme.commentBackground};
+  color: ${s("text")};
+  background: ${s("commentBackground")};
   min-width: 2em;
   margin-bottom: 1px;
   padding: 8px 12px;
-  transition: color 100ms ease-out,
-    ${(props) => props.theme.backgroundTransition};
+  transition: color 100ms ease-out, ${s("backgroundTransition")};
 
   ${({ $lastOfThread }) =>
     $lastOfThread &&

app/scenes/Document/components/Contents.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
 import Text from "~/components/Text";
 import useWindowScrollPosition from "~/hooks/useWindowScrollPosition";
 
@@ -101,8 +102,8 @@ const Sticky = styled.div`
   top: 80px;
   max-height: calc(100vh - 80px);
 
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
 
   margin-top: 72px;
   margin-right: 52px;
@@ -122,7 +123,7 @@ const Sticky = styled.div`
 const Heading = styled.h3`
   font-size: 13px;
   font-weight: 600;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   letter-spacing: 0.03em;
 `;
 
@@ -145,11 +146,11 @@ const ListItem = styled.li<{ level: number; active?: boolean }>`
 `;
 
 const Link = styled.a`
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   font-size: 14px;
 
   &:hover {
-    color: ${(props) => props.theme.accent};
+    color: ${s("accent")};
   }
 `;
 

app/scenes/Document/components/Document.tsx

@@ -13,6 +13,7 @@ import {
 } from "react-router";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
 import { Heading } from "@shared/utils/ProsemirrorHelper";
 import { parseDomain } from "@shared/utils/domains";
@@ -36,6 +37,7 @@ import { client } from "~/utils/ApiClient";
 import { replaceTitleVariables } from "~/utils/date";
 import { emojiToUrl } from "~/utils/emoji";
 import { isModKey } from "~/utils/keyboard";
+
 import {
   documentHistoryUrl,
   editDocumentUrl,
@@ -574,8 +576,8 @@ const Footer = styled.div`
 
 const Background = styled(Container)`
   position: relative;
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
 `;
 
 const ReferencesWrapper = styled.div<{ isOnlyTitle?: boolean }>`

app/scenes/Document/components/EditableTitle.tsx

@@ -7,6 +7,7 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import isMarkdown from "@shared/editor/lib/isMarkdown";
 import normalizePastedMarkdown from "@shared/editor/lib/markdown/normalize";
+import { s } from "@shared/styles";
 import { light } from "@shared/styles/theme";
 import {
   getCurrentDateAsString,
@@ -238,8 +239,8 @@ const Title = styled(ContentEditable)<TitleProps>`
   }
 
   &::placeholder {
-    color: ${(props) => props.theme.placeholder};
-    -webkit-text-fill-color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
+    -webkit-text-fill-color: ${s("placeholder")};
   }
 
   ${breakpoint("tablet")`

app/scenes/Document/components/Insights.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useRouteMatch } from "react-router-dom";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import { useDocumentContext } from "~/components/DocumentContext";
@@ -179,7 +180,7 @@ const List = styled("ul")`
     content: "·";
     display: inline-block;
     font-weight: 600;
-    color: ${(props) => props.theme.textTertiary};
+    color: ${s("textTertiary")};
     width: 10px;
   }
 `;

app/scenes/Document/components/ReferenceListItem.tsx

@@ -3,12 +3,13 @@ import { DocumentIcon } from "outline-icons";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { s, ellipsis } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
 import parseTitle from "@shared/utils/parseTitle";
 import Document from "~/models/Document";
 import Flex from "~/components/Flex";
 import EmojiIcon from "~/components/Icons/EmojiIcon";
-import { ellipsis, hover } from "~/styles";
+import { hover } from "~/styles";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {
@@ -32,12 +33,12 @@ const DocumentLink = styled(Link)`
   &:${hover},
   &:active,
   &:focus {
-    background: ${(props) => props.theme.listItemHoverBackground};
+    background: ${s("listItemHoverBackground")};
   }
 `;
 
 const Content = styled(Flex)`
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   margin-left: -4px;
 `;
 
@@ -47,7 +48,7 @@ const Title = styled.div`
   font-weight: 500;
   line-height: 1.25;
   padding-top: 3px;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;

app/scenes/Document/components/SharePopover.tsx

@@ -7,6 +7,7 @@ import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import { SHARE_URL_SLUG_REGEX } from "@shared/utils/urlHelpers";
 import Document from "~/models/Document";
 import Share from "~/models/Share";
@@ -349,7 +350,7 @@ function SharePopover({
 }
 
 const StyledLink = styled(Link)`
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   text-decoration: underline;
 `;
 
@@ -374,14 +375,14 @@ const NoticeWrapper = styled.div`
 const MoreOptionsButton = styled(Button)`
   background: none;
   font-size: 14px;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   margin-left: -8px;
 `;
 
 const Separator = styled.div`
   height: 1px;
   width: 100%;
-  background-color: ${(props) => props.theme.divider};
+  background-color: ${s("divider")};
 `;
 
 const SwitchLabel = styled(Flex)`

app/scenes/Document/components/SidebarLayout.tsx

@@ -4,13 +4,12 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
 import styled from "styled-components";
-import { depths } from "@shared/styles";
+import { depths, s, ellipsis } from "@shared/styles";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import Tooltip from "~/components/Tooltip";
 import useMobile from "~/hooks/useMobile";
-import { ellipsis } from "~/styles";
 import { fadeIn } from "~/styles/animations";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
@@ -67,7 +66,7 @@ const Backdrop = styled.a`
   right: 0;
   cursor: default;
   z-index: ${depths.sidebar - 1};
-  background: ${(props) => props.theme.backdrop};
+  background: ${s("backdrop")};
 `;
 
 const ForwardIcon = styled(BackIcon)`
@@ -91,7 +90,7 @@ const Header = styled(Flex)`
   align-items: center;
   position: relative;
   padding: 16px 12px 16px 16px;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   flex-shrink: 0;
 `;
 

app/scenes/DocumentMove.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import styled from "styled-components";
+import { ellipsis } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
 import Document from "~/models/Document";
 import Button from "~/components/Button";
@@ -12,7 +13,6 @@ import Text from "~/components/Text";
 import useCollectionTrees from "~/hooks/useCollectionTrees";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
-import { ellipsis } from "~/styles";
 import { flattenTree } from "~/utils/tree";
 
 type Props = {

app/scenes/DocumentPublish.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import styled from "styled-components";
+import { ellipsis } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
 import Document from "~/models/Document";
 import Button from "~/components/Button";
@@ -12,7 +13,6 @@ import Text from "~/components/Text";
 import useCollectionTrees from "~/hooks/useCollectionTrees";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
-import { ellipsis } from "~/styles";
 import { flattenTree } from "~/utils/tree";
 
 type Props = {

app/scenes/Invite.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import { Role } from "@shared/types";
 import { UserValidation } from "@shared/validations";
 import Button from "~/components/Button";
@@ -272,7 +273,7 @@ function Invite({ onSubmit }: Props) {
 const CopyBlock = styled("div")`
   margin: 2em 0;
   font-size: 14px;
-  background: ${(props) => props.theme.secondaryBackground};
+  background: ${s("secondaryBackground")};
   border-radius: 8px;
   padding: 16px 16px 8px;
 `;

app/scenes/KeyboardShortcuts.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import InputSearch from "~/components/InputSearch";
 import Key from "~/components/Key";
@@ -450,7 +451,7 @@ const Keys = styled.dt`
   clear: left;
   text-align: right;
   font-size: 12px;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -462,7 +463,7 @@ const Label = styled.dd`
   margin: 0 0 10px;
   display: flex;
   align-items: center;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
 `;
 
 export default React.memo(KeyboardShortcuts);

app/scenes/Login/Notices.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Trans } from "react-i18next";
 import NoticeAlert from "~/components/NoticeAlert";
 import useQuery from "~/hooks/useQuery";
 
@@ -7,97 +8,101 @@ export default function Notices() {
   const notice = query.get("notice");
   const description = query.get("description");
 
+  if (!notice) {
+    return null;
+  }
+
   return (
-    <>
+    <NoticeAlert>
       {notice === "domain-required" && (
-        <NoticeAlert>
+        <Trans>
           Unable to sign-in. Please navigate to your team's custom URL, then try
           to sign-in again.
           <hr />
           If you were invited to a team, you will find a link to it in the
           invite email.
-        </NoticeAlert>
+        </Trans>
       )}
       {notice === "gmail-account-creation" && (
-        <NoticeAlert>
+        <Trans>
           Sorry, a new account cannot be created with a personal Gmail address.
           <hr />
           Please use a Google Workspaces account instead.
-        </NoticeAlert>
+        </Trans>
       )}
       {notice === "maximum-teams" && (
-        <NoticeAlert>
+        <Trans>
           The team you authenticated with is not authorized on this
           installation. Try another?
-        </NoticeAlert>
+        </Trans>
       )}
       {notice === "malformed-user-info" && (
-        <NoticeAlert>
+        <Trans>
           We could not read the user info supplied by your identity provider.
-        </NoticeAlert>
+        </Trans>
       )}
       {notice === "email-auth-required" && (
-        <NoticeAlert>
+        <Trans>
           Your account uses email sign-in, please sign-in with email to
           continue.
-        </NoticeAlert>
+        </Trans>
       )}
       {notice === "email-auth-ratelimit" && (
-        <NoticeAlert>
+        <Trans>
           An email sign-in link was recently sent, please check your inbox or
           try again in a few minutes.
-        </NoticeAlert>
+        </Trans>
       )}
       {(notice === "auth-error" || notice === "state-mismatch") &&
         (description ? (
-          <NoticeAlert>{description}</NoticeAlert>
+          <>{description}</>
         ) : (
-          <NoticeAlert>
+          <Trans>
             Authentication failed – we were unable to sign you in at this time.
             Please try again.
-          </NoticeAlert>
+          </Trans>
         ))}
       {notice === "invalid-authentication" &&
         (description ? (
-          <NoticeAlert>{description}</NoticeAlert>
+          <>{description}</>
         ) : (
-          <NoticeAlert>
+          <Trans>
             Authentication failed – you do not have permission to access this
             team.
-          </NoticeAlert>
+          </Trans>
         ))}
       {notice === "expired-token" && (
-        <NoticeAlert>
+        <Trans>
           Sorry, it looks like that sign-in link is no longer valid, please try
           requesting another.
-        </NoticeAlert>
+        </Trans>
       )}
       {notice === "suspended" && (
-        <NoticeAlert>
+        <Trans>
           Your account has been suspended. To re-activate your account, please
           contact a team admin.
-        </NoticeAlert>
+        </Trans>
       )}
       {notice === "authentication-provider-disabled" && (
-        <NoticeAlert>
+        <Trans>
           Authentication failed – this login method was disabled by a team
           admin.
-        </NoticeAlert>
+        </Trans>
       )}
       {notice === "invite-required" && (
-        <NoticeAlert>
+        <Trans>
           The team you are trying to join requires an invite before you can
           create an account.
           <hr />
           Please request an invite from your team admin and try again.
-        </NoticeAlert>
+        </Trans>
       )}
       {notice === "domain-not-allowed" && (
-        <NoticeAlert>
+        <Trans>
           Sorry, your domain is not allowed. Please try again with an allowed
           team domain.
-        </NoticeAlert>
+        </Trans>
       )}
-    </>
+    </NoticeAlert>
   );
 }

app/scenes/Login/index.tsx

@@ -6,6 +6,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { useLocation, Link, Redirect } from "react-router-dom";
 import styled from "styled-components";
 import { getCookie, setCookie } from "tiny-cookie";
+import { s } from "@shared/styles";
 import { parseDomain } from "@shared/utils/domains";
 import { Config } from "~/stores/AuthStore";
 import ButtonLarge from "~/components/ButtonLarge";
@@ -278,7 +279,7 @@ const CheckEmailIcon = styled(EmailIcon)`
 const Background = styled(Fade)`
   width: 100vw;
   height: 100%;
-  background: ${(props) => props.theme.background};
+  background: ${s("background")};
   display: flex;
   ${draggableOnDesktop()}
 `;
@@ -288,13 +289,13 @@ const Logo = styled.div`
 `;
 
 const Content = styled(Text)`
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   text-align: center;
   margin-top: -8px;
 `;
 
 const Note = styled(Text)`
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   text-align: center;
   font-size: 14px;
   margin-top: 8px;
@@ -337,8 +338,8 @@ const Or = styled.hr`
     transform: translate3d(-50%, -50%, 0);
     text-transform: uppercase;
     font-size: 11px;
-    color: ${(props) => props.theme.textSecondary};
-    background: ${(props) => props.theme.background};
+    color: ${s("textSecondary")};
+    background: ${s("background")};
     border-radius: 2px;
     padding: 0 4px;
   }

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")};
   }
 `;
 

app/scenes/Settings/components/DropToImport.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import Dropzone from "react-dropzone";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import { AttachmentPreset } from "@shared/types";
 import Flex from "~/components/Flex";
 import LoadingIndicator from "~/components/LoadingIndicator";
@@ -114,7 +115,7 @@ const DropzoneContainer = styled.div<{
       ? props.theme.secondaryBackground
       : props.theme.background};
   border-radius: 8px;
-  border: 1px dashed ${(props) => props.theme.divider};
+  border: 1px dashed ${s("divider")};
   padding: 52px;
   text-align: center;
   font-size: 15px;
@@ -122,7 +123,7 @@ const DropzoneContainer = styled.div<{
   opacity: ${(props) => (props.$disabled ? 0.5 : 1)};
 
   &:hover {
-    background: ${(props) => props.theme.secondaryBackground};
+    background: ${s("secondaryBackground")};
   }
 `;
 

app/scenes/Settings/components/ImageInput.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Avatar, { IAvatar } from "~/components/Avatar/Avatar";
 import Flex from "~/components/Flex";
 import ImageUpload, { Props as ImageUploadProps } from "./ImageUpload";
@@ -38,8 +39,8 @@ const ImageBox = styled(Flex)`
   position: relative;
   font-size: 14px;
   border-radius: 8px;
-  box-shadow: 0 0 0 1px ${(props) => props.theme.secondaryBackground};
-  background: ${(props) => props.theme.background};
+  box-shadow: 0 0 0 1px ${s("secondaryBackground")};
+  background: ${s("background")};
   overflow: hidden;
 
   .upload {

app/scenes/Settings/components/ImageUpload.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import AvatarEditor from "react-avatar-editor";
 import Dropzone from "react-dropzone";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import { AttachmentPreset } from "@shared/types";
 import { AttachmentValidation } from "@shared/validations";
 import RootStore from "~/stores/RootStore";
@@ -170,7 +171,7 @@ const RangeInput = styled.input`
     height: 16px;
     width: 16px;
     border-radius: 50%;
-    background: ${(props) => props.theme.text};
+    background: ${s("text")};
     cursor: var(--pointer);
   }