mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
ui theming
This commit is contained in:
parent
63fbcb4b0a
commit
066353f267
@ -95,7 +95,7 @@ export default function NavBar({ appName, useAuth }: { appName: string, useAuth:
|
||||
<div className="tw-flex-none">
|
||||
{user.avatar ? <div className="tw-avatar">
|
||||
<div className="tw-w-10 tw-rounded-full">
|
||||
<img src={"https://map.api.free-planet-earth.org/assets/" + user?.avatar + "?access_token=" + token} />
|
||||
<img src={"https://api.utopia-lab.org/assets/" + user?.avatar + "?access_token=" + token} />
|
||||
</div>
|
||||
</div> : <></>}
|
||||
<div className='tw-ml-2 tw-mr-2'>{user?.first_name}</div>
|
||||
|
||||
@ -3,39 +3,37 @@ import DynamicHeroIcon from '../../../Utils/DynamicHeroIcon'
|
||||
import { useLayers } from '../hooks/useLayers'
|
||||
|
||||
|
||||
export default function AddButton({setSelectMode} : {setSelectMode: React.Dispatch<React.SetStateAction<any>>}) {
|
||||
export default function AddButton({ setSelectMode }: { setSelectMode: React.Dispatch<React.SetStateAction<any>> }) {
|
||||
|
||||
const layers = useLayers();
|
||||
|
||||
|
||||
return (
|
||||
<div className="tw-dropdown tw-dropdown-top tw-dropdown-end tw-dropdown-hover tw-z-500 tw-absolute tw-right-5 tw-bottom-5" >
|
||||
<button tabIndex={0} className="tw-z-500 tw-btn tw-btn-circle tw-shadow-2xl">
|
||||
<svg viewBox="0 0 20 20" enableBackground="new 0 0 20 20" className="tw-w-6 tw-h-6 tw-inline-block">
|
||||
<path fill="#2e8555" d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
|
||||
C4.049,11,4,10.553,4,10c0-0.553,0.049-1,0.601-1H9V4.601C9,4.048,9.447,4,10,4c0.553,0,1,0.048,1,0.601V9h4.399
|
||||
C15.952,9,16,9.447,16,10z" />
|
||||
<label tabIndex={0} className="tw-z-500 tw-btn tw-btn-circle tw-shadow tw-bg-base-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" className="tw-w-5 tw-h-5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
</button>
|
||||
<ul tabIndex={0} className="tw-dropdown-content tw-pr-2 tw-mb-0 tw-list-none">
|
||||
{layers.map((layer) => (
|
||||
layer.api?.createItem && (
|
||||
<li key={layer.name} >
|
||||
</label>
|
||||
<ul tabIndex={0} className="tw-dropdown-content tw-pr-2 tw-mb-0 tw-list-none">
|
||||
{layers.map((layer) => (
|
||||
layer.api?.createItem && (
|
||||
<li key={layer.name} >
|
||||
<a>
|
||||
<div className="tw-tooltip tw-tooltip-left" data-tip={layer.menuText}>
|
||||
<button tabIndex={0}
|
||||
className="tw-z-500 tw-border-0 tw-pl-2 tw-p-0 tw-mb-2 tw-mt-2 tw-w-10 tw-h-10 tw-cursor-pointer tw-rounded-full tw-mouse tw-drop-shadow-md tw-transition tw-ease-in tw-duration-200 focus:tw-outline-none"
|
||||
style={{ backgroundColor: layer.menuColor }}
|
||||
onClick={() => { setSelectMode(layer) }}>
|
||||
<DynamicHeroIcon icon={layer.menuIcon} />
|
||||
<DynamicHeroIcon icon={layer.menuIcon} />
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
)
|
||||
|
||||
))}
|
||||
</ul>
|
||||
|
||||
))}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ export const FilterControl = () => {
|
||||
const removeFilterTag = useRemoveFilterTag();
|
||||
const setSearchPhrase = useSetSearchPhrase();
|
||||
return (
|
||||
<div className='tw-flex tw-flex-col tw-absolute tw-top-4 tw-left-4 tw-z-1000 tw-right-4'>
|
||||
<div className='tw-flex tw-flex-col tw-absolute tw-top-4 tw-left-4 tw-z-[699] tw-right-4'>
|
||||
<input type="text" placeholder="search ..." className="tw-input tw-input-bordered tw-w-full tw-max-w-sm tw-shadow-xl tw-rounded-2xl" onChange={(e) => setSearchPhrase(e.target.value)} />
|
||||
<div className='tw-flex tw-flex-wrap tw-mt-4'>
|
||||
{
|
||||
|
||||
@ -43,14 +43,14 @@ export function HeaderView({ item, setItemFormPopup }: {
|
||||
<div className='tw-col-span-1'>
|
||||
{item.layer.api &&
|
||||
<div className="tw-dropdown tw-dropdown-bottom">
|
||||
<label tabIndex={0} className="tw-btn tw-m-1 tw-bg-white hover:tw-bg-white tw-text-gray-500 hover:tw-text-gray-700 tw-leading-3 tw-border-none tw-min-h-0 tw-h-4">
|
||||
<label tabIndex={0} className="tw-bg-base-100 tw-btn tw-m-1 tw-leading-3 tw-border-none tw-min-h-0 tw-h-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul tabIndex={0} className="tw-dropdown-content tw-menu tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box">
|
||||
{item.layer.api.updateItem && <li>
|
||||
<a className='tw-bg-white hover:tw-bg-gray-300 !tw-text-blue-800 hover:tw-text-gray-700' onClick={openEditPopup}>
|
||||
<a className="!tw-text-base-content" onClick={openEditPopup}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
@ -58,7 +58,7 @@ export function HeaderView({ item, setItemFormPopup }: {
|
||||
</li>}
|
||||
|
||||
{item.layer.api.deleteItem && <li>
|
||||
<a className='tw-bg-white hover:tw-bg-gray-300 !tw-text-red-800 hover:tw-text-red-950' onClick={removeItemFromMap}>
|
||||
<a className=' !tw-text-error' onClick={removeItemFromMap}>
|
||||
{loading ? <span className="tw-loading tw-loading-spinner tw-loading-sm"></span>
|
||||
:
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
|
||||
@ -16,7 +16,7 @@ export const ItemViewPopup = (props: ItemViewPopupProps) => {
|
||||
|
||||
return (
|
||||
<LeafletPopup maxHeight={377} minWidth={275} maxWidth={275} autoPanPadding={[20, 80]}>
|
||||
<div>
|
||||
<div className='tw-bg-base-100 tw-text-base-content'>
|
||||
<HeaderView item={props.item} setItemFormPopup={props.setItemFormPopup} />
|
||||
<div className='tw-overflow-y-auto tw-max-h-72'>
|
||||
{props.children ?
|
||||
|
||||
@ -47,4 +47,10 @@
|
||||
|
||||
.leaflet-popup-scrolled {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
|
||||
background-color: theme('colors.base-100');
|
||||
color: theme('colors.base-content');
|
||||
|
||||
}
|
||||
@ -26,5 +26,17 @@
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: theme('colors.base-100');
|
||||
color: theme('colors.base-content');
|
||||
|
||||
|
||||
}
|
||||
|
||||
:root {
|
||||
|
||||
--toastify-color-info: theme('colors.info');
|
||||
--toastify-color-success: theme('colors.success');
|
||||
--toastify-color-warning: theme('colors.warning');
|
||||
--toastify-color-error: theme('colors.error');
|
||||
|
||||
}
|
||||
@ -34,4 +34,7 @@ module.exports = {
|
||||
prefix: 'tw-',
|
||||
content: ['./src/**/*.{js,jsx,ts,tsx}'],
|
||||
darkMode: 'class',
|
||||
daisyui: {
|
||||
themes: ["light", "dark", "cupcake", "forest", "cyberpunk"],
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user