update: Pro Plan update (#406)

graphile · Feb 19, 2024 · 827a45c · 827a45c
1 parent 1bb8b27
commit 827a45c
Show file tree

Hide file tree

Showing 8 changed files with 380 additions and 125 deletions.
diff --git a/src/components/Layout/index.scss b/src/components/Layout/index.scss
@@ -573,23 +573,39 @@ h6 code {
 .pricing-table {
   width: 100%;
   border-collapse: collapse;
+  margin-top: 2rem;
 }
 .pricing-table td,
 .pricing-table th {
-  width: 25%;
+  width: 20%;
 }
 .pricing-table thead th {
   @extend .f3;
   @extend .pb3;
-  border-bottom: 2px solid #a51b1b;
+  font-size: 1.2rem;
 }
+
+.pricing-table thead tr:first-child,
+.pricing-table thead tr:first-child th {
+  padding-bottom: 0.5rem;
+}
+
+.pricing-table thead tr:last-child,
+.pricing-table thead tr:last-child th {
+  font-style: italic;
+  color: #555;
+  font-size: 0.8rem;
+  padding-top: 0;
+  border-bottom: 2px solid #2d437d;
+}
+
 .pricing-table tbody th,
 .pricing-table tbody td {
   @extend .pv3;
   @extend .ph1;
 }
 .pricing-table tbody tr {
-  border-bottom: 1px solid #a51b1b;
+  border-bottom: 1px solid #2d437d;
 }
 .pricing-table tbody tr:last-child th,
 .pricing-table tbody tr:last-child td {
@@ -609,10 +625,10 @@ h6 code {
   @extend .f3;
 }
 .pricing-table .fa-check-circle {
-  color: green;
+  color: #4a68b4;
 }
 .pricing-table .fa-times-circle {
-  color: red;
+  color: rgb(255, 71, 81);
 }
 .pricing-table .fa-minus-circle {
   color: #ccc;
@@ -712,22 +728,30 @@ h6 code {
         position: relative;
         padding-left: 40%;
       }
+    }
+    tbody,
+    tfoot {
       td::before {
-        content: "Placeholder";
+        content: "";
         position: absolute;
         left: 0.5rem;
         top: 0;
         font-variant: small-caps;
         font-size: 1.2em;
       }
-      td:nth-of-type(1)::before {
-        content: "Core";
-      }
       td:nth-of-type(2)::before {
-        content: "Supporter";
+        content: "Pro";
       }
       td:nth-of-type(3)::before {
-        content: "Pro";
+        content: "Sponsor+";
+      }
+      td:nth-of-type(4)::before {
+        content: "Enterprise";
+      }
+    }
+    tbody {
+      td:nth-of-type(1)::before {
+        content: "Core";
       }
     }
   }
@@ -749,14 +773,19 @@ h6 code {
   font-weight: normal;
 }
 
+.plan-sponsor {
+  @extend .plan-tag;
+  background-color: rgb(45, 128, 211);
+}
+
 .plan-supporter {
   @extend .plan-tag;
-  background-color: #4d4dff;
+  background-color: rgb(45, 128, 211);
 }
 
 .plan-pro {
   @extend .plan-tag;
-  background-color: #c511c5;
+  background-color: rgb(255, 71, 81);
 }
 .plan-enterprise {
   @extend .plan-tag;
@@ -768,6 +797,55 @@ h6 code {
   }
 }
 
+/* Tooltip container */
+.tooltipped {
+  position: relative;
+  display: inline-block;
+  text-decoration: underline dotted 2px #a1a1a1;
+}
+
+/* Tooltip text */
+.tooltipped > .tooltip-text {
+  display: block;
+  visibility: hidden;
+  width: 220px;
+  background-color: white;
+  border: 2px solid #a1a1a1;
+  color: black;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+}
+
+.tooltipped:hover > .tooltip-text {
+  visibility: visible;
+  top: -5px;
+  left: 105%;
+}
+
+.tooltipped > .tooltip-text::after {
+  content: " ";
+  position: absolute;
+  top: 50%;
+  right: 100%; /* To the left of the tooltip */
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent #555 transparent transparent;
+}
+
+.show-full {
+  display: contents;
+}
+
+.show-mobile {
+  display: none;
+}
+
 // ----------------------------------------
 // Misc media queries
 
@@ -778,6 +856,12 @@ h6 code {
       left: 50%;
     }
   }
+  .show-full {
+    display: none;
+  }
+  .show-mobile {
+    display: contents;
+  }
 }
 
 @media screen and (max-width: 30em) {

diff --git a/src/pages/postgraphile/live-queries.md b/src/pages/postgraphile/live-queries.md
@@ -249,7 +249,7 @@ lot more that can be done to optimise our logical decoding support, so if you
 get to a point where logical decoding performance is an issue, please get in
 touch!
 
-Optimisation steps you can take currently:
+Optimization steps you can take currently:
 
 - Whitelist (or otherwise limit) the live queries that your system may perform
 - Only write small non-overlapping live queries - since the entire query must
@@ -261,12 +261,12 @@ Optimisation steps you can take currently:
 - Move the logical decoding system to a dedicated server
 - Add more `liveConditions` to queries to filter rows the user may not see so
   that they do not trigger live updates for that user (TODO: document this!)
-- Use read replicas [PRO]
+- Use read replicas [PRO]&nbsp;[SPON]
 
 We do not currently recommend live queries for very large deployments - if
 you're expecting tens of thousands of concurrent users it's going to be
 significantly more efficient to use regular
-[subscriptions](/postgraphile/subscriptions/)
+[subscriptions](/postgraphile/subscriptions/).
 
 ### Scaling
 

diff --git a/src/pages/postgraphile/plugins.md b/src/pages/postgraphile/plugins.md
@@ -33,8 +33,8 @@ There are also a couple of first-party plugins that may be purchased on the
 
 - ~~`@graphile/supporter`~~ - all features now OSS via `@graphile/pg-pubsub`
   plugin
-- `@graphile/pro` [PRO] - includes protections that can be mounted in front of
-  PostGraphile to protect it from malicious actors
+- `@graphile/pro` [PRO]&nbsp;[SPON] - includes protections that can be mounted
+  in front of PostGraphile to protect it from malicious actors
 
 To use these premium plugins you will need a `GRAPHILE_LICENSE` environmental
 variable to be present, as in these examples: