🎨 style(frontend): capitalize button text in EditNodeModal and change placeholder text in ExtraSidebar search bar

💄 style(frontend): improve readability by capitalizing the button text in EditNodeModal and changing the placeholder text in ExtraSidebar search bar to improve consistency with the rest of the application.

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>

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>

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"