priyatham/ai-real-estate-tool
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Boxy UI change

Browse source
This commit is contained in:
lokeshramchand-ctrl 2025-06-27 04:18:34 +05:30
parent 47cb05ad8a
commit 9757713d3c
1 changed files with 25 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/components/UI/Map/OpenLayerMap.tsx
View file

@ -222,6 +222,7 @@ const OpenLayersMap = () => {
boxShadow: 'none', boxShadow: 'none',
padding: '0 32px', padding: '0 32px',
height: '72px', height: '72px',
borderRadius: '60px',
minHeight: '72px', minHeight: '72px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@ -235,8 +236,8 @@ const OpenLayersMap = () => {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '8px', gap: '8px',
backgroundColor: '#ffffff',
borderRadius: '60px', borderRadius: '60px',
backgroundColor: '#ffffff',
padding: '8px', padding: '8px',
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)', boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)',
border: '1px solid #e9ecef' border: '1px solid #e9ecef'
@ -246,11 +247,12 @@ const OpenLayersMap = () => {
key={item} key={item}
style={{ style={{
padding: '12px 20px', padding: '12px 20px',
backgroundColor: index === 1 ? '#2c3e50' : 'transparent', backgroundColor: index === 1 ? '#000000' : 'transparent',
color: index === 1 ? 'white' : '#495057', color: index === 1 ? 'white' : '#495057',
border: 'none', border: 'none',
borderRadius: '60px',
fontSize: '14px', fontSize: '14px',
borderRadius: '60px',
fontWeight: '500', fontWeight: '500',
cursor: 'pointer', cursor: 'pointer',
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
@ -275,21 +277,20 @@ const OpenLayersMap = () => {
position: 'absolute', position: 'absolute',
top: '24px', top: '24px',
left: '24px', left: '24px',
bottom: '24px',
width: '360px', width: '360px',
height: 'calc(100vh - 120px)',
backgroundColor: '#ffffff', backgroundColor: '#ffffff',
borderRadius: '24px',
padding: '24px', padding: '24px',
overflowY: 'auto', overflowY: 'auto',
overflowX: 'hidden', overflowX: 'hidden',
boxShadow: '0 12px 32px rgba(0,0,0,0.12)', boxShadow: '#000000 0px 4px 12px rgba(44, 62, 80, 0.1)',
zIndex: 100, zIndex: 100,
border: '1px solid rgba(0,0,0,0.08)', border: '1px solid rgba(0,0,0,0.08)',
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
transform: sidebarOpen ? 'translateX(0)' : 'translateX(-400px)' transform: sidebarOpen ? 'translateX(0)' : 'translateX(-400px)'
}}> }}>
{/* Sidebar toggle button */} {/* Sidebar toggle button */}
<button <button
onClick={() => setSidebarOpen(!sidebarOpen)} onClick={() => setSidebarOpen(!sidebarOpen)}
style={{ style={{
position: 'absolute', position: 'absolute',
@ -299,7 +300,6 @@ const OpenLayersMap = () => {
height: '40px', height: '40px',
backgroundColor: '#ffffff', backgroundColor: '#ffffff',
border: '1px solid #e9ecef', border: '1px solid #e9ecef',
borderRadius: '50%',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@ -320,12 +320,11 @@ const OpenLayersMap = () => {
<div style={{ <div style={{
width: '8px', width: '8px',
height: '32px', height: '32px',
background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)', background: '#000000',
borderRadius: '4px'
}} /> }} />
<h3 style={{ <h3 style={{
margin: '0', margin: '0',
color: '#2c3e50', color: '#000000',
fontSize: '20px', fontSize: '20px',
fontWeight: '600', fontWeight: '600',
letterSpacing: '-0.3px' letterSpacing: '-0.3px'
@ -338,7 +337,6 @@ const OpenLayersMap = () => {
<div className="search-container" style={{ <div className="search-container" style={{
background: 'linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%)', background: 'linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%)',
padding: '20px', padding: '20px',
borderRadius: '16px',
marginBottom: '24px', marginBottom: '24px',
border: '1px solid #e9ecef', border: '1px solid #e9ecef',
boxShadow: '0 2px 8px rgba(0,0,0,0.04)' boxShadow: '0 2px 8px rgba(0,0,0,0.04)'
@ -353,9 +351,9 @@ const OpenLayersMap = () => {
width: '100%', width: '100%',
padding: '14px 16px', padding: '14px 16px',
border: '1px solid #dee2e6', border: '1px solid #dee2e6',
borderRadius: '12px',
marginBottom: '12px', marginBottom: '12px',
fontSize: '14px', fontSize: '14px',
borderRadius: '60px',
color: '#000000', color: '#000000',
fontFamily: "'Poppins', sans-serif", fontFamily: "'Poppins', sans-serif",
backgroundColor: 'white', backgroundColor: 'white',
@ -370,11 +368,11 @@ const OpenLayersMap = () => {
style={{ style={{
width: '100%', width: '100%',
padding: '14px', padding: '14px',
background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)', background: '#000000',
color: 'white', color: 'white',
border: 'none', border: 'none',
borderRadius: '12px',
cursor: 'pointer', cursor: 'pointer',
borderRadius: '60px',
fontSize: '14px', fontSize: '14px',
fontWeight: '600', fontWeight: '600',
fontFamily: "'Poppins', sans-serif", fontFamily: "'Poppins', sans-serif",
@ -382,7 +380,7 @@ const OpenLayersMap = () => {
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)' transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
}} }}
> >
🔍 Search Location Search
</button> </button>
</form> </form>
</div> </div>
@ -397,7 +395,7 @@ const OpenLayersMap = () => {
}}> }}>
<h4 style={{ <h4 style={{
margin: '0', margin: '0',
color: '#495057', color: '#000000',
fontSize: '16px', fontSize: '16px',
fontWeight: '600' fontWeight: '600'
}}> }}>
@ -405,10 +403,11 @@ const OpenLayersMap = () => {
</h4> </h4>
<span style={{ <span style={{
background: 'linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%)', background: 'linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%)',
color: '#6c757d', color: '#000000',
padding: '4px 8px', padding: '4px 8px',
borderRadius: '12px',
fontSize: '12px', fontSize: '12px',
borderRadius: '60px',
fontWeight: '500', fontWeight: '500',
boxShadow: '0 1px 3px rgba(0,0,0,0.05)' boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
}}> }}>
@ -426,8 +425,7 @@ const OpenLayersMap = () => {
background: layerVisibility[layer.topic] background: layerVisibility[layer.topic]
? 'linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%)' ? 'linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%)'
: 'white', : 'white',
border: `1px solid ${layerVisibility[layer.topic] ? '#2c3e50' : '#e9ecef'}`, border: `1px solid ${layerVisibility[layer.topic] ? '#000000' : '#e9ecef'}`,
borderRadius: '12px',
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
boxShadow: layerVisibility[layer.topic] boxShadow: layerVisibility[layer.topic]
? '0 4px 8px rgba(44, 62, 80, 0.1)' ? '0 4px 8px rgba(44, 62, 80, 0.1)'
@ -436,7 +434,7 @@ const OpenLayersMap = () => {
}}> }}>
<span style={{ <span style={{
fontSize: '14px', fontSize: '14px',
color: '#2c3e50', color: '#000000',
flex: 1, flex: 1,
marginRight: '12px', marginRight: '12px',
fontWeight: '500' fontWeight: '500'
@ -461,13 +459,13 @@ const OpenLayersMap = () => {
position: 'absolute', position: 'absolute',
cursor: 'pointer', cursor: 'pointer',
top: 0, top: 0,
borderRadius: '60px',
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
background: layerVisibility[layer.topic] background: layerVisibility[layer.topic]
? 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)' ? 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)'
: '#dee2e6', : '#dee2e6',
borderRadius: '26px',
transition: '0.3s cubic-bezier(0.4, 0, 0.2, 1)', transition: '0.3s cubic-bezier(0.4, 0, 0.2, 1)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@ -476,12 +474,12 @@ const OpenLayersMap = () => {
<span style={{ <span style={{
position: 'absolute', position: 'absolute',
content: '', content: '',
borderRadius: '60px',
height: '20px', height: '20px',
width: '20px', width: '20px',
left: layerVisibility[layer.topic] ? '25px' : '3px', left: layerVisibility[layer.topic] ? '25px' : '3px',
bottom: '3px', bottom: '3px',
backgroundColor: 'white', backgroundColor: 'white',
borderRadius: '50%',
transition: '0.3s cubic-bezier(0.4, 0, 0.2, 1)', transition: '0.3s cubic-bezier(0.4, 0, 0.2, 1)',
boxShadow: '0 2px 6px rgba(0,0,0,0.15)' boxShadow: '0 2px 6px rgba(0,0,0,0.15)'
}} /> }} />
@ -494,9 +492,9 @@ const OpenLayersMap = () => {
fontSize: '12px', fontSize: '12px',
color: '#adb5bd', color: '#adb5bd',
fontStyle: 'italic', fontStyle: 'italic',
backgroundColor: '#f8f9fa', backgroundColor: '#f8f9fa',
padding: '4px 8px', padding: '4px 8px',
borderRadius: '8px',
boxShadow: '0 1px 2px rgba(0,0,0,0.05)' boxShadow: '0 1px 2px rgba(0,0,0,0.05)'
}}> }}>
Search first Search first
@ -520,20 +518,18 @@ const OpenLayersMap = () => {
<div ref={mapDivRef} style={{ <div ref={mapDivRef} style={{
width: '100%', width: '100%',
height: '100%', height: '100%',
borderRadius: '0',
overflow: 'hidden' overflow: 'hidden'
}} /> }} />
{/* Coordinate Display */} {/* Coordinate Display */}
{clickedCoordinate && ( {clickedCoordinate && (
<div className="coordinate-display" style={{ <div className="coordinate-display" style={{
position: 'absolute', position: 'absolute',
bottom: '24px', bottom: '24px',
left: '24px', left: '24px',
background: 'rgba(44, 62, 80, 0.9)', background: '#000000',
color: 'white', color: 'white',
padding: '12px 16px', padding: '12px 16px',
borderRadius: '12px',
fontSize: '13px', fontSize: '13px',
fontFamily: "'Poppins', monospace", fontFamily: "'Poppins', monospace",
fontWeight: '500', fontWeight: '500',