mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
🆙 Upgrade to tailwind css 4.2.0
This commit is contained in:
@@ -49,13 +49,13 @@ export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
|
||||
<Grid columnCount={ 3 } gap={ 1 }>
|
||||
{ POSITIONS.map((position, posIndex) =>
|
||||
{
|
||||
return <div key={ posIndex } className={ `relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-[2px] border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] cursor-pointer ${ (badgeParts[index].position === position) ? 'bg-primary [box-shadow:none]' : '' }` } onClick={ event => setPartProperty(index, 'position', position) } />;
|
||||
return <div key={ posIndex } className={ `relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] cursor-pointer ${ (badgeParts[index].position === position) ? 'bg-primary [box-shadow:none]' : '' }` } onClick={ event => setPartProperty(index, 'position', position) } />;
|
||||
}) }
|
||||
</Grid> }
|
||||
<Grid columnCount={ 8 } gap={ 1 }>
|
||||
{ (groupCustomize.badgePartColors.length > 0) && groupCustomize.badgePartColors.map((item, colorIndex) =>
|
||||
{
|
||||
return <div key={ colorIndex } className={ `relative [box-shadow:inset_2px_2px_#0003] rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-[2px] border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a]cursor-pointer ${ (badgeParts[index].color === (colorIndex + 1)) ? 'bg-primary [box-shadow:none]' : '' }` } style={ { backgroundColor: '#' + item.color } } onClick={ event => setPartProperty(index, 'color', (colorIndex + 1)) } />;
|
||||
return <div key={ colorIndex } className={ `relative [box-shadow:inset_2px_2px_#0003] rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a]cursor-pointer ${ (badgeParts[index].color === (colorIndex + 1)) ? 'bg-primary [box-shadow:none]' : '' }` } style={ { backgroundColor: '#' + item.color } } onClick={ event => setPartProperty(index, 'color', (colorIndex + 1)) } />;
|
||||
}) }
|
||||
</Grid>
|
||||
</Flex>
|
||||
|
||||
@@ -118,14 +118,14 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
|
||||
if(!groupData) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="h-[355px] w-[390px] border-[1px] border-[solid] border-[#283F5D] " theme="primary-slim">
|
||||
<NitroCardView className="h-[355px] w-[390px] border border-[solid] border-[#283F5D] " theme="primary-slim">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('group.create.title') } onCloseClick={ onCloseClose } />
|
||||
<NitroCardContentView>
|
||||
<div className="flex items-center justify-center creator-tabs">
|
||||
{ TABS.map((tab, index) =>
|
||||
{
|
||||
return (
|
||||
<Flex key={ index } center className={ `relative -ml-[6px] bg-[url('@/assets/images/groups/creator_tabs.png')] bg-no-repeat ${ ((tab === 1) ? 'w-[84px] h-[24px] bg-[0px_0px]' : (tab === 4) ? 'w-[133px] h-[28px] bg-[0px_-104px]' : 'w-[83px] h-[24px] bg-[0px_-52px]') } ${ (currentTab === tab) ? 'active' : '' }` }>
|
||||
<Flex key={ index } center className={ `relative -ml-[6px] bg-[url('@/assets/images/groups/creator_tabs.png')] bg-no-repeat ${ ((tab === 1) ? 'w-[84px] h-[24px] bg-position-[0px_0px]' : (tab === 4) ? 'w-[133px] h-[28px] bg-position-[0px_-104px]' : 'w-[83px] h-[24px] bg-position-[0px_-52px]') } ${ (currentTab === tab) ? 'active' : '' }` }>
|
||||
<Text variant="white">{ LocalizeText(`group.create.steplabel.${ tab }`) }</Text>
|
||||
</Flex>
|
||||
);
|
||||
@@ -133,8 +133,8 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
|
||||
</div>
|
||||
<Column overflow="hidden">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={ `bg-no-repeat w-[122px] h-[68px] bg-[url('@/assets/images/groups/creator_images.png')] ${ currentTab === 1 && 'bg-[0px_0px] !w-[99px] !h-[50px]' }
|
||||
${ currentTab == 2 && '!bg-[-99px_0px] !w-[98px] !h-[62px]' } ${ currentTab === 3 && '!bg-[0px_-50px] !w-[96px] !h-[45px]' } ${ currentTab === 4 || currentTab === 5 && '!bg-[0px_-95px] !w-[114px] !h-[61px]' } ` } />
|
||||
<div className={ `bg-no-repeat w-[122px] h-[68px] bg-[url('@/assets/images/groups/creator_images.png')] ${ currentTab === 1 && 'bg-position-[0px_0px] w-[99px]! h-[50px]!' }
|
||||
${ currentTab == 2 && 'bg-position-[-99px_0px]! w-[98px]! h-[62px]!' } ${ currentTab === 3 && 'bg-position-[0px_-50px]! w-[96px]! h-[45px]!' } ${ currentTab === 4 || currentTab === 5 && 'bg-position-[0px_-95px]! w-[114px]! h-[61px]!' } ` } />
|
||||
<Column grow gap={ 0 }>
|
||||
<Text bold fontSize={ 4 }>{ LocalizeText(`group.create.stepcaption.${ currentTab }`) }</Text>
|
||||
<Text>{ LocalizeText(`group.create.stepdesc.${ currentTab }`) }</Text>
|
||||
|
||||
@@ -105,7 +105,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
|
||||
if(!groupInformation) return null;
|
||||
|
||||
return (
|
||||
<div className="pointer-events-auto px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] bg-[#1c1c20f2] rounded text-sm">
|
||||
<div className="pointer-events-auto px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] bg-[#1c1c20f2] rounded text-sm">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
|
||||
<Text variant="white">{ LocalizeText('group.homeroominfo.title') }</Text>
|
||||
|
||||
@@ -110,7 +110,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
|
||||
<AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
|
||||
{ groupData.groupColors && groupCustomize.groupColorsA && groupCustomize.groupColorsA.map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-[2px] border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[0] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(0, item.id) }></div>;
|
||||
return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[0] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(0, item.id) }></div>;
|
||||
}) }
|
||||
</AutoGrid>
|
||||
</Column>
|
||||
@@ -119,7 +119,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
|
||||
<AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
|
||||
{ groupData.groupColors && groupCustomize.groupColorsB && groupCustomize.groupColorsB.map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-[2px] border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[1] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(1, item.id) }></div>;
|
||||
return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[1] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(1, item.id) }></div>;
|
||||
}) }
|
||||
</AutoGrid>
|
||||
</Column>
|
||||
|
||||
Reference in New Issue
Block a user