From f59be97a52899240beb89206494ef704bea506d5 Mon Sep 17 00:00:00 2001
From: "Kamat, Trivikram" <16024985+trivikr@users.noreply.github.com>
Date: Wed, 13 Jul 2022 10:07:41 -0700
Subject: [PATCH 1/4] chore(deps-dev): bump boostrap dependencies

---
 packages/frontend/package.json |   4 +-
 yarn.lock                      | 235 ++++++++++++++++-----------------
 2 files changed, 119 insertions(+), 120 deletions(-)

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index acf1ffc..1ca01db 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -18,7 +18,7 @@
     "microphone-stream": "6.0.1",
     "process": "0.11.10",
     "react": "18.2.0",
-    "react-bootstrap": "1.4.0",
+    "react-bootstrap": "2.4.0",
     "react-dom": "18.2.0"
   },
   "scripts": {
@@ -62,7 +62,7 @@
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
     "@vitejs/plugin-react-refresh": "1.3.6",
-    "react-bootstrap-icons": "1.3.0",
+    "react-bootstrap-icons": "1.8.4",
     "typescript": "~4.4.4",
     "vite": "2.4.4"
   }
diff --git a/yarn.lock b/yarn.lock
index eaee8f6..1374958 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -136,8 +136,8 @@ __metadata:
     microphone-stream: 6.0.1
     process: 0.11.10
     react: 18.2.0
-    react-bootstrap: 1.4.0
-    react-bootstrap-icons: 1.3.0
+    react-bootstrap: 2.4.0
+    react-bootstrap-icons: 1.8.4
     react-dom: 18.2.0
     typescript: ~4.4.4
     vite: 2.4.4
@@ -1706,7 +1706,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.4.2, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.6.2":
+  version: 7.18.6
+  resolution: "@babel/runtime@npm:7.18.6"
+  dependencies:
+    regenerator-runtime: ^0.13.4
+  checksum: 8b707b64ae0524db617d0c49933b258b96376a38307dc0be8fb42db5697608bcc1eba459acce541e376cff5ed5c5287d24db5780bd776b7c75ba2c2e26ff8a2c
+  languageName: node
+  linkType: hard
+
+"@babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.7":
   version: 7.12.5
   resolution: "@babel/runtime@npm:7.12.5"
   dependencies:
@@ -1832,10 +1841,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@popperjs/core@npm:^2.5.3":
-  version: 2.6.0
-  resolution: "@popperjs/core@npm:2.6.0"
-  checksum: 87a12a57892412f40476dcf2eb158a17ba267266a6f04e7b8cc1bcfd3ea1e2e8e4c6b6d9a991b62c1075454b2800decd380a39e401f9db89ef5f0c19e5ab354d
+"@popperjs/core@npm:^2.11.5":
+  version: 2.11.5
+  resolution: "@popperjs/core@npm:2.11.5"
+  checksum: fd7f9dca3fb716d7426332b6ee283f88d2724c0ab342fb678865a640bad403dfb9eeebd8204a406986162f7e2b33394f104320008b74d0e9066d7322f70ea35d
   languageName: node
   linkType: hard
 
@@ -1854,24 +1863,45 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@restart/context@npm:^2.1.4":
-  version: 2.1.4
-  resolution: "@restart/context@npm:2.1.4"
+"@react-aria/ssr@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "@react-aria/ssr@npm:3.2.0"
+  dependencies:
+    "@babel/runtime": ^7.6.2
   peerDependencies:
-    react: ">=16.3.2"
-  checksum: 90a85fcccf6b4e642fd971ec72dcf740d40508930b9b4c6cc5fa2553cfea07abee94911626b8d30093188187d2b87e593e5618e479401a48f8a1937af29cb92e
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+  checksum: 30468b436f9d56636eb3fb89cbbbf861c55ad841e255e529d225a0efd9c23628badaee72c42ab3870b5f17a9d5b5163564a64e9b928565230a090cb4f7de23bf
   languageName: node
   linkType: hard
 
