code review

README.md

@@ -87,8 +87,10 @@ You may also have a look at the following examples for in-depth demonstrations o
   uses the JavaScript library [leaflet](https://leafletjs.com/) to display a map at specific locations
 - [AI User Interface](https://github.com/zauberzeug/nicegui/blob/main/examples/ai_interface/main.py):
   utilizes the great but non-async API from <https://replicate.com> to perform voice-to-text transcription and generate images from prompts with Stable Diffusion
-- [3D scene](https://github.com/zauberzeug/nicegui/blob/main/examples/3d_scene/main.py):
+- [3D Scene](https://github.com/zauberzeug/nicegui/blob/main/examples/3d_scene/main.py):
   creates a 3D scene and loads an STL mesh illuminated with a spotlight
+- [Custom Vue Component](https://github.com/zauberzeug/nicegui/blob/main/examples/custom_vue_component/main.py)
+  shows how to write and integrate a custom vue component
 - [Image Mask Overlay](https://github.com/zauberzeug/nicegui/blob/main/examples/image_mask_overlay/main.py):
   shows how to overlay an image with a mask
 

examples/image_mask_overlay/main.py

@@ -4,11 +4,11 @@ from nicegui import ui
 img_src = 'https://i.stack.imgur.com/PpIqU.png'
 mask_src = 'https://i.stack.imgur.com/OfwWp.png'
 
-with ui.row().classes('full-width items-center'):
+with ui.row().classes('w-full flex items-center'):
     ui.image(img_src).style('width: 25%')
-    ui.label('+').style('font-size:18em')
+    ui.label('+').style('font-size: 18em')
     ui.image(mask_src).style('width: 25%')
-    ui.label('=').style('font-size:18em')
+    ui.label('=').style('font-size: 18em')
     image = ui.interactive_image(img_src).style('width: 25%')
     image.svg_content = f'''
         <image xlink:href="{mask_src}" width="100%" height="100%" x="0" y="0" filter="url(#mask)" />
@@ -19,9 +19,9 @@ with ui.row().classes('full-width items-center'):
                 <feFuncB type="linear" slope="40" intercept="-(0.5 * 40) + 0.5"/>
                 <feFuncR type="linear" slope="1000"/>
             </feComponentTransfer>
-    <feColorMatrix type="matrix" values="1 0 0 0 0   0 1 0 0 0   0 0 1 0 0  3 -1 -1 0 0" />
+            <feColorMatrix type="matrix" values="1 0 0 0 0   0 1 0 0 0   0 0 1 0 0  3 -1 -1 0 0" />
         </filter>
     '''
-ui.markdown('Images where discoved through <https://stackoverflow.com/a/57579290/364388>.').classes('mt-4')
+ui.markdown('Images where discovered through <https://stackoverflow.com/a/57579290/364388>.').classes('mt-4')
 
 ui.run()