src/components/contextMenu/ColorItem.tsx

@@ -1,37 +1,37 @@
-import styled from "styled-components";
+import styled from 'styled-components'
 // lib
-import * as styles from "lib/styles/styles";
+import * as styles from 'lib/styles/styles'
-import palette from "lib/styles/palette";
+import palette from 'lib/styles/palette'
 
-const ColorItem = ({ color, onClick }: Props) => {
+const ColorItem = ({ name, color, onClick }: Props) => {
   const onClickItem = (e: any) => {
     onClick();
     e.target.blur();
   };
 
   return (
-    <>
+    <Wrapper onClick={onClickItem}>
-      <Wrapper onClick={onClickItem}>
+      <ColorWrapper>
-        <ColorWrapper>
+        <Color color={color} />
-          <Color color={color} />
+      </ColorWrapper>
-        </ColorWrapper>
+      <Message>{name}</Message>
-      </Wrapper>
+    </Wrapper>
-    </>
   );
-};
+}
 
 const Wrapper = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
   height: 32px;
-  width: 50px;
-  text-align: -webkit-center;
   border-radius: 6px;
   cursor: pointer;
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgba(0,0,0,0);
-  transition: 0.1s ${styles.transition};
+  transition: .1s ${styles.transition};
   outline: none;
 
