From 1f180513193b42b7c01ea0e02b207c4a0619cb3a Mon Sep 17 00:00:00 2001
From: Victor Tortolero <victormtortolero@gmail.com>
Date: Fri, 18 Nov 2022 15:46:07 -0600
Subject: [PATCH] add warning message

---
 packages/graphiql/src/components/GraphiQL.tsx | 5 ++++-
 packages/graphiql/src/style.css               | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
index 22d92892507..22ea611a36a 100644
--- a/packages/graphiql/src/components/GraphiQL.tsx
+++ b/packages/graphiql/src/components/GraphiQL.tsx
@@ -756,7 +756,10 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
                 Persist headers
               </div>
               <div className="graphiql-dialog-section-caption">
-                Save headers upon reloading.
+                Save headers upon reloading.{' '}
+                <span className="graphiql-warning-text">
+                  Only enable if you trust this device.
+                </span>
               </div>
             </div>
             <ButtonGroup>
diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
index 758a0e1184b..8d7f15c145b 100644
--- a/packages/graphiql/src/style.css
+++ b/packages/graphiql/src/style.css
@@ -310,6 +310,11 @@ reach-portal .graphiql-dialog-section-caption {
   color: hsla(var(--color-neutral), var(--alpha-secondary));
 }
 
+reach-portal .graphiql-warning-text {
+  color: hsl(var(--color-warning));
+  font-weight: var(--font-weight-medium);
+}
+
 reach-portal .graphiql-table {
   border-collapse: collapse;
   width: 100%;