export divider width via variable

agneym · Dec 18, 2019 · ccd45a0 · ccd45a0
1 parent 825543d
commit ccd45a0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/playground/src/Draggable/index.tsx b/playground/src/Draggable/index.tsx
@@ -1,17 +1,17 @@
-import React, { FC, ReactNode, useRef } from "react";
-import styled from "styled-components";
+import React, { FC, ReactNode, useRef, useContext } from "react";
+import styled, { ThemeContext } from "styled-components";
+
 import useDrag from "./useDrag";
 
 const Container = styled.div`
   display: flex;
   align-items: stretch;
 `;
 
-const DIVIDER_WIDTH = 3;
-
 const Divider = styled.div`
-  width: ${DIVIDER_WIDTH}px;
+  width: ${props => props.theme.divider.width}px;
   cursor: col-resize;
+  background-color: ${props => props.theme.divider.background};
 `;
 
 interface IProps {
@@ -23,11 +23,12 @@ interface IProps {
 const Draggable: FC<IProps> = ({ className = "", leftChild, rightChild }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const dividerRef = useRef<HTMLDivElement>(null);
+  const themeContext = useContext(ThemeContext);
 
   const { leftWidth, rightWidth } = useDrag({
     containerRef,
     dividerRef,
-    dividerWidth: DIVIDER_WIDTH,
+    dividerWidth: themeContext.divider.width,
   });
 
   return (

diff --git a/playground/src/Editor/index.tsx b/playground/src/Editor/index.tsx
@@ -11,9 +11,7 @@ import {
   StyledTabPanel,
 } from "../TabStyles";
 
-const TabContainer = styled(StyledTabs)`
-  border-right: 0.05em solid rgba(0, 0, 0, 0.2);
-`;
+const TabContainer = styled(StyledTabs)``;
 
 interface IProps {
   width: number;

diff --git a/playground/src/utils/theme.ts b/playground/src/utils/theme.ts
@@ -12,6 +12,10 @@ const theme: DefaultTheme = {
   console: {
     background: "rgba(0, 0, 0, 1)",
   },
+  divider: {
+    width: 2,
+    background: " #202020",
+  },
   tabs: {
     tabHeader: {
       borderBottom: "0.1em solid rgba(0, 0, 0, 0.1)",