finalize

app/components/Dropdown.module.css

@@ -1,19 +1,19 @@
 .select-container {
-  @apply border border-gray-50;
+  @apply border border-gray-200;
 }
-  
+
 .select-container :global ._select__control {
-  @apply cursor-pointer px-4 py-2;
+  @apply cursor-pointer px-4 py-2 space-x-1;
 }
-  
+
 .select-container :global ._select__menu {
   @apply rounded shadow-lg;
 }
-  
+
 .select-container :global ._select__option {
   @apply bg-white cursor-pointer hover:bg-gray-100 px-4 py-2 text-black;
 }
-  
+
 .select-container :global ._select__value-container--is-multi {
   @apply flex-nowrap;
 }

app/components/Dropdown.tsx

@@ -1,53 +1,14 @@
 'use client';
 
+import Select, { ClearIndicatorProps, GroupBase } from 'react-select';
 import styles from 'components/Dropdown.module.css';
-// import CloseIcon from 'design-system/icons/navigation/close.svg?react';
-// import ExpandMoreIcon from 'design-system/icons/navigation/expand_more.svg?react';
-import Select, {
-//   ClearIndicatorProps,
-  GroupBase,
-//   MultiValueProps,
-} from 'react-select';
-
-// const ClearIndicator = ({
-//   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-//   className: _,
-//   innerProps,
-//   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-//   ...__
-// }: ClearIndicatorProps) => (
-//   <CloseIcon className='flex-shrink-0 h-4 w-4' {...innerProps} />
-// );
-
-// const DropdownIndicator = () => (
-//   <ExpandMoreIcon className='flex-shrink-0 h-4 w-4' />
-// );
-
-// const MultiValue = ({
-//   children,
-//   removeProps,
-//   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-//   innerProps: { className: _, ...innerProps } = {},
-// }: MultiValueProps) => (
-//   <div
-//     className='bg-blue-50 flex items-center min-w-0 px-2 rounded-3xl'
-//     {...innerProps}
-//   >
-//     <p className='design-body-small overflow-ellipsis overflow-hidden text-blue-1000 whitespace-nowrap'>
-//       {children}
-//     </p>
-//     <CloseIcon
-//       className='block design-body-small flex-shrink-0 h-3 text-blue-1000 w-3'
-//       {...removeProps}
-//     />
-//   </div>
-// );
+import CloseIcon from 'icons/close.svg';
+import ExpandMoreIcon from 'icons/expand_more.svg';
 
 type ReactDropdownProps = Parameters<Select>[0];
 
 export type Props<Option> = {
   disabled?: ReactDropdownProps['isDisabled'];
-  error?: boolean;
   options: Array<SingleOption<Option>>;
 } & Omit<ReactDropdownProps, 'isDisabled' | 'options'>;
 
@@ -56,30 +17,34 @@ export type SingleOption<Option> = {
   value: Option;
 };
 
+const ClearIndicator = (
+  { className: _, innerProps, ...__ }: ClearIndicatorProps, //@ts-ignore
+) => <CloseIcon className="flex-shrink-0 h-4 w-4" {...innerProps} />;
+
+const DropdownIndicator = () => (
+  <ExpandMoreIcon className="flex-shrink-0 h-4 w-4" />
+);
+
 const Dropdown = <Option,>({
   disabled,
   options,
-  error,
   className,
   ...rest
 }: Props<Option>) => (
   <Select
     {...rest}
-    className={`select-container ${className} ${styles['select-container']} ${
-      error ? '!border-flame-red' : ''
-    }`}
-    classNamePrefix='_select'
+    className={`select-container ${className} ${styles['select-container']}`}
+    classNamePrefix="_select"
     closeMenuOnSelect
     components={{
-    //   ClearIndicator,
-    //   DropdownIndicator,
+      ClearIndicator,
+      DropdownIndicator,
       IndicatorSeparator: null,
-    //   MultiValue: MultiValue,
     }}
     isDisabled={disabled}
     options={options}
     unstyled
   />
 );
 
-export default Dropdown;
+export default Dropdown;

app/components/Header.tsx

@@ -1,50 +1,58 @@
-import React, { useContext } from 'react';
+import Link from 'next/link';
+import { useContext } from 'react';
 import Dropdown from 'components/Dropdown';
 import { CLUSTERS_MAPPING } from 'constants/Cluster';
 import { Context as ClusterContext } from 'context/Cluster';
 import { Context as NamespaceContext } from 'context/Namespace';
