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

This commit is contained in:
Aarav Sareen 2026-07-14 18:59:32 +05:30 committed by GitHub
parent 6f9a4e70da
commit 3a938bb6d8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 49 additions and 70 deletions

View file

@ -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>

View file

@ -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>
)