fix some style.css problem

src/view/App.tsx

@@ -61,7 +61,9 @@ class App extends React.Component<any, any> {
             );
         }
         else {
-            return <div className="cron"></div>
+            return (
+                <div className="cron"></div>
+            );
         };
     }
     async runCron() {
@@ -294,7 +296,8 @@ class App extends React.Component<any, any> {
         else if (!this.state.isLoaded)
             return <div className="loading"><Trans>Loading....</Trans></div>
         else {
-            return (<div className="plugin-root">
+            return (
+                <div className="plugin-root">
                     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
                     <Taskview data={this.state.tasks} handleChangeTodos={this.handleChangeTodos} handleChangeDailys={this.handleChangeDailys} handleChangeHabits={this.handleChangeHabits} handleChangeRewards={this.handleChangeRewards} />
                     {content}

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

@@ -1,4 +1,3 @@
-import Emoji from "react-emoji-render";
 import * as React from "react";
 import ReactMarkdown from "react-markdown";
 
@@ -11,7 +10,7 @@ function DailyItem(props: any) {
             <div className="todo-item" id={props.id}>
                 <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
                 <div className="todo-content">
-                    <p><Emoji text={props.daily_text}></Emoji></p>
+                    <ReactMarkdown children={props.daily_text} />
                     <ReactMarkdown children={props.daily_notes} />
                 </div>
                 <button className="task-operation">

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

@@ -43,7 +43,13 @@ export default function Index(props: any) {
                     </div>
                 </TabPanel>
                 <TabPanel>
+                    <div className="task-submit">
+                        <input className="task-input-box" type="text" placeholder={t('Add Daily Task')} onChange={event => setTitle(event.target.value)} value={title} />
+                        <button className="submit-button" id="add-daily" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+                    </div>
+                    <div className="task-panel">
                         <ul>{completedDailies}</ul>
+                    </div>
                 </TabPanel>
             </Tabs>
 

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

@@ -23,7 +23,12 @@ export default function Index(props: any) {
                 <input className="task-input-box" type="text" placeholder={t('Add Habit')} onChange={event => setTitle(event.target.value)} value={title} />
                 <button className="submit-button" id="add-habit" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
             </div>
-            <ul>{allHabits}</ul>
+            <div className="task-panel">
+                <ul>
+                    {allHabits}
+                </ul>
+            </div>
+
         </div>
 
         return (display);

src/view/Components/Taskview/Rewardview/index.tsx

@@ -23,9 +23,12 @@ export default function Index(props: any) {
                 <input className="task-input-box" type="text" placeholder={t('Add Reward')} onChange={event => setTitle(event.target.value)} value={title} />
                 <button className="submit-button" id="add-reward" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
             </div>
+            <div className="task-panel">
                 <ul>{allRewards}</ul>
             </div>
 
+        </div>
+
         return (display);
     }
 }

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

@@ -10,7 +10,7 @@ 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} />
-                <div>
+                <div className="todo-content">
                     <p><Emoji text={props.todo_text}></Emoji></p>
                     <ReactMarkdown children={props.todo_notes} />
                 </div>

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

@@ -35,10 +35,18 @@ export default function Index(props: any) {
                         <input className="task-input-box" type="text" placeholder={t('Add Todo')} onChange={event => setTitle(event.target.value)} value={title} />
                         <button className="submit-button" id="add-todo" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
                     </div>
+                    <div className="task-panel">
                         <ul>{incompleteTodos}</ul>
+                    </div>
                 </TabPanel>
                 <TabPanel>
+                    <div className="task-submit">
+                        <input className="task-input-box" type="text" placeholder={t('Add Todo')} onChange={event => setTitle(event.target.value)} value={title} />
+                        <button className="submit-button" id="add-todo" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+                    </div>
+                    <div className="task-panel">
                         <ul>{completedTodos}</ul>
+                    </div>
                 </TabPanel>
             </Tabs>
         </div>

styles.css

@@ -1,7 +1,3 @@
-* {
-  padding: 0;
-}
-
 .add-task-input {
   display: flex;
 }
@@ -26,20 +22,15 @@
 
 .todo-item {
     display: grid;
-    grid-template-columns: 1fr 30fr 1fr 1fr;
+    grid-template-columns: 1fr 25fr 1fr 1fr;
-    justify-content: left;
-    align-items: flex-start;
-    padding: 0px 0px 0;
-    width: 100%;
     border-bottom: 1px solid #cecece;
     font-family: Roboto, sans-serif;
-    font-weight: normal;
+    font-size: 15px;
-    font-size: 16px;
 }
 
 p {
     margin: 0;
-    padding: 5px;
+    padding: 3px;
 }
 
 .reward-item {
@@ -56,6 +47,7 @@ p {
 
 .reward-click {
   padding: 5px 15px;
+  width: 60px;
 }
 
 
@@ -67,24 +59,19 @@ p {
 }
 
 .habit-plus {
-  /* background-color: #fff; */
   border: none;
-  /* color: black; */
-  padding: 7px 5px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
+  margin: 4px 4px 4px 4px;
 }
 
 .habit-minus {
-  /* background-color: #fff; */
-  /* border-radius: 50%; */
   border: none;
-  /* color: black; */
-  padding: 7px 5px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
+  margin: 4px 4px 4px 4px;
 }
 
 .habit-item {
@@ -130,7 +117,7 @@ input[type=checkbox]:focus {
 .plugin-root {
   min-width: 260px;
   display: grid;
-  grid-template-rows: 94% 4% 1% 1%;
+  grid-template-rows: 98% 1% 1%;
   height: inherit;
 }
 
@@ -148,6 +135,11 @@ input[type=checkbox]:focus {
 
 ul {
   margin: 0;
+  padding-left: 0px;
+}
+
+.todo-content ul {
+  padding-left: 20px;
 }
 
 /* react-tabs internal file :wink: */
@@ -274,7 +266,6 @@ ul li:not(.task-list-item)::before {
 
 button {
   margin: auto;
-  margin-bottom: 5px;
   white-space: nowrap;
   padding: 5px 5px;
   margin-right: 0;
@@ -282,12 +273,9 @@ button {
 .cron {
   display: inline-grid;
   justify-content: center;
-  text-align: center;;
+  margin-top: -20px;
-  margin-top: 5px;
   margin-left: 10%;
   margin-right: 10%;
-  margin-bottom: 10px;
-  border-radius: 10px;
 }
 #cronMessage {
   margin: 20px;