From e30cd6f610e26a420f93423c1a4d6eea181a1463 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 14 Jun 2023 15:55:17 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(frontend):=20capitalize=20?=
 =?UTF-8?q?button=20text=20in=20EditNodeModal=20and=20change=20placeholder?=
 =?UTF-8?q?=20text=20in=20ExtraSidebar=20search=20bar=20=F0=9F=92=84=20sty?=
 =?UTF-8?q?le(frontend):=20improve=20readability=20by=20capitalizing=20the?=
 =?UTF-8?q?=20button=20text=20in=20EditNodeModal=20and=20changing=20the=20?=
 =?UTF-8?q?placeholder=20text=20in=20ExtraSidebar=20search=20bar=20to=20im?=
 =?UTF-8?q?prove=20consistency=20with=20the=20rest=20of=20the=20applicatio?=
 =?UTF-8?q?n.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/modals/EditNodeModal/index.tsx        |  2 +-
 .../src/pages/CommunityPage/index.tsx         | 73 +++++++------------
 .../extraSidebarComponent/index.tsx           |  5 +-
 3 files changed, 29 insertions(+), 51 deletions(-)

diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 0b0f2df5f..144977231 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -317,7 +317,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
             }}
             type="submit"
           >
-            Save changes
+            Save Changes
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/src/frontend/src/pages/CommunityPage/index.tsx b/src/frontend/src/pages/CommunityPage/index.tsx
index 6b8322531..1384dd3a2 100644
--- a/src/frontend/src/pages/CommunityPage/index.tsx
+++ b/src/frontend/src/pages/CommunityPage/index.tsx
@@ -1,42 +1,10 @@
-import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from "../../components/ui/tabs";
-import ExtraSidebar from "../../components/ExtraSidebarComponent";
-import { ReactFlowProvider } from "reactflow";
-import FlowPage from "../FlowPage";
 import { useContext, useEffect, useState } from "react";
-import {
-  SunIcon,
-  MoonIcon,
-  BellIcon,
-  GithubIcon,
-  Download,
-  Upload,
-  Plus,
-  Home,
-  Users2,
-  GitFork,
-} from "lucide-react";
+import { GithubIcon, Users2, GitFork } from "lucide-react";
 import { TabsContext } from "../../contexts/tabsContext";
-import AlertDropdown from "../../alerts/alertDropDown";
 import { alertContext } from "../../contexts/alertContext";
-import { darkContext } from "../../contexts/darkContext";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { typesContext } from "../../contexts/typesContext";
 import { Button } from "../../components/ui/button";
-import { FaGithub } from "react-icons/fa";
 
-import _ from "lodash";
-
-import {
-  getExamples,
-  updateFlowInDatabase,
-  uploadFlowsToDatabase,
-} from "../../controllers/API";
-import { MenuBar } from "../../components/headerComponent/components/menuBar";
+import { getExamples } from "../../controllers/API";
 import { FlowType } from "../../types/flow";
 import { CardComponent } from "../../components/cardComponent";
 import { useNavigate } from "react-router-dom";
@@ -85,24 +53,33 @@ export default function CommunityPage() {
         </div>
       </div>
       <span className="flex pb-8 px-6 w-[70%] text-muted-foreground">
-      Discover and learn from shared examples by the LangFlow community. We welcome new example contributions that can help our community explore new and powerful features.
+        Discover and learn from shared examples by the LangFlow community. We
+        welcome new example contributions that can help our community explore
+        new and powerful features.
       </span>
       <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {!loadingExamples &&
           examples.map((flow, idx) => (
-            <CardComponent key={idx} flow={flow} id={flow.id} button={<Button
-              variant="outline"
-              size="sm"
-              className="whitespace-nowrap "
-              onClick={() => {
-                addFlow(flow, true).then((id) => {
-                  navigate("/flow/" + id);
-                });
-              }}
-            >
-              <GitFork className="w-4 mr-2" />
-              Fork Example
-            </Button>}/>
+            <CardComponent
+              key={idx}
+              flow={flow}
+              id={flow.id}
+              button={
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="whitespace-nowrap "
+                  onClick={() => {
+                    addFlow(flow, true).then((id) => {
+                      navigate("/flow/" + id);
+                    });
+                  }}
+                >
+                  <GitFork className="w-4 mr-2" />
+                  Fork Example
+                </Button>
+              }
+            />
           ))}
       </div>
     </div>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index f445a9b5f..127540db5 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -20,6 +20,7 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 import { alertContext } from "../../../../contexts/alertContext";
 import { updateFlowInDatabase } from "../../../../controllers/API";
 import { INPUT_STYLE } from "../../../../constants";
+import { Input } from "../../../../components/ui/input";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
@@ -122,11 +123,11 @@ export default function ExtraSidebar() {
       </div>
       {/* <Separator /> */}
       <div className="relative mt-2 flex items-center mb-2 mx-2">
-        <input
+        <Input
           type="text"
           name="search"
           id="search"
-          placeholder="Search nodes"
+          placeholder="Search Nodes"
           className={
             INPUT_STYLE +
             "border-1 dark:border-slate-600 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"