Merge pull request #12 from SuperChamp234/emoji-fix

Emoji fix

package.json

@@ -31,6 +31,7 @@
     "node-fetch": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-emoji-render": "^1.2.4",
     "react-tabs": "^3.2.2"
   }
 }

src/view/Components/Taskview/Dailiesview/DailyItem.tsx

@@ -1,10 +1,11 @@
+import Emoji from "react-emoji-render";
 import * as React from "react";
 
 function DailyItem(props: any) {
     return (
         <div className="todo-item" id={props.id}>
             <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
-            <p>{props.daily_text}</p>
+            <p><Emoji text={props.daily_text}></Emoji></p>
         </div>
     )
 }

src/view/Components/Taskview/Habitsview/HabitItem.tsx

@@ -1,3 +1,4 @@
+import Emoji from "react-emoji-render";
 import * as React from "react";
 
 function HabitItem(props: any) {
@@ -6,7 +7,7 @@ function HabitItem(props: any) {
             <button className="habit-plus" id={"plus"+props.id} onClick={props.onChange}>
                 +{props.upCount}
             </button>
-            <p className="habit-text">{props.habit_text}</p>
+            <p className="habit-text"><Emoji text = {props.habit_text}></Emoji></p>
             <button className="habit-minus" id={"mins"+props.id} onClick={props.onChange}>
                 -{props.downCount}
             </button>

src/view/Components/Taskview/TodoItem.tsx

@@ -1,10 +1,11 @@
+import { Emoji } from 'react-emoji-render';
 import * as React from "react";
 
 function TodoItem(props: any) {
     return (
         <div className="todo-item" id={props.id}>
             <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
-            <p>{props.todo_text}</p>
+            <Emoji text = {props.todo_text}></Emoji>
         </div>
     )
 }

src/view/Components/Taskview/Todoview/TodoItem.tsx

@@ -1,10 +1,11 @@
+import Emoji from "react-emoji-render";
 import * as React from "react";
 
 function TodoItem(props: any) {
     return (
         <div className="todo-item" id={props.id}>
             <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
-            <p>{props.todo_text}</p>
+            <p><Emoji text ={props.todo_text}></Emoji></p>
         </div>
     )
 }

styles.css

@@ -23,7 +23,7 @@
 .habit-text {
   text-align: center !important;
   padding: 0px;
-  width: 80px;
+  width: 50%;
   margin-right: 20px;
 }