[GEN-1840]: refactor frontend icons from SVG to JSX (#2017)

This pull request includes several changes to the `frontend/webapp` directory, primarily focusing on refactoring SVG icons to React components and updating the icon exports. The most important changes include renaming and converting SVG files to React components, updating the global CSS, and modifying the layout file. ### Icon Refactoring: * [`frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx`](diffhunk://#diff-9079d2c99877273373335abc13f1b93304ba3a71951b018ddd49609c7af0401eL1-R16): Renamed from `addclusterinfo.svg` and converted to a React component. * [`frontend/webapp/assets/icons/actions/delete-attribute-icon.tsx`](diffhunk://#diff-6204157827fd64dcf02352f82ce552c86511b5f85402ab713480c2d312ffc0daL1-R16): Renamed from `deleteattribute.svg` and converted to a React component. * [`frontend/webapp/assets/icons/actions/pii-masking-icon.tsx`](diffhunk://#diff-8cbead23b61e46cdf465d417ab376e24ee3e1c6bde0468370765eea2e453e2bfL1-R16): Renamed from `piimasking.svg` and converted to a React component. * [`frontend/webapp/assets/icons/actions/sampler-icon.tsx`](diffhunk://#diff-eaa5f859a73eade93ad25a6fadb04bad72644ceee20fe598348baa878cfd3ce3L1-R16): Renamed from `sampler.svg` and converted to a React component. * [`frontend/webapp/assets/icons/actions/rename-attribute-icon.tsx`](diffhunk://#diff-741de6c13c3311a524b2018c2fffdb8ec616fc8d073295f178024ea4b5c8f63fR1-R16): Added as a new React component. ### Icon Export Updates: * [`frontend/webapp/assets/icons/actions/index.ts`](diffhunk://#diff-c8d48bc6fa11bda45969bbe2b7b9a711ae2198f501cc1ef66c2db43fdc926c9aR1-R5): Added exports for the newly converted React components. ### Brand Icons: * [`frontend/webapp/assets/icons/brand/odigos-logo-background.tsx`](diffhunk://#diff-14c291bc1d401b012486f2675fa33eeb6859f9324d73be18edb70c6f861c5bf2R1-R13): Added as a new React component. * [`frontend/webapp/assets/icons/brand/odigos-logo-text.tsx`](diffhunk://#diff-12afb8ad42cf123c6b1a53abf402deeb284194f40371bdfaaed1ea6c9e4e5e62R1-R28): Added as a new React component. * [`frontend/webapp/assets/icons/brand/odigos-logo.tsx`](diffhunk://#diff-0c8e0c0cba6a5faceba19af98eedcbb8185c6476da63a50a391ccaaecd848ef1R1-R13): Added as a new React component. * [`frontend/webapp/assets/icons/brand/index.ts`](diffhunk://#diff-de50cf27368bb451fd85a8d8a1428e15f76dde5766bd366fc828dbd4350305e9R1-R3): Added exports for the new brand icons. ### Common Icons: * [`frontend/webapp/assets/icons/common/arrow-icon.tsx`](diffhunk://#diff-d0d1bdd703c3f52df7549279b42c0f67e1c971bddc50e97891f76a00c0c6e5e7R1-R11): Added as a new React component. ### Miscellaneous: * [`frontend/webapp/app/globals.css`](diffhunk://#diff-0ad5feab59ca691369930750cde64b75419ddd0dbe0e567e069550de11c4b051R28-R31): Added a transition effect to `svg` elements. * [`frontend/webapp/app/layout.tsx`](diffhunk://#diff-788a38ec94bfca9467b13cb6eb93cdeccd4237facfb5fff310e05b3af67413efL21): Removed the SVG icon link from the metadata.
odigos-io · Dec 17, 2024 · 351fcac · 351fcac
1 parent 716aac7
commit 351fcac
Show file tree

Hide file tree

Showing 204 changed files with 1,247 additions and 1,131 deletions.
diff --git a/frontend/webapp/app/globals.css b/frontend/webapp/app/globals.css
@@ -25,3 +25,7 @@ input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
   transition: all 50000s ease-in-out 0s;
 }