+import Logo from 'icons/logo.svg';
 
 const Header = () => {
   const { clusterName, setClusterName } = useContext(ClusterContext);
   const { namespace, setNamespace } = useContext(NamespaceContext);
 
   return (
-    <nav className="flex justify-end items-center px-8 py-6 w-full">
-      <Dropdown
-        isSearchable={false}
-        options={Object.entries(CLUSTERS_MAPPING).map(([label, value]) => ({
-          label,
-          value: value.name,
-        }))}
-        onChange={(newValue) =>
-          setClusterName((newValue as { label: string; value: string }).value)
-        }
-        value={{
-          label: Object.entries(CLUSTERS_MAPPING)
-            .find(([, value]) => clusterName === value.name)
-            ?.find(Boolean),
-          value: clusterName,
-        }}
-      />
+    <nav className="flex justify-between items-center px-8 py-6 w-full">
+      <Link href="/">
+        <Logo className="h-6 text-main w-9" />
+      </Link>
 
-      <Dropdown
-        isSearchable={false}
-        options={Object.entries(CLUSTERS_MAPPING[clusterName].namespaces).map(
-          ([label, value]) => ({
+      <div className="flex items-center space-x-2">
+        <Dropdown
+          isSearchable={false}
+          options={Object.entries(CLUSTERS_MAPPING).map(([label, value]) => ({
             label,
-            value,
-          }),
-        )}
-        onChange={(newValue) =>
-          setNamespace((newValue as { label: string; value: string }).value)
-        }
-        value={{
-          label: Object.entries(CLUSTERS_MAPPING[clusterName].namespaces)
-            .find(([, value]) => namespace === value)
-            ?.find(Boolean),
-          value: namespace,
-        }}
-      />
+            value: value.name,
+          }))}
+          onChange={(newValue) =>
+            setClusterName((newValue as { label: string; value: string }).value)
+          }
+          value={{
+            label: Object.entries(CLUSTERS_MAPPING)
+              .find(([, value]) => clusterName === value.name)
+              ?.find(Boolean),
+            value: clusterName,
+          }}
+        />
+
+        <Dropdown
+          isSearchable={false}
+          options={Object.entries(CLUSTERS_MAPPING[clusterName].namespaces).map(
+            ([label, value]) => ({
+              label,
+              value,
+            }),
+          )}
+          onChange={(newValue) =>
+            setNamespace((newValue as { label: string; value: string }).value)
+          }
+          value={{
+            label: Object.entries(CLUSTERS_MAPPING[clusterName].namespaces)
+              .find(([, value]) => namespace === value)
+              ?.find(Boolean),
+            value: namespace,
+          }}
+        />
+      </div>
     </nav>
   );
 };

app/layout.tsx

@@ -13,7 +13,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => (
         <ClusterProvider>
           <NamespaceProvider>
             {/* Add Sidebar here */}
-            <div className="flex flex-col h-full items-center justify-center w-full">
+            <div className="flex flex-col h-full items-center w-full">
               <Header />
               {children}
             </div>

app/logs/download/page.tsx

@@ -134,7 +134,7 @@ const Page = () => {
       </div>
 
       <button
-        className="border border-solid border-black disabled:pointer-events-none disabled:text-gray px-2 py-1 text-center"
+        className="border border-solid border-black disabled:border-gray-400 disabled:pointer-events-none disabled:text-gray-400 px-2 py-1 text-center"
         disabled={state.inProgress || !validInputs}
         onClick={fetchTimestamps}
       >

interface.d.ts

@@ -5,3 +5,9 @@ declare module '*.css' {
   const classNames: IClassNames;
   export = classNames;
 }
+
+declare module '*.svg' {
+  import { FC, SVGProps } from 'react'
+  const content: FC<SVGProps<SVGElement>>
+  export default content
+}

next.config.mjs

@@ -5,6 +5,19 @@ const nextConfig = {
   experimental: {
     after: true,
   },
+  webpack: (config) => ({
+    ...config,
+    module: {
+      ...config.module,
+      rules: [
+        ...(config.module.rules || []),
+        {
+          test: /\.svg$/i,
+          use: ['@svgr/webpack'],
+        },
+      ],
+    },
+  }),
 };
 
 export default nextConfig;

package.json

@@ -6,6 +6,7 @@
     "tmp": "^0.2.3"
   },
   "devDependencies": {
+    "@svgr/webpack": "8.1.0",
     "@types/node": "22.7.5",
     "@types/react": "^18",
     "@types/react-dom": "^18",

tailwind.config.ts

@@ -3,6 +3,13 @@ import { Config } from 'tailwindcss';
 const tailwindConfig: Config = {
   content: ['app/**/*.tsx'],
   plugins: [],
+  theme: {
+    extend: {
+      colors: {
+        main: '#BB2D40',
+      },
+    },
+  },
 };
 
 export default tailwindConfig;