Fixed cron and minor CSS tweaks

src/view/App.tsx

@@ -51,15 +51,12 @@ class App extends React.Component<any, any> {
         let cronDate = new Date(lastCron);
         let now = new Date();
         if (cronDate.getDate() != now.getDate() || (cronDate.getMonth() != now.getMonth() || cronDate.getFullYear() != now.getFullYear())) {
-            // return (
-            //     <div className="cron">
-            //         <div id="cronMessage"> Welcome back! Please check your tasks for the last day and hit continue to get your daily rewards. </div>
-            //         <button onClick={this.runCron}>Continue</button>
-            //     </div>
-            // );
             return (
-                <div className="cron"></div>
+                <div className="cron">
-            )
+                    <div id="cronMessage"> Welcome back! Please check your tasks for the last day and hit continue to get your daily rewards.</div>
+                    <button id="cronButton" onClick={this.runCron}>Continue</button>
+                </div>
+            );
         }
         else {
             return null
@@ -196,9 +193,9 @@ class App extends React.Component<any, any> {
             return <div className="loading">Loading....</div>
         else {
             return (<div className="plugin-root">
+                {content}
                 <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}
                 <div></div>
                 <Statsview user_data={this.state.user_data} />
             </div>

styles.css

@@ -1,14 +1,3 @@
-* {
-  /* margin: 0; */
-  padding: 0;
-}
-
-
-#profile-name {
-  font-size: x-large;
-  font-weight: bold;
-  padding-bottom: 3%;
-}
 .stats {
   display: flex;
   justify-content: space-between;
@@ -42,7 +31,6 @@
 .habit-text {
   text-align: left !important;
   padding: 0px;
-  width: 80%;
   margin-right: 20px;
 }
 
@@ -51,6 +39,7 @@
   border: none;
   /* color: black; */
   padding: 7px 5px;
+  width: 40px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
@@ -65,6 +54,7 @@
   text-align: center;
   text-decoration: none;
   font-size: 16px;
+  width: 40px;
 }
 
 .habit-item {
@@ -100,7 +90,6 @@ input[type=checkbox]:focus {
 .plugin-root {
   min-width: 260px;
   display: grid;
-  grid-template-rows: 93% 5% 2%;
   height: inherit;
 }
 
@@ -195,6 +184,7 @@ body > div.app-container.is-left-sidedock-collapsed.is-right-sidedock-collapsed
   margin-bottom: 5px;
 }
 .cron {
+  height: fit-content;
   display: inline-grid;
   justify-content: center;
   text-align: center;;
@@ -202,7 +192,7 @@ body > div.app-container.is-left-sidedock-collapsed.is-right-sidedock-collapsed
   margin-left: 10%;
   margin-right: 10%;
   margin-bottom: 10px;
-  background-color: var(--background-secondary-alt);
+  background-color: var(--background-primary-alt);
   border-radius: 10px;
 }
 #cronMessage {
@@ -210,3 +200,16 @@ body > div.app-container.is-left-sidedock-collapsed.is-right-sidedock-collapsed
   margin-bottom: 10px;
   color: var(--text-normal)
 }
+
+button {
+  color: var(--text-normal);
+  background-color: var(--background-secondary-alt);
+  border-radius: 4px;
+  border: none;
+  padding: 6px 20px;
+  cursor: pointer;
+  margin-right: 12px;
+  font-family: 'Inter', sans-serif;
+  outline: none;
+  user-select: none;
+}