Merge pull request #43 from tomasciar/tomas

Update style for consistency on mobile; Remove clutter

Author: tomasciar

public/images/plus.png

@@ -130,10 +130,3 @@ function phoneFormat(input) {
   }
   return input;
 }
-
-/*
-TODO LIST
-\
-- Delete All button
-- Format answers to remove "/n" & "/t"
-*/

public/javascripts/script.js

@@ -3,6 +3,7 @@
 *::after {
   box-sizing: border-box;
   font-family: Libre Baskerville, sans-serif;
+  font-size: 1.1rem;
 }
 
 /* Styles for landing page */
@@ -25,7 +26,6 @@
 
 body {
   margin: 0;
-  font-size: 1.5rem;
 }
 
 #container {
@@ -63,7 +63,7 @@ body {
   width: 32px;
   height: 32px;
   opacity: 0.5;
-  font-size: 1rem;
+  font-size: 0.8rem;
   background-color: transparent;
   border: none;
 }
@@ -78,7 +78,6 @@ body {
 
 #add-button,
 #send-button {
-  font-size: 1rem;
   text-align: center;
   background-color: white;
   opacity: 0.7;
@@ -94,10 +93,11 @@ body {
 
 #phone-number,
 #todo {
+  font-size: 0.9rem;
   border-color: rgb(126, 101, 152);
   border-radius: 1rem;
-  padding: 15px;
-  height: 25px;
+  padding: 17px;
+  height: 35px;
   color: grey;
   background-color: white;
   opacity: 0.85;
@@ -108,7 +108,7 @@ body {
 }
 
 #todo {
-  width: 300px;
+  width: 340px;
 }
 
 #item-form > * {
@@ -141,7 +141,11 @@ body {
   opacity: 0.95;
 }
 
-#send-icon {
+#send-icon,
+#plus-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 15px;
   height: 15px;
 }

public/stylesheets/styles.css

@@ -9,9 +9,11 @@
           class="input"
           id="todo"
           type="text"
-          placeholder="Enter Todo Item"
+          placeholder="Add an item to your to-do list"
         />
-        <button class="button" id="add-button">+</button>
+        <button class="button" id="add-button">
+          <img id="plus-icon" src="/images/plus.png" />
+        </button>
       </div>
     </form>
 
@@ -23,7 +25,7 @@
           type="tel"
           name="number"
           onInput="this.value = phoneFormat(this.value)"
-          placeholder="Phone Number"
+          placeholder="Phone number"
         />
         <button class="button" id="send-button">
           <img id="send-icon" src="/images/send2.png" />