Fixed icons sizing, started habit menu css

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

@@ -1,13 +1,12 @@
  import * as React from "react";
 
 function HabitItem(props: any) {
-    console.log("plus"+props.id)
     return (
         <div className="habit-item" id={props.id}>
             <button className="habit-plus" id={"plus"+props.id} onClick={props.onChange}>
                 +{props.upCount}
             </button>
-            <p>{props.habit_text}</p>
+            <p className="habit-text">{props.habit_text}</p>
             <button className="habit-minus" id={"mins"+props.id} onClick={props.onChange}>
                 -{props.downCount}
             </button>

src/view/Components/Taskview/index.tsx

@@ -5,17 +5,17 @@ import Todoview from "./Todoview"
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 
 export default function Index(props: any){
-    const display = <div className="taskView">
+    const display = <div className="task-view">
                     <Tabs>
                         <TabList>
-                            <Tab>
+                            <Tab >
                                 <span className="material-icons md-24">task_alt</span>
                             </Tab>
                             <Tab>
-                                <span className="material-icons">today</span>
+                                <span className="material-icons md-24">today</span>
                             </Tab>
                             <Tab>
-                                <span className="material-icons">add_circle_outline</span>
+                                <span className="material-icons md-24">add_circle_outline</span>
                             </Tab>
                         </TabList>
                         <TabPanel>
@@ -30,5 +30,5 @@ export default function Index(props: any){
                     </Tabs>
                 </div>
     return(display);
-}                 
+}                 //yes
 

styles.css

@@ -8,11 +8,6 @@
   padding-bottom: 6px;
 }
 
-.material-icons.md-18 { font-size: 18px; }
-.material-icons.md-24 { font-size: 24px; }
-.material-icons.md-36 { font-size: 36px; }
-.material-icons.md-48 { font-size: 48px; }
-
 .todo-item {
   display: flex;
   justify-content: flex-start;
@@ -25,12 +20,18 @@
   font-size: 16px;
 }
 
+.habit-text {
+  text-align: center !important;
+  padding: 0px;
+  width: 80px;
+  margin-right: 20px;
+}
+
 .habit-plus {
   /* background-color: #fff; */
-  border-radius: 50%;
   border: none;
   color: white;
-  padding: 6px 10px;
+  padding: 7px 10px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
@@ -38,7 +39,7 @@
 
 .habit-minus {
   /* background-color: #fff; */
-  border-radius: 50%;
+  /* border-radius: 50%; */
   border: none;
   color: white;
   padding: 7px 10px;
@@ -49,14 +50,16 @@
 
 .habit-item {
   display: flex;
-  justify-content: center;
+  /* justify-content: center; */
+  align-content: space-between;
   align-items: center;
   padding: 0px 0px 0;
-  width: 80%;
+  width: 100%;
   border-bottom: 1px solid #cecece;
   font-family: Roboto, sans-serif;
-  font-weight: normal;
+  font-weight: 50%;
   font-size: 16px;
+  
 }
 
 input[type=checkbox] {
@@ -66,20 +69,32 @@ input[type=checkbox] {
 input[type=checkbox]:focus {
   outline: 0;
 }
+
 .plugin-root {
   min-width: 260px;
 }
+
 .substats {
   font-size: medium;
 }
+
 /* react-tabs internal file :wink: */
 .material-icons {
-  font-size: 13px !important;
+  font-size: 12px !important;
   padding-top: 1px;
   padding-right: 2px;
+  
 }
+
+.material-icons.md-18 { font-size: 18px !important; }
+.material-icons.md-24 { font-size: 24px !important; }
+.material-icons.md-32 { font-size: 32px !important; }
+.material-icons.md-48 { font-size: 48px !important; }
+
+
 .react-tabs {
   -webkit-tap-highlight-color: transparent;
+  
 }
 
 .react-tabs__tab-list {