updates to landing page

apps/warp-protocol-landing/src/dropdown-menu/DropdownMenu.module.sass

@@ -0,0 +1,15 @@
+.root
+  position: relative
+
+.menu
+  > *
+    padding: 0 !important
+
+    > *
+      margin: 0 !important
+      height: 50px
+      padding: 0 16px
+      display: flex
+      align-items: center
+      justify-content: space-between
+      width: 100%

apps/warp-protocol-landing/src/dropdown-menu/DropdownMenu.tsx

@@ -0,0 +1,80 @@
+import { ClickAwayListener, Portal } from '@mui/material';
+import { UIElementProps } from '@terra-money/apps/components';
+import classNames from 'classnames';
+import { MenuContext, MenuProvider } from '../menu-button';
+import { Menu } from '../menu';
+import { cloneElement, CSSProperties, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import styles from './DropdownMenu.module.sass';
+
+export type DropdownMenuProps = UIElementProps & {
+  action?: JSX.Element;
+  menuClass?: string;
+  open?: boolean;
+  menuStyle?: React.CSSProperties;
+};
+
+export function DropdownMenuInner(props: DropdownMenuProps) {
+  const { className, children, action, menuClass, menuStyle, open, style } = props;
+  const { open: dropdownOpen, setOpen: setDropdownOpen } = useContext(MenuContext);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [menuEl, setMenuEl] = useState<HTMLElement | null>(null);
+  const menuHeight = useMemo(() => menuEl?.clientHeight ?? 0, [menuEl]);
+
+  const containerTop = containerRef.current?.getBoundingClientRect().top ?? 0;
+  const containerLeft = containerRef.current?.getBoundingClientRect().left ?? 0;
+
+  const coords: CSSProperties = {
+    top: containerTop + 52,
+    left: containerLeft,
+  };
+
+  const outOfViewport = (menuEl?.getBoundingClientRect().bottom ?? 0) > window.innerHeight;
+
+  if (outOfViewport) {
+    const padding = 8;
+    coords.top = containerTop - (menuHeight + padding);
+  }
+
+  useEffect(() => {
+    setDropdownOpen(Boolean(open));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  return (
+    <ClickAwayListener
+      onClickAway={() => {
+        setDropdownOpen(false);
+      }}
+    >
+      <div className={classNames(styles.root, className)} ref={containerRef} style={style}>
+        {action &&
+          cloneElement(action, {
+            onClick: () => {
+              setDropdownOpen((open) => !open);
+              action.props.onClick?.();
+            },
+          })}
+        {dropdownOpen && (
+          <Portal>
+            <Menu
+              className={classNames(styles.menu, menuClass)}
+              style={{ ...coords, ...menuStyle }}
+              ref={(el) => setMenuEl(el)}
+            >
+              {children}
+            </Menu>
+          </Portal>
+        )}
+      </div>
+    </ClickAwayListener>
+  );
+}
+
+export const DropdownMenu = (props: DropdownMenuProps) => {
+  return (
+    <MenuProvider>
+      <DropdownMenuInner {...props} />
+    </MenuProvider>
+  );
+};

apps/warp-protocol-landing/src/link/Link.module.sass

@@ -0,0 +1,10 @@
+.root
+  cursor: pointer
+  color: var(--color-light-green)
+  font-size: 14px
+  font-weight: 400
+  line-height: 20px
+  min-width: unset
+  width: fit-content
+  block-size: fit-content
+  padding: 0

apps/warp-protocol-landing/src/link/Link.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import { PropsWithChildren, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '../button';
+import styles from './Link.module.sass';
+
+type LinkProps = PropsWithChildren & {
+  className?: string;
+  to?: string | -1;
+  onClick?: () => void;
+};
+
+export const Link = ({ to, children, className, onClick }: LinkProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = useCallback(() => {
+    if (to) {
+      navigate(to as string);
+    } else {
+      onClick?.();
+    }
+  }, [navigate, to, onClick]);
+
+  return (
+    <Button className={classNames(styles.root, className)} variant="primary" fill="none" onClick={handleClick}>
+      {children}
+    </Button>
+  );
+};

apps/warp-protocol-landing/src/link/index.ts

@@ -0,0 +1 @@
+export * from './Link';

apps/warp-protocol-landing/src/menu-button/MenuAction.tsx

@@ -0,0 +1,28 @@
+import { UIElementProps } from '@terra-money/apps/components';
+import { MenuItem } from '../menu';
+import { useContext } from 'react';
+import { MenuContext } from './MenuContext';
+
+export type MenuActionProps = UIElementProps & { onClick?: () => void; subMenu?: boolean; onMouseEnter?: () => void };
+
+export const MenuAction = (props: MenuActionProps) => {
+  const { setOpen } = useContext(MenuContext);
+  const { onClick, children, subMenu, className, onMouseEnter } = props;
+
+  return (
+    <MenuItem
+      subMenu={subMenu}
+      className={className}
+      onMouseEnter={onMouseEnter}
+      onClick={() => {
+        if (!subMenu) {
+          setOpen(false);
+        }
+
+        onClick?.();
+      }}
+    >
+      {children}
+    </MenuItem>
+  );
+};

apps/warp-protocol-landing/src/menu-button/MenuButton.module.sass

@@ -0,0 +1,13 @@
+.action_btn
+  margin-right: 8px
+  //width: 44px
+  height: 44px
+  margin-left: auto
+  min-width: 0
+  padding: 0
+  border-radius: 16px
+  // width: 40px
+  // background-color: var(--menu-button-background-color)
+
+.btn_active
+  background: var(--widget-background-color) !important

apps/warp-protocol-landing/src/menu-button/MenuButton.tsx

@@ -0,0 +1,72 @@
+import classNames from 'classnames';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { useContext, useRef, useState } from 'react';
+import { ClickAwayListener, Portal } from '@mui/material';
+import styles from './MenuButton.module.sass';
+import { UIElementProps } from '@terra-money/apps/components';
+import { MenuContext, MenuProvider } from './MenuContext';
+import { Button } from '../button';
+import { Menu } from '../menu';
+
+export type MenuButtonProps = UIElementProps & {};
+
+const MenuButtonInner = (props: MenuButtonProps) => {
+  const { className, children } = props;
+  const [menuHeight, setMenuHeight] = useState(200);
+  const { open, setOpen } = useContext(MenuContext);
+  const actionContainer = useRef<HTMLDivElement>(null);
+
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const clipToViewportHeight = (top: number) => {
+    const offset = menuHeight + 40;
+
+    if (top + offset > window.innerHeight) {
+      return window.innerHeight - offset;
+    }
+
+    return top;
+  };
+
+  return (
+    <ClickAwayListener onClickAway={() => setOpen(false)}>
+      <div className={classNames(styles.root, className)} ref={actionContainer}>
+        <Button
+          className={classNames(styles.action_btn, {
+            [styles.btn_active]: open,
+          })}
+          variant="primary"
+          fill="none"
+          icon={<MoreVertIcon />}
+          iconGap="none"
+          onClick={() => setOpen((open) => !open)}
+        />
+        {open && (
+          <Portal>
+            <Menu
+              ref={(element) => {
+                setMenuHeight(element?.clientHeight ?? 200);
+                return menuRef;
+              }}
+              style={{
+                top: clipToViewportHeight(actionContainer.current?.getBoundingClientRect().top ?? 0),
+                left: (actionContainer.current?.getBoundingClientRect().left ?? 0) - 210,
+                bottom: 'auto',
+              }}
+            >
+              {children}
+            </Menu>
+          </Portal>
+        )}
+      </div>
+    </ClickAwayListener>
+  );
+};
+
+export const MenuButton = (props: MenuButtonProps) => {
+  return (
+    <MenuProvider>
+      <MenuButtonInner {...props} />
+    </MenuProvider>
+  );
+};

apps/warp-protocol-landing/src/menu-button/MenuContext.tsx

@@ -0,0 +1,36 @@
+import { UIElementProps } from '@terra-money/apps/components';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+
+type MenuContextValue = {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const MenuContext = createContext<MenuContextValue>({
+  setOpen: () => false,
+  open: false,
+});
+
+export const MenuProvider = ({ children }: UIElementProps) => {
+  const [open, setOpen] = useState(false);
+
+  const context = useContext(MenuContext);
+
+  const bindedSetOpen: React.Dispatch<React.SetStateAction<boolean>> = useCallback(
+    (action) => {
+      // is submenu
+      if (context.open && open) {
+        context.setOpen(false);
+      }
+
+      setOpen(action);
+    },
+    [setOpen, context, open]
+  );
+
+  const value = useMemo(() => {
+    return { open, setOpen: bindedSetOpen };
+  }, [open, bindedSetOpen]);
+
+  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;
+};

apps/warp-protocol-landing/src/menu-button/index.ts

@@ -0,0 +1,2 @@
+export * from './MenuButton';
+export * from './MenuContext';

apps/warp-protocol-landing/src/menu/Menu.module.sass

@@ -0,0 +1,40 @@
+.menu
+  position: absolute
+  width: 200px
+  left: 80px
+  z-index: 1000
+  border-radius: 6px
+  box-sizing: border-box
+
+.menu_content
+  padding: 24px
+  border: 1px solid var(--background-color)
+  background: var(--widget-background-color)
+  border-radius: 6px
+
+.menu_item
+  cursor: pointer
+  font-weight: 500
+  font-size: 14px
+  color: var(--text-color-primary)
+
+  &:not(&:last-child)
+    margin-bottom: 24px
+
+  &:hover
+    color: #DFE1EE
+
+.chevron
+  width: 24px
+  height: 24px
+  margin-left: 4px
+  margin-right: 4px
+  path
+    fill-opacity: 0.6
+    fill: #F6F7FA !important
+
+.submenu
+  width: 100%
+  display: flex
+  align-items: center
+  justify-content: space-between

apps/warp-protocol-landing/src/menu/Menu.tsx

@@ -0,0 +1,32 @@
+import { UIElementProps } from '@terra-money/apps/components';
+import classNames from 'classnames';
+import { forwardRef, Ref } from 'react';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import styles from './Menu.module.sass';
+
+export const Menu = forwardRef((props: UIElementProps, ref: Ref<HTMLDivElement>) => {
+  const { children, style, className } = props;
+
+  return (
+    <div className={classNames(styles.menu, className)} style={style} ref={ref}>
+      <div className={styles.menu_content}>{children}</div>
+    </div>
+  );
+});
+
+type MenuItemProps = UIElementProps & { onClick?: () => void; subMenu?: boolean; onMouseEnter?: () => void };
+
+export const MenuItem = (props: MenuItemProps) => {
+  const { children, subMenu, onMouseEnter, ...remainingProps } = props;
+
+  return (
+    <div
+      {...remainingProps}
+      className={classNames(styles.menu_item, subMenu && styles.submenu, props.className)}
+      onMouseEnter={onMouseEnter}
+    >
+      {children}
+      {subMenu && <KeyboardArrowRightIcon className={styles.chevron} />}
+    </div>
+  );
+};

apps/warp-protocol-landing/src/menu/index.ts

@@ -0,0 +1 @@
+export * from './Menu';

apps/warp-protocol-landing/src/pages/home/features/DesktopFeatures.module.sass

@@ -51,6 +51,9 @@
 
   > .description
     line-height: 20px
+    display: flex
+    flex-direction: column
+    align-items: flex-end
 
 .slide
   height: 100%
@@ -64,7 +67,6 @@
   height: 1000px
   left: 35%
 
-
-@media (max-width: 768px) 
+@media (max-width: 768px)
   .slide
-    z-index: 0 !important
+    z-index: 0 !important