admin/31433
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix weather ui

Browse Source
This commit is contained in:
Flatlogic Bot 2025-05-12 16:07:41 +00:00
parent b8c1684f9a
commit e81823aa47
4 changed files with 88 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app-shell/src/_schema.json
View File

File diff suppressed because one or more lines are too long

71
frontend/src/pages/dashboard.tsx
View File

@ -222,42 +222,41 @@ const Dashboard = () => {
)} )}
{weather && ( {weather && (
<div className={`${corners !== 'rounded-full' ? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}> <div className={`${corners !== 'rounded-full' ? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}>
<div className='flex justify-between items-center'> <div className="flex flex-col">
<div> <div className="flex justify-between items-center mb-4">
<div className='text-lg leading-tight text-gray-500 dark:text-gray-400'> <div>
Weather <div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
</div> Weather
</div>
<div className="mb-4 w-full"> </div>
<label htmlFor="city-select" className="block text-sm font-medium text-gray-700 dark:text-gray-300"> <select
{t('pages.dashboard.selectCity', { defaultValue: 'Select City' })} id="city-select"
</label> value={selectedCity}
<select onChange={(e) => setSelectedCity(e.target.value)}
id="city-select" className="text-sm h-8 w-28 p-1 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500 bg-white dark:bg-dark-800 dark:border-dark-600"
value={selectedCity} >
onChange={(e) => setSelectedCity(e.target.value)} <option value="London">London</option>
className="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm bg-white dark:bg-dark-800 dark:border-dark-600" <option value="Minsk">Minsk</option>
> </select>
<option value="London">London</option> </div>
<option value="Minsk">Minsk</option> <div className="flex justify-between items-center">
</select> <div>
</div> <div className="text-3xl leading-tight font-semibold">
{weather.temp}°C
<div className='text-3xl leading-tight font-semibold'> </div>
{weather.temp}°C <div className="text-sm leading-tight text-gray-600 dark:text-gray-500">
</div> {weather.description}
<div className='text-sm leading-tight text-gray-600 dark:text-gray-500'> </div>
{weather.description} </div>
</div> <div>
</div> <img src={weather.icon} alt={weather.description} className="w-16 h-16"/>
<div> </div>
<img src={weather.icon} alt={weather.description} className='w-16 h-16'/> </div>
</div> </div>
</div> </div>
</div> )}
)}
{hasPermission(currentUser, 'READ_USERS') && ( {hasPermission(currentUser, 'READ_USERS') && (
<Link href={'/users/users-list'}> <Link href={'/users/users-list'}>

46
frontend/src/stores/styleSlice.ts
View File

@ -31,30 +31,30 @@ interface StyleState {
} }
const initialState: StyleState = { const initialState: StyleState = {
asideStyle: styles.basic.aside, asideStyle: styles.pride.aside,
asideScrollbarsStyle: styles.basic.asideScrollbars, asideScrollbarsStyle: styles.pride.asideScrollbars,
asideBrandStyle: styles.basic.asideBrand, asideBrandStyle: styles.pride.asideBrand,
asideMenuItemStyle: styles.basic.asideMenuItem, asideMenuItemStyle: styles.pride.asideMenuItem,
asideMenuItemActiveStyle: styles.basic.asideMenuItemActive, asideMenuItemActiveStyle: styles.pride.asideMenuItemActive,
asideMenuDropdownStyle: styles.basic.asideMenuDropdown, asideMenuDropdownStyle: styles.pride.asideMenuDropdown,
navBarItemLabelStyle: styles.basic.navBarItemLabel, navBarItemLabelStyle: styles.pride.navBarItemLabel,
navBarItemLabelHoverStyle: styles.basic.navBarItemLabelHover, navBarItemLabelHoverStyle: styles.pride.navBarItemLabelHover,
navBarItemLabelActiveColorStyle: styles.basic.navBarItemLabelActiveColor, navBarItemLabelActiveColorStyle: styles.pride.navBarItemLabelActiveColor,
overlayStyle: styles.basic.overlay, overlayStyle: styles.pride.overlay,
darkMode: false, darkMode: false,
bgLayoutColor: styles.basic.bgLayoutColor, bgLayoutColor: styles.pride.bgLayoutColor,
iconsColor: styles.basic.iconsColor, iconsColor: styles.pride.iconsColor,
activeLinkColor: styles.basic.activeLinkColor, activeLinkColor: styles.pride.activeLinkColor,
cardsColor: styles.basic.cardsColor, cardsColor: styles.pride.cardsColor,
focusRingColor: styles.basic.focusRingColor, focusRingColor: styles.pride.focusRingColor,
corners: styles.basic.corners, corners: styles.pride.corners,
cardsStyle: styles.basic.cardsStyle, cardsStyle: styles.pride.cardsStyle,
linkColor: styles.basic.linkColor, linkColor: styles.pride.linkColor,
websiteHeder: styles.basic.websiteHeder, websiteHeder: styles.pride.websiteHeder,
borders: styles.basic.borders, borders: styles.pride.borders,
shadow: styles.basic.shadow, shadow: styles.pride.shadow,
websiteSectionStyle: styles.basic.websiteSectionStyle, websiteSectionStyle: styles.pride.websiteSectionStyle,
textSecondary: styles.basic.textSecondary, textSecondary: styles.pride.textSecondary,
}; };
export const styleSlice = createSlice({ export const styleSlice = createSlice({

28
frontend/src/styles.ts
View File

@ -77,6 +77,34 @@ export const white: StyleObject = {
textSecondary: 'text-gray-500', textSecondary: 'text-gray-500',
}; };
export const pride: StyleObject = {
aside: 'bg-gradient-to-r from-red-500 via-yellow-300 to-purple-600',
asideScrollbars: 'aside-scrollbars-light',
asideBrand: 'text-white',
asideMenuItem: 'text-white hover:text-yellow-200',
asideMenuItemActive: 'font-semibold text-white',
asideMenuDropdown: 'bg-white/20',
navBarItemLabel: 'text-white',
navBarItemLabelHover: 'hover:text-yellow-200',
navBarItemLabelActiveColor: 'text-yellow-300',
overlay: 'from-red-500 via-yellow-500 to-purple-500',
activeLinkColor: 'bg-white/30',
bgLayoutColor: 'bg-gradient-to-r from-red-50 via-yellow-50 to-purple-50',
iconsColor: 'text-white',
cardsColor: 'bg-white/30',
focusRingColor: 'focus:ring focus:ring-pink-500 focus:border-pink-500 focus:outline-none',
corners: 'rounded-lg',
cardsStyle: 'bg-white/50 border border-white/50',
linkColor: 'text-white',
websiteHeder: 'border-b border-white/50',
borders: 'border-white/50',
shadow: 'shadow-lg',
websiteSectionStyle: '',
textSecondary: 'text-gray-200',
};
export const dataGridStyles = { export const dataGridStyles = {
'& .MuiDataGrid-cell': { '& .MuiDataGrid-cell': {
paddingX: 3, paddingX: 3,