header discription of highlight

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 palette from 'lib/styles/palette'
+import * as styles from "lib/styles/styles";
+import palette from "lib/styles/palette";
 
-const ColorItem = ({ name, color, onClick }: Props) => {
+const ColorItem = ({ color, onClick }: Props) => {
   const onClickItem = (e: any) => {
     onClick();
     e.target.blur();
   };
 
   return (
-    <Wrapper onClick={onClickItem}>
-      <ColorWrapper>
-        <Color color={color} />
-      </ColorWrapper>
-      <Message>{name}</Message>
-    </Wrapper>
+    <>
+      <Wrapper onClick={onClickItem}>
+        <ColorWrapper>
+          <Color color={color} />
+        </ColorWrapper>
+      </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);
-  transition: .1s ${styles.transition};
+  background-color: rgba(0, 0, 0, 0);
+  transition: 0.1s ${styles.transition};
   outline: none;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     background-color: ${palette.blue3};
 
     & > span {
@@ -45,7 +45,6 @@ const ColorWrapper = styled.div`
   height: 16px;
   border-radius: 16px;
   background-color: #fff;
-  margin-right: 16px;
 `;
 
 const Color = styled.div<{ color: string }>`
@@ -53,7 +52,7 @@ const Color = styled.div<{ color: string }>`
   height: 16px;
   border-radius: 16px;
   background-color: ${({ color }) => color};
-  opacity: .4;
+  opacity: 0.4;
 `;
 
 const Message = styled.span`
@@ -64,9 +63,8 @@ const Message = styled.span`
 `;
 
 interface Props {
-  name: string;
   color: string;
   onClick: () => void;
 }
 
-export default ColorItem
+export default ColorItem;

src/components/contextMenu/Item.tsx

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

src/containers/Header.tsx

@@ -43,7 +43,15 @@ const Header = ({
                 alignItems: "center",
               }}
             >
-              <Item text={title as any} />
+              <nav
+                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,16 +217,6 @@ 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,7 +43,6 @@ const ContextMenu = ({
   const ColorList = colorList.map((color) => (
     <ColorItem
       key={color.code}
-      name={color.name}
       color={color.code}
       onClick={
         selection.update
@@ -176,6 +175,8 @@ const ContextMenu = ({
     setY(y_);
   }, [selection.y, selection.height, ColorList, isEraseBtn, setHeight]);
 
+  const [discription, setDiscription] = useState('')
+
   return (
     <>
       {display && (
@@ -187,6 +188,32 @@ 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,56 +1,55 @@
-import styled from 'styled-components'
-import { useSelector, useDispatch } from 'react-redux'
+import styled from "styled-components";
+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 media from 'lib/styles/media'
+import zIndex from "lib/styles/zIndex";
+import media from "lib/styles/media";
 // slices
-import { deleteSnackbar } from 'slices/snackbar'
+import { deleteSnackbar } from "slices/snackbar";
 // types
-import { RootState } from 'slices'
-import { SnackbarState } from 'slices/snackbar'
+import { RootState } from "slices";
+import { SnackbarState } from "slices/snackbar";
 
-
-const SnackbarWrapper = ()=> {
+const SnackbarWrapper = () => {
   const dispatch = useDispatch();
-	const snackbar = useSelector<RootState, SnackbarState>(state => state.snackbar);
-	
+  const snackbar = useSelector<RootState, SnackbarState>(
+    (state) => state.snackbar
+  );
 
-	const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-		if (e) {
-			e.preventDefault();
-			e.stopPropagation();
-		}
-		dispatch(deleteSnackbar());
-	};
+  const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    dispatch(deleteSnackbar());
+  };
 
-	
-	return (
-		<Container>
-			{snackbar.text !== '' && <Snackbar onClick={onClick} 
-                                         text={snackbar.text} 
-                                         type={snackbar.type} />}
-		</Container>
-	);
-}
+  return (
+    <Container>
+      {snackbar.text !== "" && (
+        <Snackbar onClick={onClick} text={snackbar.text} type={snackbar.type} />
+      )}
+    </Container>
+  );
+};
 
 const Container = styled.div`
-	position: fixed;
-	top: 40px;
-	right: 30px;
-	width: 320px;
-	height: auto;
-	z-index: ${zIndex.snackbar};
+  position: fixed;
+  top: 40px;
+  right: 30px;
+  width: 320px;
+  height: auto;
+  z-index: ${zIndex.snackbar};
 
-	${media.small} {
-		width: 100%;
-		top: initial;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		margin: auto;
-	}
+  ${media.small} {
+    width: 100%;
+    top: initial;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
 `;
 
-export default SnackbarWrapper
+export default SnackbarWrapper;

src/containers/menu/commons/Highlight.tsx

@@ -50,8 +50,6 @@ 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[] = [
-  { name: "قرمز", code: palette.red4 },
-  { name: "نارنجی", code: palette.orange4 },
-  { name: "زرد", code: palette.yellow4 },
-  { name: "سبز", code: palette.green4 },
-  { name: "آبی", code: palette.blue4 },
-  { name: "بنفش", code: palette.purple4 },
+  { code: palette.red4 },
+  { code: palette.orange4 },
+  { code: palette.yellow4 },
+  { code: palette.green4 },
+  { code: palette.blue4 },
+  { code: palette.purple4 },
 ];
 
 const initialState: BookState = {
@@ -64,16 +64,6 @@ const bookSlice = createSlice({
     },
     /** CurrentPage 갱신 @dispatch */
     updateCurrentPage(state, action: PayloadAction<Page>) {
-      if (
-        state.currentLocation.currentPage == action.payload.currentPage &&
-        action.payload.chapterName
-      ) {
-        console.log(JSON.parse(JSON.stringify(state)));
-        // let c = current(state)
-        // let x = [...c.toc];
-        // console.log(x[1]);
-        alert("فصل بعد");
-      }
       state.currentLocation = action.payload;
     },
     /** Book 초기화 @dispatch */

src/types/highlight.ts

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