From aa7338bf6752341f76757d2b393333f65ce526c8 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Wed, 3 Apr 2024 20:45:53 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20(components.mdx):=20update=20mar?=
 =?UTF-8?q?gin=20style=20of=20ZoomableImage=20to=20improve=20spacing=20?=
 =?UTF-8?q?=F0=9F=93=9D=20(features.mdx):=20update=20margin=20style=20of?=
 =?UTF-8?q?=20ZoomableImage=20to=20improve=20spacing=20=F0=9F=93=9D=20(log?=
 =?UTF-8?q?in.mdx):=20update=20margin=20style=20of=20ZoomableImage=20to=20?=
 =?UTF-8?q?improve=20spacing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/guidelines/components.mdx | 3 ++-
 docs/docs/guidelines/features.mdx   | 5 ++---
 docs/docs/guidelines/login.mdx      | 7 ++++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/docs/docs/guidelines/components.mdx b/docs/docs/guidelines/components.mdx
index 32ec00615..16aa83eff 100644
--- a/docs/docs/guidelines/components.mdx
+++ b/docs/docs/guidelines/components.mdx
@@ -26,13 +26,14 @@ Components are the building blocks of the flows. They are made of inputs, output
 </div>
 
 {" "}
+
 <ZoomableImage
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/single-compenent.png"),
     dark: useBaseUrl("img/single-compenent.png"),
   }}
-  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+  style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}
 />
 
 <div style={{ marginBottom: "20px" }}>
diff --git a/docs/docs/guidelines/features.mdx b/docs/docs/guidelines/features.mdx
index 6f50abb35..d4998edb6 100644
--- a/docs/docs/guidelines/features.mdx
+++ b/docs/docs/guidelines/features.mdx
@@ -1,4 +1,3 @@
-
 # Features
 
 <div style={{ marginBottom: "20px" }}>
@@ -9,13 +8,14 @@
 </div>
 
 {" "}
+
 <ZoomableImage
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/features.png"),
     dark: useBaseUrl("img/features.png"),
   }}
-  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+  style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}
 />
 
 <div style={{ marginBottom: "20px" }}>
@@ -63,7 +63,6 @@ The example below shows a Python script making a POST request to a local API end
   <ReactPlayer playing controls url="/videos/langflow_api.mp4" />
 </div>
 
-
 import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import ZoomableImage from "/src/theme/ZoomableImage.js";
diff --git a/docs/docs/guidelines/login.mdx b/docs/docs/guidelines/login.mdx
index fde7cd09a..1d5a1d031 100644
--- a/docs/docs/guidelines/login.mdx
+++ b/docs/docs/guidelines/login.mdx
@@ -105,7 +105,7 @@ Users can change their profile settings by clicking on the profile icon in the t
     light: useBaseUrl("img/my-account.png"),
     dark: useBaseUrl("img/my-account.png"),
   }}
-  style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
+  style={{ width: "50%", maxWidth: "600px", margin: "20px auto" }}
 />
 
 By clicking on **Profile Settings**, the user is taken to the profile settings page, where they can change their password and their profile picture.
@@ -116,10 +116,11 @@ By clicking on **Profile Settings**, the user is taken to the profile settings p
     light: useBaseUrl("img/profile-settings.png"),
     dark: useBaseUrl("img/profile-settings.png"),
   }}
-  style={{ maxWidth: "600px", margin: "0 auto" }}
+  style={{ maxWidth: "600px", margin: "20px auto" }}
 />
 
-By clicking on **Admin Page**, the superuser is taken to the admin page, where they can manage users and groups.
+By clicking on **Admin Page**, the superuser is taken to the admin page, where they
+can manage users and groups.
 
 <ZoomableImage
   alt="Docusaurus themed image"