font style

src/components/Setting/FontStyle/Fonts/fonts.js

@@ -7,26 +7,22 @@ const Fonts = (props) => {
 
   const changeFontStyle = (id) => {
     setDropdownOpen(!dropdownOpen)
-    console.log()
 
     if (id === 1) {
       setBookStyle({ ...bookStyle, fontFamily: "Sans" });
     } else {
       setBookStyle({ ...bookStyle, fontFamily: "Nazanin" });
     }
-    console.log(bookStyle)
   };
 
   return (
     <>
-      <nav className="nav-btn">
-        <DropdownItem onClick={() => changeFontStyle(1)}>
-          <button className="btn-font">سانس</button>
+        <DropdownItem className="button-body-fontFamily mb-1" onClick={() => changeFontStyle(1)}>
+          <button>سانس</button>
         </DropdownItem>
-        <DropdownItem onClick={() => changeFontStyle(2)}>
-          <button className="btn-font">نازنین</button>
+        <DropdownItem className="button-body-fontFamily" onClick={() => changeFontStyle(2)}>
+          <button>نازنین</button>
         </DropdownItem>
-      </nav>
     </>
   );
 };

src/components/Setting/FontStyle/Fontstyle.js

@@ -16,8 +16,8 @@ const Fontstyle = (props) => {
   return (
     <div>
       <Dropdown isOpen={dropdownOpen} toggle={toggle}>
-        <DropdownToggle id="dropdown-btn">
-          <button className="btn-font">
+        <DropdownToggle>
+          <button className="button-head-fontFamily">
             <p>{bookStyle.fontFamily === "Sans" ? "سانس" : "نازنین"}</p>
           </button>
         </DropdownToggle>

src/components/style/fontStyle.scss

@@ -6,28 +6,42 @@
   transform: translate3d(-5px, 24px, 0px) !important;
 }
 
-.btn-font {
-  display: flex;
-  outline: none;
-  border-radius: 5px;
-  border: $green solid 1.5px;
-  color: $green;
-  background-color: white;
+// .btn-font {
+//   display: flex;
+//   outline: none;
+//   border-radius: 5px;
+//   border: $green solid 1.5px;
+//   color: $green;
+//   background-color: white;
 
-  p {
-    padding: 0 5px !important;
-    margin: 0;
+//   p {
+//     margin: 0;
+//     padding: 1px 5px !important;
+//     color: $green;
+//   }
+// }
+
+// .btn-font:hover {
+//   border-radius: 5px;
+//   border: $green solid 1.5px;
+//   color: white;
+//   background-color: $green;
+//   p {
+//     margin: 0;
+//     color: #fff;
+//   }
+// }
+
+
+.button-head-fontFamily{
+  border: solid 1.5px $green;
+  border-radius: 5px;
+  padding: 0 4px !important;
+  margin: 0 !important;
   color: $green;
-  }
-}
 
-.btn-font:hover {
-  border: $green solid 1.5px;
-  color: white;
-  background-color: $green;
   p{
-    padding: 0 5px !important;
-    margin: 0;
-    color: #fff;
+    padding: 0 !important;
+    margin: 0 !important;
   }
 }

src/components/style/fonts.scss

@@ -1,24 +1,46 @@
-@import './colors';
+@import "./colors";
 
+  // .nav-btn {
+  //   text-align: center;
 
-.nav-btn{
-    text-align: center;
+  //   .btn-font {
+  //     display: flex;
+  //     outline: none;
+  //     border-radius: 5px;
+  //     border: $green solid 1.5px;
+  //     color: $green;
+  //     background-color: white;
 
-    .btn-font{
-        outline: none;
+  //     p {
+  //       padding: 0 5px !important;
+  //       margin: 0;
+  //       color: $green;
+  //     }
+  //   }
+  //   .btn-font:hover {
+  //     border: $green solid 1.5px;
+  //     color: white;
+  //     background-color: $green;
+  //   }
+  // }
+
+
+  .button-body-fontFamily{
+    border: solid 1.5px $green !important;
     border-radius: 5px;
-        margin: 5px;
-        border: $green solid 1.5px;
+    padding: 0 4px !important;
+    margin: 0 !important;
     color: $green;
-        background-color: white;
-        width: 2.8rem;
-        font-size: 10px;
-    }
+    font-size: 14px !important;
 
-    .btn-font:hover{
-        border: $green solid 1.5px;
-        color: white;
-        background-color: $green;
+  
+    p{
+      font-weight: lighter !important;
+      padding: 0 !important;
+      margin: 0 !important;
+    }
   }
 
+  .button-body-fontFamily:active , .button-body-fontFamily:hover {
+    background-color: #fff !important;
   }