CSS Added

styles.css

@@ -1,3 +1,11 @@
+#profile-name {
+  font-size: x-large;
+  font-weight: bold;
+  padding-bottom: 3%;
+}
+.stats {
+  padding-bottom: 6px;
+}
 .todo-item {
   display: flex;
   justify-content: flex-start;
@@ -18,11 +26,17 @@ input[type=checkbox]:focus {
   outline: 0;
 }
 .plugin-root {
-  min-width: 300px;
+  min-width: 260px;
+}
+.substats {
+  font-size: medium;
 }
-
 /* react-tabs internal file :wink: */
-
+.material-icons {
+  font-size: 13px !important;
+  padding-top: 1px;
+  padding-right: 2px;
+}
 .react-tabs {
   -webkit-tap-highlight-color: transparent;
 }

view/App.tsx

@@ -106,6 +106,7 @@ class App extends React.Component<any,any> {
             return <div className="loading">Loading....</div>
         else {
             return (<div className="plugin-root">
+                <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
                 <Statsview user_data={this.state.user_data} />
                 <Taskview todos={this.state.todos} onChange={this.handleChange} />
                 </div>

view/Components/Statsview/index.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 
 export default function Index(props: any) {
     return(
-        <div id="stats">
+        <div className="stats">
             <div id="profile-name">{props.user_data.profile.name}</div>
-            <div id="hp">HP: {props.user_data.stats.hp}</div>
-            <div id="lvl">LVL: {props.user_data.stats.lvl}</div>
+            <div className = "substats" id="hp"><i className="material-icons">favorite</i>HP: {(props.user_data.stats.hp).toPrecision(3)}</div>
+            <div className = "substats" id="lvl"><i className="material-icons">star</i>LVL: {props.user_data.stats.lvl}</div>
         </div>
     );
 }