-"@restart/hooks@npm:^0.3.21, @restart/hooks@npm:^0.3.25":
-  version: 0.3.26
-  resolution: "@restart/hooks@npm:0.3.26"
+"@restart/hooks@npm:^0.4.6, @restart/hooks@npm:^0.4.7":
+  version: 0.4.7
+  resolution: "@restart/hooks@npm:0.4.7"
   dependencies:
-    lodash: ^4.17.20
-    lodash-es: ^4.17.20
+    dequal: ^2.0.2
   peerDependencies:
     react: ">=16.8.0"
-  checksum: 8dba9a00e4de7bd371321d30aa1496c1d85b9d314576e6ca133d7178758364b72dd9f96b18e32a72aecbadc74cfdad297a39a174a3a9c73486c806cf7c09095f
+  checksum: 1aec4bfb00704c1c31b0c2af04aa28dff1714e36bb8043f7553e06d594aa376b0ba9e0f56b6df532c64b293bf8052c4f8f5bdd5cdad286e9dbaba422a94e21cb
+  languageName: node
+  linkType: hard
+
+"@restart/ui@npm:^1.2.0":
+  version: 1.3.0
+  resolution: "@restart/ui@npm:1.3.0"
+  dependencies:
+    "@babel/runtime": ^7.18.3
+    "@popperjs/core": ^2.11.5
+    "@react-aria/ssr": ^3.2.0
+    "@restart/hooks": ^0.4.7
+    "@types/warning": ^3.0.0
+    dequal: ^2.0.2
+    dom-helpers: ^5.2.0
+    uncontrollable: ^7.2.1
+    warning: ^4.0.3
+  peerDependencies:
+    react: ">=16.14.0"
+    react-dom: ">=16.14.0"
+  checksum: f12a33d87555856ceb6855c53425df2ce1b75d88d314bfd3f149a4d1eb908751807bfb6d6d78773e5646787182bba99202e40a0831c1b83c655b1a143dfa7fb5
   languageName: node
   linkType: hard
 
@@ -1899,13 +1929,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/classnames@npm:^2.2.10":
-  version: 2.2.11
-  resolution: "@types/classnames@npm:2.2.11"
-  checksum: 80f5798896565c8b6525e401f425593a4c7771eb06c4e52e1bbaf18f4e0a37f4fb998247e8a6a6e5abf8a9e2af2aa50d2abf5ad615c7e7a835bd083408a1dc4d
-  languageName: node
-  linkType: hard
-
 "@types/history@npm:*":
   version: 4.7.8
   resolution: "@types/history@npm:4.7.8"
@@ -1913,13 +1936,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/invariant@npm:^2.2.33":
-  version: 2.2.34
-  resolution: "@types/invariant@npm:2.2.34"
-  checksum: 2dedddf5dcf70b484220b29ee0eb76b31d1501c54e0bdd787415e37be817b0358bdd66a7dd9e959af80262f8374e02c427459db8a407061406b412fd24cb32e5
-  languageName: node
-  linkType: hard
-
 "@types/json-schema@npm:^7.0.9":
   version: 7.0.9
   resolution: "@types/json-schema@npm:7.0.9"
@@ -1941,7 +1957,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*, @types/prop-types@npm:^15.7.3":
+"@types/prop-types@npm:*":
   version: 15.7.3
   resolution: "@types/prop-types@npm:15.7.3"
   checksum: 41831d53c44c9eeafdaf9762bcb4553c13a3bbf990745ed9065a1cc3581b80633113b53fd49b202bf51731b258da5d0a9aa09c9035d5af7f78b0f6bc273f1325
@@ -1967,12 +1983,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-transition-group@npm:^4.4.0":
-  version: 4.4.0
-  resolution: "@types/react-transition-group@npm:4.4.0"
+"@types/react-transition-group@npm:^4.4.4":
+  version: 4.4.5
+  resolution: "@types/react-transition-group@npm:4.4.5"
   dependencies:
     "@types/react": "*"
