roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-17 18:09:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add actions, reordering base interactions

Browse source
This commit is contained in:
41666 2021-07-06 09:59:04 -05:00
parent b0c8b2378b
commit 2d589b988f
26 changed files with 383 additions and 427 deletions
Download patch file Download diff file Expand all files Collapse all files

37
packages/design-system/molecules/editable-server-message/EditableServerMessage.tsx Normal file
View file

@ -0,0 +1,37 @@
import { palette } from '@roleypoly/design-system/atoms/colors';
import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
import { MultilineTextInput } from '@roleypoly/design-system/atoms/text-input';
import {
AmbientLarge,
Text as TextTypo,
} from '@roleypoly/design-system/atoms/typography';
import { MessageBox } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
import { GuildSlug } from '@roleypoly/types';
import { GoEyeClosed } from 'react-icons/go';
type Props = {
guild: GuildSlug;
onChange: (newMessage: string) => void;
value: string;
};
export const EditableServerMessage = (props: Props) => (
<MessageBox>
<TextTypo>Server Message</TextTypo>
<MultilineTextInput
rows={2}
value={props.value}
onChange={(event) => props.onChange(event.target.value)}
placeholder={`Hey friend from ${props.guild.name}! Pick your roles!`}
>
{props.value}
</MultilineTextInput>
<AmbientLarge style={{ display: 'flex', color: palette.taupe600 }}>
Shows a message to your server members.
<FaderOpacity isVisible={props.value.trim().length === 0}>
&nbsp;Since the message is empty, this won't show up.&nbsp;&nbsp;&nbsp;
<GoEyeClosed style={{ position: 'relative', top: 2 }} />
</FaderOpacity>
</AmbientLarge>
</MessageBox>
);