Update tracker appearance (larger, add pencil)

components/MililiterInput.vue

@@ -6,11 +6,18 @@
         :id="this.id"
         type="text"
         size="2"
-        maxlength="9"
-        value="2000"
+        maxlength="5"
+        value="2500"
         oninput="this.parentNode.dataset.value = this.value"
       >
       <span>ml</span>
+      <svg xmlns="http://www.w3.org/2000/svg" class="cls-1" width="19.445" height="19.445" viewBox="0 0 19.445 19.445">
+        <g id="Group_1" data-name="Group 1" transform="translate(14.402) rotate(45)">
+          <path id="Path_7" data-name="Path 7" d="M1.783,0H5.349A1.7,1.7,0,0,1,7.132,1.6V4.812H0V1.6A1.7,1.7,0,0,1,1.783,0Z"/>
+          <path id="Path_8" data-name="Path 8" d="M0,0H7.132V10.636L3.566,14.181,0,10.636Z" transform="translate(0 6.187)"/>
+        </g>
+      </svg>
+
     </div>
   </div>
 </template>
@@ -26,12 +33,13 @@ export default {
 
 <style lang="scss">
 .ml-input {
-  margin-top: 1em;
-  border: 4px solid white;
-  border-radius: 20px;
+  margin-top: 0.4em;
+  font-size: 1.4rem;
+  border: 7px solid white;
+  border-radius: 35px;
   box-shadow: 0 3px 5px #555 inset,
   0 3px 5px #555;
-  padding: .15em .75em 0 .75em;
+  padding: 0 .9em 0 .75em;
   color: #004377;
 
   // Magic input field resizing based on text length
@@ -48,7 +56,7 @@ export default {
 
   input {
     margin: 0;
-    padding: .25em;
+    padding: 0 -1em 0 0.25em;
     background: transparent;
     color: #004377;
     width: auto;
@@ -62,6 +70,16 @@ export default {
 
   span {
     grid-area: 1 / 2;
+    width:1em;
+  }
+  .cls-1 {
+    float: right;
+    fill: #fff;
+    grid-area:1/3;
+    width:auto;
+    padding-top: .05em;
+    padding-left: .75em;
+    transform: scale(1.6);
   }
 }
 

pages/index/Add-Water.vue

@@ -21,8 +21,10 @@
   padding-top: 150px;
 
   label {
+    padding-bottom:50px;
+    font-size:1.7rem;
     display: block;
-    max-width: 250px;
+    max-width: 400px;
     text-shadow: 0 3px 7px #333;
   }
 }

pages/index/index.vue

@@ -84,7 +84,7 @@ export default {
     return {
       dashOffsetFull: 210,
       dashOffsetEmpty: 961,
-      fillPercentage: 50,
+      fillPercentage: 40,
       dashOffset: 600
     }
   },
@@ -110,15 +110,17 @@ export default {
 
 .tracker {
   margin-bottom: 70px;
-  max-width: 200px;
+  max-width: 250px;
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
 
   label {
-    text-shadow: 0 3px 7px #333;
+    text-shadow: 0 4px 7px #333;
     color: white;
+    font-size: 1.6rem;
+    line-height: 80%;
 
     span {
       color: #004377;
@@ -127,8 +129,8 @@ export default {
   }
 
   button {
-    margin-top: 2em;
-    padding: .5em;
+    margin-top: 1.5em;
+    padding: .8em;
     background-image: linear-gradient(240deg, white, #89ceff);
     border-radius: 50%;
     box-shadow: 0 3px 8px #666;