cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-09-19 17:47:18 -04:00
Code Issues Projects Releases Packages Wiki Activity

invite embed tweaks

Browse source
This commit is contained in:
TaiAurori 2021-09-21 14:02:38 -04:00
parent ce0749d9e8
commit 3d5c7ab9ce
1 changed files with 86 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/components/common/messaging/embed/EmbedInvite.tsx
View file

@ -3,7 +3,7 @@ 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";
@ -21,7 +21,8 @@ import { takeError } from "../../../../context/revoltjs/util";
import ServerIcon from "../../../../components/common/ServerIcon";
import Button from "../../../../components/ui/Button";
import Preloader from "../../../ui/Preloader";
import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
import Overline from "../../../ui/Overline";
const EmbedInviteBase = styled.div`
width: 400px;
height: 80px;
@ -31,15 +32,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 +80,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 +113,7 @@ export function EmbedInvite(props: Props) {
}
return (
<>
<EmbedInviteBase>
<ServerIcon
attachment={invite.server_icon}
@ -141,9 +166,8 @@ export function EmbedInvite(props: Props) {
}
await client.joinInvite(code);
setProcessing(false);
} catch (err) {
setError(takeError(err));
setJoinError(takeError(err));
setProcessing(false);
}
}}>
@ -151,6 +175,8 @@ export function EmbedInvite(props: Props) {
</Button>
)}
</EmbedInviteBase>
{joinError && <Overline type="error" error={joinError} />}
</>
);
}