0.13.3-0.0.2: [Enhancement] - Layout and styling updates

README.md

@@ -7,7 +7,7 @@ For detailed documentation, head to [docs.blocknative.com](https://docs.blocknat
 
 
 <div align="center">
-  <img style="border-radius: 8px" width="75%" src="assets/react-demo.png">
+  <img style="border-radius: 8px" width="75%" src="assets/react-demo-updated.png">
 </div>
 
 View live demo [here](https://reactdemo.blocknative.com/)!

package.json

@@ -1,8 +1,8 @@
 {
   "name": "onboard-notify-react",
-  "version": "0.13.3-0.0.1",
+  "version": "0.13.3-0.0.2",
   "dependencies": {
-    "bnc-notify": "^1.9.1",
+    "bnc-notify": "^1.9.2",
     "bnc-notify-staging": "https://github.com/blocknative/notify#develop",
     "bnc-onboard": "^1.35.4",
     "bnc-onboard-staging": "https://github.com/blocknative/onboard#develop",

src/App.css

@@ -1,8 +1,7 @@
 body {
-  font-family: "Helvetica Neue";
-  background-color: rgb(206, 175, 206);
-  background-image: url("bn-logo.png");
-  background-repeat: repeat;
+  font-family: sans-serif;;
+  font-style: normal;
+  background-color: #1a1d26;
   max-width: 100vw;
   overflow: hidden;
   margin: 0;
@@ -15,10 +14,6 @@ main {
   box-sizing: border-box;
 }
 
-section {
-  display: flex;
-}
-
 @media screen and (max-width: 750px) {
   body {
     overflow: unset;
@@ -39,19 +34,30 @@ section {
   }
 }
 
+.main-content {
+  display: flex;
+  justify-content: center;
+  padding-top: 24px;
+}
+
+.vertical-main-container {
+  display: grid;
+}
+
 .container {
-  background: rgba(255, 255, 255, 0.4);
+  background: #383c48;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-flow: column nowrap;
-  padding: 1rem;
-  /* width: 20rem; */
-  border: 1px solid #eeeeee;
-  border-radius: 4px;
-  margin: 0.25rem;
+  padding: 1.5rem;
+  border-radius: 8px;
+  margin: 0.75rem 1rem;
+  border: 1px solid #6c707d;
+  color: #fff;
 }
 
+
 .container div {
   display: flex;
   justify-content: center;
@@ -93,13 +99,13 @@ section {
 }
 
 .bn-demo-button {
-  background: #ffffff;
+  background: #ffffffee;
   font-size: 0.889rem;
   border: 1px solid #eeeeee;
-  border-radius: 40px;
+  border-radius: 8px;
   padding: 0.55rem 1.4rem;
-  color: #4a90e2;
-  margin: 0.25rem 0.5rem;
+  color: #6370e5;
+  margin: 0.4rem 0.75rem;
   transition: background 200ms ease-in-out, color 200ms ease-in-out;
 }
 
@@ -110,3 +116,13 @@ section {
 .bn-demo-button:hover {
   cursor: pointer;
 }
+
+.selected-toggle-btn {
+  background: #6370e5;
+  color: white;
+}
+
+.unselected-toggle-btn {
+  color: #6370e5;
+  background: #ffffffee;
+}