feat: add new logo (#241)

* logo update

* add icons 1

* add icons 2

* fix linter error

* update collapsed logo

* fix typo

src/pages/client/components/ClientSideBar/ClientSideBar.tsx

@@ -7,7 +7,7 @@ import { useMatch, useNavigate } from 'react-router-dom';
 
 import { useI18nContext } from '../../../../i18n/i18n-react';
 import { IconDefguard } from '../../../../shared/components/icons/IconDefguard/IconDeguard';
-import SvgDefguadNavLogoCollapsed from '../../../../shared/components/svg/DefguardLogoCollapsed';
+import SvgDefguardLogoCollapsed from '../../../../shared/components/svg/DefguardLogoCollapsed';
 import SvgDefguardLogoText from '../../../../shared/components/svg/DefguardLogoText';
 import SvgIconNavConnections from '../../../../shared/components/svg/IconNavConnections';
 import SvgIconNavVpn from '../../../../shared/components/svg/IconNavVpn';
@@ -47,7 +47,7 @@ export const ClientSideBar = () => {
         className="logo-mobile"
         onClick={() => navigate(routes.client.carousel, { replace: true })}
       >
-        <SvgDefguadNavLogoCollapsed />
+        <SvgDefguardLogoCollapsed />
       </div>
       <div className="items flex-end">
         <div className="client-bar-item active" id="instances-nav-label">

src/shared/components/icons/IconDefguard/IconDeguard.tsx

@@ -7,34 +7,28 @@ type Props = {
   className?: string;
 };
 
-export const IconDefguard = ({ id, className, height = 44, width = 21 }: Props) => {
-  const gradientId = useId();
+export const IconDefguard = ({ id, className, height = 43, width = 21 }: Props) => {
+  const clipPathId = useId();
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={height}
       fill="none"
-      viewBox="0 0 21 44"
+      viewBox="0 0 21 43"
       className={className}
       id={id}
     >
-      <path
-        fill={`url(#${gradientId})`}
-        d="M20.8625 17.9624V2.00098L17.3855 0V7.9646L10.4314 3.96118L0 9.96558V33.9839L10.4314 39.9882L17.3855 35.9849V40.0002L13.9127 41.9985L17.3899 44L20.8625 42.0015V21.969L10.4314 15.9714L3.47705 19.9739V11.9634L10.4314 7.96045L17.3855 11.9634V15.9612L20.8625 17.9624ZM10.4314 19.9749L13.9084 21.9758L10.4314 23.9771L6.95422 21.9758L10.4314 19.9749ZM10.4314 27.9789L17.3855 23.9771V31.983L10.4314 35.9856L3.47705 31.983V23.9771L10.4314 27.9789Z"
-      />
+      <g clipPath={`url(#${clipPathId})`}>
+        <path
+          fill="#0C8CE0"
+          d="M18.706 0v9.315l-8.178-4.658L0 10.65v22.625l10.52 5.992 8.178-4.658v4.8l-3.957 2.258L17.08 43l3.957-2.257V21.29L10.52 15.298 2.34 19.956v-7.98l8.18-4.658 8.178 4.657v2.652l2.34 1.334V1.334L18.698 0zM2.34 31.94v-7.981l8.18 4.657 8.178-4.657v7.98l-8.179 4.658zm15.192-9.978-7.013 3.994-7.013-3.994 7.013-3.995z"
+        />
+      </g>
       <defs>
-        <linearGradient
-          id={gradientId}
-          x1={10.431}
-          x2={10.431}
-          y1={0}
-          y2={44}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#2ACCFF" />
-          <stop offset={1} stopColor="#0071D4" />
-        </linearGradient>
+        <clipPath id={clipPathId}>
+          <path fill="#fff" d="M0 0h21v43H0z" />
+        </clipPath>
       </defs>
     </svg>
   );

src/shared/components/icons/IconDefguardFull/IconDefguardFull.tsx

@@ -7,38 +7,65 @@ type Props = {
   className?: string;
 };
 
-export const IconDefguardFull = ({ id, className, height = 56, width = 128 }: Props) => {
-  const gradientId = useId();
+export const IconDefguardFull = ({ id, className, height = 99, width = 257 }: Props) => {
+  const clipPathId = useId();
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={height}
+      viewBox="0 0 257 99"
       fill="none"
-      viewBox="0 0 128 56"
+      xmlns="http://www.w3.org/2000/svg"
       className={className}
       id={id}
     >
-      <path
-        fill={`url(#${gradientId})`}
-        d="M29.863 23.962V8.001L26.386 6v7.965L19.43 9.96 9 15.966v24.018l10.431 6.004 6.954-4.003V46l-3.472 1.998L26.39 50l3.473-1.998V27.968L19.43 21.971l-6.954 4.003v-8.01l6.954-4.004 6.954 4.003v3.998l3.477 2.001ZM19.43 25.975l3.477 2-3.477 2.002-3.477-2.001 3.477-2.001Zm0 8.004 6.954-4.002v8.006l-6.954 4.003-6.954-4.003v-8.006l6.954 4.002Z"
-      />
-      <path
-        fill="var(--text-body-primary)"
-        d="M44.355 22.6c-.803-.58-1.695-.804-2.587-.804-2.676 0-4.906 2.186-4.906 4.861v4.639c0 2.899 2.097 4.86 4.995 4.86 2.676 0 4.995-2.184 4.995-4.86V17.203h-2.497v5.396Zm0 8.696c0 1.427-1.026 2.542-2.497 2.542-1.428 0-2.498-1.115-2.498-2.542l.045-4.639c0-1.471 1.025-2.542 2.453-2.542 1.471 0 2.497 1.07 2.497 2.543v4.638ZM54.121 21.796c-2.675 0-4.995 2.186-4.995 4.861v4.639c0 2.899 2.096 4.86 4.995 4.86 2.676 0 4.995-2.184 4.995-4.86H56.62c0 1.427-1.026 2.542-2.498 2.542-1.427 0-2.497-1.115-2.497-2.542v-1.16h7.492v-3.479c0-2.898-2.096-4.86-4.995-4.86Zm2.498 6.021h-4.95v-1.16c0-1.471 1.025-2.542 2.452-2.542 1.472 0 2.498 1.07 2.498 2.543v1.16ZM62.015 20.637v1.382h-1.249v2.32h1.25v11.595h2.497V24.338h1.248V22.02h-1.248v-1.382c0-.714.49-1.16 1.16-1.16h.222v-2.319h-.401c-2.007 0-3.479 1.427-3.479 3.479ZM72.406 21.796c-2.676 0-4.995 2.186-4.995 4.861v4.639c0 2.899 2.007 4.86 4.772 4.86 1.16 0 2.275-.4 2.765-1.025v.803c0 1.516-.98 2.676-2.497 2.676l-.047-.002v2.186l.047.001c2.631 0 4.95-1.962 4.95-4.861v-9.276c0-2.9-2.096-4.862-4.995-4.862Zm2.498 9.5c0 1.427-1.026 2.542-2.498 2.542-1.427 0-2.497-1.115-2.497-2.542v-4.639c0-1.471 1.07-2.542 2.497-2.542 1.472 0 2.498 1.07 2.498 2.543v4.638ZM86.9 31.296c0 1.427-1.026 2.542-2.497 2.542-1.428 0-2.498-1.115-2.498-2.542v-9.277h-2.497v9.277c0 2.898 2.051 4.86 4.95 4.86 2.542 0 5.04-1.962 5.04-4.86v-9.277H86.9v9.277ZM96.489 21.796c-2.587 0-4.996 1.873-4.996 4.772h2.364c0-1.516 1.026-2.586 2.542-2.586 1.517 0 2.542 1.16 2.542 2.675v.848h-.044c-.714-.58-1.561-.892-2.587-.892-2.676 0-4.906 2.096-4.906 4.772 0 2.899 2.007 4.772 4.772 4.772 1.16 0 2.23-.401 2.765-1.026v.803h2.453v-9.276c0-2.9-2.007-4.862-4.906-4.862Zm-.09 12.131c-1.427 0-2.497-1.115-2.497-2.542 0-1.472 1.07-2.542 2.497-2.542 1.472 0 2.498 1.07 2.498 2.542 0 1.427-1.026 2.542-2.498 2.542ZM103.312 25.498v10.436h2.498V25.498c0-.714.49-1.16 1.159-1.16h.713V22.02h-.891c-2.007 0-3.479 1.427-3.479 3.479ZM116.557 17.203v5.396c-.803-.58-1.695-.803-2.587-.803-2.676 0-4.906 2.186-4.906 4.861v4.639c0 2.899 2.097 4.86 4.996 4.86 2.675 0 4.994-2.184 4.994-4.86V17.203h-2.497Zm0 14.093c0 1.427-1.026 2.542-2.497 2.542-1.428 0-2.498-1.115-2.498-2.542l.045-4.639c0-1.471 1.025-2.542 2.453-2.542 1.471 0 2.497 1.07 2.497 2.543v4.638Z"
-      />
+      <g clipPath={`url(#${clipPathId})`}>
+        <path
+          d="M229.588 31.2966V44.075H229.298C228.005 41.6236 225.437 39.9249 222.484 39.9249H219.627C215.361 39.9249 211.906 43.3801 211.906 47.646V55.3864C211.906 59.6523 215.361 63.1075 219.627 63.1075H222.484C225.399 63.1075 227.927 61.4667 229.24 59.0732H229.452L229.607 62.6828H232.386V31.2966H229.607H229.588ZM223.488 60.2121H220.631C217.427 60.2121 214.84 57.6255 214.84 54.4212V48.6304C214.84 45.4262 217.427 42.8396 220.631 42.8396H223.488C226.692 42.8396 229.279 45.4262 229.279 48.6304V54.4212C229.279 57.6255 226.692 60.2121 223.488 60.2121Z"
+          fill="var(--text-body-primary)"
+        />
+        <path
+          d="M200.982 40.3495H199.727C198.665 40.3495 197.797 41.2181 197.797 42.2798V62.702H200.982V42.8781H209.668V40.3495H200.982Z"
+          fill="var(--text-body-primary)"
+        />
+        <path
+          d="M190.423 62.7021L190.385 46.8353C190.385 43.0327 187.296 39.9249 183.474 39.9249H179.71C175.908 39.9249 172.8 43.0134 172.8 46.8353H175.676C175.946 44.3452 178.031 42.415 180.598 42.415H182.567C185.308 42.415 187.547 44.6348 187.547 47.3951V49.3446H178.977C175.174 49.3446 172.066 52.4331 172.066 56.255C172.066 60.0769 175.155 63.1654 178.977 63.1654H181.756C184.053 63.1654 186.061 62.0265 187.316 60.3086H187.528V62.7407H190.385L190.423 62.7021ZM181.834 60.6367H179.517C177.085 60.6367 175.136 58.6678 175.136 56.255C175.136 53.8422 177.104 51.8733 179.517 51.8733H187.566V54.9231C187.566 58.0888 184.999 60.656 181.834 60.656V60.6367Z"
+          fill="var(--text-body-primary)"
+        />
+        <path
+          d="M163.843 54.4211C163.843 57.6254 161.256 60.212 158.052 60.212H156.585C153.381 60.212 150.794 57.6254 150.794 54.4211V40.3495H147.86V55.4056C147.86 59.6715 151.316 63.1267 155.581 63.1267H157.068C159.982 63.1267 162.511 61.4859 163.824 59.0924H164.036L164.19 62.702H166.97V40.3495H163.901L163.862 54.4211H163.843Z"
+          fill="var(--text-body-primary)"
+        />
+        <path
+          d="M138.151 58.5327H128.23C127.284 58.5327 126.531 57.8572 126.531 56.9113C126.531 55.9655 127.284 55.2127 128.23 55.2127H130.99H134.31C138.035 55.2127 141.066 52.1822 141.066 48.4567V46.6809C141.066 44.5383 140.043 42.6466 138.499 41.4113V39.8477H143.17V37.3191H138.267C137.205 37.3191 136.337 38.1877 136.337 39.2494V40.2724C135.7 40.0601 135.024 39.925 134.31 39.925H130.99C127.264 39.925 124.234 42.9555 124.234 46.6809V48.4567C124.234 50.7345 125.373 52.7419 127.091 53.958C125.334 54.0352 123.925 55.4636 123.925 57.2395C123.925 58.7065 124.91 59.9032 126.241 60.2893C124.002 60.9842 122.381 62.8565 122.381 65.0764V65.7133C122.381 68.5315 124.967 70.8092 128.172 70.8092H138.113C141.317 70.8092 143.903 68.2227 143.903 65.0184V64.2849C143.903 61.0807 141.317 58.4941 138.113 58.4941L138.151 58.5327ZM127.168 46.1404C127.168 44.0943 128.905 42.4343 131.028 42.4343H134.329C136.453 42.4343 138.19 44.0943 138.19 46.1404V48.9972C138.19 51.0433 136.453 52.7033 134.329 52.7033H131.028C128.905 52.7033 127.168 51.0433 127.168 48.9972V46.1404ZM138.016 68.0683H128.345C126.473 68.0683 124.948 66.5434 124.948 64.671C124.948 62.7986 126.473 61.2737 128.345 61.2737H138.016C139.888 61.2737 141.413 62.7986 141.413 64.671C141.413 66.5434 139.888 68.0683 138.016 68.0683Z"
+          fill="var(--text-body-primary)"
+        />
+        <path
+          d="M119.581 33.8446V31.2966H113.095C112.034 31.2966 111.165 32.1653 111.165 33.2269V40.3496H107.285V42.9555H111.165V62.7021H114.002V42.9555H119.079V40.3496H114.002V33.8446H119.581Z"
+          fill="var(--text-body-primary)"
+        />
+        <path
+          d="M101.65 52.1628H104.371V49.5763C104.371 44.2487 100.047 39.9249 94.7199 39.9249H93.832C88.5045 39.9249 84.1807 44.2487 84.1807 49.5763V52.9542C84.1807 58.552 88.7554 63.1075 94.3339 63.1075H95.2218C99.6228 63.1075 103.29 60.1541 104.448 56.1392H101.128C99.8737 59.3048 96.9976 61.3895 93.2336 60.5209C89.4696 59.6523 87.2112 56.2743 87.2112 52.5875V52.1628H101.65ZM94.4304 42.3185C98.4067 42.3185 101.264 45.542 101.264 49.5377V49.7114H87.2112V49.5377C87.2112 45.5613 90.4347 42.3185 94.4304 42.3185Z"
+          fill="var(--text-body-primary)"
+        />
+        <path
+          d="M75.7262 31.2966V44.075H75.4366C74.1434 41.6236 71.5761 39.9249 68.6228 39.9249H65.766C61.5001 39.9249 58.0449 43.3801 58.0449 47.646V55.3864C58.0449 59.6523 61.5001 63.1075 65.766 63.1075H68.6228C71.5375 63.1075 74.0662 61.4667 75.3787 59.0732H75.5911L75.7455 62.6828H78.5251V31.2966H75.7455H75.7262ZM69.6265 60.2121H66.7697C63.5655 60.2121 60.9789 57.6255 60.9789 54.4212V48.6304C60.9789 45.4262 63.5655 42.8396 66.7697 42.8396H69.6265C72.8308 42.8396 75.4173 45.4262 75.4173 48.6304V54.4212C75.4173 57.6255 72.8308 60.2121 69.6265 60.2121Z"
+          fill="var(--text-body-primary)"
+        />
+        <path
+          d="M45.6526 23.5756V34.8656L35.8796 29.2206L23.2998 36.4828V63.9044L35.8695 71.1666L45.6425 65.5216V71.3395L40.9136 74.0756L43.7102 75.6928L48.4391 72.9568V49.3799L35.8695 42.1177L26.0965 47.7627V38.0899L35.8695 32.4449L45.6425 38.0899V41.304L48.4391 42.9212V25.1928L45.6425 23.5756H45.6526ZM26.0965 62.2872V52.6144L35.8695 58.2594L45.6425 52.6144V62.2872L35.8695 67.9322L26.0965 62.2872ZM44.2492 50.1936L35.8695 55.0351L27.4897 50.1936L35.8695 45.3521L44.2492 50.1936Z"
+          fill="#0C8CE0"
+        />
+      </g>
       <defs>
-        <linearGradient
-          id={gradientId}
-          x1={19.431}
-          x2={19.431}
-          y1={6}
-          y2={50}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#2ACCFF" />
-          <stop offset={1} stopColor="#0071D4" />
-        </linearGradient>
+        <clipPath id={clipPathId}>
+          <rect
+            width="210.399"
+            height="52.1173"
+            fill="white"
+            transform="translate(23.2998 23.5756)"
+          />
+        </clipPath>
       </defs>
     </svg>
   );

src/shared/components/svg/DefguardLogoCollapsed.tsx

@@ -1,38 +1,24 @@
 import type { SVGProps } from 'react';
-const SvgDefguadNavLogoCollapsed = (props: SVGProps<SVGSVGElement>) => (
+const SvgDefguardLogoCollapsed = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width={20.863}
-    height={44}
-    viewBox="0 0 20.863 44"
+    width={21}
+    height={43}
+    fill="none"
+    viewBox="0 0 21 43"
     {...props}
   >
+    <g clipPath="url(#defguard-logo-collapsed_svg__a)">
+      <path
+        fill="#0C8CE0"
+        d="M18.706 0v9.315l-8.178-4.658L0 10.65v22.625l10.52 5.992 8.178-4.658v4.8l-3.957 2.258L17.08 43l3.957-2.257V21.29L10.52 15.298 2.34 19.956v-7.98l8.18-4.658 8.178 4.657v2.652l2.34 1.334V1.334L18.698 0zM2.34 31.94v-7.981l8.18 4.657 8.178-4.657v7.98l-8.179 4.658zm15.192-9.978-7.013 3.994-7.013-3.994 7.013-3.995z"
+      />
+    </g>
     <defs>
-      <linearGradient
-        id="defguad-nav-logo-collapsed_svg__a"
-        x1={0.5}
-        x2={0.5}
-        y2={1}
-        gradientUnits="objectBoundingBox"
-      >
-        <stop offset={0} stopColor="#2accff" />
-        <stop offset={1} stopColor="#0071d4" />
-      </linearGradient>
+      <clipPath id="defguard-logo-collapsed_svg__a">
+        <path fill="#fff" d="M0 0h21v43H0z" />
+      </clipPath>
     </defs>
-    <path
-      d="m1710.288-1889.281-3.477-2.007-3.477 2.007 3.477 2.008Z"
-      style={{
-        fill: 'none',
-      }}
-      transform="translate(-1696.379 1911.257)"
-    />
-    <path
-      d="M1660.863-2055.789v-15.961l-3.477-2v7.965l-6.954-4-10.431 6v24.018l10.431 6 6.954-4v4.015l-3.473 2 3.477 2 3.473-2v-20.032l-10.431-6-6.954 4v-8.01l6.954-4 6.954 4v4Zm-10.431 2.012 3.477 2-3.477 2-3.477-2Zm0 8 6.954-4v8.006l-6.954 4-6.954-4v-8.006Z"
-      style={{
-        fill: 'url(#defguad-nav-logo-collapsed_svg__a)',
-      }}
-      transform="translate(-1640 2073.751)"
-    />
   </svg>
 );
-export default SvgDefguadNavLogoCollapsed;
+export default SvgDefguardLogoCollapsed;

src/shared/components/svg/DefguardLogoDarkmode.tsx

@@ -2,32 +2,26 @@ import type { SVGProps } from 'react';
 const SvgDefguardLogoDarkmode = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width={128}
-    height={56}
+    width={134}
+    height={51}
     fill="none"
-    viewBox="0 0 128 56"
+    viewBox="0 0 134 51"
     {...props}
   >
-    <path
-      fill="url(#defguard-logo-darkmode_svg__a)"
-      d="M29.863 23.962V8.001L26.386 6v7.965L19.43 9.96 9 15.966v24.018l10.431 6.004 6.954-4.003V46L22.914 48 26.39 50l3.473-1.998V27.969L19.43 21.971l-6.954 4.003v-8.01l6.954-4.004 6.954 4.003v3.998zM19.43 25.975l3.477 2-3.477 2.002-3.477-2.001zm0 8.004 6.954-4.002v8.006l-6.954 4.003-6.954-4.003v-8.006z"
-    />
-    <path
-      fill="#F9F9F9"
-      d="M44.355 22.6c-.803-.58-1.695-.804-2.587-.804-2.676 0-4.906 2.186-4.906 4.861v4.639c0 2.899 2.097 4.86 4.996 4.86 2.675 0 4.995-2.184 4.995-4.86V17.203h-2.498zm0 8.696c0 1.427-1.026 2.542-2.497 2.542-1.428 0-2.498-1.115-2.498-2.542l.045-4.639c0-1.471 1.025-2.542 2.453-2.542 1.471 0 2.497 1.07 2.497 2.543zM54.121 21.796c-2.675 0-4.995 2.186-4.995 4.861v4.639c0 2.899 2.096 4.86 4.995 4.86 2.676 0 4.995-2.184 4.995-4.86H56.62c0 1.427-1.026 2.542-2.498 2.542-1.427 0-2.497-1.115-2.497-2.542v-1.16h7.492v-3.479c0-2.898-2.096-4.86-4.995-4.86m2.498 6.021h-4.95v-1.16c0-1.471 1.025-2.542 2.452-2.542 1.472 0 2.498 1.07 2.498 2.543zM62.015 20.637v1.382h-1.249v2.32h1.25v11.595h2.497V24.338h1.248V22.02h-1.248v-1.382c0-.714.49-1.16 1.16-1.16h.222v-2.319h-.401c-2.007 0-3.479 1.427-3.479 3.479M72.406 21.796c-2.676 0-4.995 2.186-4.995 4.861v4.639c0 2.899 2.007 4.86 4.772 4.86 1.16 0 2.275-.4 2.765-1.025v.803c0 1.516-.98 2.676-2.497 2.676l-.047-.002v2.186l.047.001c2.631 0 4.95-1.962 4.95-4.861v-9.276c0-2.9-2.096-4.862-4.995-4.862m2.498 9.5c0 1.427-1.026 2.542-2.498 2.542-1.427 0-2.497-1.115-2.497-2.542v-4.639c0-1.471 1.07-2.542 2.497-2.542 1.472 0 2.498 1.07 2.498 2.543zM86.9 31.296c0 1.427-1.026 2.542-2.497 2.542-1.428 0-2.498-1.115-2.498-2.542v-9.277h-2.497v9.277c0 2.898 2.051 4.86 4.95 4.86 2.542 0 5.04-1.962 5.04-4.86v-9.277H86.9zM96.489 21.796c-2.587 0-4.996 1.873-4.996 4.772h2.364c0-1.516 1.026-2.586 2.542-2.586 1.517 0 2.542 1.16 2.542 2.675v.848h-.044c-.714-.58-1.561-.892-2.587-.892-2.676 0-4.906 2.096-4.906 4.772 0 2.899 2.007 4.772 4.772 4.772 1.16 0 2.23-.401 2.765-1.026v.803h2.453v-9.276c0-2.9-2.007-4.862-4.906-4.862m-.09 12.131c-1.427 0-2.497-1.115-2.497-2.542 0-1.472 1.07-2.542 2.497-2.542 1.472 0 2.498 1.07 2.498 2.542 0 1.427-1.026 2.542-2.498 2.542M103.312 25.498v10.436h2.498V25.498c0-.714.49-1.16 1.159-1.16h.713V22.02h-.891c-2.007 0-3.479 1.427-3.479 3.479M116.557 17.203v5.396c-.803-.58-1.695-.803-2.587-.803-2.676 0-4.906 2.186-4.906 4.861v4.639c0 2.899 2.097 4.86 4.996 4.86 2.675 0 4.994-2.184 4.994-4.86V17.203zm0 14.093c0 1.427-1.026 2.542-2.497 2.542-1.428 0-2.498-1.115-2.498-2.542l.045-4.639c0-1.471 1.025-2.542 2.453-2.542 1.471 0 2.497 1.07 2.497 2.543z"
-    />
+    <g clipPath="url(#defguard-logo-darkmode_svg__a)">
+      <path
+        fill="#fff"
+        d="M119.37 16v6.62h-.15c-.67-1.27-2-2.15-3.53-2.15h-1.48c-2.21 0-4 1.79-4 4v4.01c0 2.21 1.79 4 4 4h1.48c1.51 0 2.82-.85 3.5-2.09h.11l.08 1.87h1.44V16h-1.44zm-3.16 14.98h-1.48c-1.66 0-3-1.34-3-3v-3c0-1.66 1.34-3 3-3h1.48c1.66 0 3 1.34 3 3v3c0 1.66-1.34 3-3 3M104.55 20.69h-.65c-.55 0-1 .45-1 1v10.58h1.65V22h4.5v-1.31zM99.08 32.27l-.02-8.22c0-1.97-1.6-3.58-3.58-3.58h-1.95c-1.97 0-3.58 1.6-3.58 3.58h1.49a2.56 2.56 0 0 1 2.55-2.29h1.02a2.58 2.58 0 0 1 2.58 2.58v1.01h-4.44c-1.97 0-3.58 1.6-3.58 3.58s1.6 3.58 3.58 3.58h1.44c1.19 0 2.23-.59 2.88-1.48h.11v1.26h1.48zm-4.45-1.07h-1.2c-1.26 0-2.27-1.02-2.27-2.27s1.02-2.27 2.27-2.27h4.17v1.58a2.97 2.97 0 0 1-2.97 2.97zM85.31 27.98c0 1.66-1.34 3-3 3h-.76c-1.66 0-3-1.34-3-3v-7.29h-1.52v7.8c0 2.21 1.79 4 4 4h.77c1.51 0 2.82-.85 3.5-2.09h.11l.08 1.87h1.44V20.69h-1.59l-.02 7.29zM72 30.11h-5.14c-.49 0-.88-.35-.88-.84s.39-.88.88-.88h3.15c1.93 0 3.5-1.57 3.5-3.5v-.92c0-1.11-.53-2.09-1.33-2.73v-.81h2.42v-1.31h-2.54c-.55 0-1 .45-1 1v.53c-.33-.11-.68-.18-1.05-.18h-1.72c-1.93 0-3.5 1.57-3.5 3.5v.92c0 1.18.59 2.22 1.48 2.85-.91.04-1.64.78-1.64 1.7 0 .76.51 1.38 1.2 1.58-1.16.36-2 1.33-2 2.48v.33c0 1.46 1.34 2.64 3 2.64h5.15c1.66 0 3-1.34 3-3v-.38c0-1.66-1.34-3-3-3zm-5.69-6.42c0-1.06.9-1.92 2-1.92h1.71c1.1 0 2 .86 2 1.92v1.48c0 1.06-.9 1.92-2 1.92h-1.71c-1.1 0-2-.86-2-1.92zm5.62 11.36h-5.01c-.97 0-1.76-.79-1.76-1.76s.79-1.76 1.76-1.76h5.01c.97 0 1.76.79 1.76 1.76s-.79 1.76-1.76 1.76M62.38 17.32V16h-3.36c-.55 0-1 .45-1 1v3.69h-2.01v1.35h2.01v10.23h1.47V22.04h2.63v-1.35h-2.63v-3.37zM53.09 26.81h1.41v-1.34c0-2.76-2.24-5-5-5h-.46c-2.76 0-5 2.24-5 5v1.75c0 2.9 2.37 5.26 5.26 5.26h.46c2.28 0 4.18-1.53 4.78-3.61h-1.72c-.65 1.64-2.14 2.72-4.09 2.27-1.95-.45-3.12-2.2-3.12-4.11v-.22zm-3.74-5.1c2.06 0 3.54 1.67 3.54 3.74v.09h-7.28v-.09a3.74 3.74 0 0 1 3.74-3.74M39.66 16v6.62h-.15c-.67-1.27-2-2.15-3.53-2.15H34.5c-2.21 0-4 1.79-4 4v4.01c0 2.21 1.79 4 4 4h1.48c1.51 0 2.82-.85 3.5-2.09h.11l.08 1.87h1.44V16h-1.44zM36.5 30.98h-1.48c-1.66 0-3-1.34-3-3v-3c0-1.66 1.34-3 3-3h1.48c1.66 0 3 1.34 3 3v3c0 1.66-1.34 3-3 3"
+      />
+      <path
+        fill="#0C8CE0"
+        d="M24.08 12v5.849l-5.063-2.924-6.517 3.762v14.206l6.512 3.762 5.063-2.924v3.014l-2.45 1.417 1.449.838 2.45-1.417V25.368l-6.512-3.762-5.063 2.924v-5.01l5.063-2.925 5.063 2.924v1.665l1.449.838v-9.184L24.074 12zM13.95 32.055v-5.011l5.063 2.924 5.063-2.924v5.011l-5.063 2.925zm9.404-6.265-4.341 2.508-4.341-2.508 4.34-2.508z"
+      />
+    </g>
     <defs>
-      <linearGradient
-        id="defguard-logo-darkmode_svg__a"
-        x1={19.431}
-        x2={19.431}
-        y1={6}
-        y2={50}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#2ACCFF" />
-        <stop offset={1} stopColor="#0071D4" />
-      </linearGradient>
+      <clipPath id="defguard-logo-darkmode_svg__a">
+        <path fill="#fff" d="M12.5 12h109v27h-109z" />
+      </clipPath>
     </defs>
   </svg>
 );