Merge branch 'develop' into production

xMartin · xMartin · commit 53187b31e69d · 2022-04-04T08:17:03.000+03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,34 +12,34 @@
   "homepage": "https://grouptabs.net/",
   "dependencies": {
     "@seznam/compose-react-refs": "^1.0.6",
-    "@types/jest": "^26.0.22",
-    "@types/node": "^14.14.37",
+    "@types/jest": "^26.0.24",
+    "@types/node": "^14.17.32",
     "@types/pouchdb": "^6.4.0",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
-    "@types/react-redux": "^7.1.16",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-redux": "^7.1.20",
     "@types/react-test-renderer": "^17.0.1",
-    "@types/redux-first-router": "^2.1.5",
-    "@types/uuid": "^8.3.0",
-    "debug": "^4.3.1",
+    "@types/redux-first-router": "^2.1.7",
+    "@types/uuid": "^8.3.1",
+    "debug": "^4.3.2",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "lodash.orderby": "^4.6.0",
     "lodash.throttle": "^4.1.1",
-    "pouchdb": "^7.2.2",
     "pouchdb-adapter-memory": "^7.2.2",
-    "prettier": "^2.2.1",
+    "pouchdb-browser": "^7.2.2",
+    "prettier": "^2.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-redux": "^7.2.3",
+    "react-redux": "^7.2.6",
     "react-scripts": "4.0.3",
     "react-test-renderer": "^17.0.2",
-    "redux": "^4.0.5",
+    "redux": "^4.1.2",
     "redux-first-router": "^2.1.5",
-    "redux-thunk": "^2.3.0",
-    "reselect": "^4.0.0",
+    "redux-thunk": "^2.4.0",
+    "reselect": "^4.1.2",
     "smooth-scroll": "^16.1.3",
-    "typescript": "^4.2.3",
+    "typescript": "^4.4.4",
     "uuid": "^8.3.2",
     "workbox-background-sync": "^5.1.4",
     "workbox-broadcast-update": "^5.1.4",
diff --git a/public/index.html b/public/index.html
@@ -4,8 +4,10 @@
 	<meta charset="utf-8">
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
 	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
-    <meta name="theme-color" content="#131313">
+    <meta name="theme-color" content="#f5f5f5" media="(prefers-color-scheme: light)">
+	<meta name="theme-color" content="#131313" media="(prefers-color-scheme: dark)">
 	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 	<title>Grouptabs</title>
diff --git a/public/manifest.json b/public/manifest.json
@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#131313",
+  "theme_color": "#f5f5f5",
   "background_color": "#f5f5f5"
 }
diff --git a/release-notes.yml b/release-notes.yml
@@ -3,6 +3,14 @@ description: >
   Track expenses in a group of people!
 
 releases:
+  - version: 1.5.1
+    date: 2022-04-04
+    description: Small improvements and updates
+    improved:
+      - Optimize display of status bar on mobile devices (color fits app background)
+    changed:
+      - Switch from npm to yarn for better developer experience
+      - Use specific browser distribution of PouchDB for faster developer dependencies installation
   - version: 1.5.0
     date: 2021-04-07
     description: Animated screen transitions and smaller bugfixes and improvements
diff --git a/src/components/__snapshots__/main.test.tsx.snap b/src/components/__snapshots__/main.test.tsx.snap
@@ -232,7 +232,7 @@ exports[`renders summary and transaction list 1`] = `
               9/20/2020
             </div>
             <div
-              className="transaction"
+              className="transaction list-item-with-arrow"
               onClick={[Function]}
             >
               <table>
diff --git a/src/components/__snapshots__/tabs.test.tsx.snap b/src/components/__snapshots__/tabs.test.tsx.snap
@@ -103,7 +103,7 @@ exports[`renders tab view 1`] = `
         className="row tabs"
       >
         <button
-          className="full-width"
+          className="full-width list-item-with-arrow"
           onClick={[Function]}
         >
           TAB NAME
