Release v0.4.7 (#166)

### Release Notes 💄 styles: Update Lockscreen UI ✨ feat: Add Clock on Lockscreen 🖨️ fix: Fix all print settings as per new Bill ✨ feat: Add option to change the Date format 🐛 fix: Disable Old Purchase Date column
2AMDevs · Sep 2, 2020 · 87dc7e0 · 87dc7e0
1 parent 57419f8
commit 87dc7e0
Show file tree

Hide file tree

Showing 8 changed files with 199 additions and 58 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "invoicify",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "author": "2AM Devs",
   "description": "Digitalizes your billing process",
   "private": true,

diff --git a/src/components/Invoice/index.js b/src/components/Invoice/index.js
@@ -415,6 +415,7 @@ const Invoice = ({ showPdfPreview }) => {
             <TextField
               label="Old Purchase"
               type="number"
+              disabled
               value={invoiceFooter.oldPurchase}
               onChange={(_, value) => {
                 updateInvoiceFooter({ oldPurchase: value })

diff --git a/src/components/LockScreen/index.js b/src/components/LockScreen/index.js
@@ -1,18 +1,26 @@
-import './index.scss'
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 
-import { Stack } from 'office-ui-fabric-react/lib/Stack'
+import { FontIcon } from 'office-ui-fabric-react/lib/Icon'
 import { TextField } from 'office-ui-fabric-react/lib/TextField'
 
 import { useAuthContext } from '../../contexts'
 import { getFromStorage } from '../../utils/helper'
 
+import './index.scss'
+
 const LockScreen = () => {
   const [authState, updateAuthState] = useAuthContext()
   const [time, setTime] = useState(new Date())
   const [userInput, setUserInput] = useState('')
   const [errorMessage, setError] = useState('')
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(new Date())
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [])
+
   const unlock = (event) => {
     if (event.key === 'Enter') {
       if (userInput === getFromStorage('password')) updateAuthState({ isAuthenticated: !authState.isAuthenticated })
@@ -24,11 +32,17 @@ const LockScreen = () => {
 
   return (
     <div
-      className="lock-screen"
+      className="lock-screen animation-slide-down"
     >
-      <Stack>
-        <p className="huge">{time.toDateString()}</p>
-        {/* <p className="huge">{time.toLocaleTimeString()}</p> */}
+      <div className="lock-screen__hero-icn animation-scale-down">
+        <FontIcon
+          className="pretty-huge lock-screen__items__lock-icn"
+          iconName="Lock"
+        />
+      </div>
+      <div className="lock-screen__items animation-slide-up">
+        {/* <p className="not-so-huge">{time.toDateString()}</p>
+        <p className="huge">{time.toLocaleTimeString()}</p> */}
         <br />
         <p className="okayish">
           Hey!
@@ -44,7 +58,6 @@ const LockScreen = () => {
         <br />
         <TextField
           label="Enter Password (if not set simply press enter)"
-          iconProps={{ iconName: 'Hide3' }}
           type="password"
           value={userInput}
           onChange={(_, val) => {
@@ -54,8 +67,19 @@ const LockScreen = () => {
           onKeyPress={unlock}
           errorMessage={errorMessage}
         />
-      </Stack>
-
+      </div>
+      <div className="lock-screen__clock animation-slide-up">
+        <span className="row-flex">
+          <FontIcon
+            className="lock-screen__clock__icn"
+            iconName="DateTime"
+          />
+          <p className="not-so-huge">{time.toDateString()}</p>
+        </span>
+        <span className="row-flex">
+          <p className="huge">{time.toLocaleTimeString()}</p>
+        </span>
+      </div>
     </div>
   )
 }

diff --git a/src/components/LockScreen/index.scss b/src/components/LockScreen/index.scss
@@ -1,16 +1,67 @@
 .lock-screen {
+  position: relative;
   display: flex;
-  flex-direction: row;
-  justify-content: center;
-  height: calc(100% - 40rem);
-  padding: 20rem;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
   color: white;
+
+  background-color: #3056ff;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%233056ff'/%3E%3Cstop offset='1' stop-color='%23e972ff'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
+
+  &__clock {
+    position: absolute;
+    bottom: 3rem;
+    left: 3rem;
+    padding: 4rem;
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    background-color: var(--color-black-op-20);
+    border-radius: 1rem;
+
+    &__icn {
+      font-size: 3rem;
+      margin-right: 2rem;
+      margin-top: 0.5rem;
+      align-self: center;
+    }
+  }
+
+  &__hero-icn {
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    background-color: var(--color-black-op-20);
+    margin: 6rem 0;
+    padding: 2.5rem;
+    border-radius: 50%;
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 5rem;
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    background-color: var(--color-black-op-20);
+    border-radius: 1rem;
+  }
+}
+
+.pretty-huge {
+  font-size: 10rem;
 }
 
 .huge {
-  font-size: 5rem;
+  font-size: 6rem;
+}
+
+.not-so-huge {
+  font-size: 3rem;
 }
 
 .okayish {
-  font-size: 2.5rem;
+  font-size: 4.5rem;
 }
diff --git a/src/components/Settings/index.js b/src/components/Settings/index.js
@@ -29,6 +29,7 @@ const Settings = ({ refreshCompanyName }) => {
   const [invoiceNumber, setInvoiceNumber] = useState(getFromStorage('invoiceNumber'))
   const [companyName, setCompanyName] = useState(getFromStorage('companyName'))
   const [hindiDate, setHindiDate] = useState(getFromStorage('hindiDate'))
+  const [showFullMonth, setShowFullMonth] = useState(getFromStorage('showFullMonth'))
   const [font, setFont] = useState(getFromStorage('customFont'))
   const [gstinPrefix, setGstinPrefix] = useState(getFromStorage('nativeGstinPrefix'))
   const [currency, setCurrency] = useState(getFromStorage('currency'))
@@ -47,6 +48,11 @@ const Settings = ({ refreshCompanyName }) => {
     setHindiDate(checked)
   }
 
+  const onMonthShowChange = (_, checked) => {
+    localStorage.showFullMonth = checked
+    setShowFullMonth(checked)
+  }
+
   const onCurrencyChange = (_, val) => {
     localStorage.currency = val
     setCurrency(val)
@@ -159,6 +165,11 @@ const Settings = ({ refreshCompanyName }) => {
             offText="English"
             onChange={onDateLangChange}
           />
+          <Toggle
+            label="Full Month"
+            checked={showFullMonth}
+            onChange={onMonthShowChange}
+          />
         </Stack>
         <Stack
           tokens={stackTokens}

diff --git a/src/index.scss b/src/index.scss
@@ -8,6 +8,7 @@
   --color-black: rgba(0, 0, 0, 1);
   --color-black-op-80: rgba(0, 0, 0, 0.8);
   --color-black-op-50: rgba(0, 0, 0, 0.5);
+  --color-black-op-30: rgba(0, 0, 0, 0.3);
   --color-black-op-20: rgba(0, 0, 0, 0.2);
   --color-red-exit: rgba(238, 62, 79, 0.75);
 
@@ -103,7 +104,42 @@ code {
   animation: slideUp 0.5s forwards;
 }
 
+@keyframes scaleUp {
+  0% {
+    transform: scale(0.90);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animation-scale-up {
+  animation: scaleUp 0.5s forwards;
+}
+
+@keyframes scaleDown {
+  0% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animation-scale-down {
+  animation: scaleDown 0.5s forwards;
+}
+
 .outside-link {
   color: wheat;
   text-decoration: none;
 }
+
+.row-flex {
+  display: flex;
+  flex-direction: row;
+}
diff --git a/src/utils/constants.js b/src/utils/constants.js
@@ -200,7 +200,7 @@ const defaultPrintSettings = [
   {
     name: 'Invoice Number',
     x: 90,
-    y: 695,
+    y: 694,
     required: true,
     disabled: true,
     type: TEXT,
@@ -210,8 +210,8 @@ const defaultPrintSettings = [
   },
   {
     name: 'Invoice Date',
-    x: 485.42,
-    y: 694.52,
+    x: 473,
+    y: 694,
     required: true,
     disabled: false,
     type: DATE,
@@ -222,7 +222,7 @@ const defaultPrintSettings = [
   {
     name: 'Customer Name',
     x: 60,
-    y: 672.52,
+    y: 668,
     required: true,
     disabled: false,
     type: TEXT,
@@ -232,7 +232,7 @@ const defaultPrintSettings = [
   {
     name: 'GSTIN',
     x: 100,
-    y: 645.52,
+    y: 641,
     required: true,
     disabled: false,
     type: TEXT,
@@ -243,8 +243,8 @@ const defaultPrintSettings = [
   },
   {
     name: 'Mobile',
-    x: 465.42,
-    y: 645.52,
+    x: 473,
+    y: 641,
     required: true,
     disabled: false,
     type: TEXT,
@@ -257,8 +257,8 @@ const defaultPrintSettings = [
   },
   {
     name: 'Address',
-    x: 325,
-    y: 645.52,
+    x: 257,
+    y: 641,
     required: true,
     disabled: false,
     type: TEXT,
@@ -276,8 +276,8 @@ const morePrintSettings = {
 
 const footerPrintSettings = {
   [PAY_METHOD.CHEQUENO]: {
-    x: 380,
-    y: 190,
+    x: 299,
+    y: 205,
   },
 }