-  &:hover,
+  &:hover, &:focus {
-  &:focus {
     background-color: ${palette.blue3};
 
     & > span {
@@ -45,6 +45,7 @@ const ColorWrapper = styled.div`
   height: 16px;
   border-radius: 16px;
   background-color: #fff;
+  margin-right: 16px;
 `;
 
 const Color = styled.div<{ color: string }>`
@@ -52,7 +53,7 @@ const Color = styled.div<{ color: string }>`
   height: 16px;
   border-radius: 16px;
   background-color: ${({ color }) => color};
-  opacity: 0.4;
+  opacity: .4;
 `;
 
 const Message = styled.span`
@@ -63,8 +64,9 @@ const Message = styled.span`
 `;
 
 interface Props {
+  name: string;
   color: string;
   onClick: () => void;
 }
 
-export default ColorItem;
+export default ColorItem

src/components/contextMenu/Item.tsx

@@ -1,15 +1,11 @@
-import styled from "styled-components";
+import styled from 'styled-components'
 // lib
-import * as styles from "lib/styles/styles";
+import * as styles from 'lib/styles/styles'
-import palette from "lib/styles/palette";
+import palette from 'lib/styles/palette'
 
 const Item = ({ text, onClick }: Props) => {
-  return (
+  return <Container onClick={onClick}>{text}</Container>;
-    <>
+}
-      <Container onClick={onClick}>{text}</Container>
-    </>
-  );
-};
 
 const Container = styled.button`
   width: 100%;
@@ -18,14 +14,13 @@ const Container = styled.button`
   text-align: center;
   font-size: 14px;
   color: #fff;
-  transition: 0.1s ${styles.transition};
+  transition: .1s ${styles.transition};
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgba(0,0,0,0);
   border-radius: 6px;
   cursor: pointer;
   outline: none;
 
-  &:focus,
+  &:focus, &:hover {
-  &:hover {
     color: #fff;
     background-color: ${palette.red3};
   }
@@ -36,4 +31,4 @@ interface Props {
   onClick: (e?: any) => void;
 }
 
-export default Item;
+export default Item

src/components/contextMenu/Wrapper.tsx

@@ -15,7 +15,7 @@ const Wrapper = styled.div<Props>`
     : `${y}px`
   };
   width: ${({ width }) => width + 'px'};
-  height: ${({ height }) => 195 + 'px'};
+  height: ${({ height }) => height + 'px'};
   box-sizing: border-box;
   padding: ${({ width }) => width > 0
     ? `4px`

src/containers/Header.tsx

@@ -43,15 +43,7 @@ const Header = ({
                 alignItems: "center",
               }}
             >
-              <nav
+              <Item text={title as any} />
-                style={
-                  window.innerWidth < 768
-                    ? { width: "150px", textOverflow: "ellipsis" , direction:'rtl' }
-                    : { border: "none" }
-                }
-              >
-                <Item text={title as any} />
-              </nav>
               <span style={{ color: "#fff", marginRight: "10px" }}>
                 {title ? "|" : ""}
               </span>

src/containers/Reader.tsx

@@ -217,6 +217,16 @@ const Reader = ({ url, loadingView }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const [color, setcolor] = useState("light-white");
+
+  // const Colors = [
+  //   { name: "dark-white", value: "#fff" },
+  //   { name: "dark-blue", value: "#fff" },
+  //   { name: "dark-brown", value: "#fff4e1" },
+  //   { name: "light-white", value: "#121212" },
+  //   { name: "light-brown", value: "#af622e" },
+  //   { name: "light-blue", value: "#5858df" },
+  // ];
+
   const readyColors = [
     { name: "dark-white", bgColor: "#4e4e4e", color: "#fff" },
     { name: "light-white", bgColor: "#fff", color: "#292929" },

src/containers/commons/ContextMenu.tsx

@@ -43,6 +43,7 @@ const ContextMenu = ({
   const ColorList = colorList.map((color) => (
     <ColorItem
       key={color.code}
+      name={color.name}
       color={color.code}
       onClick={
         selection.update
@@ -175,8 +176,6 @@ const ContextMenu = ({
     setY(y_);
   }, [selection.y, selection.height, ColorList, isEraseBtn, setHeight]);
 
-  const [discription, setDiscription] = useState('')
-
   return (
     <>
       {display && (
@@ -188,32 +187,6 @@ const ContextMenu = ({
           isReverse={isReverse}
           ref={menuRef}
         >
-          <label
-            style={{
-              display: "flex",
-              justifyContent: "flex-end",
-              margin: "1px 5px",
-              color: "#fff",
-            }}
-          >
-            نام
-          </label>
-          <textarea
-            style={{
-              height: "50px",
-              width: "100%",
-              backgroundColor: "initial",
-              border: "solid 1.5px #fff",
-              textAlign: "center",
-              borderRadius: "5px",
-              color: "#fff",
-              resize: "none",
-            }}
-
-            placeholder="توضیحات"
-            value={discription}
-            onChange={(e)=>setDiscription(e.target.value)}
-          />
           <div>
             {ColorList}
             {isEraseBtn && <Item text="حذف" onClick={onRemoveHighlight_} />}

src/containers/commons/Snackbar.tsx

@@ -1,55 +1,56 @@
-import styled from "styled-components";
+import styled from 'styled-components'
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector, useDispatch } from 'react-redux'
 // components
-import Snackbar from "components/commons/Snackbar";
+import Snackbar from 'components/commons/Snackbar'
 // lib
-import zIndex from "lib/styles/zIndex";
+import zIndex from 'lib/styles/zIndex'
-import media from "lib/styles/media";
+import media from 'lib/styles/media'
 // slices
-import { deleteSnackbar } from "slices/snackbar";
+import { deleteSnackbar } from 'slices/snackbar'
 // types
-import { RootState } from "slices";
+import { RootState } from 'slices'
-import { SnackbarState } from "slices/snackbar";
+import { SnackbarState } from 'slices/snackbar'
 
-const SnackbarWrapper = () => {
+
+const SnackbarWrapper = ()=> {
   const dispatch = useDispatch();
-  const snackbar = useSelector<RootState, SnackbarState>(
+	const snackbar = useSelector<RootState, SnackbarState>(state => state.snackbar);
-    (state) => state.snackbar
+	
-  );
+
-
+	const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-  const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+		if (e) {
-    if (e) {
+			e.preventDefault();
-      e.preventDefault();
+			e.stopPropagation();
-      e.stopPropagation();
+		}
-    }
+		dispatch(deleteSnackbar());
-    dispatch(deleteSnackbar());
+	};
-  };
+
-
+	
-  return (
+	return (
-    <Container>
+		<Container>
-      {snackbar.text !== "" && (
+			{snackbar.text !== '' && <Snackbar onClick={onClick} 
-        <Snackbar onClick={onClick} text={snackbar.text} type={snackbar.type} />
+                                         text={snackbar.text} 
-      )}
+                                         type={snackbar.type} />}
-    </Container>
+		</Container>
-  );
+	);
-};
+}
 
 const Container = styled.div`
-  position: fixed;
+	position: fixed;
-  top: 40px;
+	top: 40px;
-  right: 30px;
+	right: 30px;
-  width: 320px;
+	width: 320px;
-  height: auto;
+	height: auto;
-  z-index: ${zIndex.snackbar};
+	z-index: ${zIndex.snackbar};
-
+
-  ${media.small} {
+	${media.small} {
-    width: 100%;
+		width: 100%;
-    top: initial;
+		top: initial;
-    bottom: 0;
+		bottom: 0;
-    left: 0;
+		left: 0;
-    right: 0;
+		right: 0;
-    margin: auto;
+		margin: auto;
-  }
+	}
 `;
 
-export default SnackbarWrapper;
+export default SnackbarWrapper

src/containers/menu/commons/Highlight.tsx

@@ -50,6 +50,8 @@ const Highlight = ({
   return (
     <Wrapper onClick={onClickHighlight}>
       <div>
+        <Title>{highlight.chpaterName}</Title>
+
         <Post color={highlight.color}>{highlight.content}</Post>
       </div>
     </Wrapper>

src/slices/book.ts

@@ -35,12 +35,12 @@ const initialCurrentLocation: Page = {
 
 /** 초기 색상표 상태 */
 const initialColorList: Color[] = [
-  { code: palette.red4 },
+  { name: "قرمز", code: palette.red4 },
-  { code: palette.orange4 },
+  { name: "نارنجی", code: palette.orange4 },
-  { code: palette.yellow4 },
+  { name: "زرد", code: palette.yellow4 },
-  { code: palette.green4 },
+  { name: "سبز", code: palette.green4 },
-  { code: palette.blue4 },
+  { name: "آبی", code: palette.blue4 },
-  { code: palette.purple4 },
+  { name: "بنفش", code: palette.purple4 },
 ];
 
 const initialState: BookState = {
@@ -64,8 +64,6 @@ const bookSlice = createSlice({
     },
     /** CurrentPage 갱신 @dispatch */
     updateCurrentPage(state, action: PayloadAction<Page>) {
-<<<<<<< HEAD
-=======
       if (
         state.currentLocation.currentPage == action.payload.currentPage &&
         action.payload.chapterName
@@ -76,7 +74,6 @@ const bookSlice = createSlice({
         // console.log(x[1]);
         console.log("فصل بعد");
       }
->>>>>>> e8ebd6db27fa5c5048decd0d52f266d83a8cf52c
       state.currentLocation = action.payload;
     },
     /** Book 초기화 @dispatch */

src/types/highlight.ts

@@ -28,6 +28,7 @@ interface Highlight {
  * @param code 색상 Hex 코드
  */
 export interface Color {
+  name: string;
   code: string;
 }