Implement new svg for logo. (#18184)

* Implement new svg for logo. * Fix logo position.
Graylog2 · Mar 7, 2024 · a86f21d · a86f21d
1 parent 7d6e372
commit a86f21d
Showing 1 changed file with 21 additions and 18 deletions.
diff --git a/graylog2-web-interface/src/components/perspectives/DefaultBrand.tsx b/graylog2-web-interface/src/components/perspectives/DefaultBrand.tsx
@@ -15,7 +15,11 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import React from 'react';
-import { useTheme } from 'styled-components';
+import styled, { useTheme } from 'styled-components';
+
+const Container = styled.div`
+  display: inline-flex;
+`;
 
 type Props = {
   className?: string,
@@ -25,36 +29,35 @@ const DefaultBrand = ({ className }: Props) => {
   const theme = useTheme();
 
   return (
-    <div className={`${className}`}>
-      <svg height="26"
-           width="90"
-           viewBox="0 0 287 92"
+    <Container className={`${className}`}>
+      <svg width="90"
+           height="27"
+           viewBox="0 0 90 27"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            aria-labelledby="logoTitleId">
         <title id="logoTitleId">Graylog Logo</title>
-        <path d="M0.479675 45.8302C0.479675 58.7145 8.75571 68.7774 21.8281 68.7774C29.0696 68.7774 35.0885 65.5799 38.098 60.2192V69.4357C38.098 78.182 32.4552 83.8247 23.803 83.8247C16.0913 83.8247 11.0128 79.8748 9.88426 73.1035H1.04395C2.73677 84.7652 11.2949 91.8186 23.803 91.8186C37.9099 91.8186 46.8443 82.6021 46.8443 68.1191V24.0116H38.9444L38.2861 31.8174C35.3707 26.0806 29.6339 22.695 22.2043 22.695C8.84975 22.695 0.479675 32.8519 0.479675 45.8302ZM9.31998 45.6421C9.31998 37.178 14.5865 30.4067 23.4269 30.4067C32.4552 30.4067 37.7218 36.8018 37.7218 45.6421C37.7218 54.6705 32.2672 61.0656 23.3328 61.0656C14.6806 61.0656 9.31998 54.2944 9.31998 45.6421Z"
+        <path d="M4.58121 13.452C4.58121 17.0932 6.92009 19.9371 10.6145 19.9371C12.661 19.9371 14.362 19.0334 15.2125 17.5185V20.1231C15.2125 22.5949 13.6178 24.1896 11.1726 24.1896C8.99319 24.1896 7.55796 23.0733 7.23902 21.1597H4.74068C5.21908 24.4554 7.63768 26.4487 11.1726 26.4487C15.1593 26.4487 17.6843 23.8441 17.6843 19.751V7.28589H15.4517L15.2656 9.49187C14.4417 7.8706 12.8204 6.9138 10.7208 6.9138C6.94666 6.9138 4.58121 9.78423 4.58121 13.452ZM7.07955 13.3989C7.07955 11.0068 8.56792 9.0932 11.0663 9.0932C13.6178 9.0932 15.1062 10.9005 15.1062 13.3989C15.1062 15.9504 13.5646 17.7577 11.0397 17.7577C8.59451 17.7577 7.07955 15.8441 7.07955 13.3989Z"
+              fill={theme.colors.brand.logo} />
+        <path d="M27.4027 7.17957C26.8977 7.07325 26.5256 7.0201 26.0738 7.0201C24.2931 7.0201 22.9908 7.92377 22.4592 9.27924L22.2997 7.31245H19.9608V20.2826H22.4592V13.3989C22.4592 10.9005 23.921 9.46531 26.2864 9.46531H27.4027V7.17957Z"
               fill={theme.colors.brand.logo} />
-        <path d="M81.2327 23.6354C79.4458 23.2592 78.1292 23.0711 76.5304 23.0711C70.2293 23.0711 65.6211 26.2687 63.7402 31.065L63.1759 24.1056H54.8999V70H63.7402V45.6421C63.7402 36.8018 68.9127 31.7234 77.2828 31.7234H81.2327V23.6354Z"
+        <path d="M32.2177 20.6015C34.3174 20.6015 36.0981 19.6713 36.7625 18.1829L37.0284 20.2826H39.1545V12.1231C39.1545 8.6148 36.9753 6.9138 33.7592 6.9138C30.4104 6.9138 28.1778 8.69452 28.1778 11.4055H30.3572C30.3572 9.83739 31.5533 8.90716 33.653 8.90716C35.4071 8.90716 36.7094 9.67791 36.7094 11.8573V12.2294L32.6164 12.5484C29.5599 12.7876 27.7792 14.2759 27.7792 16.668C27.7792 19.0334 29.427 20.6015 32.2177 20.6015ZM32.9354 18.6613C31.314 18.6613 30.3041 17.9703 30.3041 16.5882C30.3041 15.3125 31.2078 14.462 33.4136 14.2494L36.736 13.9836V14.6746C36.736 17.1198 35.3009 18.6613 32.9354 18.6613Z"
               fill={theme.colors.brand.logo} />
-        <path d="M98.2704 71.1285C105.7 71.1285 112.001 67.8369 114.352 62.5704L115.293 70H122.816V41.1279C122.816 28.7139 115.105 22.695 103.725 22.695C91.8753 22.695 83.9754 28.996 83.9754 38.5887H91.6872C91.6872 33.04 95.9193 29.7484 103.349 29.7484C109.556 29.7484 114.164 32.4757 114.164 40.1875V41.5041L99.6811 42.6327C88.8658 43.4791 82.5648 48.7456 82.5648 57.2098C82.5648 65.5798 88.3956 71.1285 98.2704 71.1285ZM100.81 64.2632C95.0728 64.2632 91.4991 61.818 91.4991 56.9276C91.4991 52.4134 94.6967 49.404 102.502 48.6516L114.258 47.7111V50.1563C114.258 58.8085 109.18 64.2632 100.81 64.2632Z"
+        <path d="M39.7706 26.1032C40.435 26.2627 41.1263 26.369 41.9501 26.369C43.9436 26.369 45.2459 25.4388 46.1228 23.2062L52.2625 7.28589H49.6842L45.8306 17.7577L42.0563 7.28589H39.4253L44.6612 20.9736L44.2093 22.2228C43.598 23.8707 42.6411 24.0567 41.4451 24.0567H39.7706V26.1032Z"
               fill={theme.colors.brand.logo} />
-        <path d="M124.996 90.596C127.347 91.1603 129.793 91.5365 132.708 91.5365C139.762 91.5365 144.37 88.2449 147.473 80.345L169.198 24.0116H160.075L146.439 61.0656L133.084 24.0116H123.774L142.301 72.4452L140.702 76.8653C138.539 82.6962 135.153 83.3545 130.921 83.3545H124.996V90.596Z"
+        <path d="M56.2826 20.2826V0.721085H53.7843V20.2826H56.2826Z" fill={theme.colors.brand.logo} />
+        <path d="M72.0767 13.452C72.0767 17.0932 74.4156 19.9371 78.1101 19.9371C80.1565 19.9371 81.8575 19.0334 82.7082 17.5185V20.1231C82.7082 22.5949 81.1134 24.1896 78.6683 24.1896C76.4888 24.1896 75.0535 23.0733 74.7347 21.1597H72.2361C72.7146 24.4554 75.1332 26.4487 78.6683 26.4487C82.6548 26.4487 85.1799 23.8441 85.1799 19.751V7.28589H82.9473L82.7613 9.49187C81.9372 7.8706 80.3159 6.9138 78.2164 6.9138C74.4422 6.9138 72.0767 9.78423 72.0767 13.452ZM74.5753 13.3989C74.5753 11.0068 76.0635 9.0932 78.5618 9.0932C81.1134 9.0932 82.6017 10.9005 82.6017 13.3989C82.6017 15.9504 81.0603 17.7577 78.5352 17.7577C76.0901 17.7577 74.5753 15.8441 74.5753 13.3989Z"
               fill={theme.colors.brand.logo} />
-        <path d="M183.423 70V0.782288H174.583V70H183.423Z"
-              fill="#F44040" />
-        <path d="M239.31 45.8302C239.31 58.7145 247.586 68.7774 260.659 68.7774C267.9 68.7774 273.919 65.5798 276.929 60.2192V69.4357C276.929 78.182 271.286 83.8247 262.634 83.8247C254.922 83.8247 249.843 79.8748 248.715 73.1035H239.874C241.567 84.7652 250.125 91.8186 262.634 91.8186C276.74 91.8186 285.675 82.6021 285.675 68.1191V24.0116H277.775L277.117 31.8174C274.201 26.0806 268.464 22.695 261.035 22.695C247.68 22.695 239.31 32.8519 239.31 45.8302ZM248.151 45.6421C248.151 37.178 253.417 30.4067 262.257 30.4067C271.286 30.4067 276.552 36.8018 276.552 45.6421C276.552 54.6705 271.098 61.0657 262.163 61.0657C253.511 61.0657 248.151 54.2944 248.151 45.6421Z"
-              fill="#F44040" />
         <path fillRule="evenodd"
               clipRule="evenodd"
-              d="M212.5 62C221.06 62 228 55.0604 228 46.5C228 37.9396 221.06 31 212.5 31C203.94 31 197 37.9396 197 46.5C197 55.0604 203.94 62 212.5 62ZM212.5 70C225.479 70 236 59.4787 236 46.5C236 33.5213 225.479 23 212.5 23C199.521 23 189 33.5213 189 46.5C189 59.4787 199.521 70 212.5 70Z"
-              fill="#F44040" />
+              d="M64.5 18.0217C66.9191 18.0217 68.8804 16.0605 68.8804 13.6413C68.8804 11.2221 66.9191 9.26087 64.5 9.26087C62.0809 9.26087 60.1196 11.2221 60.1196 13.6413C60.1196 16.0605 62.0809 18.0217 64.5 18.0217ZM64.5 20.2826C68.168 20.2826 71.1413 17.3092 71.1413 13.6413C71.1413 9.97341 68.168 7 64.5 7C60.832 7 57.8587 9.97341 57.8587 13.6413C57.8587 17.3092 60.832 20.2826 64.5 20.2826Z"
+              fill={theme.colors.brand.logo} />
         <path fillRule="evenodd"
               clipRule="evenodd"
-              d="M213.772 36.0561C213.892 35.6114 214.499 35.5522 214.703 35.9652L219.03 44.7215C219.114 44.892 219.288 45 219.478 45H223C223.828 45 224.5 45.6716 224.5 46.5C224.5 47.3284 223.828 48 223 48H217.614C217.424 48 217.25 47.892 217.166 47.7215L214.941 43.22L211.228 56.9439C211.108 57.3886 210.501 57.4478 210.297 57.0348L205.97 48.2785C205.886 48.108 205.712 48 205.522 48H202C201.172 48 200.5 47.3284 200.5 46.5C200.5 45.6716 201.172 45 202 45H207.386C207.576 45 207.75 45.108 207.834 45.2785L210.059 49.78L213.772 36.0561Z"
-              fill={theme.colors.variant.darker.default} />
+              d="M64.8595 10.6898C64.8934 10.5641 65.0649 10.5474 65.1226 10.6641L66.3454 13.1387C66.3692 13.1869 66.4184 13.2174 66.4721 13.2174H67.4674C67.7014 13.2174 67.8913 13.4072 67.8913 13.6413C67.8913 13.8754 67.7014 14.0652 67.4674 14.0652H65.9453C65.8916 14.0652 65.8424 14.0347 65.8187 13.9865L65.1899 12.7143L64.1405 16.5928C64.1066 16.7185 63.9351 16.7352 63.8774 16.6185L62.6546 14.1439C62.6308 14.0957 62.5817 14.0652 62.528 14.0652H61.5326C61.2986 14.0652 61.1087 13.8754 61.1087 13.6413C61.1087 13.4072 61.2986 13.2174 61.5326 13.2174H63.0547C63.1084 13.2174 63.1576 13.2479 63.1814 13.2961L63.8102 14.5683L64.8595 10.6898Z"
+              fill={theme.colors.brand.logo} />
       </svg>
-    </div>
+    </Container>
   );
 };