Merge branch 'develop' into production

Author: xMartin

package-lock.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",

package.json

@@ -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>

public/index.html

@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#131313",
+  "theme_color": "#f5f5f5",
   "background_color": "#f5f5f5"
 }

public/manifest.json

@@ -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

release-notes.yml

@@ -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>

src/components/__snapshots__/main.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

src/components/__snapshots__/tabs.test.tsx.snap

@@ -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) {

src/components/main.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>
   );

src/components/tablistbutton.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);