Merge pull request #1768 from robintown/upstream-glass

Replace glass component with the upstreamed version

src/Glass.module.css

@@ -1,31 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.glass {
-  border-radius: 36px;
-  padding: 11px;
-  border: 1px solid var(--cpd-color-alpha-gray-400);
-  background: var(--cpd-color-alpha-gray-400);
-  backdrop-filter: blur(10px);
-}
-
-.glass > * {
-  border-radius: 24px;
-}
-
-.glass.frosted {
-  backdrop-filter: blur(20px);
-}

src/Glass.tsx

@@ -1,52 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {
-  ComponentPropsWithoutRef,
-  ReactNode,
-  forwardRef,
-  Children,
-} from "react";
-import classNames from "classnames";
-
-import styles from "./Glass.module.css";
-
-interface Props extends ComponentPropsWithoutRef<"div"> {
-  children: ReactNode;
-  className?: string;
-  /**
-   * Increases the blur effect.
-   * @default false
-   */
-  frosted?: boolean;
-}
-
-/**
- * Adds a border of glass around a child component.
- */
-export const Glass = forwardRef<HTMLDivElement, Props>(
-  ({ frosted = false, children, className, ...rest }, ref) => (
-    <div
-      ref={ref}
-      className={classNames(className, styles.glass, {
-        [styles.frosted]: frosted,
-      })}
-      {...rest}
-    >
-      {Children.only(children)}
-    </div>
-  ),
-);

src/Modal.tsx

@@ -29,12 +29,11 @@ import { Drawer } from "vaul";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg?react";
 import classNames from "classnames";
-import { Heading } from "@vector-im/compound-web";
+import { Heading, Glass } from "@vector-im/compound-web";
 
 import styles from "./Modal.module.css";
 import overlayStyles from "./Overlay.module.css";
 import { useMediaQuery } from "./useMediaQuery";
-import { Glass } from "./Glass";
 
 // TODO: Support tabs
 export interface Props extends AriaDialogProps {
@@ -118,7 +117,6 @@ export const Modal: FC<Props> = ({
           />
           <DialogContent asChild {...rest}>
             <Glass
-              frosted
               className={classNames(
                 className,
                 overlayStyles.overlay,

src/room/VideoPreview.tsx

@@ -25,12 +25,12 @@ import {
 } from "livekit-client";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Glass } from "@vector-im/compound-web";
 
 import { Avatar } from "../Avatar";
 import styles from "./VideoPreview.module.css";
 import { useMediaDevices } from "../livekit/MediaDevicesContext";
 import { MuteStates } from "./MuteStates";
-import { Glass } from "../Glass";
 import { useMediaQuery } from "../useMediaQuery";
 
 export type MatrixInfo = {