Skip to content

Commit 3a938bb

Browse files
authored
feat(app): update new session page logo (#36700)
1 parent 6f9a4e7 commit 3a938bb

2 files changed

Lines changed: 49 additions & 70 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export function NewSessionDesignView(props: { children: JSX.Element }) {
77
<div data-component="session-new-design" class="relative size-full overflow-hidden bg-v2-background-bg-deep ">
88
<div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
99
<div class={NEW_SESSION_CONTENT_WIDTH}>
10-
<WordmarkV2 class="h-auto w-full text-v2-icon-icon-base" />
10+
<WordmarkV2 class="h-auto w-full text-v2-background-bg-inverse" />
1111
<div class="mt-8">{props.children}</div>
1212
</div>
1313
</div>

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

Lines changed: 48 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,70 @@
11
import { createUniqueId, type ComponentProps } from "solid-js"
22

33
export function WordmarkV2(props: Pick<ComponentProps<"svg">, "class">) {
4-
const filter = createUniqueId()
54
const mask = createUniqueId()
65
const maskGradient = createUniqueId()
76

87
return (
98
<svg
109
xmlns="http://www.w3.org/2000/svg"
11-
viewBox="0 0 720.002 129.001"
10+
viewBox="0 0 720 129"
1211
fill="none"
13-
preserveAspectRatio="none"
1412
classList={{ [props.class ?? ""]: !!props.class }}
1513
>
16-
<g opacity="0.16" filter={`url(#${filter})`} mask={`url(#${mask})`}>
17-
<path
18-
opacity="0.7"
19-
d="M55.3846 36.8583H18.4615V92.144H55.3846V36.8583ZM73.8462 110.573H0V18.4297H73.8462V110.573Z"
20-
fill="currentColor"
21-
/>
22-
<path
23-
opacity="0.7"
24-
d="M110.774 92.144H147.697V36.8583H110.774V92.144ZM166.159 110.573H110.774V129.001H92.3125V18.4297H166.159V110.573Z"
25-
fill="currentColor"
26-
/>
27-
<path
28-
opacity="0.7"
29-
d="M258.463 73.7154H203.079V92.144H258.463V110.573H184.617V18.4297H258.463V73.7154ZM203.079 55.2868H240.002V36.8583H203.079V55.2868Z"
30-
fill="currentColor"
31-
/>
32-
<path
33-
opacity="0.7"
34-
d="M332.306 36.8583H295.383V110.573H276.922V18.4297H332.306V36.8583ZM350.768 110.573H332.306V36.8583H350.768V110.573Z"
35-
fill="currentColor"
36-
/>
37-
<path
38-
opacity="0.7"
39-
d="M443.081 36.8583H387.696V92.144H443.081V110.573H369.234V18.4297H443.081V36.8583Z"
40-
fill="currentColor"
41-
/>
42-
<path
43-
opacity="0.7"
44-
d="M516.924 36.8583H480.001V92.144H516.924V36.8583ZM535.385 110.573H461.539V18.4297H535.385V110.573Z"
45-
fill="currentColor"
46-
/>
47-
<path
48-
opacity="0.7"
49-
d="M609.228 36.8571H572.305V92.1429H609.228V36.8571ZM627.69 110.571H553.844V18.4286H609.228V0H627.69V110.571Z"
50-
fill="currentColor"
51-
/>
52-
<path
53-
opacity="0.7"
54-
d="M664.618 36.8583V55.2868H701.541V36.8583H664.618ZM720.002 73.7154H664.618V92.144H720.002V110.573H646.156V18.4297H720.002V73.7154Z"
55-
fill="currentColor"
56-
/>
14+
<g opacity="0.6">
15+
<g mask={`url(#${mask})`}>
16+
<g opacity="0.16">
17+
<path
18+
opacity="0.7"
19+
d="M55.3846 36.4286H18.4615V91.7143H55.3846V36.4286ZM73.8462 110.143H0V18H73.8462V110.143Z"
20+
fill="currentColor"
21+
/>
22+
<path
23+
opacity="0.7"
24+
d="M110.462 91.7143H147.385V36.4286H110.462V91.7143ZM165.846 110.143H110.462V128.571H92V18H165.846V110.143Z"
25+
fill="currentColor"
26+
/>
27+
<path
28+
opacity="0.7"
29+
d="M258.846 73.2857H203.462V91.7143H258.846V110.143H185V18H258.846V73.2857ZM203.462 54.8571H240.385V36.4286H203.462V54.8571Z"
30+
fill="currentColor"
31+
/>
32+
<path
33+
opacity="0.7"
34+
d="M332.385 36.4286H295.462V110.143H277V18H332.385V36.4286ZM350.846 110.143H332.385V36.4286H350.846V110.143Z"
35+
fill="currentColor"
36+
/>
37+
<path
38+
opacity="0.7"
39+
d="M442.846 36.4286H387.462V91.7143H442.846V110.143H369V18H442.846V36.4286Z"
40+
fill="currentColor"
41+
/>
42+
<path
43+
opacity="0.7"
44+
d="M517.385 36.4286H480.462V91.7143H517.385V36.4286ZM535.846 110.143H462V18H535.846V110.143Z"
45+
fill="currentColor"
46+
/>
47+
<path
48+
opacity="0.7"
49+
d="M609.385 36.8571H572.462V92.1429H609.385V36.8571ZM627.846 110.571H554V18.4286H609.385V0H627.846V110.571Z"
50+
fill="currentColor"
51+
/>
52+
<path
53+
opacity="0.7"
54+
d="M664.462 36.4286V54.8571H701.385V36.4286H664.462ZM719.846 73.2857H664.462V91.7143H719.846V110.143H646V18H719.846V73.2857Z"
55+
fill="currentColor"
56+
/>
57+
</g>
58+
</g>
5759
</g>
5860
<defs>
59-
<mask id={mask} maskUnits="userSpaceOnUse" x="0" y="0" width="720" height="129">
61+
<mask id={mask} style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="720" height="129">
6062
<rect width="720" height="129" fill={`url(#${maskGradient})`} />
6163
</mask>
62-
<linearGradient id={maskGradient} x1="360" y1="0" x2="360" y2="112" gradientUnits="userSpaceOnUse">
64+
<linearGradient id={maskGradient} x1="360" y1="68" x2="360" y2="129" gradientUnits="userSpaceOnUse">
6365
<stop stop-color="white" stop-opacity="0.7" />
6466
<stop offset="1" stop-color="white" stop-opacity="0" />
6567
</linearGradient>
66-
<filter
67-
id={filter}
68-
x="0"
69-
y="0"
70-
width="720.002"
71-
height="130.001"
72-
filterUnits="userSpaceOnUse"
73-
color-interpolation-filters="sRGB"
74-
>
75-
<feFlood flood-opacity="0" result="BackgroundImageFix" />
76-
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
77-
<feColorMatrix
78-
in="SourceAlpha"
79-
type="matrix"
80-
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
81-
result="hardAlpha"
82-
/>
83-
<feOffset dy="1" />
84-
<feGaussianBlur stdDeviation="1" />
85-
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
86-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
87-
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_4938_16028" />
88-
</filter>
8968
</defs>
9069
</svg>
9170
)

0 commit comments

Comments
 (0)