feat: quick add time

.firebase/hosting.YnVpbGQ.cache

@@ -1,15 +1,15 @@
-asset-manifest.json,1554736332025,df5343ebe8ed04ae9e0eb3b32e838f56c18dfaf98ffca952c101cd9d712b1608
+index.html,1555190743105,dd28a4571393d111529279692ad7f14f9104cc1d3ba4ae57b8ce1a59055bb1dc
-index.html,1554736332025,a6f9531c2850d3e7f5eb795a03b2a2a4414e302e81a92545416344c89e644a64
+asset-manifest.json,1555190743105,62b719615fc9b65d59405e7ec6664886dedbad95c645f6823955beddb32750b6
 manifest.json,1553879304430,52afe5ad7170b2b50e3ac04262420481b529c8c3009d93599bd41e3c44367f78
+precache-manifest.622bd5bcae2295a06dfc5791f7b42d8f.js,1555190743105,50165a86fcdc3e5739b9f935db0b2ff1acf50051fe427ef823bcbf286aaca24b
+service-worker.js,1555190743105,c8bcc02c6cd9064597916588f60c30b5e7a9e226ee9e026a0fdce6811ed1eb7e
 reactfavicon.ico,1553876850033,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
-service-worker.js,1554736332025,77a2d280be8aa608763f3e7ce0d5e3c9d5a0a8fca4d0a2f585e4197785170a90
+static/css/main.1a707a0f.chunk.css,1555190743153,31f97c61456faf692f2920be106bc1ee08170c1e86a531eb225b32acfb8359ce
-static/css/main.1a707a0f.chunk.css.map,1554736332065,28865d6e3616355a7fbb38dfc7ed97029ed4b5c5e5c61afbe5d433204e76f9ff
+static/css/main.1a707a0f.chunk.css.map,1555190743153,28865d6e3616355a7fbb38dfc7ed97029ed4b5c5e5c61afbe5d433204e76f9ff
-precache-manifest.9a4f81b9fa21bd7215c42e286df1195f.js,1554736332025,3879fcf815575e6ec42ee5ba6c0de64a533475f4bad65088aa85885aa94694d8
+static/js/runtime~main.a8a9905a.js,1555190743153,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9
-static/css/main.1a707a0f.chunk.css,1554736332026,31f97c61456faf692f2920be106bc1ee08170c1e86a531eb225b32acfb8359ce
+static/js/main.798f7fa2.chunk.js,1555190743154,0e6c7947fd479c7439f48abe053a092a0cc31886deac05b39ad6917df5730fe5
+static/js/runtime~main.a8a9905a.js.map,1555190743153,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db
 favicon.ico,1553876855791,229055d54fe1f70f3d835e9d723ea2fef78f2af82ed7ce45efa2f4623c1c1131
-static/js/main.66ce8d8f.chunk.js,1554736332068,668635c6cccab3a4ad7c8d03121baa8553aad7f93ea2945f2d9dc7d3a0fccda3
+static/js/main.798f7fa2.chunk.js.map,1555190743153,10d0e07fb567aa04cab030cf461211142442096ddb5513824263d75c20ba5613
-static/js/runtime~main.a8a9905a.js,1554736332036,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9
+static/js/2.4e8a1188.chunk.js,1555190743153,cbb9d41d55f106665e087bd98dd98046282275a7cdcc8f091faddb767c3c80bb
-static/js/runtime~main.a8a9905a.js.map,1554736332065,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db
+static/js/2.4e8a1188.chunk.js.map,1555190743156,4b397ec72c1a279c167bb904051666476dd3a9cdb272d4e04c30dd1ba7c81aaa
-static/js/main.66ce8d8f.chunk.js.map,1554736332064,620038709bdf8ee7c0fc8ad271d61ead41ebcaff4f82652fe19eb65c4dbe998c
-static/js/2.45d1e149.chunk.js,1554736332065,3b8f973757d4cc2ee88c12af9a97a786c0233909ee6f72d903157257572cccfe
-static/js/2.45d1e149.chunk.js.map,1554736332067,5642dc89fcfbc41772fcb04c680e26db61d946042f08eb73c2fd838b1f7ff262

