GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-20 05:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

update tools

Browse Source
This commit is contained in:
AykutSarac 2022-04-10 16:03:00 +03:00
parent 70ff69eb0d
commit 5f2768292f
1 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/containers/Editor/Tools.tsx
View File

@ -5,9 +5,9 @@ import {
AiOutlineSave,
AiOutlineMinus,
AiOutlinePlus,
AiOutlineSearch,
} from "react-icons/ai";
import { CgDockLeft } from "react-icons/cg";
import { MdCenterFocusWeak } from "react-icons/md";
import { Input } from "src/components/Input";
import { useConfig } from "src/hocs/config";
import { ConfigActionType } from "src/reducer/reducer";
import styled from "styled-components";
@ -17,10 +17,10 @@ export const StyledTools = styled.div`
align-items: center;
gap: 4px;
flex-direction: row-reverse;
height: 20px;
border-bottom: 1px solid ${({ theme }) => theme.BLACK};
height: 28px;
padding: 4px 16px;
background: ${({ theme }) => theme.BLACK_SECONDARY};
border-bottom: 1px solid #1f2124;
background: ${({ theme }) => theme.BACKGROUND_PRIMARY};
color: ${({ theme }) => theme.SILVER};
`;
@ -29,11 +29,12 @@ const StyledToolElement = styled.button`
place-content: center;
font-size: 20px;
background: none;
color: ${({ theme }) => theme.FULL_WHITE};
opacity: 0.6;
color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
&:hover {
color: ${({ theme }) => theme.INTERACTIVE_HOVER};
opacity: 1;
box-shadow: none;
}
`;
@ -52,18 +53,17 @@ export const Tools: React.FC = () => {
const toggleEditor = () => dispatch({ type: ConfigActionType.TOGGLE_DOCK });
const toggleSearch = () => dispatch({ type: ConfigActionType.TOGGLE_SEARCH });
return (
<StyledTools>
<StyledToolElement onClick={centerView}>
<StyledToolElement onClick={toggleEditor}>
<AiOutlineFullscreen />
</StyledToolElement>
<Input />
<StyledToolElement onClick={handleSave}>
<AiOutlineSave />
</StyledToolElement>
<StyledToolElement onClick={toggleEditor}>
<CgDockLeft />
<StyledToolElement>
<MdCenterFocusWeak onClick={centerView} />
</StyledToolElement>
<StyledToolElement onClick={zoomOut}>
<AiOutlineMinus />
@ -71,9 +71,6 @@ export const Tools: React.FC = () => {
<StyledToolElement onClick={zoomIn}>
<AiOutlinePlus />
</StyledToolElement>
<StyledToolElement onClick={toggleSearch}>
<AiOutlineSearch />
</StyledToolElement>
</StyledTools>
);
};