[DIR-1017] make logo changeable

.env.example

@@ -7,6 +7,12 @@
 # e2e tests will also run against this API
 VITE_DEV_API_DOMAIN="http://api.for.development.com"
 
+# path to custom logos inside the public folder. You alway have to provide both
+# paths, one for light mode and one for dark mode. We recommend putting them in
+# the public/custom folder as this folder is ignored by git.
+VITE_LOGO_PATH_LIGHT_MODE="custom/logo-light-mode.svg"
+VITE_LOGO_PATH_DARK_MODE="custom/logo-dark-mode.svg"
+
 # the base url on which the UI is served, must start and end with a /, can be undefined
 VITE_BASE="/ui/"
 

.gitignore

@@ -145,5 +145,7 @@ storybook-static
 /playwright-report/
 /playwright/.cache/
 
+/public/custom/*
+
 .vscode/*
 !.vscode/extensions.json

Dockerfile

@@ -11,7 +11,7 @@ COPY . .
 
 RUN yarn install
 # If this causes problems on github actions: A potential fix is to change the builder image to `node:alpine`
-RUN VITE_APP_VERSION=$FULL_VERSION yarn build
+RUN yarn build
 
 # production environment
 FROM nginx:bookworm

Dockerfile.base

@@ -2,6 +2,8 @@ FROM node:18.18.1 as build
 
 ARG FULL_VERSION
 ARG IS_ENTERPRISE=FALSE
+ARG LOGO_PATH_LIGHT_MODE
+ARG LOGO_PATH_DARK_MODE
 ARG UI_BASE=/
 
 RUN echo "building $FULL_VERSION"
@@ -14,6 +16,4 @@ COPY . .
 RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install
 
 # If this causes problems on github actions: A potential fix is to change the builder image to `node:alpine`
-RUN VITE_APP_VERSION=$FULL_VERSION VITE_BASE=${UI_BASE} VITE_IS_ENTERPRISE=${IS_ENTERPRISE} yarn build
-
-
+RUN VITE_BASE=${UI_BASE} VITE_IS_ENTERPRISE=${IS_ENTERPRISE} VITE_LOGO_PATH_LIGHT_MODE=${LOGO_PATH_LIGHT_MODE} VITE_LOGO_PATH_DARK_MODE=${LOGO_PATH_DARK_MODE} yarn build

Dockerfile.dev

@@ -0,0 +1,25 @@
+FROM node:18.18.1 as build
+
+ARG FULL_VERSION
+ARG IS_ENTERPRISE=FALSE
+ARG LOGO_PATH_LIGHT_MODE
+ARG LOGO_PATH_DARK_MODE
+
+RUN echo "building $FULL_VERSION"
+WORKDIR /app
+
+ENV PATH /app/node_modules/.bin:$PATH
+
+COPY . .
+
+RUN yarn install
+# If this causes problems on github actions: A potential fix is to change the builder image to `node:alpine`
+RUN VITE_BASE=/ui/ VITE_IS_ENTERPRISE=${IS_ENTERPRISE} VITE_LOGO_PATH_LIGHT_MODE=${LOGO_PATH_LIGHT_MODE} VITE_LOGO_PATH_DARK_MODE=${LOGO_PATH_DARK_MODE} yarn build
+
+# production environment
+FROM nginx:stable-alpine
+
+COPY --from=build /app/dist /usr/share/nginx/html/ui
+COPY conf/nginx.dev.conf /etc/nginx/conf.d/default.conf
+
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -39,7 +39,11 @@ This repository contains the user interface for [direktiv](https://github.com/di
   - `yarn run check:prettier` checks if all prettier formatting was applied (`yarn run prettier`)
 - `yarn run e2e:headless` runs all Playwright e2e tests in headless mode
 - `yarn run e2e:ui` runs all Playwright e2e tests in ui mode
+<<<<<<< HEAD
+- `yarn run preview` locally preview the production build (requires you to run `pnpm build` first)
+=======
 - `yarn run preview` locally preview the production build (requires you to run `yarn build` first)
+>>>>>>> main
 
 # Recommended Development Environment
 

package.json

@@ -165,4 +165,4 @@
     "vitest": "^0.28.2",
     "yalc": "^1.0.0-pre.53"
   }
-}
+}

src/components/Authdialog/index.tsx

@@ -14,7 +14,7 @@ import Button from "~/design/Button";
 import FormErrors from "../FormErrors";
 import Input from "~/design/Input";
 import { InputWithButton } from "~/design/InputWithButton";
-import Logo from "~/design/Logo";
+import Logo from "../Logo";
 import { useAuthenticate } from "~/api/authenticate/mutate/authenticate";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";

src/components/Logo/index.tsx

@@ -0,0 +1,45 @@
+import { FC } from "react";
+import LogoDesignComponent from "~/design/Logo";
+import env from "~/config/env";
+import { useTheme } from "~/util/store/theme";
+
+type AppLogoProps = {
+  className?: string;
+  iconOnly?: boolean;
+};
+
+const basePath = `${env.VITE_BASE ?? "/"}`;
+
+const Logo: FC<AppLogoProps> = ({ className, iconOnly }) => {
+  const {
+    VITE_LOGO_PATH_DARK_MODE: pathDarkMode,
+    VITE_LOGO_PATH_LIGHT_MODE: pathLightMode,
+  } = env;
+
+  const theme = useTheme();
+
+  if (pathLightMode && pathDarkMode) {
+    return (
+      <div className={className}>
+        <div className="flex h-[32px] w-[134px] grow items-center">
+          <LogoDesignComponent
+            customLogo
+            pathLightMode={`${basePath}${pathLightMode}`}
+            pathDarkMode={`${basePath}${pathDarkMode}`}
+            useDarkMode={theme === "dark"}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <LogoDesignComponent
+      className={className}
+      iconOnly={iconOnly}
+      customLogo={false}
+    />
+  );
+};
+
+export default Logo;

src/config/env/schema.ts

@@ -2,6 +2,8 @@ import { z } from "zod";
 
 export const envVariablesSchema = z.object({
   VITE_DEV_API_DOMAIN: z.string().optional(),
+  VITE_LOGO_PATH_LIGHT_MODE: z.string().optional(),
+  VITE_LOGO_PATH_DARK_MODE: z.string().optional(),
   VITE_IS_ENTERPRISE: z
     .string()
     .optional()

src/design/Appshell/index.stories.tsx

@@ -254,7 +254,7 @@ export const MoreDetailedShell = () => {
     <Root>
       <Drawer>
         <DrawerContent>
-          <Logo className="mx-2 mb-5 mt-1 h-8 w-auto" />
+          <Logo className="mx-2 mb-5 mt-1 h-8 w-auto" customLogo={false} />
           {navigation.map((item) => (
             <NavigationLink
               key={item.name}
@@ -274,10 +274,14 @@ export const MoreDetailedShell = () => {
               </DrawerTrigger>
             </label>
             <Logo
+              customLogo={false}
               iconOnly
               className="h-8 w-auto justify-self-center sm:hidden"
             />
-            <Logo className="hidden h-8 w-auto justify-self-center sm:block" />
+            <Logo
+              customLogo={false}
+              className="hidden h-8 w-auto justify-self-center sm:block"
+            />
             <TopRightComponent
               className="justify-self-end lg:hidden"
               theme={theme}

src/design/Drawer/index.stories.tsx

@@ -21,7 +21,7 @@ export const Default = () => (
       </div>
     </div>
     <DrawerContent>
-      <Logo className="mx-2 mb-5 mt-1 h-8 w-auto" />
+      <Logo className="mx-2 mb-5 mt-1 h-8 w-auto" customLogo={false} />
       This is the <code>DrawerMenu</code> component. Menu content goes here.
     </DrawerContent>
   </Drawer>

src/design/Logo/index.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import Logo from "./index";
+import { Switch } from "../Switch";
+import { useState } from "react";
 
 const meta = {
   title: "Components/Logo",
@@ -10,13 +12,11 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: ({ ...args }) => <Logo {...args} />,
+  render: ({ ...args }) => <Logo {...args} customLogo={false} />,
+  args: {
+    customLogo: false,
+  },
   argTypes: {
-    className: {
-      table: {
-        disable: true,
-      },
-    },
     iconOnly: {
       description: "icon version of the logo",
       control: "boolean",
@@ -27,15 +27,49 @@ export const Default: Story = {
 
 export const WithOrWithoutLogo = () => (
   <div className="flex space-x-5">
-    <Logo />
-    <Logo iconOnly />
+    <Logo customLogo={false} />
+    <Logo iconOnly customLogo={false} />
   </div>
 );
 
-export const PassClassnames = () => (
+export const PassClassNames = () => (
   <div className="flex space-x-5">
-    <Logo className="w-20" />
-    <Logo className="w-24" />
-    <Logo />
+    <Logo className="w-20" customLogo={false} />
+    <Logo className="w-24" customLogo={false} />
+    <Logo customLogo={false} />
   </div>
 );
+
+export const CustomLogo = () => {
+  const [darkMode, setDarkmode] = useState(false);
+  return (
+    <div className="flex flex-col gap-5">
+      <div>
+        providing a custom logo to the component, requires to set a path for
+        both light and dark mode and explicitly set the useDarkMode prop to
+        either true or false.
+      </div>
+      <div>
+        The custom logo
+        <label htmlFor="dark-mode" style={{ paddingRight: 15 }}>
+          Dark Mode
+        </label>
+        <Switch
+          id="dark-mode"
+          value={darkMode ? "on" : "off"}
+          onCheckedChange={(newVal) => {
+            setDarkmode(newVal);
+          }}
+        />
+      </div>
+      <div>
+        <Logo
+          customLogo={true}
+          pathLightMode="https://placehold.jp/f5f5f5/000000/160x30.png"
+          pathDarkMode="https://placehold.jp/000000/ffffff/160x30.png"
+          useDarkMode={darkMode}
+        />
+      </div>
+    </div>
+  );
+};

src/design/Logo/index.tsx

@@ -1,11 +1,34 @@
-const Logo = ({
-  className,
-  iconOnly,
-}: {
-  className?: string;
+import clsx from "clsx";
+
+type DirektivLogoProps = {
+  customLogo: false;
   iconOnly?: boolean;
-}): JSX.Element =>
-  iconOnly ? (
+};
+
+type CustomLogoProps = {
+  customLogo: true;
+  pathLightMode: string;
+  pathDarkMode: string;
+  useDarkMode: boolean;
+};
+
+type LogoProps = {
+  className?: string;
+} & (DirektivLogoProps | CustomLogoProps);
+
+const Logo = (props: LogoProps) => {
+  const { className } = props;
+
+  if (props.customLogo) {
+    return (
+      <img
+        src={props.useDarkMode ? props.pathDarkMode : props.pathLightMode}
+        className={clsx(className)}
+      />
+    );
+  }
+
+  return props.iconOnly ? (
     <svg
       width="32"
       height="30"
@@ -75,5 +98,6 @@ const Logo = ({
       />
     </svg>
   );
+};
 
 export default Logo;

src/pages/OnboardingPage.tsx

@@ -5,7 +5,7 @@ import { useNamespace, useNamespaceActions } from "~/util/store/namespace";
 
 import Alert from "~/design/Alert";
 import Button from "~/design/Button";
-import Logo from "~/design/Logo";
+import Logo from "~/components/Logo";
 import NamespaceCreate from "~/components/NamespaceEdit";
 import { pages } from "~/util/router/pages";
 import { useListNamespaces } from "~/api/namespaces/query/get";

src/pages/namespace/Layout.tsx

@@ -14,7 +14,7 @@ import { Outlet, useParams } from "react-router-dom";
 import { useNamespace, useNamespaceActions } from "~/util/store/namespace";
 
 import Breadcrumb from "~/components/Breadcrumb";
-import Logo from "~/design/Logo";
+import Logo from "~/components/Logo";
 import { Menu } from "lucide-react";
 import Navigation from "~/components/Navigation";
 import NotificationMenu from "~/components/NotificationMenu";

src/util/router/ErrorPage.tsx

@@ -2,7 +2,7 @@ import { ArrowLeft, Home, RefreshCcw } from "lucide-react";
 import { Link, isRouteErrorResponse, useRouteError } from "react-router-dom";
 
 import Button from "~/design/Button";
-import Logo from "~/design/Logo";
+import Logo from "~/components/Logo";
 import { useTranslation } from "react-i18next";
 
 const ErrorPage = () => {