Fix text color in Flex container (#1200)

Author: sfc-gh-dmatthews

components/layouts/flex.js

@@ -1,8 +1,15 @@
 import styles from "./flex.module.css";
+import classNames from "classnames";
 
 // Simple horizontal flex container used for MDX.
-const Flex = ({ children }) => {
-  return <section className={styles.Container}>{children}</section>;
+const Flex = ({ wrap = false, children }) => {
+  return (
+    <section
+      className={classNames(styles.Container, wrap ? styles.wrapContainer : "")}
+    >
+      {children}
+    </section>
+  );
 };
 
 export default Flex;

components/layouts/flex.module.css

@@ -1,3 +1,11 @@
 .Container {
-  @apply flex flex-col lg:flex-row;
+  @apply flex flex-col lg:flex-row text-gray-90;
+}
+
+:global(.dark) .Container {
+  @apply text-gray-40;
+}
+
+.wrapContainer {
+  @apply flex-wrap flex-row;
 }

content/deploy/community-cloud/status-and-limitations.md

@@ -62,7 +62,7 @@ If you need to whitelist IP addresses for a connection, Community Cloud is curre
 
 </Warning>
 
-<div style={{ display: "flex", flexWrap: "wrap", flexDirection: "row", alignItems: "start" }}>
+<Flex wrap >
     <div style={{ width: "150px" }}>35.230.127.150</div>
     <div style={{ width: "150px" }}>35.203.151.101</div>
     <div style={{ width: "150px" }}>34.19.100.134</div>
@@ -81,7 +81,7 @@ If you need to whitelist IP addresses for a connection, Community Cloud is curre
     <div style={{ width: "150px" }}>35.227.190.87</div>
     <div style={{ width: "150px" }}>35.199.156.97</div>
     <div style={{ width: "150px" }}>34.82.135.155</div>
-</div>
+</Flex>
 
 ## Other limitations