Skip to content

Commit 036afc3

Browse files
adambcomeradambcomer
authored
Update fonts to use Google Fonts (#23)
1 parent 1c10f14 commit 036afc3

File tree

9 files changed

+463
-168
lines changed

9 files changed

+463
-168
lines changed

‎package.json

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@
66
"private": true,
77
"type": "module",
88
"dependencies": {
9-
"@fontsource-variable/material-symbols-rounded": "5.2.10",
10-
"@fontsource-variable/noto-sans": "5.2.6",
11-
"@fontsource-variable/noto-sans-mono": "5.2.6",
129
"@heroui/accordion": "2.2.14",
1310
"@heroui/button": "2.2.17",
1411
"@heroui/chip": "2.2.13",

‎pages/+Layout.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,14 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React from 'react'
17+
import { ReactNode } from 'react'
1818
import { HeroUIProvider } from '@heroui/system'
1919
import { ToastProvider } from '@heroui/toast'
2020

2121
import './style.css'
2222

23-
import '@fontsource-variable/noto-sans'
24-
import '@fontsource-variable/noto-sans/wght-italic.css'
25-
import '@fontsource-variable/noto-sans-mono'
26-
import '@fontsource-variable/material-symbols-rounded'
27-
2823
interface LayoutProps {
29-
children: React.ReactNode
24+
children: ReactNode
3025
}
3126

3227
export const Layout = ({ children }: LayoutProps) => {

‎pages/@workspace/builder/+Page.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,14 @@ const Page = () => {
103103

104104
<a href='/support' target='_blank'>
105105
<Button isIconOnly className='fixed bottom-5 right-5'>
106-
<span className='material-symbols-rounded'>help</span>
106+
<svg
107+
xmlns='http://www.w3.org/2000/svg'
108+
height='25px'
109+
viewBox='0 -960 960 960'
110+
width='25px'
111+
>
112+
<path d='M479.89-240Q500-240 514-253.89q14-13.88 14-34Q528-308 514.11-322q-13.88-14-34-14Q460-336 446-322.11q-14 13.88-14 34Q432-268 445.89-254q13.88 14 34 14Zm.39 144Q401-96 331-126t-122.5-82.5Q156-261 126-330.96t-30-149.5Q96-560 126-629.5q30-69.5 82.5-122T330.96-834q69.96-30 149.5-30t149.04 30q69.5 30 122 82.5T834-629.28q30 69.73 30 149Q864-401 834-331t-82.5 122.5Q699-156 629.28-126q-69.73 30-149 30Zm-.28-72q130 0 221-91t91-221q0-130-91-221t-221-91q-130 0-221 91t-91 221q0 130 91 221t221 91Zm0-312Zm3.23-172q25.31 0 44.04 16.21Q546-619.59 546-595.28 546-573 533-556t-30 31q-23 20-41 45t-17 56q0 14 10.08 22.5t23.52 8.5q14.4 0 24.4-8.5 10-8.5 13-22.5 5-22 19-38.84 14-16.85 30-32.16 23-22 37.5-49t14.5-58q0-51-39.5-84.5T483.59-720q-37.59 0-71.09 16.5t-53.66 48.77Q351-643 354.5-629t16.5 20q14 7 28 3t23-15q11-14 27-22.5t34.23-8.5Z' />
113+
</svg>
107114
</Button>
108115
</a>
109116
</>

‎pages/@workspace/builder/RulesetEditor.tsx

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,14 @@ const PosRulesetEditor = ({
5858
))}
5959
<Button
6060
startContent={
61-
<span className='material-symbols-rounded !text-sm'>add</span>
61+
<svg
62+
xmlns='http://www.w3.org/2000/svg'
63+
height='18px'
64+
viewBox='0 -960 960 960'
65+
width='18px'
66+
>
67+
<path d='M444-444H276q-15.3 0-25.65-10.29Q240-464.58 240-479.79t10.35-25.71Q260.7-516 276-516h168v-168q0-15.3 10.29-25.65Q464.58-720 479.79-720t25.71 10.35Q516-699.3 516-684v168h168q15.3 0 25.65 10.29Q720-495.42 720-480.21t-10.35 25.71Q699.3-444 684-444H516v168q0 15.3-10.29 25.65Q495.42-240 480.21-240t-25.71-10.35Q444-260.7 444-276v-168Z' />
68+
</svg>
6269
}
6370
className='cursor-pointer h-[28px] font-mono'
6471
size='sm'
@@ -137,7 +144,14 @@ const RootRulesetEditor = ({
137144
))}
138145
<Button
139146
startContent={
140-
<span className='material-symbols-rounded !text-sm'>add</span>
147+
<svg
148+
xmlns='http://www.w3.org/2000/svg'
149+
height='18px'
150+
viewBox='0 -960 960 960'
151+
width='18px'
152+
>
153+
<path d='M444-444H276q-15.3 0-25.65-10.29Q240-464.58 240-479.79t10.35-25.71Q260.7-516 276-516h168v-168q0-15.3 10.29-25.65Q464.58-720 479.79-720t25.71 10.35Q516-699.3 516-684v168h168q15.3 0 25.65 10.29Q720-495.42 720-480.21t-10.35 25.71Q699.3-444 684-444H516v168q0 15.3-10.29 25.65Q495.42-240 480.21-240t-25.71-10.35Q444-260.7 444-276v-168Z' />
154+
</svg>
141155
}
142156
className='cursor-pointer h-[28px] font-mono'
143157
size='sm'
@@ -213,7 +227,16 @@ const RuleRulesetEditor = ({
213227
{ruleset.rules.map((rule, i) => (
214228
<div key={i} className='mb-4 flex items-center'>
215229
<Chip className='mr-2 font-mono'>{rule.name}</Chip>
216-
<div className='material-symbols-rounded !text-lg mr-2'>east</div>
230+
<div className='!text-lg mr-2'>
231+
<svg
232+
xmlns='http://www.w3.org/2000/svg'
233+
height='20px'
234+
viewBox='0 -960 960 960'
235+
width='20px'
236+
>
237+
<path d='M726-444H132q-15.3 0-25.65-10.29Q96-464.58 96-479.79t10.35-25.71Q116.7-516 132-516h594L573.8-668.26Q563-679 563-693.5q0-14.5 11-25.5t25.5-11q14.5 0 25.5 11l214 214q5 5.4 7.5 11.7 2.5 6.3 2.5 13.5t-2.5 13.5Q844-460 839-455L625-241q-11 11-25 10.5t-25-11.02q-11-11.48-11-26.15 0-14.66 11-25.33l151-151Z' />
238+
</svg>
239+
</div>
217240
{rule.tags.map((tag, i) => (
218241
<Chip
219242
key={i}
@@ -236,7 +259,14 @@ const RuleRulesetEditor = ({
236259
))}
237260
<Button
238261
startContent={
239-
<span className='material-symbols-rounded !text-sm'>add</span>
262+
<svg
263+
xmlns='http://www.w3.org/2000/svg'
264+
height='18px'
265+
viewBox='0 -960 960 960'
266+
width='18px'
267+
>
268+
<path d='M444-444H276q-15.3 0-25.65-10.29Q240-464.58 240-479.79t10.35-25.71Q260.7-516 276-516h168v-168q0-15.3 10.29-25.65Q464.58-720 479.79-720t25.71 10.35Q516-699.3 516-684v168h168q15.3 0 25.65 10.29Q720-495.42 720-480.21t-10.35 25.71Q699.3-444 684-444H516v168q0 15.3-10.29 25.65Q495.42-240 480.21-240t-25.71-10.35Q444-260.7 444-276v-168Z' />
269+
</svg>
240270
}
241271
className='cursor-pointer h-[28px] font-mono mb-4'
242272
size='sm'

‎pages/@workspace/builder/TreeCanvas.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@ const TreeCanvas = (
6868
}, [canvas, ref])
6969

7070
useEffect(() => {
71-
const font1 = new FontFaceObserver('Noto Sans Mono Variable')
72-
const font2 = new FontFaceObserver('Noto Sans Mono Variable', {
71+
const font1 = new FontFaceObserver('Noto Sans Mono')
72+
const font2 = new FontFaceObserver('Noto Sans Mono', {
7373
weight: 500
7474
})
7575

@@ -98,7 +98,7 @@ const TreeCanvas = (
9898
if (typeof node === 'string') {
9999
ctx.fillStyle = '#000'
100100
ctx.textAlign = 'center'
101-
ctx.font = '64px Noto Sans Mono Variable'
101+
ctx.font = '64px Noto Sans Mono'
102102
ctx.fillText(node, Math.floor(width / 2 + start), 200 + level * 400)
103103

104104
ctx.fillStyle = colorMap.get(node) ?? ''
@@ -110,7 +110,7 @@ const TreeCanvas = (
110110
)
111111

112112
ctx.fillStyle = '#000'
113-
ctx.font = '500 72px Noto Sans Mono Variable'
113+
ctx.font = '500 72px Noto Sans Mono'
114114
ctx.fillText(
115115
words[0],
116116
Math.floor(width / 2 + start),
@@ -121,7 +121,7 @@ const TreeCanvas = (
121121

122122
ctx.fillStyle = '#000'
123123
ctx.textAlign = 'center'
124-
ctx.font = '64px Noto Sans Mono Variable'
124+
ctx.font = '64px Noto Sans Mono'
125125
ctx.fillText(
126126
node.node,
127127
Math.floor(width / 2 + start),
@@ -246,7 +246,7 @@ const TreeCanvas = (
246246
<canvas
247247
className='w-full h-full rounded-medium'
248248
style={{
249-
fontFamily: "'Noto Sans Mono Variable', monospace",
249+
fontFamily: "'Noto Sans Mono', monospace",
250250
background: '#f5f5f5',
251251
cursor: 'all-scroll'
252252
}}

‎pages/@workspace/builder/TreeViewer.tsx

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,14 @@ export const TreeViewer = ({ sentence, ruleset }: TreeViewerProps) => {
115115
disabled={!trees.length || treeIndex === trees.length - 1}
116116
onPress={() => setTreeIndex(treeIndex + 1)}
117117
>
118-
<span className='material-symbols-rounded'>chevron_right</span>
118+
<svg
119+
xmlns='http://www.w3.org/2000/svg'
120+
height='24px'
121+
viewBox='0 -960 960 960'
122+
width='24px'
123+
>
124+
<path d='M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z' />
125+
</svg>
119126
</Button>
120127
</Tooltip>
121128
<Tooltip content='Previous Tree' showArrow>
@@ -125,7 +132,14 @@ export const TreeViewer = ({ sentence, ruleset }: TreeViewerProps) => {
125132
disabled={!trees.length || treeIndex === 0}
126133
onPress={() => setTreeIndex(treeIndex - 1)}
127134
>
128-
<span className='material-symbols-rounded'>chevron_left</span>
135+
<svg
136+
xmlns='http://www.w3.org/2000/svg'
137+
height='24px'
138+
viewBox='0 -960 960 960'
139+
width='24px'
140+
>
141+
<path d='m432-480 156 156q11 11 11 28t-11 28q-11 11-28 11t-28-11L348-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 28-11t28 11q11 11 11 28t-11 28L432-480Z' />
142+
</svg>
129143
</Button>
130144
</Tooltip>
131145

@@ -136,7 +150,14 @@ export const TreeViewer = ({ sentence, ruleset }: TreeViewerProps) => {
136150
disabled={!trees.length}
137151
onPress={saveTreeImage}
138152
>
139-
<span className='material-symbols-rounded'>image</span>
153+
<svg
154+
xmlns='http://www.w3.org/2000/svg'
155+
height='24px'
156+
viewBox='0 -960 960 960'
157+
width='24px'
158+
>
159+
<path d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0 0v-560 560Zm80-80h400q12 0 18-11t-2-21L586-459q-6-8-16-8t-16 8L450-320l-74-99q-6-8-16-8t-16 8l-80 107q-8 10-2 21t18 11Z' />
160+
</svg>
140161
</Button>
141162
</Tooltip>
142163

@@ -147,7 +168,14 @@ export const TreeViewer = ({ sentence, ruleset }: TreeViewerProps) => {
147168
disabled={!trees.length}
148169
onPress={() => setCanvasZoom(canvasZoom * (4 / 3))}
149170
>
150-
<span className='material-symbols-rounded'>zoom_in</span>
171+
<svg
172+
xmlns='http://www.w3.org/2000/svg'
173+
height='24px'
174+
viewBox='0 -960 960 960'
175+
width='24px'
176+
>
177+
<path d='M340-540h-40q-17 0-28.5-11.5T260-580q0-17 11.5-28.5T300-620h40v-40q0-17 11.5-28.5T380-700q17 0 28.5 11.5T420-660v40h40q17 0 28.5 11.5T500-580q0 17-11.5 28.5T460-540h-40v40q0 17-11.5 28.5T380-460q-17 0-28.5-11.5T340-500v-40Zm40 220q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z' />
178+
</svg>
151179
</Button>
152180
</Tooltip>
153181
<Tooltip content='Zoom Out' showArrow>
@@ -157,7 +185,14 @@ export const TreeViewer = ({ sentence, ruleset }: TreeViewerProps) => {
157185
disabled={!trees.length}
158186
onPress={() => setCanvasZoom(canvasZoom * (3 / 4))}
159187
>
160-
<span className='material-symbols-rounded'>zoom_out</span>
188+
<svg
189+
xmlns='http://www.w3.org/2000/svg'
190+
height='24px'
191+
viewBox='0 -960 960 960'
192+
width='24px'
193+
>
194+
<path d='M320-540q-17 0-28.5-11.5T280-580q0-17 11.5-28.5T320-620h120q17 0 28.5 11.5T480-580q0 17-11.5 28.5T440-540H320Zm60 220q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z' />
195+
</svg>
161196
</Button>
162197
</Tooltip>
163198

‎pages/style.css

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,9 @@
1414
* limitations under the License.
1515
*/
1616

17+
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
18+
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:[email protected]&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
19+
1720
@tailwind base;
1821
@tailwind components;
1922
@tailwind utilities;
20-
21-
.material-symbols-rounded {
22-
font-family: 'Material Symbols Rounded Variable';
23-
font-weight: normal;
24-
font-style: normal;
25-
font-size: 24px; /* Preferred icon size */
26-
display: inline-block;
27-
line-height: 1;
28-
text-transform: none;
29-
letter-spacing: normal;
30-
word-wrap: normal;
31-
white-space: nowrap;
32-
direction: ltr;
33-
}

0 commit comments

Comments
 (0)