style: lighten navbar background to match page tone
Use page background color (#e3f2fd) with a subtle bottom border instead of the solid green. Brand and links switch to green-on-light for consistency. 🤖 Generated with [Qoder][https://qoder.com]
This commit is contained in:
@@ -8,12 +8,12 @@ const useStyle = createUseStyles({
|
|||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
padding: '0 24px',
|
padding: '0 24px',
|
||||||
height: '48px',
|
height: '48px',
|
||||||
backgroundColor: '#2c9678',
|
backgroundColor: '#e3f2fd',
|
||||||
boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
|
borderBottom: '1px solid rgba(44,150,120,0.2)',
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
},
|
},
|
||||||
brand: {
|
brand: {
|
||||||
color: 'white',
|
color: '#2c9678',
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
fontSize: '18px',
|
fontSize: '18px',
|
||||||
letterSpacing: '1px',
|
letterSpacing: '1px',
|
||||||
@@ -25,19 +25,18 @@ const useStyle = createUseStyles({
|
|||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
},
|
},
|
||||||
link: {
|
link: {
|
||||||
color: 'rgba(255,255,255,0.9)',
|
color: '#2c9678',
|
||||||
fontSize: '13px',
|
fontSize: '13px',
|
||||||
textDecoration: 'none',
|
textDecoration: 'none',
|
||||||
padding: '5px 12px',
|
padding: '5px 12px',
|
||||||
borderRadius: '4px',
|
borderRadius: '4px',
|
||||||
transition: 'background-color 0.2s',
|
transition: 'background-color 0.2s',
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
backgroundColor: 'rgba(255,255,255,0.2)',
|
backgroundColor: 'rgba(44,150,120,0.1)',
|
||||||
color: 'white',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
divider: {
|
divider: {
|
||||||
color: 'rgba(255,255,255,0.4)',
|
color: 'rgba(44,150,120,0.3)',
|
||||||
fontSize: '13px',
|
fontSize: '13px',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user