diff --git a/src/components/main.tsx b/src/components/main.tsx
@@ -62,7 +62,8 @@ const useTransactionHeadingScroller = (
       newTransactionsHeadingIsOutOfViewport !==
       transactionsHeadingIsOutOfViewportRef.current
     ) {
-      transactionsHeadingIsOutOfViewportRef.current = newTransactionsHeadingIsOutOfViewport;
+      transactionsHeadingIsOutOfViewportRef.current =
+        newTransactionsHeadingIsOutOfViewport;
       setTransactionsHeadingIsOutOfViewport(
         newTransactionsHeadingIsOutOfViewport
       );
@@ -102,14 +103,10 @@ const Main: FunctionComponent<Props> = (props) => {
 
   const [isScrolled, scrollContainerRef] = useScrollIndicator();
 
-  const {
-    transactionsHeadingIsOutOfViewport,
-    scrollToTransactionHeading,
-  } = useTransactionHeadingScroller(
-    contentContainerRef,
-    transactionsHeadingRef,
-    [props.accounts]
-  );
+  const { transactionsHeadingIsOutOfViewport, scrollToTransactionHeading } =
+    useTransactionHeadingScroller(contentContainerRef, transactionsHeadingRef, [
+      props.accounts,
+    ]);
 
   const handleNewEntryClick = () => {
     if (!props.tabId) {
diff --git a/src/components/tablistbutton.tsx b/src/components/tablistbutton.tsx
@@ -8,7 +8,7 @@ interface Props {
 
 const TabListButton: FunctionComponent<Props> = ({ data, onClick }) => {
   return (
-    <button className="full-width" onClick={() => onClick(data.id)}>
+    <button className="full-width list-item-with-arrow" onClick={() => onClick(data.id)}>
       {data.info?.name}
     </button>
   );
diff --git a/src/components/transactionlist.tsx b/src/components/transactionlist.tsx
@@ -15,7 +15,7 @@ interface DateGroup {
 
 const groupTransactions = (transactions: Transaction[]): DateGroup[] => {
   if (!transactions.length) {
-    return (transactions as unknown) as DateGroup[];
+    return transactions as unknown as DateGroup[];
   }
   // XXX Refactor structuring of date groups with a proper loop
   let date = formatHumanDate(transactions[0].date);
diff --git a/src/components/transactionlistitem.tsx b/src/components/transactionlistitem.tsx
@@ -85,7 +85,7 @@ const TransactionListItem: FunctionComponent<Props> = ({
 
   return (
     <div
-      className="transaction"
+      className="transaction list-item-with-arrow"
       onClick={() => onDetailsClick(transaction.tabId, transaction.id)}
     >
       <table>
diff --git a/src/db/manager.ts b/src/db/manager.ts
@@ -1,4 +1,4 @@
-import PouchDB from "pouchdb";
+import PouchDB from "pouchdb-browser";
 import Tab, { Document } from "./tab";
 import config from "../config";
 import { Info, Entity, ActionMap } from "../types";
@@ -29,7 +29,7 @@ export default class DbManager {
       const db = new PouchDB("test");
       this.isIndexedDbAvailable = true;
       await db.destroy();
-    } catch (error) {
+    } catch (error: any) {
       if (error.name === "indexed_db_went_bad") {
         this.isIndexedDbAvailable = false;
         console.info("Accessing IndexedDB failed. Falling back to in-memory.");
diff --git a/src/db/tab.ts b/src/db/tab.ts
@@ -1,4 +1,4 @@
-import PouchDB from "pouchdb";
+import PouchDB from "pouchdb-browser";
 import debug, { Debugger } from "debug";
 
 const log = debug("db:tab");
diff --git a/src/index.css b/src/index.css
@@ -320,6 +320,22 @@ input[type="number"] {
   color: var(--subtle-text-color);
 }
 
+.list-item-with-arrow {
+  position: relative;
+}
+.list-item-with-arrow::after {
+  content: "";
+  width: 9px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  background: var(--subtle-text-color);
+  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg opacity='.5' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='15' width='9' version='1.1' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/'%3E%3Cpath d='m1.5 0-1 1 6.5 6.5-6.5 6.5 1 1 7.5-7.5z'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+}
+
 .empty-info,
 .share-info {
   padding: 10px;
@@ -515,18 +531,6 @@ input[type="number"] {
   background: transparent;
   text-align: left;
 }
-.tabs button::after {
-  content: "";
-  width: 9px;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  right: 10px;
-  background: var(--subtle-text-color);
-  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg opacity='.5' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='15' width='9' version='1.1' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/'%3E%3Cpath d='m1.5 0-1 1 6.5 6.5-6.5 6.5 1 1 7.5-7.5z'/%3E%3C/svg%3E");
-  mask-repeat: no-repeat;
-  mask-position: center;
-}
 .tabs button:last-child {
   border-bottom: 1px solid var(--list-item-divider-color);
 }
@@ -580,8 +584,6 @@ input[type="number"] {
   border-top: 1px solid var(--list-item-divider-color);
   min-height: 44px;
   cursor: pointer;
-  background: right 10px center no-repeat;
-  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg opacity='.5' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='15' width='9' version='1.1' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/'%3E%3Cpath d='m1.5 0-1 1 6.5 6.5-6.5 6.5 1 1 7.5-7.5z'/%3E%3C/svg%3E");
 }
 #transactions .transaction:first-child {
   border-top: none;
diff --git a/src/redux/actioncreators.ts b/src/redux/actioncreators.ts
diff --git a/src/redux/routetransition.ts b/src/redux/routetransition.ts
diff --git a/src/routes.ts b/src/routes.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,6 @@`
`20`	`20`	`],`
`21`	`21`	`"start_url": ".",`
`22`	`22`	`"display": "standalone",`
`23`		`- "theme_color": "#131313",`
	`23`	`+ "theme_color": "#f5f5f5",`
`24`	`24`	`"background_color": "#f5f5f5"`
`25`	`25`	`}`
Original file line number	Diff line number	Diff line change
@@ -232,7 +232,7 @@ exports[`renders summary and transaction list 1`] = `
`232`	`232`	`9/20/2020`
`233`	`233`	`</div>`
`234`	`234`	`<div`
`235`		`- className="transaction"`
	`235`	`+ className="transaction list-item-with-arrow"`
`236`	`236`	`onClick={[Function]}`
`237`	`237`	`>`
`238`	`238`	`<table>`
Original file line number	Diff line number	Diff line change
@@ -103,7 +103,7 @@ exports[`renders tab view 1`] = `
`103`	`103`	`className="row tabs"`
`104`	`104`	`>`
`105`	`105`	`<button`
`106`		`- className="full-width"`
	`106`	`+ className="full-width list-item-with-arrow"`
`107`	`107`	`onClick={[Function]}`
`108`	`108`	`>`
`109`	`109`	`TAB NAME`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ interface DateGroup {`
`15`	`15`
`16`	`16`	`const groupTransactions = (transactions: Transaction[]): DateGroup[] => {`
`17`	`17`	`if (!transactions.length) {`
`18`		`- return (transactions as unknown) as DateGroup[];`
	`18`	`+ return transactions as unknown as DateGroup[];`
`19`	`19`	`}`
`20`	`20`	`// XXX Refactor structuring of date groups with a proper loop`
`21`	`21`	`let date = formatHumanDate(transactions[0].date);`
Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@ const TransactionListItem: FunctionComponent<Props> = ({`
`85`	`85`
`86`	`86`	`return (`
`87`	`87`	`<div`
`88`		`- className="transaction"`
	`88`	`+ className="transaction list-item-with-arrow"`
`89`	`89`	`onClick={() => onDetailsClick(transaction.tabId, transaction.id)}`
`90`	`90`	`>`
`91`	`91`	`<table>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import PouchDB from "pouchdb";`
	`1`	`+import PouchDB from "pouchdb-browser";`
`2`	`2`	`import debug, { Debugger } from "debug";`
`3`	`3`
`4`	`4`	`const log = debug("db:tab");`