Handles exceptions

Author: velopert

src/components/base/Header.tsx

@@ -10,6 +10,7 @@ import HeaderUserMenu from './HeaderUserMenu';
 import { Link } from 'react-router-dom';
 import media from '../../lib/styles/media';
 import HeaderLogo from './HeaderLogo';
+import { themedPalette } from '../../lib/styles/themes';
 
 export type MainHeaderProps = {};
 
@@ -99,9 +100,10 @@ const SearchButton = styled(Link)`
   height: 2.5rem;
   outline: none;
   border-radius: 50%;
+  color: ${themedPalette.text1};
   cursor: pointer;
   &:hover {
-    background: rgba(0, 0, 0, 0.045);
+    background: ${themedPalette.slight_layer};
   }
   svg {
     width: 1.125rem;

src/components/common/HorizontalTab.tsx

@@ -108,7 +108,7 @@ const Indicator = styled(animated.div)<{ theme: 'teal' | 'gray' }>`
   ${(props) =>
     props.theme === 'gray' &&
     css`
-      background: ${palette.gray8};
+      background: ${themedPalette.border1};
     `}
 `;
 

src/components/common/ToggleSwitch.tsx

@@ -59,7 +59,7 @@ const Block = styled.div<{ active: boolean }>`
   align-items: center;
   width: 2.875rem;
   height: 1.5rem;
-  background: ${themedPalette.bg_element3};
+  background: ${palette.gray6};
   transition: 0.125s all ease-in;
   border-radius: 1.125rem;
   padding: 0.125rem;

src/components/common/Typography.tsx

@@ -23,7 +23,7 @@ const TypographyBlock = styled.div`
       font-weight: 400;
     }
     code {
-      background: rgba(27, 31, 35, 0.05);
+      background: ${themedPalette.bg_element3};
       padding: 0.2em 0.4em;
       font-size: 85%;
       border-radius: 3px;
@@ -55,7 +55,7 @@ const TypographyBlock = styled.div`
     border: none;
     height: 1px;
     width: 100%;
-    background: #dedede;
+    background: ${themedPalette.border3};
     margin-top: 2rem;
     margin-bottom: 2rem;
   }

src/components/search/SearchInput.tsx

@@ -35,6 +35,7 @@ const SearchInputBlock = styled.div<{ focus: boolean; large?: boolean }>`
     padding: 0;
     border: none;
     outline: 0;
+    background: transparent;
     color: ${themedPalette.text2};
     min-width: 0;
     &::placeholder {

src/components/write/MarkdownPreview.tsx

@@ -2,14 +2,13 @@ import * as React from 'react';
 import styled from 'styled-components';
 import MarkdownRender from '../common/MarkdownRender';
 import { themedPalette } from '../../lib/styles/themes';
-import palette from '../../lib/styles/palette';
 
 const MarkdownPreviewBlock = styled.div`
   word-break: break-word;
   padding: 3rem;
   flex: 1;
   overflow-y: auto;
-  color: ${palette.gray9};
+  color: ${themedPalette.text1};
 `;
 
 const Title = styled.h1`