Feat: Add font size buttons

Author: peterjuma

src/NoteEditor.js

@@ -13,6 +13,7 @@ function NoteEditor(props) {
 
   // Set default screen size  - full
   const [splitscreen, setSplitscreen] = useState(false);
+
   const styles = {
     main_editor: {
       paddingLeft: "5px",
@@ -45,6 +46,20 @@ function NoteEditor(props) {
       height: "100%",
       borderRadius: "5px",
     },
+    inputNum: {
+      width: "4.26rem",
+      height: "2.7rem",
+      borderRadius: "4px 2px 2px 4px",
+      color: "#292a2b",
+      padding: "0.1ex 1ex",
+      border: "1px solid #ccc",
+      fontWeight: 250,
+      textShadow: "1px 1px 1px rgba(0, 0, 0, 0.1)",
+      outline: "none",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
     dark: {
       backgroundColor: "hsl(0, 0%, 14%)",
       color: "#afafaf",
@@ -455,24 +470,30 @@ function NoteEditor(props) {
           >
             <span className="tooltiptext">Strikethrough</span>
           </i>
-          <InputNumber
-            min={10}
-            max={48}
-            step={1}
-            value={fontsize}
-            onChange={setFontsize}
-            style={{
-              width: "4.2rem",
-              height: "2.7rem",
-              borderRadius: "4px 2px 2px 4px",
-              color: "#292a2b",
-              padding: "0.1ex 1ex",
-              border: "1px solid #ccc",
-              fontWeight: 100,
-              textShadow: "1px 1px 1px rgba(0, 0, 0, 0.1)",
-              outline: "none",
-            }}
-          />
+
+          <span className="input-div">
+            <i
+              className="fas fa-angle-left fa-lg fnt_btn"
+              onClick={(e) => setFontsize(fontsize - 1)}
+            ></i>
+            <InputNumber
+              min={10}
+              max={48}
+              step={1}
+              value={fontsize}
+              onChange={setFontsize}
+              style={{ ...styles.inputNum, ...styles.btn_dark }}
+              style={
+                toggleState.theme === "vs-light"
+                  ? { ...styles.inputNum, ...styles.btn_light }
+                  : { ...styles.inputNum, ...styles.btn_dark }
+              }
+            />
+            <i
+              className="fas fa-angle-right fa-lg fnt_btn"
+              onClick={(e) => setFontsize(fontsize + 1)}
+            ></i>
+          </span>
 
           <div style={styles.buttons}>
             <i

src/styles.css

@@ -551,6 +551,20 @@ button[disabled]:hover {
   padding: 6px 12px;
 }
 
+.fnt_btn {
+  border: none;
+  outline: none;
+  cursor: pointer;
+  margin: 2px;
+  background-color: #fff;
+  color: #5c5c5c;
+  font-size: 1.8rem;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  padding: 6px 12px;
+}
+
 /* WIP */
 .tooltiptext {
   visibility: hidden;
@@ -591,6 +605,16 @@ button[disabled]:hover {
   font-size: 1.55rem;
 }
 
+.fnt_btn:hover {
+  opacity: 0.6;
+}
+
 input[type="number"] {
   width: 4rem;
 }
+
+.input-div {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}