urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-19 08:32:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

profile: addressing PR comments

Browse Source 
fixes urbit/landscape#444
This commit is contained in:
James Acklin 2021-03-03 17:12:03 -05:00
parent 1084863af9
commit 36a4c2d1a6
3 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
pkg/interface/src/views/apps/profile/components/EditProfile.tsx
View File

@ -149,14 +149,19 @@ export function EditProfile(props: any): ReactElement {
<ProfileHeader>
<ProfileControls>
<Row>
<button
<Button
type='submit'
display='inline'
cursor='pointer'
fontWeight='500'
color='blue'
pl='0'
pr='0'
border='0'
style={{ appearance: 'none', background: 'transparent' }}
>
<Text py='2' cursor='pointer' fontWeight='500' color='blue'>
Save Edits
</Text>
</button>
Save Edits
</Button>
<Text
py='2'
ml='3'

17
pkg/interface/src/views/apps/profile/components/Profile.tsx
View File

@ -18,6 +18,7 @@ export function ProfileHeader(props: any): ReactElement {
border='1px solid'
borderColor='lightGray'
borderRadius='2'
overflow='hidden'
marginBottom='calc(64px + 2rem)'
>
{props.children}
@ -62,11 +63,13 @@ export function ProfileImages(props: any): ReactElement {
);
return (
<Row width='100%' height='300px' position='relative'>
{cover}
<Center position='absolute' width='100%' height='100%'>
{props.children}
</Center>
<>
<Row width='100%' height='300px' position='relative'>
{cover}
<Center position='absolute' width='100%' height='100%'>
{props.children}
</Center>
</Row>
<Box
height='128px'
width='128px'
@ -74,12 +77,12 @@ export function ProfileImages(props: any): ReactElement {
overflow='hidden'
position='absolute'
left='50%'
bottom='-64px'
marginTop='-64px'
marginLeft='-64px'
>
{image}
</Box>
</Row>
</>
);
}

28
pkg/interface/src/views/components/ColorInput.tsx
View File

@ -22,7 +22,7 @@ export function ColorInput(props: ColorInputProps): ReactElement {
const { id, label, caption, disabled, ...rest } = props;
const [{ value, onBlur }, meta, { setValue }] = useField(id);
const hex = value.replace('#', '').replace('0x','').replace('.', '');
const hex = value.replace('#', '').replace('0x', '').replace('.', '');
const padded = hex.padStart(6, '0');
const onChange = (e: FormEvent<HTMLInputElement>) => {
@ -38,14 +38,14 @@ export function ColorInput(props: ColorInputProps): ReactElement {
};
return (
<Box display="flex" flexDirection="column" {...rest}>
<Box display='flex' flexDirection='column' {...rest}>
<Label htmlFor={id}>{label}</Label>
{caption ? (
<Label mt="2" gray>
<Label mt='2' gray>
{caption}
</Label>
) : null}
<Row mt="2" alignItems="flex-end">
<Row mt='2' alignItems='flex-end'>
<Input
id={id}
borderTopRightRadius={0}
@ -61,25 +61,25 @@ export function ColorInput(props: ColorInputProps): ReactElement {
borderTopRightRadius={1}
border={1}
borderLeft={0}
borderColor="lightGray"
width="32px"
alignSelf="stretch"
borderColor='lightGray'
width='32px'
alignSelf='stretch'
bg={`#${padded}`}
>
<Input
width="100%"
height="100%"
alignSelf="stretch"
onInput={onChange}
width='100%'
height='100%'
alignSelf='stretch'
onChange={onChange}
value={`#${padded}`}
disabled={disabled || false}
type="color"
type='color'
opacity={0}
overflow="hidden"
overflow='hidden'
/>
</Box>
</Row>
<ErrorLabel mt="2" hasError={Boolean(meta.touched && meta.error)}>
<ErrorLabel mt='2' hasError={Boolean(meta.touched && meta.error)}>
{meta.error}
</ErrorLabel>
</Box>