feat: Implement new Langflow Logo throughout the application (#4509)

* Logo changes

* favicons

* [autofix.ci] apply automated fixes

* pr comment: use tailing height/width

* tiny feature flag wrapping fix

* update favicon

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/favicon2.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

src/frontend/package-lock.json

@@ -835,6 +835,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {

src/frontend/src/assets/LangflowLogo.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="22" viewBox="0 0 24 22" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="22" viewBox="0 0 24 22" fill="currentColor">
   <path d="M13.0486 0.462158H9.75399C9.44371 0.462158 9.14614 0.586082 8.92674 0.806667L4.03751 5.72232C3.81811 5.9429 3.52054 6.06682 3.21026 6.06682H1.16992C0.511975 6.06682 -0.0165756 6.61212 0.000397655 7.2734L0.0515933 9.26798C0.0679586 9.90556 0.586745 10.4139 1.22111 10.4139H3.59097C3.90124 10.4139 4.19881 10.2899 4.41821 10.0694L9.34823 5.11269C9.56763 4.89211 9.8652 4.76818 10.1755 4.76818H13.0486C13.6947 4.76818 14.2185 4.24157 14.2185 3.59195V1.63839C14.2185 0.988773 13.6947 0.462158 13.0486 0.462158Z" />
   <path d="M19.5355 11.5862H22.8301C23.4762 11.5862 24 12.1128 24 12.7624V14.716C24 15.3656 23.4762 15.8922 22.8301 15.8922H19.957C19.6467 15.8922 19.3491 16.0161 19.1297 16.2367L14.1997 21.1934C13.9803 21.414 13.6827 21.5379 13.3725 21.5379H11.0026C10.3682 21.5379 9.84945 21.0296 9.83309 20.392L9.78189 18.3974C9.76492 17.7361 10.2935 17.1908 10.9514 17.1908H12.9918C13.302 17.1908 13.5996 17.0669 13.819 16.8463L18.7082 11.9307C18.9276 11.7101 19.2252 11.5862 19.5355 11.5862Z" />
   <path d="M19.5355 2.9796L22.8301 2.9796C23.4762 2.9796 24 3.50622 24 4.15583V6.1094C24 6.75901 23.4762 7.28563 22.8301 7.28563H19.957C19.6467 7.28563 19.3491 7.40955 19.1297 7.63014L14.1997 12.5868C13.9803 12.8074 13.6827 12.9313 13.3725 12.9313H10.493C10.1913 12.9313 9.90126 13.0485 9.68346 13.2583L4.14867 18.5917C3.93087 18.8016 3.64085 18.9187 3.33917 18.9187H1.32174C0.675616 18.9187 0.151832 18.3921 0.151832 17.7425V15.7343C0.151832 15.0846 0.675616 14.558 1.32174 14.558H3.32468C3.63496 14.558 3.93253 14.4341 4.15193 14.2135L9.40827 8.92878C9.62767 8.70819 9.92524 8.58427 10.2355 8.58427H12.9918C13.302 8.58427 13.5996 8.46034 13.819 8.23976L18.7082 3.32411C18.9276 3.10353 19.2252 2.9796 19.5355 2.9796Z" />

src/frontend/src/components/appHeaderComponent/assets/ChainIcon.svg

@@ -1,6 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="#A6AAAE"
-  xmlns="http://www.w3.org/2000/svg">
-  <g id="chains">
-    <path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M0.75 13.5V15.75H2.25V13.5C2.25 12.5251 2.87833 11.6899 3.75 11.3793V12.75H5.25V11.3793C6.12167 11.6899 6.75 12.5251 6.75 13.5V15.75H8.25V13.5C8.25 11.6868 6.96101 10.1729 5.25 9.82512V8.17488C6.96101 7.82712 8.25 6.31318 8.25 4.5V2.25H6.75V4.5C6.75 5.47486 6.12167 6.31008 5.25 6.6207V5.25H3.75V6.6207C2.87833 6.31008 2.25 5.47486 2.25 4.5V2.25H0.75V4.5C0.75 6.31318 2.03899 7.82712 3.75 8.17488V9.82512C2.03899 10.1729 0.75 11.6868 0.75 13.5ZM9 8.25V7.5C9 5.68682 10.289 4.17288 12 3.82512V2.25H13.5V3.82512C15.211 4.17288 16.5 5.68682 16.5 7.5V8.25V10.5C16.5 12.3132 15.211 13.8271 13.5 14.1749V15.75H12V14.1749C10.289 13.8271 9 12.3132 9 10.5V8.25ZM13.5 12.6207V11.25H12V12.6207C11.1283 12.3101 10.5 11.4749 10.5 10.5V8.25V7.5C10.5 6.52514 11.1283 5.68992 12 5.3793V6.75H13.5V5.3793C14.3717 5.68992 15 6.52514 15 7.5V8.25V10.5C15 11.4749 14.3717 12.3101 13.5 12.6207Z"/>
-  </g>
-</svg>

src/frontend/src/components/appHeaderComponent/assets/ExpandMoreIcon.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="#232425">
-  <path d="M13.825 6.9125L10 10.7292L6.175 6.9125L5 8.0875L10 13.0875L15 8.0875L13.825 6.9125Z"/>
-</svg>

src/frontend/src/components/appHeaderComponent/assets/FeedbackIcon.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="#090909">
-  <path d="M14.25 1.125H3.75C2.925 1.125 2.25 1.8 2.25 2.625V13.125C2.25 13.95 2.925 14.625 3.75 14.625H6.75L9 16.875L11.25 14.625H14.25C15.075 14.625 15.75 13.95 15.75 13.125V2.625C15.75 1.8 15.075 1.125 14.25 1.125ZM14.25 13.125H10.6275L9 14.7525L7.3725 13.125H3.75V2.625H14.25V13.125ZM9 12.375L10.41 9.285L13.5 7.875L10.41 6.465L9 3.375L7.59 6.465L4.5 7.875L7.59 9.285L9 12.375Z"/>
-</svg>

src/frontend/src/components/appHeaderComponent/assets/OrgSelectorIcon.svg

@@ -1,8 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
-  xmlns="http://www.w3.org/2000/svg" fill="#A6AAAE">
-  <g id="account">
-    <g id="Vector">
-      <path d="M16.5 8.25V2.25H11.25V4.5H6.75V2.25H1.5V8.25H6.75V6H8.25V13.5H11.25V15.75H16.5V9.75H11.25V12H9.75V6H11.25V8.25H16.5ZM5.25 6.75H3V3.75H5.25V6.75ZM12.75 11.25H15V14.25H12.75V11.25ZM12.75 3.75H15V6.75H12.75V3.75Z" />
-    </g>
-  </g>
-</svg>

src/frontend/src/components/appHeaderComponent/assets/ScienceOutlinedIcon.svg

@@ -1,3 +0,0 @@
-<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ScienceOutlinedIcon">
-  <path d="M13 11.33 18 18H6l5-6.67V6h2m2.96-2H8.04c-.42 0-.65.48-.39.81L9 6.5v4.17L3.2 18.4c-.49.66-.02 1.6.8 1.6h16c.82 0 1.29-.94.8-1.6L15 10.67V6.5l1.35-1.69c.26-.33.03-.81-.39-.81"></path>
-</svg>

src/frontend/src/components/appHeaderComponent/index.tsx

@@ -1,4 +1,6 @@
 import AlertDropdown from "@/alerts/alertDropDown";
+import DataStaxLogo from "@/assets/DataStaxLogo.svg?react";
+import LangflowLogo from "@/assets/LangflowLogo.svg?react";
 import ShadTooltip from "@/components/shadTooltipComponent";
 import { CustomOrgSelector } from "@/customization/components/custom-org-selector";
 import { CustomProductSelector } from "@/customization/components/custom-product-selector";
@@ -13,8 +15,6 @@ import { useEffect, useRef, useState } from "react";
 import ForwardedIconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
-import ShortDataStaxLogo from "./assets/ShortDataStaxLogo.svg?react";
-import ShortLangFlowIcon from "./assets/ShortLangFlowIcon.svg?react";
 import { AccountMenu } from "./components/AccountMenu";
 import FlowMenu from "./components/FlowMenu";
 import GithubStarComponent from "./components/GithubStarButton";
@@ -57,14 +57,14 @@ export default function AppHeader(): JSX.Element {
           data-testid="icon-ChevronLeft"
         >
           {ENABLE_DATASTAX_LANGFLOW ? (
-            <ShortDataStaxLogo className="fill-black dark:fill-[white]" />
+            <DataStaxLogo className="fill-black dark:fill-[white]" />
           ) : ENABLE_NEW_LOGO ? (
-            <ShortLangFlowIcon className="h-5 w-5 fill-black dark:fill-[white]" />
+            <LangflowLogo className="h-5 w-6" />
           ) : (
             <span className="fill-black text-2xl dark:fill-white">⛓️</span>
           )}
         </Button>
-        {!ENABLE_DATASTAX_LANGFLOW && (
+        {ENABLE_DATASTAX_LANGFLOW && (
           <>
             <CustomOrgSelector />
             <CustomProductSelector />

src/frontend/src/customization/feature-flags.ts

@@ -7,6 +7,6 @@ export const ENABLE_BRANDING = true;
 export const ENABLE_MVPS = false;
 export const ENABLE_CUSTOM_PARAM = false;
 export const ENABLE_INTEGRATIONS = false;
-export const ENABLE_NEW_LOGO = false;
+export const ENABLE_NEW_LOGO = true;
 export const ENABLE_DATASTAX_LANGFLOW = false;
 export const ENABLE_HOMEPAGE = true;

src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/chatLogoIcon/index.tsx

@@ -1,14 +1,22 @@
-import logo from "/src/assets/logo.svg";
+import LangflowLogo from "@/assets/LangflowLogo.svg?react";
+import ChainLogo from "@/assets/logo.svg?react";
+import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
 
 export default function LogoIcon() {
   return (
     <div className="relative flex h-8 w-8 items-center justify-center rounded-md bg-muted">
       <div className="flex h-8 w-8 items-center justify-center">
-        <img
-          src={logo}
-          alt="Chain logo"
-          className="absolute h-[18px] w-[18px]"
-        />
+        {ENABLE_NEW_LOGO ? (
+          <LangflowLogo
+            title="Langflow Logo"
+            className="absolute h-[18px] w-[18px]"
+          />
+        ) : (
+          <ChainLogo
+            title="Langflow Logo"
+            className="absolute h-[18px] w-[18px]"
+          />
+        )}
       </div>
     </div>
   );

src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx

@@ -1,5 +1,8 @@
+import LangflowLogo from "@/assets/LangflowLogo.svg?react";
+import ChainLogo from "@/assets/logo.svg?react";
 import { TextEffectPerChar } from "@/components/ui/textAnimation";
 import { TextShimmer } from "@/components/ui/TextShimmer";
+import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
 import { useMessagesStore } from "@/stores/messagesStore";
 import { useEffect, useRef, useState } from "react";
@@ -144,11 +147,17 @@ export default function ChatView({
         ) : (
           <div className="flex h-full w-full flex-col items-center justify-center">
             <div className="flex flex-col items-center justify-center gap-4 p-8">
-              <img
-                src="/src/assets/logo.svg"
-                alt="Chain logo"
-                className="h-[40px] w-[40px] scale-[1.5]"
-              />
+              {ENABLE_NEW_LOGO ? (
+                <LangflowLogo
+                  title="Langflow logo"
+                  className="h-10 w-10 scale-[1.5]"
+                />
+              ) : (
+                <ChainLogo
+                  title="Langflow logo"
+                  className="h-10 w-10 scale-[1.5]"
+                />
+              )}
               <div className="flex flex-col items-center justify-center">
                 <h3 className="mt-2 pb-2 text-2xl font-semibold text-primary">
                   New chat

src/frontend/src/pages/AdminPage/LoginPage/index.tsx

@@ -1,4 +1,6 @@
+import LangflowLogo from "@/assets/LangflowLogo.svg?react";
 import { useLoginUser } from "@/controllers/API/queries/auth";
+import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
 import { useContext, useState } from "react";
 import { Button } from "../../../components/ui/button";
 import { Input } from "../../../components/ui/input";
@@ -49,7 +51,14 @@ export default function LoginAdminPage() {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center bg-muted">
       <div className="flex w-72 flex-col items-center justify-center gap-2">
-        <span className="mb-4 text-5xl">⛓️</span>
+        {ENABLE_NEW_LOGO ? (
+          <LangflowLogo
+            title="Langflow logo"
+            className="h-10 w-10 scale-[1.5]"
+          />
+        ) : (
+          <span className="mb-4 text-5xl">⛓️</span>
+        )}
         <span className="mb-6 text-2xl font-semibold text-primary">Admin</span>
         <Input
           onChange={({ target: { value } }) => {

src/frontend/src/pages/DeleteAccountPage/index.tsx

@@ -1,3 +1,5 @@
+import LangflowLogo from "@/assets/LangflowLogo.svg?react";
+import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
 import { useState } from "react";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
@@ -17,7 +19,14 @@ export default function DeleteAccountPage() {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center bg-muted">
       <div className="flex w-72 flex-col items-center justify-center gap-2">
-        <span className="mb-4 text-5xl">⛓️</span>
+        {ENABLE_NEW_LOGO ? (
+          <LangflowLogo
+            title="Langflow logo"
+            className="mb-4 h-10 w-10 scale-[1.5]"
+          />
+        ) : (
+          <span className="mb-4 text-5xl">⛓️</span>
+        )}
         <span className="mb-4 text-center text-2xl font-semibold text-primary">
           Delete your account
         </span>

src/frontend/src/pages/LoginPage/index.tsx

@@ -1,5 +1,7 @@
+import LangflowLogo from "@/assets/LangflowLogo.svg?react";
 import { useLoginUser } from "@/controllers/API/queries/auth";
 import { CustomLink } from "@/customization/components/custom-link";
+import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
 import * as Form from "@radix-ui/react-form";
 import { useContext, useState } from "react";
 import InputComponent from "../../components/inputComponent";
@@ -65,7 +67,14 @@ export default function LoginPage(): JSX.Element {
     >
       <div className="flex h-full w-full flex-col items-center justify-center bg-muted">
         <div className="flex w-72 flex-col items-center justify-center gap-2">
-          <span className="mb-4 text-5xl">⛓️</span>
+          {ENABLE_NEW_LOGO ? (
+            <LangflowLogo
+              title="Langflow logo"
+              className="mb-4 h-10 w-10 scale-[1.5]"
+            />
+          ) : (
+            <span className="mb-4 text-5xl">⛓️</span>
+          )}
           <span className="mb-6 text-2xl font-semibold text-primary">
             Sign in to Langflow
           </span>

src/frontend/src/pages/MainPage/pages/emptyPage/index.tsx

@@ -1,4 +1,4 @@
-import ShortLangFlowIcon from "@/components/appHeaderComponent/assets//ShortLangFlowIcon.svg?react";
+import LangflowLogo from "@/assets/LangflowLogo.svg?react";
 import ForwardedIconComponent from "@/components/genericIconComponent";
 import { Button } from "@/components/ui/button";
 import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
@@ -16,7 +16,7 @@ export const EmptyPage = ({ setOpenModal }: EmptyPageProps) => {
       <div className="text-container">
         <div className="relative z-20 flex w-full flex-col items-center justify-center gap-2">
           {ENABLE_NEW_LOGO ? (
-            <ShortLangFlowIcon className="h-7 w-7 fill-foreground" />
+            <LangflowLogo className="h-7 w-8" />
           ) : (
             <span className="fill-foreground text-4xl">⛓️</span>
           )}

src/frontend/src/pages/SignUpPage/index.tsx

@@ -1,5 +1,7 @@
+import LangflowLogo from "@/assets/LangflowLogo.svg?react";
 import { useAddUser } from "@/controllers/API/queries/auth";
 import { CustomLink } from "@/customization/components/custom-link";
+import { ENABLE_NEW_LOGO } from "@/customization/feature-flags";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import { track } from "@/customization/utils/analytics";
 import * as Form from "@radix-ui/react-form";
@@ -89,9 +91,16 @@ export default function SignUp(): JSX.Element {
     >
       <div className="flex h-full w-full flex-col items-center justify-center bg-muted">
         <div className="flex w-72 flex-col items-center justify-center gap-2">
-          <span className="mb-4 text-5xl">⛓️</span>
+          {ENABLE_NEW_LOGO ? (
+            <LangflowLogo
+              title="Langflow logo"
+              className="mb-4 h-10 w-10 scale-[1.5]"
+            />
+          ) : (
+            <span className="mb-4 text-5xl">⛓️</span>
+          )}
           <span className="mb-6 text-2xl font-semibold text-primary">
-            Sign up to Langflow
+            Sign up for Langflow
           </span>
           <div className="mb-3 w-full">
             <Form.Field name="username">