Merge pull request #278 from TaiAurori/master

src/components/common/messaging/embed/EmbedInvite.tsx

@@ -3,11 +3,12 @@ import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
 import { RetrievedInvite } from "revolt-api/types/Invites";
 import { Message } from "revolt.js/dist/maps/Messages";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { useContext, useEffect, useState } from "preact/hooks";
 
 import { defer } from "../../../../lib/defer";
+import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
 
 import { dispatch } from "../../../../redux";
 
@@ -20,6 +21,7 @@ import { takeError } from "../../../../context/revoltjs/util";
 
 import ServerIcon from "../../../../components/common/ServerIcon";
 import Button from "../../../../components/ui/Button";
+import Overline from "../../../ui/Overline";
 import Preloader from "../../../ui/Preloader";
 
 const EmbedInviteBase = styled.div`
@@ -31,15 +33,37 @@ const EmbedInviteBase = styled.div`
     align-items: center;
     padding: 0 12px;
     margin-top: 2px;
+    ${() => 
+        isTouchscreenDevice &&
+        css`
+            flex-wrap: wrap;
+            height: 130px;
+            padding-top: 8px;
+            padding-bottom: 10px;
+            width: 100%;
+            > button {
+                width: 100%;
+            }
+        `
+    }
 `;
 
 const EmbedInviteDetails = styled.div`
     flex-grow: 1;
     padding-left: 12px;
+    ${() => 
+        isTouchscreenDevice &&
+        css`
+            width: calc(100% - 55px);
+        `
+    }
 `;
 
 const EmbedInviteName = styled.div`
     font-weight: bold;
+    line-height: 1rem;
+    max-height: 2rem;
+    overflow: hidden;
 `;
 
 const EmbedInviteMemberCount = styled.div`
@@ -57,6 +81,7 @@ export function EmbedInvite(props: Props) {
     const code = props.code;
     const [processing, setProcessing] = useState(false);
     const [error, setError] = useState<string | undefined>(undefined);
+    const [joinError, setJoinError] = useState<string | undefined>(undefined);
     const [invite, setInvite] = useState<RetrievedInvite | undefined>(
         undefined,
     );
@@ -89,6 +114,7 @@ export function EmbedInvite(props: Props) {
     }
 
     return (
+        <>
             <EmbedInviteBase>
                 <ServerIcon
                     attachment={invite.server_icon}
@@ -98,7 +124,7 @@ export function EmbedInvite(props: Props) {
                 <EmbedInviteDetails>
                     <EmbedInviteName>{invite.server_name}</EmbedInviteName>
                     <EmbedInviteMemberCount>
-                    {invite.member_count.toLocaleString()} members
+                        {invite.member_count.toLocaleString()} {invite.member_count === 1 ? "member" : "members"}
                     </EmbedInviteMemberCount>
                 </EmbedInviteDetails>
                 {processing ? (
@@ -141,9 +167,8 @@ export function EmbedInvite(props: Props) {
                                 }
 
                                 await client.joinInvite(code);
-                            setProcessing(false);
                             } catch (err) {
-                            setError(takeError(err));
+                                setJoinError(takeError(err));
                                 setProcessing(false);
                             }
                         }}>
@@ -151,6 +176,8 @@ export function EmbedInvite(props: Props) {
                     </Button>
                 )}
             </EmbedInviteBase>
+            {joinError && <Overline type="error" error={joinError} />}
+        </>
     );
 }