+
+svg {
+  transition: all 0.3s;
+}
diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
@@ -18,11 +18,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang='en'>
       <head>
         <meta name='description' content={METADATA.title} />
-        <link rel='icon' type='image/svg+xml' href={`/${METADATA.icons}`} />
-        <link rel='icon' type='image/x-icon' href='/favicon.ico' />
-        <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png' />
-        <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png' />
-        <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
+        <link rel='icon' type='image/svg+xml' href={`/${METADATA.icon}`} />
         <link rel='manifest' href='/manifest.json' />
         <title>{METADATA.title}</title>
       </head>

diff --git a/...p/public/icons/actions/addclusterinfo.svg → ...s/icons/actions/add-cluster-info-icon.tsx b/...p/public/icons/actions/addclusterinfo.svg → ...s/icons/actions/add-cluster-info-icon.tsx
@@ -1,3 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <path d="M7.99992 11.3333V9.33333M7.99992 9.33333V7.33333M7.99992 9.33333H5.99992M7.99992 9.33333H9.99992M14.6666 8.26667V9.73333C14.6666 11.2268 14.6666 11.9735 14.3759 12.544C14.1203 13.0457 13.7123 13.4537 13.2106 13.7094C12.6401 14 11.8934 14 10.3999 14H5.59992C4.10645 14 3.35971 14 2.78928 13.7094C2.28751 13.4537 1.87956 13.0457 1.6239 12.544C1.33325 11.9735 1.33325 11.2268 1.33325 9.73333V6.26667C1.33325 4.77319 1.33325 4.02646 1.6239 3.45603C1.87956 2.95426 2.28751 2.54631 2.78928 2.29065C3.35971 2 4.10645 2 5.59992 2H5.81029C6.12336 2 6.2799 2 6.42199 2.04315C6.54778 2.08135 6.6648 2.14398 6.76636 2.22745C6.88108 2.32174 6.96791 2.45199 7.14157 2.71248L7.52493 3.28752C7.69859 3.54801 7.78542 3.67826 7.90014 3.77255C8.0017 3.85602 8.11873 3.91865 8.24452 3.95685C8.38661 4 8.54314 4 8.85621 4H10.3999C11.8934 4 12.6401 4 13.2106 4.29065C13.7123 4.54631 14.1203 4.95426 14.3759 5.45603C14.6666 6.02646 14.6666 6.77319 14.6666 8.26667Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+import React from 'react';
+import { SVG } from '@/assets';
+import theme from '@/styles/theme';
+
+export const AddClusterInfoIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => {
+  return (
+    <svg width={size} height={size} viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='none' style={{ transform: `rotate(${rotate}deg)` }} onClick={onClick}>
+      <path
+        stroke={fill}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        d='M7.99992 11.3333V9.33333M7.99992 9.33333V7.33333M7.99992 9.33333H5.99992M7.99992 9.33333H9.99992M14.6666 8.26667V9.73333C14.6666 11.2268 14.6666 11.9735 14.3759 12.544C14.1203 13.0457 13.7123 13.4537 13.2106 13.7094C12.6401 14 11.8934 14 10.3999 14H5.59992C4.10645 14 3.35971 14 2.78928 13.7094C2.28751 13.4537 1.87956 13.0457 1.6239 12.544C1.33325 11.9735 1.33325 11.2268 1.33325 9.73333V6.26667C1.33325 4.77319 1.33325 4.02646 1.6239 3.45603C1.87956 2.95426 2.28751 2.54631 2.78928 2.29065C3.35971 2 4.10645 2 5.59992 2H5.81029C6.12336 2 6.2799 2 6.42199 2.04315C6.54778 2.08135 6.6648 2.14398 6.76636 2.22745C6.88108 2.32174 6.96791 2.45199 7.14157 2.71248L7.52493 3.28752C7.69859 3.54801 7.78542 3.67826 7.90014 3.77255C8.0017 3.85602 8.11873 3.91865 8.24452 3.95685C8.38661 4 8.54314 4 8.85621 4H10.3999C11.8934 4 12.6401 4 13.2106 4.29065C13.7123 4.54631 14.1203 4.95426 14.3759 5.45603C14.6666 6.02646 14.6666 6.77319 14.6666 8.26667Z'
+      />
+    </svg>
+  );
+};
diff --git a/.../public/icons/actions/deleteattribute.svg → ...s/icons/actions/delete-attribute-icon.tsx b/.../public/icons/actions/deleteattribute.svg → ...s/icons/actions/delete-attribute-icon.tsx
@@ -1,3 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <path d="M10.6666 10.0007L8.66659 8.00065M8.66659 8.00065L6.66659 6.00065M8.66659 8.00065L10.6666 6.00065M8.66659 8.00065L6.66659 10.0007M4.41666 4.01431C3.33136 5.06369 2.34376 6.24491 1.47059 7.5384C1.37903 7.67404 1.33325 7.83734 1.33325 8.00065C1.33325 8.16396 1.37903 8.32726 1.47059 8.4629C2.34376 9.75639 3.33136 10.9376 4.41666 11.987C4.65522 12.2177 4.77449 12.333 4.94023 12.4319C5.07791 12.514 5.25728 12.5866 5.41337 12.6232C5.60126 12.6673 5.78723 12.6673 6.15917 12.6673H11.3332C12.2667 12.6673 12.7334 12.6673 13.0899 12.4857C13.4035 12.3259 13.6585 12.0709 13.8183 11.7573C13.9999 11.4008 13.9999 10.9341 13.9999 10.0007V6.00065C13.9999 5.06723 13.9999 4.60052 13.8183 4.244C13.6585 3.9304 13.4035 3.67543 13.0899 3.51564C12.7334 3.33398 12.2667 3.33398 11.3332 3.33398H6.15917C5.78723 3.33398 5.60126 3.33398 5.41337 3.37809C5.25728 3.41473 5.07791 3.48727 4.94023 3.56943C4.77449 3.66832 4.65522 3.78365 4.41666 4.01431Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+import React from 'react';
+import { SVG } from '@/assets';
+import theme from '@/styles/theme';
+
+export const DeleteAttributeIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => {
+  return (
+    <svg width={size} height={size} viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='none' style={{ transform: `rotate(${rotate}deg)` }} onClick={onClick}>
+      <path
+        stroke={fill}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        d='M10.6666 10.0007L8.66659 8.00065M8.66659 8.00065L6.66659 6.00065M8.66659 8.00065L10.6666 6.00065M8.66659 8.00065L6.66659 10.0007M4.41666 4.01431C3.33136 5.06369 2.34376 6.24491 1.47059 7.5384C1.37903 7.67404 1.33325 7.83734 1.33325 8.00065C1.33325 8.16396 1.37903 8.32726 1.47059 8.4629C2.34376 9.75639 3.33136 10.9376 4.41666 11.987C4.65522 12.2177 4.77449 12.333 4.94023 12.4319C5.07791 12.514 5.25728 12.5866 5.41337 12.6232C5.60126 12.6673 5.78723 12.6673 6.15917 12.6673H11.3332C12.2667 12.6673 12.7334 12.6673 13.0899 12.4857C13.4035 12.3259 13.6585 12.0709 13.8183 11.7573C13.9999 11.4008 13.9999 10.9341 13.9999 10.0007V6.00065C13.9999 5.06723 13.9999 4.60052 13.8183 4.244C13.6585 3.9304 13.4035 3.67543 13.0899 3.51564C12.7334 3.33398 12.2667 3.33398 11.3332 3.33398H6.15917C5.78723 3.33398 5.60126 3.33398 5.41337 3.37809C5.25728 3.41473 5.07791 3.48727 4.94023 3.56943C4.77449 3.66832 4.65522 3.78365 4.41666 4.01431Z'
+      />
+    </svg>
+  );
+};
diff --git a/frontend/webapp/assets/icons/actions/index.ts b/frontend/webapp/assets/icons/actions/index.ts
@@ -0,0 +1,5 @@
+export * from './add-cluster-info-icon';
+export * from './delete-attribute-icon';
+export * from './pii-masking-icon';
+export * from './rename-attribute-icon';
+export * from './sampler-icon';
diff --git a/...ebapp/public/icons/actions/piimasking.svg → ...assets/icons/actions/pii-masking-icon.tsx b/...ebapp/public/icons/actions/piimasking.svg → ...assets/icons/actions/pii-masking-icon.tsx
@@ -1,3 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <path d="M13.9486 9.71582C13.8698 9.87282 13.6245 9.98885 13.1338 10.2209L8.95284 12.198C8.60345 12.3632 8.42876 12.4458 8.24552 12.4783C8.08323 12.5071 7.91669 12.5071 7.7544 12.4783C7.57117 12.4458 7.39647 12.3632 7.04709 12.198L2.86615 10.2209C2.37544 9.98885 2.13008 9.87282 2.05135 9.71582M8.95288 9.19806L13.1338 7.22096C13.6245 6.98891 13.8699 6.87289 13.9486 6.71588C14.0171 6.57926 14.0171 6.42074 13.9486 6.28412C13.8699 6.12711 13.6245 6.01109 13.1338 5.77904L8.95288 3.80194C8.60349 3.63672 8.4288 3.55411 8.24556 3.5216C8.08327 3.4928 7.91673 3.4928 7.75444 3.5216C7.5712 3.55411 7.39651 3.63672 7.04712 3.80194L2.86618 5.77904C2.37547 6.01109 2.13012 6.12711 2.05139 6.28412C1.98287 6.42074 1.98287 6.57926 2.05139 6.71588C2.13012 6.87289 2.37547 6.98891 2.86618 7.22096L7.04712 9.19806C7.39651 9.36328 7.5712 9.44589 7.75444 9.4784C7.91673 9.5072 8.08327 9.5072 8.24556 9.4784C8.4288 9.44589 8.60349 9.36328 8.95288 9.19806Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+import React from 'react';
+import { SVG } from '@/assets';
+import theme from '@/styles/theme';
+
+export const PiiMaskingIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => {
+  return (
+    <svg width={size} height={size} viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='none' style={{ transform: `rotate(${rotate}deg)` }} onClick={onClick}>
+      <path
+        stroke={fill}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        d='M13.9486 9.71582C13.8698 9.87282 13.6245 9.98885 13.1338 10.2209L8.95284 12.198C8.60345 12.3632 8.42876 12.4458 8.24552 12.4783C8.08323 12.5071 7.91669 12.5071 7.7544 12.4783C7.57117 12.4458 7.39647 12.3632 7.04709 12.198L2.86615 10.2209C2.37544 9.98885 2.13008 9.87282 2.05135 9.71582M8.95288 9.19806L13.1338 7.22096C13.6245 6.98891 13.8699 6.87289 13.9486 6.71588C14.0171 6.57926 14.0171 6.42074 13.9486 6.28412C13.8699 6.12711 13.6245 6.01109 13.1338 5.77904L8.95288 3.80194C8.60349 3.63672 8.4288 3.55411 8.24556 3.5216C8.08327 3.4928 7.91673 3.4928 7.75444 3.5216C7.5712 3.55411 7.39651 3.63672 7.04712 3.80194L2.86618 5.77904C2.37547 6.01109 2.13012 6.12711 2.05139 6.28412C1.98287 6.42074 1.98287 6.57926 2.05139 6.71588C2.13012 6.87289 2.37547 6.98891 2.86618 7.22096L7.04712 9.19806C7.39651 9.36328 7.5712 9.44589 7.75444 9.4784C7.91673 9.5072 8.08327 9.5072 8.24556 9.4784C8.4288 9.44589 8.60349 9.36328 8.95288 9.19806Z'
+      />
+    </svg>
+  );
+};
diff --git a/frontend/webapp/assets/icons/actions/rename-attribute-icon.tsx b/frontend/webapp/assets/icons/actions/rename-attribute-icon.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { SVG } from '@/assets';
+import theme from '@/styles/theme';
+
+export const RenameAttributeIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => {
+  return (
+    <svg width={size} height={size} viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='none' style={{ transform: `rotate(${rotate}deg)` }} onClick={onClick}>
+      <path
+        stroke={fill}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        d='M14.6666 8.00065V12.0007M1.33325 12.6673L4.23847 4.1055C4.40371 3.64283 4.84196 3.33398 5.33325 3.33398C5.83824 3.33398 6.28547 3.66 6.43999 4.14076L9.33325 12.6673M2.69054 8.66732H7.97596M14.6666 10.0007C14.6666 11.1052 13.7712 12.0007 12.6666 12.0007C11.562 12.0007 10.6666 11.1052 10.6666 10.0007C10.6666 8.89608 11.562 8.00065 12.6666 8.00065C13.7712 8.00065 14.6666 8.89608 14.6666 10.0007Z'
+      />
+    </svg>
+  );
+};
diff --git a/...d/webapp/public/icons/actions/sampler.svg → ...app/assets/icons/actions/sampler-icon.tsx b/...d/webapp/public/icons/actions/sampler.svg → ...app/assets/icons/actions/sampler-icon.tsx
@@ -1,3 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <path d="M5.67367 5.67497H5.687M10.515 3.91532L12.1293 5.52965C13.0067 6.40707 13.4454 6.84578 13.6851 7.31618C14.1695 8.2669 14.1695 9.39207 13.6851 10.3428C13.4454 10.8132 13.0067 11.2519 12.1293 12.1293C11.2519 13.0067 10.8132 13.4454 10.3428 13.6851C9.39207 14.1695 8.2669 14.1695 7.31618 13.6851C6.84578 13.4454 6.40707 13.0067 5.52965 12.1293L3.91532 10.515C3.17317 9.77284 2.8021 9.40176 2.54483 8.96668C2.31682 8.58108 2.15521 8.15991 2.06673 7.72076C1.9669 7.22527 1.99448 6.70122 2.04965 5.65312L2.07845 5.10584C2.13195 4.0893 2.1587 3.58104 2.36993 3.18719C2.55598 2.84028 2.84028 2.55598 3.18719 2.36993C3.58104 2.1587 4.0893 2.13195 5.10584 2.07845L5.65312 2.04965C6.70122 1.99448 7.22527 1.9669 7.72076 2.06673C8.15991 2.15521 8.58108 2.31682 8.96668 2.54483C9.40176 2.8021 9.77284 3.17317 10.515 3.91532ZM6.32633 5.65853C6.32633 6.02672 6.02786 6.3252 5.65967 6.3252C5.29148 6.3252 4.993 6.02672 4.993 5.65853C4.993 5.29034 5.29148 4.99186 5.65967 4.99186C6.02786 4.99186 6.32633 5.29034 6.32633 5.65853Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+import React from 'react';
+import { SVG } from '@/assets';
+import theme from '@/styles/theme';
+
+export const SamplerIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => {
+  return (
+    <svg width={size} height={size} viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='none' style={{ transform: `rotate(${rotate}deg)` }} onClick={onClick}>
+      <path
+        stroke={fill}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        d='M5.67367 5.67497H5.687M10.515 3.91532L12.1293 5.52965C13.0067 6.40707 13.4454 6.84578 13.6851 7.31618C14.1695 8.2669 14.1695 9.39207 13.6851 10.3428C13.4454 10.8132 13.0067 11.2519 12.1293 12.1293C11.2519 13.0067 10.8132 13.4454 10.3428 13.6851C9.39207 14.1695 8.2669 14.1695 7.31618 13.6851C6.84578 13.4454 6.40707 13.0067 5.52965 12.1293L3.91532 10.515C3.17317 9.77284 2.8021 9.40176 2.54483 8.96668C2.31682 8.58108 2.15521 8.15991 2.06673 7.72076C1.9669 7.22527 1.99448 6.70122 2.04965 5.65312L2.07845 5.10584C2.13195 4.0893 2.1587 3.58104 2.36993 3.18719C2.55598 2.84028 2.84028 2.55598 3.18719 2.36993C3.58104 2.1587 4.0893 2.13195 5.10584 2.07845L5.65312 2.04965C6.70122 1.99448 7.22527 1.9669 7.72076 2.06673C8.15991 2.15521 8.58108 2.31682 8.96668 2.54483C9.40176 2.8021 9.77284 3.17317 10.515 3.91532ZM6.32633 5.65853C6.32633 6.02672 6.02786 6.3252 5.65967 6.3252C5.29148 6.3252 4.993 6.02672 4.993 5.65853C4.993 5.29034 5.29148 4.99186 5.65967 4.99186C6.02786 4.99186 6.32633 5.29034 6.32633 5.65853Z'
+      />
+    </svg>
+  );
+};
diff --git a/frontend/webapp/assets/icons/brand/index.ts b/frontend/webapp/assets/icons/brand/index.ts
@@ -0,0 +1,2 @@
+export * from './odigos-logo';
+export * from './odigos-logo-text';
diff --git a/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx b/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { SVG } from '@/assets';
+import theme from '@/styles/theme';
+
+export const OdigosLogoText: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => {
+  return (
+    <svg width={size} height={size * (103 / 429)} viewBox='0 0 429 103' fill={fill} xmlns='http://www.w3.org/2000/svg' style={{ transform: `rotate(${rotate}deg)` }} onClick={onClick}>
+      <defs>
+        <clipPath id='clip0_116_120'>
+          <rect width='429' height='102.681' fill='none' />
+        </clipPath>
+      </defs>
+
+      <g clipPath='url(#clip0_116_120)'>
+        <path d='M253.012 22.3253H242.622V81.3372H253.012V22.3253Z' />
+        <path d='M198.854 81.3261C197.32 81.3261 195.886 80.7305 194.805 79.6495L183.83 68.6744C182.749 67.5934 182.154 66.1595 182.154 64.6263V39.003C182.154 37.4698 182.749 36.0359 183.83 34.9549L194.805 23.9798C195.886 22.8988 197.32 22.3032 198.854 22.3032H215.2C216.59 22.3032 217.925 22.8106 218.973 23.7151L221.267 25.7115V0H231.658V64.6153C231.658 66.1485 231.062 67.5824 229.981 68.6634L219.006 79.6385C217.925 80.7195 216.491 81.3151 214.958 81.3151H198.854V81.3261ZM200.409 32.7158C196.228 32.7158 192.831 36.1131 192.831 40.2935V63.3799C192.831 67.5493 196.228 70.9577 200.409 70.9577H213.402C217.583 70.9577 220.98 67.5603 220.98 63.3799V40.2935C220.98 36.1131 217.583 32.7158 213.402 32.7158H200.409Z' />
+        <path d='M395.942 81.3371C394.552 81.3371 393.218 80.8298 392.17 79.9253L381.449 70.5495C380.202 69.4576 379.496 67.8913 379.496 66.2477V64.1079H390.218C390.582 67.9464 393.825 70.9466 397.751 70.9466H410.745C414.914 70.9466 418.312 67.5493 418.323 63.3909V62.9938C418.323 61.6922 417.44 60.5782 416.183 60.2804L383.28 52.4379C380.952 51.8863 379.375 49.7465 379.507 47.3529V39.014C379.507 37.4808 380.103 36.0469 381.184 34.9659L392.159 23.9908C393.24 22.9098 394.674 22.3142 396.207 22.3142H412.554C413.944 22.3142 415.278 22.8216 416.326 23.7261L427.048 33.1018C428.294 34.1828 429 35.7601 429 37.4036V41.6834H418.334V39.5435H418.279C417.915 35.7049 414.672 32.7047 410.745 32.7047H397.751C393.571 32.7047 390.174 36.102 390.174 40.2825V40.8671C390.174 42.1466 391.045 43.2607 392.28 43.5695L420.054 50.5076L425.184 51.7319C427.312 52.2393 428.857 54.1365 428.945 56.3536V56.7948H428.967V64.6263C428.967 66.1595 428.371 67.5934 427.29 68.6744L416.315 79.6495C415.234 80.7305 413.8 81.3261 412.267 81.3261H395.92H395.931L395.942 81.3371Z' />
+        <path d='M247.817 10.4016C244.949 10.4016 242.622 8.06314 242.622 5.2063C242.622 2.34946 244.949 0.0110474 247.817 0.0110474C250.685 0.0110474 253.012 2.34946 253.012 5.2063C253.012 8.06314 250.685 10.4016 247.817 10.4016Z' />
+        <path d='M279.154 102.681V92.2902H294.574C298.755 92.2902 302.152 88.8929 302.152 84.7124V77.6861L300.178 79.6605C299.097 80.7415 297.663 81.3371 296.129 81.3371H280.025C278.492 81.3371 277.058 80.7415 275.977 79.6605L265.002 68.6854C263.921 67.6045 263.325 66.1705 263.325 64.6373V39.014C263.325 37.4808 263.921 36.0469 265.002 34.9659L275.977 23.9908C277.058 22.9098 278.492 22.3142 280.025 22.3142H296.372C297.762 22.3142 299.097 22.8216 300.144 23.7261L310.866 33.1018C312.112 34.1828 312.818 35.7601 312.818 37.4036V85.9699C312.818 87.5031 312.223 88.937 311.142 90.018L300.167 100.993C299.086 102.074 297.652 102.67 296.118 102.67H279.143L279.154 102.681ZM281.581 32.7157C277.411 32.7157 274.003 36.1131 274.003 40.2935V63.3799C274.003 67.5493 277.4 70.9577 281.581 70.9577H294.574C298.755 70.9577 302.152 67.5603 302.152 63.3799V40.2935C302.152 36.1131 298.755 32.7157 294.574 32.7157H281.581Z' />
+        <path d='M139.555 81.3371C138.022 81.3371 136.588 80.7415 135.507 79.6605L124.532 68.6854C123.451 67.6045 122.855 66.1705 122.855 64.6373V39.014C122.855 37.4808 123.451 36.0469 124.532 34.9659L135.507 23.9908C136.588 22.9098 138.022 22.3142 139.555 22.3142H155.902C157.292 22.3142 158.626 22.8216 159.674 23.7261L170.395 33.1018C171.642 34.1828 172.348 35.7601 172.348 37.4036V64.6153C172.348 66.1485 171.752 67.5824 170.671 68.6634L159.696 79.6385C158.615 80.7194 157.181 81.3151 155.648 81.3151H139.544V81.3261L139.555 81.3371ZM141.121 32.7157C136.941 32.7157 133.543 36.1131 133.543 40.2935V63.3799C133.543 67.5603 136.941 70.9577 141.121 70.9577H154.104C158.284 70.9577 161.682 67.5603 161.682 63.3799V40.2935C161.682 36.1131 158.284 32.7157 154.104 32.7157H141.121Z' />
+        <path d='M337.791 81.3371C336.258 81.3371 334.824 80.7415 333.743 79.6605L322.768 68.6854C321.687 67.6045 321.091 66.1705 321.091 64.6373V39.014C321.091 37.4808 321.687 36.0469 322.768 34.9659L333.743 23.9908C334.824 22.9098 336.258 22.3142 337.791 22.3142H354.138C355.527 22.3142 356.862 22.8216 357.91 23.7261L368.631 33.1018C369.878 34.1828 370.584 35.7601 370.584 37.4036V64.6153C370.584 66.1485 369.988 67.5824 368.907 68.6634L357.932 79.6385C356.851 80.7194 355.417 81.3151 353.884 81.3151H337.78V81.3261L337.791 81.3371ZM339.346 32.7157C335.166 32.7157 331.768 36.1131 331.768 40.2935V63.3799C331.768 67.5603 335.166 70.9577 339.346 70.9577H352.34C356.52 70.9577 359.917 67.5603 359.917 63.3799V40.2935C359.917 36.1131 356.52 32.7157 352.34 32.7157H339.346Z' />
+        <path d='M44.2865 34.2931V22.3473H67.8361C70.8804 22.3473 73.3512 24.6967 73.3512 27.5977V76.0867C73.3512 78.9877 70.8804 81.3371 67.8361 81.3371H44.2865V69.4686L65.266 60.1921C68.7185 58.6589 70.8694 55.4601 70.8694 51.8422C70.8694 48.2243 68.7185 45.0145 65.266 43.4923L44.2755 34.3041L44.2865 34.2931Z' />
+        <path d='M29.0758 69.3804V81.3262H5.52618C2.48183 81.3262 0.0110474 78.9767 0.0110474 76.0757V27.5867C0.0110474 24.6857 2.48183 22.3363 5.52618 22.3363H29.0758V34.2049L8.09623 43.4813C4.64376 45.0145 2.49286 48.2133 2.49286 51.8312C2.49286 55.4492 4.64376 58.659 8.09623 60.1811L29.0868 69.3693L29.0758 69.3804Z' />
+        <path d='M36.6756 64.0307C43.4071 64.0307 48.8641 58.5737 48.8641 51.8422C48.8641 45.1108 43.4071 39.6538 36.6756 39.6538C29.9441 39.6538 24.4872 45.1108 24.4872 51.8422C24.4872 58.5737 29.9441 64.0307 36.6756 64.0307Z' />
+      </g>
+    </svg>
+  );
+};
diff --git a/frontend/webapp/assets/icons/brand/odigos-logo.tsx b/frontend/webapp/assets/icons/brand/odigos-logo.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { SVG } from '@/assets';
+import theme from '@/styles/theme';
+
+export const OdigosLogo: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width={size} height={size * (431 / 552)} viewBox='0 0 552 431' fill={fill} style={{ transform: `rotate(${rotate}deg)` }} onClick={onClick}>
+      <path d='M308.491 83.3091V0.0765381H472.573C493.785 0.0765381 511 16.4464 511 36.6589V374.508C511 394.72 493.785 411.09 472.573 411.09H308.491V328.396L454.666 263.762C478.721 253.079 493.708 230.791 493.708 205.583C493.708 180.375 478.721 158.011 454.666 147.405L308.414 83.3859L308.491 83.3091Z' />
+      <path d='M202.51 327.781V411.014H38.4269C17.2152 411.014 0 394.644 0 374.431V36.5824C0 16.3698 17.2152 0 38.4269 0H202.51V82.6946L56.3338 147.329C32.2786 158.011 17.2921 180.299 17.2921 205.507C17.2921 230.715 32.2786 253.079 56.3338 263.685L202.586 327.704L202.51 327.781Z' />
+      <path d='M255.462 290.507C302.363 290.507 340.385 252.485 340.385 205.584C340.385 158.682 302.363 120.66 255.462 120.66C208.56 120.66 170.538 158.682 170.538 205.584C170.538 252.485 208.56 290.507 255.462 290.507Z' />
+    </svg>
+  );
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './odigos-logo';
		export * from './odigos-logo-text';