public/manifest.json

@@ -10,6 +10,16 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
+    },
+    {
+      "src": "splash.png",
+      "sizes": "512x512",
+      "types": "image/png"
+    },
+    {
+      "src": "icon.png",
+      "sizes": "192x192",
+      "types": "image/png"
     }
   ]
 }

src/components/Icon/Icon.js

@@ -8,6 +8,7 @@ import {
   ChevronLeft,
   ChevronRight,
   Circle,
+  Clock,
   Edit2,
   LogIn,
   Moon,
@@ -37,9 +38,9 @@ const IconBase = styled.div`
   }
 `
 
-const Icon = ({ name, tabindex, label, ...rest }) => (
+const Icon = ({ name, tabindex, label, labelRight, ...rest }) => (
   <IconBase tabIndex={tabindex} {...rest}>
-    {label && (
+    {label && !labelRight && (
       <span style={{ margin: "3px -3px 3px 3px", fontWeight: 700 }}>
         {label}
       </span>
@@ -51,12 +52,23 @@ const Icon = ({ name, tabindex, label, ...rest }) => (
     {name === "ChevronLeft" && <ChevronLeft />}
     {name === "ChevronRight" && <ChevronRight />}
     {name === "Circle" && <Circle />}
+    {name === "Clock" && <Clock />}
     {name === "Edit2" && <Edit2 />}
     {name === "LogIn" && <LogIn />}
     {name === "Moon" && <Moon />}
     {name === "Search" && <Search />}
     {name === "Sun" && <Sun />}
     {name === "User" && <User />}
+    {label && labelRight && (
+      <span
+        style={{
+          margin: "3px -3px 3px 3px",
+          fontWeight: 700,
+        }}
+      >
+        {label}
+      </span>
+    )}
   </IconBase>
 )
 

src/components/Logo/index.js

@@ -3,9 +3,9 @@ import React from "react"
 const Logo = ({ color }) => {
   return (
     <svg
-      width="40"
+      width="30"
-      height="40"
+      height="30"
-      viewBox="0 0 40 40"
+      viewBox="0 0 30 30"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -13,113 +13,113 @@ const Logo = ({ color }) => {
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M20.0748 5.81108C12.1972 5.81108 5.81108 12.1972 5.81108 20.0748C5.81108 27.9524 12.1972 34.3385 20.0748 34.3385C27.9524 34.3385 34.3385 27.9524 34.3385 20.0748C34.3385 12.1972 27.9524 5.81108 20.0748 5.81108ZM20.0748 8.60185C17.0981 8.60185 14.6174 13.7385 14.6174 20.0748C14.6174 26.4112 17.2841 31.5478 20.0748 31.5478C26.4112 31.5478 31.5478 26.4112 31.5478 20.0748C31.5478 13.7385 26.4112 8.60185 20.0748 8.60185Z"
+          d="M15.0546 4.63124C9.29788 4.63124 4.63112 9.29801 4.63112 15.0548C4.63112 20.8115 9.29789 25.4783 15.0546 25.4783C20.8114 25.4783 25.4781 20.8115 25.4781 15.0548C25.4781 9.29801 20.8114 4.63124 15.0546 4.63124ZM15.0548 6.67064C12.8794 6.67064 11.0666 10.4243 11.0666 15.0548C11.0666 19.6852 13.0154 23.4389 15.0548 23.4389C19.6852 23.4389 23.4389 19.6852 23.4389 15.0548C23.4389 10.4243 19.6852 6.67064 15.0548 6.67064Z"
           fill={color}
         />
-        <circle cx="2.47249" cy="20" r="2.33699" fill={color} />
+        <circle cx="2.19157" cy="15.0001" r="1.70781" fill={color} />
-        <circle cx="37.5274" cy="20" r="2.33699" fill={color} />
+        <circle cx="27.8086" cy="15.0001" r="1.70781" fill={color} />
         <circle
-          cx="20"
+          cx="15.0001"
-          cy="2.47261"
+          cy="2.19157"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(90 20 2.47261)"
+          transform="rotate(90 15.0001 2.19157)"
           fill={color}
         />
         <circle
-          cx="20"
+          cx="15.0001"
-          cy="37.5274"
+          cy="27.8086"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(90 20 37.5274)"
+          transform="rotate(90 15.0001 27.8086)"
           fill={color}
         />
         <circle
-          cx="7.60615"
+          cx="5.94291"
-          cy="32.3938"
+          cy="24.0571"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(-45 7.60615 32.3938)"
+          transform="rotate(-45 5.94291 24.0571)"
           fill={color}
         />
         <circle
-          cx="32.3936"
+          cx="24.0569"
-          cy="7.6062"
+          cy="5.94305"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(-45 32.3936 7.6062)"
+          transform="rotate(-45 24.0569 5.94305)"
           fill={color}
         />
         <circle
-          cx="7.6062"
+          cx="5.94312"
-          cy="7.60622"
+          cy="5.9431"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(45 7.6062 7.60622)"
+          transform="rotate(45 5.94312 5.9431)"
           fill={color}
         />
         <circle
-          cx="32.3938"
+          cx="24.057"
-          cy="32.3938"
+          cy="24.0572"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(45 32.3938 32.3938)"
+          transform="rotate(45 24.057 24.0572)"
           fill={color}
         />
         <circle
-          cx="3.83556"
+          cx="3.18757"
-          cy="26.7768"
+          cy="19.9524"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(-22.7457 3.83556 26.7768)"
+          transform="rotate(-22.7457 3.18757 19.9524)"
           fill={color}
         />
         <circle
-          cx="36.1642"
+          cx="26.8123"
-          cy="13.2232"
+          cy="10.0478"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(-22.7457 36.1642 13.2232)"
+          transform="rotate(-22.7457 26.8123 10.0478)"
           fill={color}
         />
         <circle
-          cx="13.2231"
+          cx="10.0477"
-          cy="3.83568"
+          cy="3.18769"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(67.2543 13.2231 3.83568)"
+          transform="rotate(67.2543 10.0477 3.18769)"
           fill={color}
         />
         <circle
-          cx="26.7768"
+          cx="19.9523"
-          cy="36.1644"
+          cy="26.8125"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(67.2543 26.7768 36.1644)"
+          transform="rotate(67.2543 19.9523 26.8125)"
           fill={color}
         />
         <circle
-          cx="13.3619"
+          cx="10.1491"
-          cy="36.2218"
+          cy="26.8546"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(-67.7457 13.3619 36.2218)"
+          transform="rotate(-67.7457 10.1491 26.8546)"
           fill={color}
         />
         <circle
-          cx="26.6379"
+          cx="19.8509"
-          cy="3.77818"
+          cy="3.14565"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(-67.7457 26.6379 3.77818)"
+          transform="rotate(-67.7457 19.8509 3.14565)"
           fill={color}
         />
         <circle
-          cx="3.7781"
+          cx="3.14561"
-          cy="13.3621"
+          cy="10.1493"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(22.2543 3.7781 13.3621)"
+          transform="rotate(22.2543 3.14561 10.1493)"
           fill={color}
         />
         <circle
-          cx="36.2218"
+          cx="26.8546"
-          cy="26.6379"
+          cy="19.851"
-          r="2.33699"
+          r="1.70781"
-          transform="rotate(22.2543 36.2218 26.6379)"
+          transform="rotate(22.2543 26.8546 19.851)"
           fill={color}
         />
       </g>
       <defs>
         <clipPath id="clip0">
-          <rect width="40" height="40" fill="white" />
+          <rect width="30" height="30" fill="white" />
         </clipPath>
       </defs>
     </svg>

src/components/Navbar/Navbar.js

@@ -45,6 +45,9 @@ const LogoSection = styled.div`
 const LogoText = styled.span`
   color: ${props => props.color};
   margin-left: 5px;
+  @media (max-width: 400px) {
+    display: none;
+  }
 `
 const NavIcons = styled.div`
   display: flex;

src/components/screens/Day/Day.js

@@ -13,6 +13,7 @@ import { BeatLoader } from "react-spinners"
 import { SIZES } from "../../../styles/constants"
 
 import Seek from "../../Seek"
+import Icon from "../../Icon"
 
 const JournalHeading = styled.h2`
   font-weight: 700;
@@ -48,6 +49,11 @@ const JournalEntryArea = styled.textarea`
       0 0 0 10px ${props => props.theme.colors.hover};
   }
 `
+const Buttons = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-top: 20px;
+`
 const fadeKeyFrames = keyframes`
   from {
     opacity: 0;
@@ -133,6 +139,20 @@ class Day extends React.Component {
     }, AUTOSAVE_DELAY)
   }
 
+  onInsertTime = () => {
+    const entryTextArea = document.getElementById("entry-text-area")
+    const cursorIndex = entryTextArea.selectionStart
+    const { text } = this.state
+    const insertAt = (str, sub, pos) =>
+      `${str.slice(0, pos)}${sub}${str.slice(pos)}`
+    const newText = insertAt(text, format(new Date(), "h:mma "), cursorIndex)
+    this.setState({
+      text: newText,
+    })
+    entryTextArea.focus()
+    this.saveText(newText)
+  }
+
   saveText = text => {
     const {
       match: {
@@ -172,7 +192,7 @@ class Day extends React.Component {
     return (
       <>
         <Seek
-          title={format(currentDay, "YYYY MMM DD")}
+          title={format(currentDay, "YYYY MMM DD - dddd")}
           prev={format(subDays(currentDay, 1), "/YYYY/MM/DD")}
           next={format(addDays(currentDay, 1), "/YYYY/MM/DD")}
           disableNext={isAfter(currentDay, startOfYesterday())}
@@ -190,14 +210,25 @@ class Day extends React.Component {
             />
           </div>
         ) : (
-          <JournalEntryArea
+          <>
-            placeholder="Start writing..."
+            <JournalEntryArea
-            onChange={e => this.onChangeText(e)}
+              id="entry-text-area"
-            value={text}
+              placeholder="Start writing..."
-            css={css`
+              onChange={e => this.onChangeText(e)}
-              animation: ${fadeKeyFrames} 0.2s ease-in;
+              value={text}
-            `}
+              css={css`
-          />
+                animation: ${fadeKeyFrames} 0.2s ease-in;
+              `}
+            />
+            <Buttons>
+              <Icon
+                name="Clock"
+                label="Quick Add Time"
+                labelRight
+                onClick={() => this.onInsertTime()}
+              />{" "}
+            </Buttons>
+          </>
         )}
       </>
     )

src/components/screens/Search/Search.js

@@ -85,7 +85,7 @@ class Search extends Component {
       .collection("entries")
       .where("userId", "==", authUser.uid)
       .get()
-    const entries = entriesRef.docs.map(doc => doc.data())
+    const entries = entriesRef.docs.map(doc => doc.data()).reverse()
     // const sortedEntries = entries.sort((a, b) => {
     //   return (
     //     new Date(b.year, b.month - 1, b.day) -

src/components/screens/Start/Start.js

@@ -23,12 +23,15 @@ class Start extends Component {
       <StartGrid>
         <div style={{ margin: 10 }}>
           Use your journal as a place to record thoughts and events from the
-          day. Your journal works offline and from any device. You can add it to
+          day.
-          your homescreen for faster access and write from a mobile device or
+        </div>
-          type up your entries from your computer.
+        <div style={{ margin: 10 }}>
+          Your journal works offline and from any device. You can add it to your
+          homescreen for faster access and write from a mobile device or type up
+          your entries from your computer.
         </div>
         <Link to={todayUrl()} style={{ textDecoration: "none" }}>
-          <Button colors={theme.colors}>Begin Writing</Button>
+          <Button colors={theme.colors}>Write Today</Button>
         </Link>
       </StartGrid>
     )