From a1c92e4e2c6f7ad2552f4e6ba1538775cd5bb0d2 Mon Sep 17 00:00:00 2001
From: kkzzhizhou <806508401@qq.com>
Date: Sun, 5 Dec 2021 18:14:39 +0800
Subject: [PATCH] fix some style.css problem

---
 src/view/App.tsx                              | 17 +++++----
 .../Taskview/Dailiesview/DailyItem.tsx        |  3 +-
 .../Components/Taskview/Dailiesview/index.tsx |  8 +++-
 .../Components/Taskview/Habitsview/index.tsx  |  7 +++-
 .../Components/Taskview/Rewardview/index.tsx  |  5 ++-
 .../Components/Taskview/Todoview/TodoItem.tsx |  2 +-
 .../Components/Taskview/Todoview/index.tsx    | 12 +++++-
 styles.css                                    | 38 +++++++------------
 8 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/src/view/App.tsx b/src/view/App.tsx
index 558805b..c5f8c86 100644
--- a/src/view/App.tsx
+++ b/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,12 +296,13 @@ 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">
-                <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}
-                <Statsview user_data={this.state.user_data} />
-            </div>
+            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}
+                    <Statsview user_data={this.state.user_data} />
+                </div>
             );
         }
     }
diff --git a/src/view/Components/Taskview/Dailiesview/DailyItem.tsx b/src/view/Components/Taskview/Dailiesview/DailyItem.tsx
index 945f7df..91498ae 100644
--- a/src/view/Components/Taskview/Dailiesview/DailyItem.tsx
+++ b/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">
diff --git a/src/view/Components/Taskview/Dailiesview/index.tsx b/src/view/Components/Taskview/Dailiesview/index.tsx
index da4a1de..c3fae96 100644
--- a/src/view/Components/Taskview/Dailiesview/index.tsx
+++ b/src/view/Components/Taskview/Dailiesview/index.tsx
@@ -43,7 +43,13 @@ export default function Index(props: any) {
                     </div>
                 </TabPanel>
                 <TabPanel>
-                    <ul>{completedDailies}</ul>
+                    <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>
 
diff --git a/src/view/Components/Taskview/Habitsview/index.tsx b/src/view/Components/Taskview/Habitsview/index.tsx
index d2aaad4..e6474ea 100644
--- a/src/view/Components/Taskview/Habitsview/index.tsx
+++ b/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);
diff --git a/src/view/Components/Taskview/Rewardview/index.tsx b/src/view/Components/Taskview/Rewardview/index.tsx
index 45745ea..4305a02 100644
--- a/src/view/Components/Taskview/Rewardview/index.tsx
+++ b/src/view/Components/Taskview/Rewardview/index.tsx
@@ -23,7 +23,10 @@ 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>
-            <ul>{allRewards}</ul>
+            <div className="task-panel">
+                <ul>{allRewards}</ul>
+            </div>
+
         </div>
 
         return (display);
diff --git a/src/view/Components/Taskview/Todoview/TodoItem.tsx b/src/view/Components/Taskview/Todoview/TodoItem.tsx
index e0a56a0..db7cdb7 100644
--- a/src/view/Components/Taskview/Todoview/TodoItem.tsx
+++ b/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>
diff --git a/src/view/Components/Taskview/Todoview/index.tsx b/src/view/Components/Taskview/Todoview/index.tsx
index 448280f..824d16b 100644
--- a/src/view/Components/Taskview/Todoview/index.tsx
+++ b/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>
-                    <ul>{incompleteTodos}</ul>
+                    <div className="task-panel">
+                        <ul>{incompleteTodos}</ul>
+                    </div>
                 </TabPanel>
                 <TabPanel>
-                    <ul>{completedTodos}</ul>
+                    <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>
diff --git a/styles.css b/styles.css
index eeecb7d..ca89e2b 100644
--- a/styles.css
+++ b/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;
-    justify-content: left;
-    align-items: flex-start;
-    padding: 0px 0px 0;
-    width: 100%;
+    grid-template-columns: 1fr 25fr 1fr 1fr;
     border-bottom: 1px solid #cecece;
     font-family: Roboto, sans-serif;
-    font-weight: normal;
-    font-size: 16px;
+    font-size: 15px;
 }
 
 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: 5px;
+  margin-top: -20px;
   margin-left: 10%;
   margin-right: 10%;
-  margin-bottom: 10px;
-  border-radius: 10px;
 }
 #cronMessage {
   margin: 20px;