-  checksum: ba44361d7b055922b60a557389a68d5320a190785cd80173839ef8c096aeb0808bd9c35fc9a70badbfe959dc668fdb1b82211e4914140a5edc9ed87d760c9812
+  checksum: 265f1c74061556708ffe8d15559e35c60d6c11478c9950d3735575d2c116ca69f461d85effa06d73a613eb8b73c84fd32682feb57cf7c5f9e4284021dbca25b0
   languageName: node
   linkType: hard
 
@@ -1997,16 +2013,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^16.9.35":
-  version: 16.14.2
-  resolution: "@types/react@npm:16.14.2"
-  dependencies:
-    "@types/prop-types": "*"
-    csstype: ^3.0.2
-  checksum: 1be44c708f3e6e2597223806d83590dae68f296cef8e3ddc6696440c4f2f66775e62f9c46f5e210c29dd13729937923fc50d26aea60d3ed59e8585039cfa4c54
-  languageName: node
-  linkType: hard
-
 "@types/scheduler@npm:*":
   version: 0.16.2
   resolution: "@types/scheduler@npm:0.16.2"
@@ -2494,10 +2500,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.2.6":
-  version: 2.2.6
-  resolution: "classnames@npm:2.2.6"
-  checksum: 09a4fda780158aa8399079898eabeeca0c48c28641d9e4de140db7412e5e346843039ded1af0152f755afc2cc246ff8c3d6f227bf0dcb004e070b7fa14ec54cc
+"classnames@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "classnames@npm:2.3.1"
+  checksum: 14db8889d56c267a591f08b0834989fe542d47fac659af5a539e110cc4266694e8de86e4e3bbd271157dbd831361310a8293e0167141e80b0f03a0f175c80960
   languageName: node
   linkType: hard
 
@@ -2720,6 +2726,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dequal@npm:^2.0.2":
+  version: 2.0.3
+  resolution: "dequal@npm:2.0.3"
+  checksum: 8679b850e1a3d0ebbc46ee780d5df7b478c23f335887464023a631d1b9af051ad4a6595a44220f9ff8ff95a8ddccf019b5ad778a976fd7bbf77383d36f412f90
+  languageName: node
+  linkType: hard
+
 "dir-glob@npm:^3.0.1":
   version: 3.0.1
   resolution: "dir-glob@npm:3.0.1"
@@ -2738,7 +2751,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-helpers@npm:^5.0.1, dom-helpers@npm:^5.1.2, dom-helpers@npm:^5.2.0":
+"dom-helpers@npm:^5.0.1, dom-helpers@npm:^5.2.0":
   version: 5.2.0
   resolution: "dom-helpers@npm:5.2.0"
   dependencies:
@@ -2748,6 +2761,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-helpers@npm:^5.2.1":
+  version: 5.2.1
+  resolution: "dom-helpers@npm:5.2.1"
+  dependencies:
+    "@babel/runtime": ^7.8.7
+    csstype: ^3.0.2
+  checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c
+  languageName: node
+  linkType: hard
+
 "electron-to-chromium@npm:^1.3.723":
   version: 1.3.792
   resolution: "electron-to-chromium@npm:1.3.792"
@@ -3780,13 +3803,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash-es@npm:^4.17.20":
-  version: 4.17.20
-  resolution: "lodash-es@npm:4.17.20"
-  checksum: 209a749a5c50feaf50db16bcd99c41a945568bc2efe07c16b250add982bdfaf57d2e4930d6556a1220ec9c52578ba9fcf533a351704e09a6fe29d137d440d3fb
-  languageName: node
-  linkType: hard
-
 "lodash.merge@npm:^4.6.2":
   version: 4.6.2
   resolution: "lodash.merge@npm:4.6.2"
@@ -3794,13 +3810,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.17.20":
-  version: 4.17.20
-  resolution: "lodash@npm:4.17.20"
-  checksum: b31afa09739b7292a88ec49ffdb2fcaeb41f690def010f7a067eeedffece32da6b6847bfe4d38a77e6f41778b9b2bca75eeab91209936518173271f0b69376ea
-  languageName: node
-  linkType: hard
-
 "log-symbols@npm:^4.0.0":
   version: 4.0.0
   resolution: "log-symbols@npm:4.0.0"
