fix weather ui

frontend/src/pages/dashboard.tsx

@@ -224,36 +224,35 @@ const Dashboard = () => {
 
 {weather && (
   <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 className="flex justify-between items-center mb-4">
         <div>
-                  <div className='text-lg leading-tight text-gray-500 dark:text-gray-400'>
+          <div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
             Weather
           </div>
-
-                <div className="mb-4 w-full">
-                  <label htmlFor="city-select" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                    {t('pages.dashboard.selectCity', { defaultValue: 'Select City' })}
-                  </label>
+        </div>
         <select
           id="city-select"
           value={selectedCity}
           onChange={(e) => setSelectedCity(e.target.value)}
-                    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"
+          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"
         >
           <option value="London">London</option>
           <option value="Minsk">Minsk</option>
         </select>
       </div>
-
-                  <div className='text-3xl leading-tight font-semibold'>
+      <div className="flex justify-between items-center">
+        <div>
+          <div className="text-3xl leading-tight font-semibold">
             {weather.temp}°C
           </div>
-                  <div className='text-sm leading-tight text-gray-600 dark:text-gray-500'>
+          <div className="text-sm leading-tight text-gray-600 dark:text-gray-500">
             {weather.description}
           </div>
         </div>
         <div>
-                  <img src={weather.icon} alt={weather.description} className='w-16 h-16'/>
+          <img src={weather.icon} alt={weather.description} className="w-16 h-16"/>
+        </div>
       </div>
     </div>
   </div>

frontend/src/stores/styleSlice.ts

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

frontend/src/styles.ts

@@ -77,6 +77,34 @@ export const white: StyleObject = {
   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 = {
   '& .MuiDataGrid-cell': {
     paddingX: 3,