Clean up registration page

src/App.jsx

@@ -24,7 +24,7 @@ import {
 } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { OverlayProvider } from "@react-aria/overlays";
-import { Home } from "./Home";
+import { HomePage } from "./home/HomePage";
 import { LoginPage } from "./LoginPage";
 import { RegisterPage } from "./RegisterPage";
 import { Room } from "./Room";
@@ -45,7 +45,7 @@ export default function App({ history }) {
         <OverlayProvider>
           <Switch>
             <SentryRoute exact path="/">
-              <Home />
+              <HomePage />
             </SentryRoute>
             <SentryRoute exact path="/login">
               <LoginPage />

src/Home.module.css

@@ -1,139 +0,0 @@
-.home {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 100%;
-}
-
-.splitContainer {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-}
-
-.left,
-.right {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.fullWidth {
-  background-color: var(--bgColor1);
-}
-
-.fullWidth .header {
-  background-color: var(--bgColor1);
-}
-
-.centered {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: 100%;
-  max-width: 512px;
-  min-width: 0;
-}
-
-.content {
-  flex: 1;
-}
-
-.left .content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.left .content form > * {
-  margin-top: 0;
-  margin-bottom: 24px;
-}
-
-.left .content form > :last-child {
-  margin-bottom: 0;
-}
-
-.left .content hr:after {
-  background-color: var(--bgColor1);
-  content: "OR";
-  padding: 0 12px;
-  position: relative;
-  top: -12px;
-}
-
-.left .content form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 40px 92px;
-}
-
-.fieldRow {
-  width: 100%;
-}
-
-.button {
-  height: 40px;
-  width: 100%;
-  font-size: 15px;
-  font-weight: 600;
-}
-
-.left .content form:first-child {
-  padding-top: 0;
-}
-
-.left .content form:last-child {
-  padding-bottom: 40px;
-}
-
-.right .content {
-  padding: 0 40px 40px 40px;
-}
-
-.right .content h3:first-child {
-  margin-top: 0;
-}
-
-.authLinks {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.authLinks {
-  margin-bottom: 100px;
-  font-size: 15px;
-}
-
-.authLinks a {
-  color: #0dbd8b;
-  font-weight: normal;
-  text-decoration: none;
-}
-
-@media (min-width: 800px) {
-  .left {
-    background-color: var(--bgColor2);
-  }
-
-  .home:not(.fullWidth) .left {
-    max-width: 50%;
-  }
-
-  .home:not(.fullWidth) .leftNav {
-    background-color: var(--bgColor2);
-  }
-
-  .splitContainer {
-    flex-direction: row;
-  }
-
-  .fullWidth .content hr:after,
-  .left .content hr:after,
-  .fullWidth .header {
-    background-color: var(--bgColor2);
-  }
-}

src/home/CallList.jsx

@@ -1,16 +1,16 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
-import { CopyButton } from "./button";
-import { Facepile } from "./Facepile";
-import { Avatar } from "./Avatar";
-import { ReactComponent as VideoIcon } from "./icons/Video.svg";
+import { CopyButton } from "../button";
+import { Facepile } from "../Facepile";
+import { Avatar } from "../Avatar";
+import { ReactComponent as VideoIcon } from "../icons/Video.svg";
 import styles from "./CallList.module.css";
-import { getRoomUrl } from "./ConferenceCallManagerHooks";
+import { getRoomUrl } from "../ConferenceCallManagerHooks";
+import { Body, Caption } from "../typography/Typography";
 
-export function CallList({ title, rooms, client }) {
+export function CallList({ rooms, client }) {
   return (
     <>
-      <h3>{title}</h3>
       <div className={styles.callList}>
         {rooms.map(({ roomId, roomName, avatarUrl, participants }) => (
           <CallTile
@@ -32,17 +32,23 @@ function CallTile({ name, avatarUrl, roomId, participants, client }) {
     <div className={styles.callTile}>
       <Link to={`/room/${roomId}`} className={styles.callTileLink}>
         <Avatar
-          size="md"
+          size="lg"
           bgKey={name}
           src={avatarUrl}
           fallback={<VideoIcon width={16} height={16} />}
           className={styles.avatar}
         />
         <div className={styles.callInfo}>
-          <h5>{name}</h5>
-          <p>{getRoomUrl(roomId)}</p>
+          <Body overflowEllipsis fontWeight="semiBold">
+            {name}
+          </Body>
+          <Caption overflowEllipsis>{getRoomUrl(roomId)}</Caption>
           {participants && (
-            <Facepile client={client} participants={participants} />
+            <Facepile
+              className={styles.facePile}
+              client={client}
+              participants={participants}
+            />
           )}
         </div>
         <div className={styles.copyButtonSpacer} />

src/home/CallList.module.css

@@ -1,6 +1,6 @@
 .callTile {
-  min-width: 240px;
-  height: 94px;
+  width: 329px;
+  height: 95px;
   padding: 12px;
   background-color: var(--bgColor2);
   border-radius: 8px;
@@ -31,28 +31,11 @@
 }
 
 .callInfo > * {
-  margin-top: 0;
-  margin-bottom: 8px;
-}
-
-.callInfo > :last-child {
   margin-bottom: 0;
 }
 
-.callInfo h5 {
-  font-size: 15px;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.callInfo p {
-  font-weight: 400;
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.facePile {
+  margin-top: 8px;
 }
 
 .copyButtonSpacer,
@@ -69,6 +52,11 @@
 
 .callList {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-template-columns: repeat(auto-fill, 329px);
+  max-width: calc((329px + 24px) * 3);
+  width: calc(100% - 48px);
   gap: 24px;
+  padding: 0 24px;
+  justify-content: center;
+  margin-bottom: 24px;
 }

src/home/HomePage.jsx

@@ -15,12 +15,12 @@ limitations under the License.
 */
 
 import React from "react";
-import { useClient } from "./ConferenceCallManagerHooks";
-import { ErrorView, LoadingView } from "./FullScreenView";
-import { UnauthenticatedView } from "./home/UnauthenticatedView";
-import { RegisteredView } from "./home/RegisteredView";
+import { useClient } from "../ConferenceCallManagerHooks";
+import { ErrorView, LoadingView } from "../FullScreenView";
+import { UnauthenticatedView } from "./UnauthenticatedView";
+import { RegisteredView } from "./RegisteredView";
 
-export function Home() {
+export function HomePage() {
   const { isAuthenticated, isPasswordlessUser, loading, error, client } =
     useClient();
 

src/home/RegisteredView.jsx

@@ -1,131 +1,117 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import React, { useState, useCallback } from "react";
 import {
+  createRoom,
   useGroupCallRooms,
-  usePublicRooms,
+  roomAliasFromRoomName,
 } from "../ConferenceCallManagerHooks";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
-import styles from "../Home.module.css";
+import commonStyles from "./common.module.css";
+import styles from "./RegisteredView.module.css";
 import { FieldRow, InputField, ErrorMessage } from "../Input";
 import { Button } from "../button";
-import { CallList } from "../CallList";
-import classNames from "classnames";
+import { CallList } from "./CallList";
 import { UserMenuContainer } from "../UserMenuContainer";
+import { useModalTriggerState } from "../Modal";
+import { JoinExistingCallModal } from "../JoinExistingCallModal";
+import { useHistory } from "react-router-dom";
+import { Headline, Title } from "../typography/Typography";
+import { Form } from "../form/Form";
 
-export function RegisteredView({
-  client,
-  isPasswordlessUser,
-  onCreateRoom,
-  createRoomError,
-  creatingRoom,
-  onJoinRoom,
-}) {
-  const publicRooms = usePublicRooms(
-    client,
-    import.meta.env.VITE_PUBLIC_SPACE_ROOM_ID
+export function RegisteredView({ client }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState();
+  const onSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const data = new FormData(e.target);
+      const roomName = data.get("roomName");
+
+      async function submit() {
+        setError(undefined);
+        setLoading(true);
+
+        const roomIdOrAlias = await createRoom(client, roomName);
+
+        if (roomIdOrAlias) {
+          history.push(`/room/${roomIdOrAlias}`);
+        }
+      }
+
+      submit().catch((error) => {
+        if (error.errcode === "M_ROOM_IN_USE") {
+          setExistingRoomId(roomAliasFromRoomName(roomName));
+          setError(undefined);
+          modalState.open();
+        } else {
+          console.error(error);
+          setLoading(false);
+          setError(error);
+          reset();
+        }
+      });
+    },
+    [client]
   );
+
   const recentRooms = useGroupCallRooms(client);
 
-  const hideCallList = publicRooms.length === 0 && recentRooms.length === 0;
+  const { modalState, modalProps } = useModalTriggerState();
+  const [existingRoomId, setExistingRoomId] = useState();
+  const history = useHistory();
+  const onJoinExistingRoom = useCallback(() => {
+    history.push(`/${existingRoomId}`);
+  }, [history, existingRoomId]);
 
   return (
-    <div
-      className={classNames(styles.home, {
-        [styles.fullWidth]: hideCallList,
-      })}
-    >
-      <Header className={styles.header}>
-        <LeftNav className={styles.leftNav}>
+    <>
+      <Header>
+        <LeftNav>
           <HeaderLogo />
         </LeftNav>
         <RightNav>
           <UserMenuContainer />
         </RightNav>
       </Header>
-      <div className={styles.splitContainer}>
-        <div className={styles.left}>
-          <div className={styles.content}>
-            <div className={styles.centered}>
-              <form onSubmit={onJoinRoom}>
-                <h1>Join a call</h1>
-                <FieldRow className={styles.fieldRow}>
-                  <InputField
-                    id="roomId"
-                    name="roomId"
-                    label="Call ID"
-                    type="text"
-                    required
-                    autoComplete="off"
-                    placeholder="Call ID"
-                  />
-                </FieldRow>
-                <FieldRow className={styles.fieldRow}>
-                  <Button className={styles.button} type="submit">
-                    Join call
-                  </Button>
-                </FieldRow>
-              </form>
-              <hr />
-              <form onSubmit={onCreateRoom}>
-                <h1>Create a call</h1>
-                <FieldRow className={styles.fieldRow}>
-                  <InputField
-                    id="roomName"
-                    name="roomName"
-                    label="Room Name"
-                    type="text"
-                    required
-                    autoComplete="off"
-                    placeholder="Room Name"
-                  />
-                </FieldRow>
-                {createRoomError && (
-                  <FieldRow className={styles.fieldRow}>
-                    <ErrorMessage>{createRoomError.message}</ErrorMessage>
-                  </FieldRow>
-                )}
-                <FieldRow className={styles.fieldRow}>
-                  <Button
-                    className={styles.button}
-                    type="submit"
-                    disabled={creatingRoom}
-                  >
-                    {creatingRoom ? "Creating call..." : "Create call"}
-                  </Button>
-                </FieldRow>
-              </form>
-              {isPasswordlessUser && (
-                <div className={styles.authLinks}>
-                  <p>
-                    Not registered yet?{" "}
-                    <Link to="/register">Create an account</Link>
-                  </p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-        {!hideCallList && (
-          <div className={styles.right}>
-            <div className={styles.content}>
-              {publicRooms.length > 0 && (
-                <CallList
-                  title="Public Calls"
-                  rooms={publicRooms}
-                  client={client}
-                />
-              )}
-              {recentRooms.length > 0 && (
-                <CallList
-                  title="Recent Calls"
-                  rooms={recentRooms}
-                  client={client}
-                />
-              )}
-            </div>
-          </div>
-        )}
+      <div className={commonStyles.container}>
+        <main className={commonStyles.main}>
+          <HeaderLogo className={commonStyles.logo} />
+          <Headline className={commonStyles.headline}>
+            Enter a call name
+          </Headline>
+          <Form className={styles.form} onSubmit={onSubmit}>
+            <FieldRow className={styles.fieldRow}>
+              <InputField
+                id="callName"
+                name="callName"
+                label="Call name"
+                placeholder="Call name"
+                type="text"
+                required
+                autoComplete="off"
+              />
+              <Button type="submit" size="lg" disabled={loading}>
+                {loading ? "Loading..." : "Go"}
+              </Button>
+            </FieldRow>
+            {error && (
+              <FieldRow>
+                <ErrorMessage>{error.message}</ErrorMessage>
+              </FieldRow>
+            )}
+          </Form>
+          {recentRooms.length > 0 && (
+            <>
+              <Title className={styles.recentCallsTitle}>
+                Your recent Calls
+              </Title>
+              <CallList rooms={recentRooms} client={client} />
+            </>
+          )}
+        </main>
       </div>
-    </div>
+      {modalState.isOpen && (
+        <JoinExistingCallModal onJoin={onJoinExistingRoom} {...modalProps} />
+      )}
+    </>
   );
 }

src/home/RegisteredView.module.css

@@ -0,0 +1,14 @@
+.form {
+  padding: 0 24px;
+  justify-content: center;
+  width: 409px;
+  margin-bottom: 72px;
+}
+
+.fieldRow {
+  margin-bottom: 0;
+}
+
+.recentCallsTitle {
+  margin-bottom: 32px;
+}

src/home/UnauthenticatedView.jsx

@@ -8,13 +8,15 @@ import { randomString } from "matrix-js-sdk/src/randomstring";
 import {
   createRoom,
   useInteractiveRegistration,
+  roomAliasFromRoomName,
 } from "../ConferenceCallManagerHooks";
 import { useModalTriggerState } from "../Modal";
 import { JoinExistingCallModal } from "../JoinExistingCallModal";
 import { useRecaptcha } from "../useRecaptcha";
-import { Body, Caption, Title, Link, Headline } from "../typography/Typography";
+import { Body, Caption, Link, Headline } from "../typography/Typography";
 import { Form } from "../form/Form";
 import styles from "./UnauthenticatedView.module.css";
+import commonStyles from "./common.module.css";
 
 export function UnauthenticatedView() {
   const [loading, setLoading] = useState(false);
@@ -80,10 +82,12 @@ export function UnauthenticatedView() {
           <UserMenuContainer />
         </RightNav>
       </Header>
-      <div className={styles.container}>
-        <main className={styles.main}>
-          <HeaderLogo className={styles.logo} />
-          <Headline className={styles.headline}>Enter a call name</Headline>
+      <div className={commonStyles.container}>
+        <main className={commonStyles.main}>
+          <HeaderLogo className={commonStyles.logo} />
+          <Headline className={commonStyles.headline}>
+            Enter a call name
+          </Headline>
           <Form className={styles.form} onSubmit={onSubmit}>
             <FieldRow>
               <InputField

src/home/UnauthenticatedView.module.css

@@ -1,18 +1,3 @@
-.container {
-  display: flex;
-  min-height: calc(100% - 64px);
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.main {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
 .footer {
   display: flex;
   flex-direction: column;
@@ -29,15 +14,6 @@
   margin-bottom: 24px;
 }
 
-.logo {
-  display: flex;
-  margin-bottom: 54px;
-}
-
-.headline {
-  margin-bottom: 40px;
-}
-
 .form {
   padding: 0 24px;
   justify-content: center;
@@ -49,15 +25,7 @@
 }
 
 @media (min-width: 800px) {
-  .logo {
-    display: none;
-  }
-
   .mobileLoginLink {
     display: none;
   }
-
-  .container {
-    min-height: calc(100% - 76px);
-  }
 }

src/home/common.module.css

@@ -0,0 +1,33 @@
+.container {
+  display: flex;
+  min-height: calc(100% - 64px);
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  display: flex;
+  margin-bottom: 54px;
+}
+
+.headline {
+  margin-bottom: 40px;
+}
+
+@media (min-width: 800px) {
+  .logo {
+    display: none;
+  }
+
+  .container {
+    min-height: calc(100% - 76px);
+  }
+}

src/icons/Copy.svg

@@ -1,3 +1,3 @@
-<svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.03125 3C4.3744 3 3.03125 4.34315 3.03125 6V13C3.03125 14.6569 4.3744 16 6.03125 16H7.07407V18C7.07407 19.6569 8.41722 21 10.0741 21H14.9683C16.6251 21 17.9683 19.6569 17.9683 18V11C17.9683 9.34315 16.6251 8 14.9683 8H13.9255V6C13.9255 4.34315 12.5823 3 10.9255 3H6.03125ZM11.9255 8V6C11.9255 5.44772 11.4777 5 10.9255 5H6.03125C5.47897 5 5.03125 5.44772 5.03125 6V13C5.03125 13.5523 5.47897 14 6.03125 14H7.07407V11C7.07407 9.34315 8.41722 8 10.0741 8H11.9255ZM9.07407 11C9.07407 10.4477 9.52179 10 10.0741 10H14.9683C15.5206 10 15.9683 10.4477 15.9683 11V18C15.9683 18.5523 15.5206 19 14.9683 19H10.0741C9.52179 19 9.07407 18.5523 9.07407 18V11Z" fill="#0DBD8B"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2C2.89543 2 2 2.89543 2 4V8.66667C2 9.77124 2.89543 10.6667 4 10.6667H5.33333V12C5.33333 13.1046 6.22877 14 7.33333 14H12C13.1046 14 14 13.1046 14 12V7.33333C14 6.22876 13.1046 5.33333 12 5.33333H10.6667V4C10.6667 2.89543 9.77123 2 8.66667 2H4ZM9.33333 5.33333V4C9.33333 3.63181 9.03486 3.33333 8.66667 3.33333H4C3.63181 3.33333 3.33333 3.63181 3.33333 4V8.66667C3.33333 9.03486 3.63181 9.33333 4 9.33333H5.33333V7.33333C5.33333 6.22877 6.22876 5.33333 7.33333 5.33333H9.33333ZM6.66667 7.33333C6.66667 6.96514 6.96514 6.66667 7.33333 6.66667H12C12.3682 6.66667 12.6667 6.96514 12.6667 7.33333V12C12.6667 12.3682 12.3682 12.6667 12 12.6667H7.33333C6.96514 12.6667 6.66667 12.3682 6.66667 12V7.33333Z" fill="#8E99A4"/>
 </svg>

src/typography/Typography.jsx

@@ -4,11 +4,25 @@ import { Link as RouterLink } from "react-router-dom";
 import styles from "./Typography.module.css";
 
 export const Headline = forwardRef(
-  ({ as: Component = "h1", children, className, fontWeight, ...rest }, ref) => {
+  (
+    {
+      as: Component = "h1",
+      children,
+      className,
+      fontWeight,
+      overflowEllipsis,
+      ...rest
+    },
+    ref
+  ) => {
     return (
       <Component
         {...rest}
-        className={classNames(styles[fontWeight], className)}
+        className={classNames(
+          styles[fontWeight],
+          { [styles.overflowEllipsis]: overflowEllipsis },
+          className
+        )}
         ref={ref}
       >
         {children}
@@ -18,11 +32,25 @@ export const Headline = forwardRef(
 );
 
 export const Title = forwardRef(
-  ({ as: Component = "h2", children, className, fontWeight, ...rest }, ref) => {
+  (
+    {
+      as: Component = "h2",
+      children,
+      className,
+      fontWeight,
+      overflowEllipsis,
+      ...rest
+    },
+    ref
+  ) => {
     return (
       <Component
         {...rest}
-        className={classNames(styles[fontWeight], className)}
+        className={classNames(
+          styles[fontWeight],
+          { [styles.overflowEllipsis]: overflowEllipsis },
+          className
+        )}
         ref={ref}
       >
         {children}
@@ -32,11 +60,25 @@ export const Title = forwardRef(
 );
 
 export const Subtitle = forwardRef(
-  ({ as: Component = "h3", children, className, fontWeight, ...rest }, ref) => {
+  (
+    {
+      as: Component = "h3",
+      children,
+      className,
+      fontWeight,
+      overflowEllipsis,
+      ...rest
+    },
+    ref
+  ) => {
     return (
       <Component
         {...rest}
-        className={classNames(styles[fontWeight], className)}
+        className={classNames(
+          styles[fontWeight],
+          { [styles.overflowEllipsis]: overflowEllipsis },
+          className
+        )}
         ref={ref}
       >
         {children}
@@ -46,11 +88,25 @@ export const Subtitle = forwardRef(
 );
 
 export const Body = forwardRef(
-  ({ as: Component = "p", children, className, fontWeight, ...rest }, ref) => {
+  (
+    {
+      as: Component = "p",
+      children,
+      className,
+      fontWeight,
+      overflowEllipsis,
+      ...rest
+    },
+    ref
+  ) => {
     return (
       <Component
         {...rest}
-        className={classNames(styles[fontWeight], className)}
+        className={classNames(
+          styles[fontWeight],
+          { [styles.overflowEllipsis]: overflowEllipsis },
+          className
+        )}
         ref={ref}
       >
         {children}
@@ -60,11 +116,26 @@ export const Body = forwardRef(
 );
 
 export const Caption = forwardRef(
-  ({ as: Component = "p", children, className, fontWeight, ...rest }, ref) => {
+  (
+    {
+      as: Component = "p",
+      children,
+      className,
+      fontWeight,
+      overflowEllipsis,
+      ...rest
+    },
+    ref
+  ) => {
     return (
       <Component
         {...rest}
-        className={classNames(styles.caption, styles[fontWeight], className)}
+        className={classNames(
+          styles.caption,
+          styles[fontWeight],
+          { [styles.overflowEllipsis]: overflowEllipsis },
+          className
+        )}
         ref={ref}
       >
         {children}
@@ -74,11 +145,26 @@ export const Caption = forwardRef(
 );
 
 export const Micro = forwardRef(
-  ({ as: Component = "p", children, className, fontWeight, ...rest }, ref) => {
+  (
+    {
+      as: Component = "p",
+      children,
+      className,
+      fontWeight,
+      overflowEllipsis,
+      ...rest
+    },
+    ref
+  ) => {
     return (
       <Component
         {...rest}
-        className={classNames(styles.micro, styles[fontWeight], className)}
+        className={classNames(
+          styles.micro,
+          styles[fontWeight],
+          { [styles.overflowEllipsis]: overflowEllipsis },
+          className
+        )}
         ref={ref}
       >
         {children}
@@ -96,6 +182,7 @@ export const Link = forwardRef(
       color = "link",
       href,
       fontWeight,
+      overflowEllipsis,
       ...rest
     },
     ref
@@ -113,7 +200,12 @@ export const Link = forwardRef(
       <Component
         {...externalLinkProps}
         {...rest}
-        className={classNames(styles[color], styles[fontWeight], className)}
+        className={classNames(
+          styles[color],
+          styles[fontWeight],
+          { [styles.overflowEllipsis]: overflowEllipsis },
+          className
+        )}
         ref={ref}
       >
         {children}

src/typography/Typography.module.css

@@ -27,3 +27,9 @@
 .primary {
   color: var(--primaryColor);
 }
+
+.overflowEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}