@@ -4380,6 +4389,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prop-types@npm:^15.8.1":
+  version: 15.8.1
+  resolution: "prop-types@npm:15.8.1"
+  dependencies:
+    loose-envify: ^1.4.0
+    object-assign: ^4.1.1
+    react-is: ^16.13.1
+  checksum: c056d3f1c057cb7ff8344c645450e14f088a915d078dcda795041765047fa080d38e5d626560ccaac94a4e16e3aa15f3557c1a9a8d1174530955e992c675e459
+  languageName: node
+  linkType: hard
+
 "pump@npm:^3.0.0":
   version: 3.0.0
   resolution: "pump@npm:3.0.0"
@@ -4397,43 +4417,41 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-bootstrap-icons@npm:1.3.0":
-  version: 1.3.0
-  resolution: "react-bootstrap-icons@npm:1.3.0"
+"react-bootstrap-icons@npm:1.8.4":
+  version: 1.8.4
+  resolution: "react-bootstrap-icons@npm:1.8.4"
   dependencies:
     prop-types: ^15.7.2
   peerDependencies:
-    react: ^16.8.6 || ^17
-  checksum: 23e493fd65805012356e5c777c93770a052c6377a69fa38abdbe522d5d7b392e3c791538e2a4343dd1ec653678b49a18066c01b0c50f86f3d60c93c2ec9ddfb7
+    react: ">=16.8.6"
+  checksum: e5652a01e29f793d8eadcb7ad9893c73ba81bb29be5e61861ccad08bb65bc7508967d572326ac40469c78facf3c0cfd9451b33112edbde9cb52d60314972295d
   languageName: node
   linkType: hard
 
-"react-bootstrap@npm:1.4.0":
-  version: 1.4.0
-  resolution: "react-bootstrap@npm:1.4.0"
-  dependencies:
-    "@babel/runtime": ^7.4.2
-    "@restart/context": ^2.1.4
-    "@restart/hooks": ^0.3.21
-    "@types/classnames": ^2.2.10
-    "@types/invariant": ^2.2.33
-    "@types/prop-types": ^15.7.3
-    "@types/react": ^16.9.35
-    "@types/react-transition-group": ^4.4.0
-    "@types/warning": ^3.0.0
-    classnames: ^2.2.6
-    dom-helpers: ^5.1.2
+"react-bootstrap@npm:2.4.0":
+  version: 2.4.0
+  resolution: "react-bootstrap@npm:2.4.0"
+  dependencies:
+    "@babel/runtime": ^7.17.2
+    "@restart/hooks": ^0.4.6
+    "@restart/ui": ^1.2.0
+    "@types/react-transition-group": ^4.4.4
+    classnames: ^2.3.1
+    dom-helpers: ^5.2.1
     invariant: ^2.2.4
-    prop-types: ^15.7.2
+    prop-types: ^15.8.1
     prop-types-extra: ^1.1.0
-    react-overlays: ^4.1.0
-    react-transition-group: ^4.4.1
-    uncontrollable: ^7.0.0
+    react-transition-group: ^4.4.2
+    uncontrollable: ^7.2.1
     warning: ^4.0.3
   peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 858b88f010bcf404cbb3d181c03525d179e41e290b09dc1d828a355c585ef3416b7ff62b783dd7b7d29e98f6992aeef00b488b4dbf905fea12670c7f9af329b2
+    "@types/react": ">=16.14.8"
+    react: ">=16.14.0"
+    react-dom: ">=16.14.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 63c520b83ff23a73229f068ec93997581e4a34bdba06f694770cd5cd0648be5625065640c1232de522f8d249a5b57262e9a4aebb294a62b59f6375026ae3df37
   languageName: node
   linkType: hard
 
