Add tutorial for street project

app/Root/components/Navbar/index.tsx

@@ -82,12 +82,16 @@ function Navbar(props: Props) {
         <nav className={_cs(className, styles.navbar)}>
             <InlineLayout
                 className={styles.content}
+                withCenterAlign
                 start={(
-                    <img
-                        className={styles.logo}
-                        src={mapSwipeLogo}
-                        alt="MapSwipe"
-                    />
+                    <>
+                        <img
+                            className={styles.logo}
+                            src={mapSwipeLogo}
+                            alt="MapSwipe"
+                        />
+                        <div />
+                    </>
                 )}
                 end={user && (
                     <ListLayout>
@@ -148,8 +152,7 @@ function Navbar(props: Props) {
                         </Button>
                     </ListLayout>
                 )}
-                spacing="lg"
-                withPadding
+                spacing="md"
                 withWrap
             >
                 <ListLayout
@@ -158,43 +161,37 @@ function Navbar(props: Props) {
                 >
                     <SmartNavLink
                         route="home"
-                        className={styles.link}
-                        activeClassName={styles.active}
+                        withoutPadding
                     >
                         Home
                     </SmartNavLink>
                     <SmartNavLink
                         route="projects"
-                        className={styles.link}
-                        activeClassName={styles.active}
+                        withoutPadding
                     >
                         Projects
                     </SmartNavLink>
                     <SmartNavLink
                         route="tutorials"
-                        className={styles.link}
-                        activeClassName={styles.active}
+                        withoutPadding
                     >
                         Tutorials
                     </SmartNavLink>
                     <SmartNavLink
                         route="teams"
-                        className={styles.link}
-                        activeClassName={styles.active}
+                        withoutPadding
                     >
                         Teams
                     </SmartNavLink>
                     <SmartNavLink
                         route="userGroups"
-                        className={styles.link}
-                        activeClassName={styles.active}
+                        withoutPadding
                     >
                         User groups
                     </SmartNavLink>
                     <SmartNavLink
                         route="contributors"
-                        className={styles.link}
-                        activeClassName={styles.active}
+                        withoutPadding
                     >
                         Contributors
                     </SmartNavLink>

app/Root/components/Navbar/styles.module.css

@@ -1,13 +1,22 @@
 .navbar {
+    --main-spacing: var(--spacing-lg);
     display: grid;
     z-index: 1;
     box-shadow: var(--shadow-card);
     background-color: var(--color-primary);
+    padding: var(--spacing-md) 0;
     color: var(--color-text-on-dark);
-    grid-template-columns: 1fr [content-start] min(100%, var(--width-page-content-max)) [content-end] 1fr;
+    grid-template-columns:
+        1fr
+        [content-start]
+            min(
+                100% - 2 * var(--main-spacing),
+                var(--width-page-content-max) - 2 * var(--main-spacing)
+            )
+        [content-end]
+        1fr;
 
     .content {
-        align-items: center;
         grid-column: content;
 
         .logo {
@@ -19,18 +28,5 @@
             flex-direction: column;
             justify-content: center;
         }
-
-        .link {
-            opacity: 0.6;
-            border-top: var(--width-separator-thin) solid transparent;
-            border-bottom: var(--width-separator-thin) solid transparent;
-            color: var(--color-text-on-dark);
-            font-weight: var(--font-weight-bold);
-
-            &.active {
-                opacity: 1;
-                border-bottom-color: var(--color-text-on-dark);
-            }
-        }
     }
 }

app/Root/components/SmartNavLink/index.tsx

@@ -6,23 +6,31 @@ import { _cs } from '@togglecorp/fujs';
 
 import { RouteKeys } from '#base/configs/routes';
 import useRouteMatching, { Attrs } from '#base/hooks/useRouteMatching';
+import ButtonLayout, { ButtonLayoutProps } from '#components/ButtonLayout';
 
 import styles from './styles.module.css';
 
-export type Props = Omit<NavLinkProps, 'to'> & {
+export type Props = Omit<NavLinkProps, 'to'> & ButtonLayoutProps & {
     route: RouteKeys;
     attrs?: Attrs;
-    children?: React.ReactNode;
     activeClassName?: string;
-    className?: string;
 };
 
 function SmartNavLink(props: Props) {
     const {
         route,
         attrs,
-        children,
         className,
+        start,
+        children,
+        end,
+        startContainerClassName,
+        childrenContainerClassName,
+        endContainerClassName,
+        colorVariant = 'accent',
+        styleVariant = 'transparent',
+        withoutPadding,
+        spacing,
         activeClassName,
         ...otherProps
     } = props;
@@ -40,11 +48,26 @@ function SmartNavLink(props: Props) {
             className={({ isActive }) => _cs(
                 styles.smartNavLink,
                 isActive && styles.active,
-                className,
                 isActive && activeClassName,
             )}
         >
-            {children}
+            <ButtonLayout
+                className={_cs(
+                    styles.buttonLayout,
+                    className,
+                )}
+                start={start}
+                end={end}
+                startContainerClassName={startContainerClassName}
+                endContainerClassName={endContainerClassName}
+                childrenContainerClassName={childrenContainerClassName}
+                spacing={spacing}
+                colorVariant={colorVariant}
+                styleVariant={styleVariant}
+                withoutPadding={withoutPadding}
+            >
+                {children}
+            </ButtonLayout>
         </NavLink>
     );
 }

app/Root/components/SmartNavLink/styles.module.css

@@ -1,16 +1,19 @@
 .smart-nav-link {
-    display: flex;
-    position: relative;
-    align-items: center;
-    outline: none;
-    text-decoration: none;
-    color: var(--color-text);
+    display: contents;
 
-    &:hover {
-        background-color: var(--color-hover-background);
+    .button-layout {
+        opacity: 0.6;
+        border-top: var(--width-separator-thin) solid transparent;
+        border-bottom: var(--width-separator-thin) solid transparent;
+        color: var(--color-text-on-dark);
+        font-weight: var(--font-weight-bold);
     }
 
     &.active {
-        color: var(--color-accent);
+        .button-layout {
+            opacity: 1;
+            border-bottom-color: var(--color-text-on-dark);
+        }
     }
+
 }

app/Root/index.tsx

@@ -1,5 +1,6 @@
 import 'react-mde/lib/styles/css/react-mde-all.css';
 import 'maplibre-gl/dist/maplibre-gl.css';
+import 'mapillary-js/dist/mapillary.css';
 
 import {
     useCallback,

app/components/Description/index.tsx

@@ -5,16 +5,24 @@ import styles from './styles.module.css';
 interface Props {
     className?: string;
     children?: React.ReactNode;
+    compact?: boolean;
 }
 
 function Description(props: Props) {
     const {
         className,
         children,
+        compact,
     } = props;
 
     return (
-        <div className={_cs(styles.description, className)}>
+        <div
+            className={_cs(
+                styles.description,
+                compact && styles.compact,
+                className,
+            )}
+        >
             {children}
         </div>
     );

app/components/Description/styles.module.css

@@ -1,3 +1,7 @@
 .description {
     color: var(--color-text-light);
+
+    &.compact {
+        font-size: var(--font-size-sm);
+    }
 }

app/components/GridLayoutItem/index.tsx

@@ -1,12 +1,15 @@
 import {
     HTMLProps,
-    useMemo,
+    useEffect,
+    useRef,
 } from 'react';
 import {
+    _cs,
     isDefined,
-    isNotDefined,
 } from '@togglecorp/fujs';
 
+import styles from './style.module.css';
+
 interface Props extends Omit<HTMLProps<HTMLDivElement>, 'ref'> {
     rowSpan?: number;
     columnSpan?: number;
@@ -16,31 +19,33 @@ function GridLayoutItem(props: Props) {
     const {
         rowSpan,
         columnSpan,
-        style,
         ...otherProps
     } = props;
 
-    const combinedStyle = useMemo(() => {
-        if (isNotDefined(rowSpan) && isNotDefined(columnSpan)) {
-            return style;
-        }
-
-        const tempStyle = { ...style };
-
-        if (isDefined(rowSpan)) {
-            tempStyle.gridRow = `span ${rowSpan}`;
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (containerRef.current) {
+            containerRef.current.style.setProperty(
+                '--num-row-span',
+                String(rowSpan ?? 1),
+            );
+            containerRef.current.style.setProperty(
+                '--num-column-span',
+                String(columnSpan ?? 1),
+            );
         }
-
-        if (isDefined(columnSpan)) {
-            tempStyle.gridColumn = `span ${columnSpan}`;
-        }
-
-        return tempStyle;
-    }, [style, rowSpan, columnSpan]);
+    }, [rowSpan, columnSpan]);
 
     return (
         <div
-            style={combinedStyle}
+            ref={containerRef}
+            className={_cs(
+                styles.gridLayoutItem,
+                isDefined(rowSpan) && styles.rowSpan,
+                isDefined(columnSpan) && styles.columnSpan,
+            )}
+            // style={combinedStyle}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...otherProps}
         />

app/components/GridLayoutItem/style.module.css

@@ -0,0 +1,20 @@
+.grid-layout-item {
+    &.row-span {
+        grid-row: span var(--num-row-span, 1);
+    }
+
+    &.column-span {
+        grid-column: span var(--num-column-span, 1);
+    }
+
+    @media screen and (max-width: 40rem) {
+        grid-row: initial;
+        grid-column: initial;
+
+        &.row-span,
+        &.column-span {
+            grid-row: initial;
+            grid-column: initial;
+        }
+    }
+}

app/components/ListLayout/index.tsx

@@ -40,7 +40,7 @@ function ListLayout(props: Props) {
         withWrap,
         children,
         numPreferredGridColumns = 2,
-        minGridColumnSize = '12rem',
+        minGridColumnSize = '16rem',
         spacingOffset,
         withFullWidth,
         elementRef: elementRefFromProps,

app/components/ListLayout/styles.module.css

@@ -5,7 +5,16 @@
         .grid-content {
             display: grid;
             /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-            grid-template-columns: repeat(auto-fill, minmax(max(var(--min-grid-column-size), calc((100cqi - var(--reserved-space)) / var(--num-preferred-grid-columns))), 1fr));
+            grid-template-columns: repeat(
+                auto-fill,
+                minmax(
+                    max(
+                        var(--min-grid-column-size),
+                        calc((100cqi - var(--reserved-space)) / var(--num-preferred-grid-columns))
+                    ),
+                    1fr
+                )
+            );
         }
     }
 
@@ -27,9 +36,11 @@
         flex-wrap: wrap;
     }
 
-    @container (max-width: 20rem) {
-        .grid-content {
-            grid-template-columns: 1fr;
+    @container (max-width: 24rem) {
+        &.grid-layout {
+            .grid-content {
+                grid-template-columns: 1fr;
+            }
         }
     }
 }