antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-03-01 12:44:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed layout

Browse Source
This commit is contained in:
Anton Tranelis 2025-02-24 14:50:12 +00:00
parent 7cfb697b84
commit 49ffa4dc80
22 changed files with 40 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Components/AppShell/NavBar.tsx
View File

@ -1,5 +1,5 @@
import Bars3Icon from '@heroicons/react/24/outline/Bars3Icon'
import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon'
import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon'
import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon'
import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon'
import { useEffect, useRef, useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
@ -70,7 +70,7 @@ export default function NavBar({ appName }: { appName: string }) {
aria-controls='#sidenav'
aria-haspopup='true'
>
<Bars3Icon className='tw-inline-block tw-w-5 tw-h-5 tw-stroke-current' />
<Bars3Icon className='tw-inline-block tw-w-5 tw-h-5' />
</button>
<div className='tw-flex-1 tw-mr-2'>
<div

5
src/Components/Map/Subcomponents/AddButton.tsx
View File

@ -1,7 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import PlusIcon from '@heroicons/react/24/outline/PlusIcon'
import PlusSVG from '#assets/plus.svg'
import { useLayers } from '#components/Map/hooks/useLayers'
import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
@ -32,7 +31,7 @@ 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'>
<PlusIcon className='tw-w-5 tw-h-5' />
<img src={PlusSVG} alt='Layers' className='tw-h-5 tw-w-5' />
</label>
<ul tabIndex={0} className='tw-dropdown-content tw-pr-1 tw-list-none'>
{layers.map(

2
src/Components/Map/Subcomponents/Controls/FilterControl.tsx
View File

@ -72,7 +72,7 @@ export function FilterControl() {
setOpen(true)
}}
>
<FunnelIcon className='size-6' />
<FunnelIcon className='size-6 tw-stroke-[2.5]' />
</div>
</div>
)}

2
src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
View File

@ -17,7 +17,7 @@ export const GratitudeControl = () => {
navigate('/select-user')
}}
>
<HeartIcon />
<HeartIcon className='tw-stroke-[2.5]' />
</div>
}
</div>

2
src/Components/Map/Subcomponents/Controls/LayerControl.tsx
View File

@ -56,7 +56,7 @@ export function LayerControl() {
setOpen(true)
}}
>
<img src={LayerSVG} alt='Layers' className='tw-h-100 tw-w-100' />
<img src={LayerSVG} alt='Layers' />
</div>
)}
</div>

5
src/Components/Map/Subcomponents/Controls/QuestControl.tsx
View File

@ -1,5 +1,4 @@
import HandRaisedIcon from '@heroicons/react/24/outline/HandRaisedIcon'
import FistSVG from '#assets/fist.svg'
import { useQuestsOpen, useSetQuestOpen } from '#components/Gaming/hooks/useQuests'
export function QuestControl() {
@ -19,7 +18,7 @@ export function QuestControl() {
className='tw-card-body hover:tw-bg-slate-300 tw-rounded-2xl tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer'
onClick={() => setQuestsOpen(true)}
>
<HandRaisedIcon />
<img src={FistSVG} alt='Quests' className='tw-h-[2em]' />
</div>
</div>
)}

4
src/Components/Map/Subcomponents/Controls/SidebarControl.tsx
View File

@ -1,4 +1,4 @@
import Bars3Icon from '@heroicons/react/24/outline/Bars3Icon'
import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon'
// Converts leaflet.locatecontrol to a React Component
export const SidebarControl = () => {
@ -13,7 +13,7 @@ export const SidebarControl = () => {
aria-controls='#sidenav'
aria-haspopup='true'
>
<Bars3Icon className='tw-inline-block tw-w-5 tw-h-5 tw-stroke-current' />
<Bars3Icon className='tw-inline-block tw-w-5 tw-h-5' />
</button>
</div>
</div>

6
src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
View File

@ -9,9 +9,9 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-non-null-assertion */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon'
import PencilIcon from '@heroicons/react/24/outline/PencilIcon'
import TrashIcon from '@heroicons/react/24/outline/TrashIcon'
import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon'
import PencilIcon from '@heroicons/react/24/solid/PencilIcon'
import TrashIcon from '@heroicons/react/24/solid/TrashIcon'
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

2
src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/prefer-optional-chain */
import CalendarIcon from '@heroicons/react/24/outline/CalendarIcon'
import CalendarIcon from '@heroicons/react/24/solid/CalendarDaysIcon'
import type { Item } from '#types/Item'

4
src/Components/Profile/Subcomponents/ActionsButton.tsx
View File

@ -67,7 +67,7 @@ export function ActionButton({
color: '#fff',
}}
>
<LinkIcon className='tw-h-5 tw-w-5' />
<LinkIcon className='tw-h-5 tw-w-5 tw-stroke-[2.5]' />
</button>
)}
{triggerAddButton && (
@ -82,7 +82,7 @@ export function ActionButton({
color: '#fff',
}}
>
<PlusIcon className='tw-w-5 tw-h-5' />
<PlusIcon className='tw-w-5 tw-h-5 tw-stroke-[2.5]' />
</button>
)}
</div>