@@ -4449,7 +4467,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.3.2, react-is@npm:^16.8.1":
+"react-is@npm:^16.13.1, react-is@npm:^16.3.2, react-is@npm:^16.8.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f
@@ -4463,25 +4481,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-overlays@npm:^4.1.0":
-  version: 4.1.1
-  resolution: "react-overlays@npm:4.1.1"
-  dependencies:
-    "@babel/runtime": ^7.12.1
-    "@popperjs/core": ^2.5.3
-    "@restart/hooks": ^0.3.25
-    "@types/warning": ^3.0.0
-    dom-helpers: ^5.2.0
-    prop-types: ^15.7.2
-    uncontrollable: ^7.0.0
-    warning: ^4.0.3
-  peerDependencies:
-    react: ">=16.3.0"
-    react-dom: ">=16.3.0"
-  checksum: f0dc65f0d40c5958253f98d443d03cda02427d18db4010bd9589b1c0d20ef479eb55d34bc31842f0f50d3072a1e0b0d5ce209f09a5599623bc42e1dd211aeb83
-  languageName: node
-  linkType: hard
-
 "react-refresh@npm:^0.10.0":
   version: 0.10.0
   resolution: "react-refresh@npm:0.10.0"
@@ -4489,9 +4488,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-transition-group@npm:^4.4.1":
-  version: 4.4.1
-  resolution: "react-transition-group@npm:4.4.1"
+"react-transition-group@npm:^4.4.2":
+  version: 4.4.2
+  resolution: "react-transition-group@npm:4.4.2"
   dependencies:
     "@babel/runtime": ^7.5.5
     dom-helpers: ^5.0.1
@@ -4500,7 +4499,7 @@ __metadata:
   peerDependencies:
     react: ">=16.6.0"
     react-dom: ">=16.6.0"
-  checksum: 0bcd8af483709832e318dcef84c26ebddeb866bf4f58010286367ef0c1e7c5106e00cfc65688b9102414cb3d572c63909c2eb7ea972b4420fc70a78c10b6e8ad
+  checksum: b67bf5b3e86dbab72d658b9a52a3589e5960583ab28c7c66272427d8fe30d4c7de422d5046ae96bd2683cdf80cc3264b2516f5ce80cae1dbe6cf3ca6dda392c5
   languageName: node
   linkType: hard
 
@@ -5099,7 +5098,7 @@ typescript@~4.4.4:
   languageName: node
   linkType: hard
 
-"uncontrollable@npm:^7.0.0":
+"uncontrollable@npm:^7.2.1":
   version: 7.2.1
   resolution: "uncontrollable@npm:7.2.1"
   dependencies:

From 573cf99e69abed30ba4aa3a0b4826d8df9e49897 Mon Sep 17 00:00:00 2001
From: "Kamat, Trivikram" <16024985+trivikr@users.noreply.github.com>
Date: Wed, 13 Jul 2022 14:24:11 -0700
Subject: [PATCH 2/4] chore: replace CardColumns with CardGroup

---
 packages/frontend/src/content/ListNotes.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/content/ListNotes.tsx b/packages/frontend/src/content/ListNotes.tsx
index 57ea451..4c97562 100644
--- a/packages/frontend/src/content/ListNotes.tsx
+++ b/packages/frontend/src/content/ListNotes.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Link, RouteComponentProps } from "@reach/router";
 import { GATEWAY_URL } from "../config.json";
-import { Card, Alert, CardColumns, Button } from "react-bootstrap";
+import { Card, Alert, CardGroup, Button } from "react-bootstrap";
 import { Loading, PageContainer } from "../components";
 interface Note {
   noteId: string;
@@ -69,7 +69,7 @@ const ListNotes = (props: RouteComponentProps) => {
         <Loading />
       ) : (
         <div>
-          <CardColumns>{renderNotes(notes)}</CardColumns>
+          <CardGroup>{renderNotes(notes)}</CardGroup>
           {createNewNote()}
         </div>
       )}

From f415698e347385b9e7d69f1c614178bef42ff953 Mon Sep 17 00:00:00 2001
From: "Kamat, Trivikram" <16024985+trivikr@users.noreply.github.com>
Date: Wed, 13 Jul 2022 14:35:52 -0700
Subject: [PATCH 3/4] chore: add Card.Link with 'edit' text

---
 packages/frontend/src/content/ListNotes.tsx | 36 +++++++++++----------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/content/ListNotes.tsx b/packages/frontend/src/content/ListNotes.tsx
