Update trophy style

This commit is contained in:
Bill 2022-03-04 12:42:57 -05:00
parent b7be05f488
commit 63a77f9005
2 changed files with 19 additions and 27 deletions

View File

@ -78,32 +78,24 @@
} }
.trophy-header { .trophy-header {
height: 22px;
.trophy-close { .trophy-close {
position: absolute;
cursor: pointer;
width: 15px; width: 15px;
height: 15px; height: 15px;
right: 5.5px;
top: 5px; top: 5px;
right: 5px;
}
.trophy-title {
padding-top: 3px;
} }
} }
.trophy-content { .trophy-content {
width: 297px; width: 297px;
height: 110px; height: 116px;
margin-top: 3px;
margin-left: 23px;
white-space: pre-wrap; white-space: pre-wrap;
} }
.trophy-footer { .trophy-footer {
width: 297px; width: 297px;
margin-top: 5px;
margin-left: 23px;
} }
} }

View File

@ -1,4 +1,5 @@
import { FC } from 'react'; import { FC } from 'react';
import { Base, Column, Flex, Text } from '..';
import { LocalizeText } from '../../api'; import { LocalizeText } from '../../api';
import { DraggableWindow } from '../draggable-window'; import { DraggableWindow } from '../draggable-window';
@ -18,22 +19,21 @@ export const LayoutTrophyView: FC<LayoutTrophyViewProps> = props =>
return ( return (
<DraggableWindow handleSelector=".drag-handler"> <DraggableWindow handleSelector=".drag-handler">
<div className={ `nitro-layout-trophy trophy-${ color }` }> <Column gap={ 0 } alignItems="center" className={ `nitro-layout-trophy trophy-${ color }` }>
<div className="trophy-header drag-handler"> <Flex center fullWidth position="relative" className="trophy-header drag-handler">
<div className="float-end trophy-close" onClick={ onCloseClick }></div> <Base position="absolute" pointer className="trophy-close" onClick={ onCloseClick } />
<div className="trophy-title fw-bold text-center"> <Text bold>{ LocalizeText('widget.furni.trophy.title') }</Text>
{ LocalizeText('widget.furni.trophy.title') } </Flex>
</div> <Column className="trophy-content py-1" gap={ 1 }>
</div> { customTitle &&
<div className="trophy-content"> <Text bold>{ customTitle }</Text> }
{ customTitle && <div className="mb-2 fw-bold">{ customTitle }</div> }
{ message } { message }
</div> </Column>
<div className="trophy-footer d-flex justify-content-between fw-bold"> <Flex alignItems="center" justifyContent="between" className="trophy-footer mt-1">
<div>{ date }</div> <Text bold>{ date }</Text>
<div>{ senderName }</div> <Text bold>{ senderName }</Text>
</div> </Flex>
</div> </Column>
</DraggableWindow> </DraggableWindow>
); );
} }