mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
more layout fixing
This commit is contained in:
parent
a01fa313fe
commit
50e88ee146
@ -130,13 +130,14 @@ export default function NavBar({ appName }: { appName: string }) {
|
||||
<Link to={'/user-settings'}>Settings</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
<Link
|
||||
to={'/'}
|
||||
onClick={() => {
|
||||
void onLogout()
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -32,7 +32,10 @@ export default function AddButton({
|
||||
<>
|
||||
{canAddItems() ? (
|
||||
<div className='tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-500 tw:absolute tw:right-4 tw:bottom-4'>
|
||||
<label tabIndex={0} className='tw:z-500 tw:btn tw:btn-circle tw:shadow tw:bg-base-100'>
|
||||
<label
|
||||
tabIndex={0}
|
||||
className='tw:z-500 tw:btn tw:btn-circle tw:btn-lg tw:shadow tw:bg-base-100'
|
||||
>
|
||||
<SVG src={PlusSVG} className='tw:h-5 tw:w-5' />
|
||||
</label>
|
||||
<ul tabIndex={0} className='tw:dropdown-content tw:pr-1 tw:list-none'>
|
||||
|
||||
@ -32,7 +32,7 @@ export function LayerControl() {
|
||||
<li key={layer.name}>
|
||||
<label
|
||||
htmlFor={layer.name}
|
||||
className='tw:label tw:justify-normal tw:pt-1 tw:pb-1'
|
||||
className='tw:label tw:justify-normal tw:pt-1 tw:pb-1 tw:text-base-content'
|
||||
>
|
||||
<input
|
||||
id={layer.name}
|
||||
|
||||
@ -118,7 +118,7 @@ export const SearchControl = () => {
|
||||
placeholder='search ...'
|
||||
autoComplete='off'
|
||||
value={value}
|
||||
className='tw:input tw:input-bordered tw:h-12 tw:grow tw:shadow-xl tw:rounded-lg tw:pr-12'
|
||||
className='tw:input tw:input-bordered tw:h-12 tw:grow tw:shadow-xl tw:rounded-lg tw:pr-12 tw:w-69'
|
||||
ref={searchInput}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onFocus={() => {
|
||||
@ -146,7 +146,7 @@ export const SearchControl = () => {
|
||||
value.length === 0 ? (
|
||||
''
|
||||
) : (
|
||||
<div className='tw:card tw:card-body tw:bg-base-100 tw:p-4 tw:mt-2 tw:shadow-xl tw:overflow-y-auto tw:max-h-[calc(100dvh-152px)] tw:absolute tw:z-3000'>
|
||||
<div className='tw:card tw:card-body tw:bg-base-100 tw:p-4 tw:mt-2 tw:shadow-xl tw:overflow-y-auto tw:max-h-[calc(100dvh-152px)] tw:absolute tw:z-3000 tw:w-83'>
|
||||
{tagsResults.length > 0 && (
|
||||
<div className='tw:flex tw:flex-wrap'>
|
||||
{tagsResults.slice(0, 3).map((tag) => (
|
||||
|
||||
@ -96,8 +96,8 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
|
||||
(u, k) => (
|
||||
<div key={k} className='tw:flex tw:items-center tw:space-x-3 tw:mx-2 tw:my-1'>
|
||||
{u.image ? (
|
||||
<div className='avatar'>
|
||||
<div className='mask mask-circle tw:w-8 tw:h-8'>
|
||||
<div className='tw:avatar'>
|
||||
<div className='tw:mask tw:mask-circle tw:w-8 tw:h-8'>
|
||||
<img
|
||||
src={appState.assetsApi.url + u.image + '?width=40&heigth=40'}
|
||||
alt='Avatar'
|
||||
@ -105,7 +105,7 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className='mask mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
|
||||
<div className='tw:mask tw:mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
|
||||
)}
|
||||
<div>
|
||||
<div className='tw:font-bold'>{u.name}</div>
|
||||
@ -141,7 +141,7 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className='tw:w-full tw:grid tw:mt-4'>
|
||||
<button onClick={sendAttestation} className='btn tw:place-self-center tw:px-8'>
|
||||
<button onClick={sendAttestation} className='tw:btn tw:place-self-center tw:px-8'>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -97,7 +97,8 @@ export const EmojiPicker = ({
|
||||
<>
|
||||
<div
|
||||
onClick={toggleDropdown}
|
||||
className={`tw:cursor-pointer ${selectedEmoji === 'select badge' ? 'tw:text-sm tw:p-9! tw:text-center ' : 'tw:text-6xl'} mask mask-${selectedShape} tw:p-6 bg-[${selectedColor}]`}
|
||||
className={`tw:cursor-pointer ${selectedEmoji === 'select badge' ? 'tw:text-sm tw:p-9! tw:text-center ' : 'tw:text-6xl'} tw:mask tw:mask-${selectedShape} tw:p-6`}
|
||||
style={{ backgroundColor: selectedColor }}
|
||||
>
|
||||
{selectedEmoji}
|
||||
</div>
|
||||
@ -123,7 +124,9 @@ export const EmojiPicker = ({
|
||||
className={`tw:cursor-pointer tw:hover:bg-base-200 tw:rounded-md tw:p-2 ${shape === selectedShape ? 'tw:bg-base-300' : ''}`}
|
||||
onClick={() => selectShape(shape)}
|
||||
>
|
||||
<div className={`tw:h-12 mask mask-${shape} tw:bg-neutral-content`}></div>
|
||||
<div
|
||||
className={`tw:h-12 tw:w-full tw:mask ${shape === 'squircle' ? 'tw:mask-squircle' : shape === 'circle' ? 'tw:mask-circle' : 'tw:mask-hexagon-2'} tw:bg-neutral-content`}
|
||||
></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -135,7 +138,10 @@ export const EmojiPicker = ({
|
||||
className={`tw:cursor-pointer tw:hover:bg-base-200 tw:rounded-md tw:p-2 tw:flex tw:justify-center tw:items-center ${color === selectedColor ? 'tw:bg-base-300' : ''}`}
|
||||
onClick={() => selectColor(color)}
|
||||
>
|
||||
<div className={`tw:h-8 tw:w-8 tw:rounded-full bg-[${color}]`}></div>
|
||||
<div
|
||||
className={`tw:h-8 tw:w-8 tw:rounded-full`}
|
||||
style={{ backgroundColor: color }}
|
||||
></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -38,8 +38,8 @@ export const SelectUser = () => {
|
||||
<td>
|
||||
<div className='tw:flex tw:items-center tw:space-x-3'>
|
||||
{u.image ? (
|
||||
<div className='avatar'>
|
||||
<div className='mask mask-circle tw:w-8 tw:h-8'>
|
||||
<div className='tw:avatar'>
|
||||
<div className='tw:mask tw:mask-circle tw:w-8 tw:h-8'>
|
||||
<img
|
||||
src={appState.assetsApi.url + u.image + '?width=40&heigth=40'}
|
||||
alt='Avatar'
|
||||
@ -47,7 +47,7 @@ export const SelectUser = () => {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className='mask mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
|
||||
<div className='tw:mask tw:mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
|
||||
)}
|
||||
<div>
|
||||
<div className='tw:font-bold'>{u.name}</div>
|
||||
@ -65,7 +65,7 @@ export const SelectUser = () => {
|
||||
className='tw:place-self-center '
|
||||
to={'/attestation-form' + '?to=' + selectedUsers.map((u) => u, ',')}
|
||||
>
|
||||
<button className='btn tw:px-8'>Next</button>
|
||||
<button className='tw:btn tw:px-8'>Next</button>
|
||||
</Link>
|
||||
</div>
|
||||
</MapOverlayPage>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user