7
src/Components/Profile/Subcomponents/AvatarWidget.tsx
View File

@ -3,10 +3,10 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/prefer-optional-chain */
import ArrowUpTrayIcon from '@heroicons/react/24/outline/ArrowUpTrayIcon'
import UserIcon from '@heroicons/react/24/outline/UserIcon'
import { useState, useCallback, useRef } from 'react'
import { ReactCrop, centerCrop, makeAspectCrop } from 'react-image-crop'
import UserSVG from '#assets/user.svg'
import { useAppState } from '#components/AppShell/hooks/useAppState'
import 'react-image-crop/dist/ReactCrop.css'
import DialogModal from '#components/Templates/DialogModal'
@ -182,10 +182,7 @@ export const AvatarWidget: React.FC<AvatarWidgetProps> = ({ avatar, setAvatar })
</div>
) : (
<div className='tw-h-20 tw-w-20'>
<UserIcon
className='tw-w-20 tw-h-20 tw-rounded-full'
style={{ backgroundColor: '#eee' }}
/>
<img src={UserSVG} className='tw-rounded-full'></img>
</div>
)}
</label>

4
src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx
View File

@ -5,7 +5,7 @@
/* eslint-disable @typescript-eslint/restrict-plus-operands */
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon'
import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon'
import LinkSlashIcon from '@heroicons/react/24/outline/LinkSlashIcon'
import { useEffect } from 'react'
@ -74,7 +74,7 @@ export function LinkedItemsHeaderView({
{loading ? (
<span className='tw-loading tw-loading-spinner tw-loading-sm'></span>
) : (
<LinkSlashIcon className='tw-h-5 tw-w-5' />
<LinkSlashIcon className='tw-h-5 tw-w-5 tw-stroke-[3]' />
)}
</a>
</li>

2
src/Components/Profile/Subcomponents/MarkdownHint.tsx
View File

@ -10,7 +10,7 @@ export const MarkdownHint = () => {
title='Markdown is supported'
className='flex tw-flex-row tw-text-gray-400 tw-cursor-pointer tw-items-center'
>
<img src={MarkdownSVG} alt='Markdown' className='octicon octicon-markdown' />
<img src={MarkdownSVG} alt='Markdown' className='octicon octicon-markdown tw-gray-400' />
{expended && (
<a
href='https://www.markdownguide.org/cheat-sheet/#basic-syntax'

2
src/Components/Profile/Subcomponents/PlusButton.tsx
View File

@ -30,7 +30,7 @@ export function PlusButton({
}}
style={{ backgroundColor: color, color: '#fff' }}
>
<PlusIcon className='tw-w-5 tw-h-5' />
<PlusIcon className='tw-w-5 tw-h-5 tw-stroke-[2.5]' />
</button>
</div>
)}

4
src/Components/Profile/Subcomponents/SocialShareBar.tsx
View File

@ -1,7 +1,7 @@
import ClipboardDocumentIcon from '@heroicons/react/24/outline/ClipboardDocumentIcon'
import { toast } from 'react-toastify'
import ChevronSVG from '#assets/chevron.svg'
import ClipboardSVG from '#assets/share/clipboard.svg'
import SocialShareButton from './SocialShareButton'
@ -58,7 +58,7 @@ const SocialShareBar = ({
onClick={() => copyLink()}
title='copy Link'
>
<ClipboardDocumentIcon />
<img src={ClipboardSVG} className='tw-w-5' />
</div>
)}
</div>

8
src/assets/fist.svg Normal file
View File

@ -0,0 +1,8 @@
<svg
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
stroke='currentColor'
viewBox='0 0 448 512'
>
<path d='M192 0c17.7 0 32 14.3 32 32V144H160V32c0-17.7 14.3-32 32-32zM64 64c0-17.7 14.3-32 32-32s32 14.3 32 32v80H64V64zm192 0c0-17.7 14.3-32 32-32s32 14.3 32 32v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V64zm96 64c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V128zm-96 88l0-.6c9.4 5.4 20.3 8.6 32 8.6c13.2 0 25.4-4 35.6-10.8c8.7 24.9 32.5 42.8 60.4 42.8c11.7 0 22.6-3.1 32-8.6V256c0 52.3-25.1 98.8-64 128v96c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32V401.6c-17.3-7.9-33.2-18.8-46.9-32.5L69.5 357.5C45.5 333.5 32 300.9 32 267V240c0-35.3 28.7-64 64-64h88c22.1 0 40 17.9 40 40s-17.9 40-40 40H128c-8.8 0-16 7.2-16 16s7.2 16 16 16h56c39.8 0 72-32.2 72-72z' />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 902 B

3
src/assets/layer.svg
View File

@ -1,4 +1,4 @@
<svg version='1.1' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
<svg version='1.1' viewBox='0 0 20 20' stroke-width="2" xmlns='http://www.w3.org/2000/svg'>
<path
id='svg_1'
fill='currentColor'
@ -6,7 +6,6 @@
/>
<path
id='svg_2'
strokeWidth='2'
stroke='currentColor'
fill='none'
d='m11.247,4.30851l6.2349,3.0877c0.69083,0.34211 0.69083,0.89295 0,1.2351l-6.2349,3.0877c-0.69083,0.34211 -1.8031,0.34212 -2.494,0l-6.2349,-3.0877c-0.69083,-0.34211 -0.69083,-0.89295 0,-1.2351l6.2349,-3.0877c0.69083,-0.34211 1.8031,-0.34211 2.494,0z'

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 819 B

After

Width:  |  Height:  |  Size: 812 B

2
src/assets/markdown.svg
View File

@ -6,7 +6,7 @@
width='16'
data-view-component='true'
className='octicon octicon-markdown'
fill='rgb(156 163 175 / var(--tw-text-opacity))'
fill='rgb(156 163 175)'
>
<path d='M14.85 3c.63 0 1.15.52 1.14 1.15v7.7c0 .63-.51 1.15-1.15 1.15H1.15C.52 13 0 12.48 0 11.84V4.15C0 3.52.52 3 1.15 3ZM9 11V5H7L5.5 7 4 5H2v6h2V8l1.5 1.92L7 8v3Zm2.99.5L14.5 8H13V5h-2v3H9.5Z'></path>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 493 B

After

Width:  |  Height:  |  Size: 468 B

1
src/assets/plus.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="tw-w-5 tw-h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 226 B

1
src/assets/share/clipboard.svg Normal file
View File

@ -0,0 +1 @@
<svg stroke="currentColor" fill="white" stroke-width="0" viewBox="0 0 256 256" height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg"><path d="M180,64H40A12,12,0,0,0,28,76V216a12,12,0,0,0,12,12H180a12,12,0,0,0,12-12V76A12,12,0,0,0,180,64ZM168,204H52V88H168ZM228,40V180a12,12,0,0,1-24,0V52H76a12,12,0,0,1,0-24H216A12,12,0,0,1,228,40Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 356 B

2
src/assets/share/whatsapp.svg
View File

@ -1,6 +1,6 @@
<svg
stroke='currentColor'
fill='currentColor'
fill='white'
strokeWidth='0'
viewBox='0 0 512 512'
xmlns='http://www.w3.org/2000/svg'

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 471 B

After

Width:  |  Height:  |  Size: 464 B

1
src/assets/user.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150 150" class="tw-w-20 tw-h-20 tw-rounded-full" style="background-color: rgb(238, 238, 238);"><path fill="#ccc" d="M 104.68731,56.689353 C 102.19435,80.640493 93.104981,97.26875 74.372196,97.26875 55.639402,97.26875 46.988823,82.308034 44.057005,57.289941 41.623314,34.938838 55.639402,15.800152 74.372196,15.800152 c 18.732785,0 32.451944,18.493971 30.315114,40.889201 z"></path><path fill="#ccc" d="M 92.5675 89.6048 C 90.79484 93.47893 89.39893 102.4504 94.86478 106.9039 C 103.9375 114.2963 106.7064 116.4723 118.3117 118.9462 C 144.0432 124.4314 141.6492 138.1543 146.5244 149.2206 L 4.268444 149.1023 C 8.472223 138.6518 6.505799 124.7812 32.40051 118.387 C 41.80992 116.0635 45.66513 113.8823 53.58659 107.0158 C 58.52744 102.7329 57.52583 93.99267 56.43084 89.26926 C 52.49275 88.83011 94.1739 88.14054 92.5675 89.6048 z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 911 B