index 4c97562..703d5b5 100644
--- a/packages/frontend/src/content/ListNotes.tsx
+++ b/packages/frontend/src/content/ListNotes.tsx
@@ -3,6 +3,7 @@ import { Link, RouteComponentProps } from "@reach/router";
 import { GATEWAY_URL } from "../config.json";
 import { Card, Alert, CardGroup, Button } from "react-bootstrap";
 import { Loading, PageContainer } from "../components";
+
 interface Note {
   noteId: string;
   createdAt: string;
@@ -35,23 +36,24 @@ const ListNotes = (props: RouteComponentProps) => {
 
   const renderNotes = (notes: Note[]) =>
     notes.map((note) => (
-      <Link key={note.noteId} to={`/notes/${note.noteId}`}>
-        <Card>
-          <Card.Body>
-            <Card.Title>
-              {note.attachment && (
-                <span role="img" aria-label="attachment" className="mr-1">
-                  📎
-                </span>
-              )}
-              {note.content}
-            </Card.Title>
-            <Card.Subtitle className="text-muted">
-              Created: {new Date(parseInt(note.createdAt)).toLocaleString()}
-            </Card.Subtitle>
-          </Card.Body>
-        </Card>
-      </Link>
+      <Card>
+        <Card.Body>
+          <Card.Title>
+            {note.attachment && (
+              <span role="img" aria-label="attachment" className="mr-1">
+                📎
+              </span>
+            )}
+            {note.content}
+          </Card.Title>
+          <Card.Subtitle className="text-muted">
+            Created: {new Date(parseInt(note.createdAt)).toLocaleString()}
+          </Card.Subtitle>
+          <Card.Link key={note.noteId} href={`/notes/${note.noteId}`}>
+            edit
+          </Card.Link>
+        </Card.Body>
+      </Card>
     ));
 
   const createNewNote = () => (

From 680fffabfe53fafa0165ca1f75b4819493706782 Mon Sep 17 00:00:00 2001
From: "Kamat, Trivikram" <16024985+trivikr@users.noreply.github.com>
Date: Wed, 13 Jul 2022 14:56:03 -0700
Subject: [PATCH 4/4] chore: wip using containers

---
 .../frontend/src/components/PageContainer.tsx  | 18 +++++++++++++-----
 packages/frontend/src/content/ListNotes.tsx    |  6 +++---
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/components/PageContainer.tsx b/packages/frontend/src/components/PageContainer.tsx
index 108f5e4..0bb7cf6 100644
--- a/packages/frontend/src/components/PageContainer.tsx
+++ b/packages/frontend/src/components/PageContainer.tsx
@@ -1,14 +1,22 @@
 import React from "react";
-import { Card } from "react-bootstrap";
+import { Container, Row, Col, Navbar } from "react-bootstrap";
 
 const PageContainer = (props: {
   header: React.ReactNode;
   children: React.ReactNode;
 }) => (
-  <Card>
-    <Card.Header>{props.header}</Card.Header>
-    <Card.Body>{props.children}</Card.Body>
-  </Card>
+  <>
+    <Navbar bg="light">
+      <Container>
+        <Navbar.Brand>{props.header}</Navbar.Brand>
+      </Container>
+    </Navbar>
+    <Container>
+      <Row>
+        <Col>{props.children}</Col>
+      </Row>
+    </Container>
+  </>
 );
 
 export { PageContainer };
diff --git a/packages/frontend/src/content/ListNotes.tsx b/packages/frontend/src/content/ListNotes.tsx
index 703d5b5..1726008 100644
--- a/packages/frontend/src/content/ListNotes.tsx
+++ b/packages/frontend/src/content/ListNotes.tsx
@@ -58,9 +58,9 @@ const ListNotes = (props: RouteComponentProps) => {
 
   const createNewNote = () => (
     <Link key="new" to="note/new">
-      <Button variant="primary" block>
-        Create a new note
-      </Button>
+      <div className="d-grid">
+        <Button variant="primary">Create New Note</Button>
+      </div>
     </Link>
   );