feat(app): update new session page logo (#36700)

packages/app/src/components/session/session-new-design-view.tsx

@@ -7,7 +7,7 @@ export function NewSessionDesignView(props: { children: JSX.Element }) {
     <div data-component="session-new-design" class="relative size-full overflow-hidden bg-v2-background-bg-deep ">
       <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
         <div class={NEW_SESSION_CONTENT_WIDTH}>
-          <WordmarkV2 class="h-auto w-full text-v2-icon-icon-base" />
+          <WordmarkV2 class="h-auto w-full text-v2-background-bg-inverse" />
           <div class="mt-8">{props.children}</div>
         </div>
       </div>

packages/ui/src/v2/components/wordmark-v2.tsx

@@ -1,91 +1,70 @@
 import { createUniqueId, type ComponentProps } from "solid-js"
 
 export function WordmarkV2(props: Pick<ComponentProps<"svg">, "class">) {
-  const filter = createUniqueId()
   const mask = createUniqueId()
   const maskGradient = createUniqueId()
 
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 720.002 129.001"
+      viewBox="0 0 720 129"
       fill="none"
-      preserveAspectRatio="none"
       classList={{ [props.class ?? ""]: !!props.class }}
     >
-      <g opacity="0.16" filter={`url(#${filter})`} mask={`url(#${mask})`}>
-        <path
-          opacity="0.7"
-          d="M55.3846 36.8583H18.4615V92.144H55.3846V36.8583ZM73.8462 110.573H0V18.4297H73.8462V110.573Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M110.774 92.144H147.697V36.8583H110.774V92.144ZM166.159 110.573H110.774V129.001H92.3125V18.4297H166.159V110.573Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M258.463 73.7154H203.079V92.144H258.463V110.573H184.617V18.4297H258.463V73.7154ZM203.079 55.2868H240.002V36.8583H203.079V55.2868Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M332.306 36.8583H295.383V110.573H276.922V18.4297H332.306V36.8583ZM350.768 110.573H332.306V36.8583H350.768V110.573Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M443.081 36.8583H387.696V92.144H443.081V110.573H369.234V18.4297H443.081V36.8583Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M516.924 36.8583H480.001V92.144H516.924V36.8583ZM535.385 110.573H461.539V18.4297H535.385V110.573Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M609.228 36.8571H572.305V92.1429H609.228V36.8571ZM627.69 110.571H553.844V18.4286H609.228V0H627.69V110.571Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M664.618 36.8583V55.2868H701.541V36.8583H664.618ZM720.002 73.7154H664.618V92.144H720.002V110.573H646.156V18.4297H720.002V73.7154Z"
-          fill="currentColor"
-        />
+      <g opacity="0.6">
+        <g mask={`url(#${mask})`}>
+          <g opacity="0.16">
+            <path
+              opacity="0.7"
+              d="M55.3846 36.4286H18.4615V91.7143H55.3846V36.4286ZM73.8462 110.143H0V18H73.8462V110.143Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M110.462 91.7143H147.385V36.4286H110.462V91.7143ZM165.846 110.143H110.462V128.571H92V18H165.846V110.143Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M258.846 73.2857H203.462V91.7143H258.846V110.143H185V18H258.846V73.2857ZM203.462 54.8571H240.385V36.4286H203.462V54.8571Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M332.385 36.4286H295.462V110.143H277V18H332.385V36.4286ZM350.846 110.143H332.385V36.4286H350.846V110.143Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M442.846 36.4286H387.462V91.7143H442.846V110.143H369V18H442.846V36.4286Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M517.385 36.4286H480.462V91.7143H517.385V36.4286ZM535.846 110.143H462V18H535.846V110.143Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M609.385 36.8571H572.462V92.1429H609.385V36.8571ZM627.846 110.571H554V18.4286H609.385V0H627.846V110.571Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M664.462 36.4286V54.8571H701.385V36.4286H664.462ZM719.846 73.2857H664.462V91.7143H719.846V110.143H646V18H719.846V73.2857Z"
+              fill="currentColor"
+            />
+          </g>
+        </g>
       </g>
       <defs>
-        <mask id={mask} maskUnits="userSpaceOnUse" x="0" y="0" width="720" height="129">
+        <mask id={mask} style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="720" height="129">
           <rect width="720" height="129" fill={`url(#${maskGradient})`} />
         </mask>
-        <linearGradient id={maskGradient} x1="360" y1="0" x2="360" y2="112" gradientUnits="userSpaceOnUse">
+        <linearGradient id={maskGradient} x1="360" y1="68" x2="360" y2="129" gradientUnits="userSpaceOnUse">
           <stop stop-color="white" stop-opacity="0.7" />
           <stop offset="1" stop-color="white" stop-opacity="0" />
         </linearGradient>
-        <filter
-          id={filter}
-          x="0"
-          y="0"
-          width="720.002"
-          height="130.001"
-          filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
-        >
-          <feFlood flood-opacity="0" result="BackgroundImageFix" />
-          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="1" />
-          <feGaussianBlur stdDeviation="1" />
-          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
-          <feBlend mode="normal" in2="shape" result="effect1_innerShadow_4938_16028" />
-        </filter>
       </defs>
     </svg>
   )