Merge pull request #49 from Roman-wdesign/fix/UX-update

fix: to https reverseGeo

Author: Roman-wdesign

src/features/WeatherHourly/main-component/ui/HourlyComponent.vue

@@ -141,22 +141,21 @@ type TemperatureRange = {
 
 const temperatureRanges: TemperatureRange[] = [
   { min: -Infinity, max: -60, color: 'text-fuchsia-900' }, // yakut winter
-  { min: -59.9, max: -49.9, color: 'text-purple-800' }, // arctic winter
-  { min: -49.9, max: -39.9, color: 'text-violet-600' }, // siberian winter
-  { min: -39.9, max: -29.9, color: 'text-violet-500' }, // ural winter
-  { min: -29.9, max: -19.9, color: 'text-indigo-400' }, // asian winter
-  { min: -19.9, max: -9.9, color: 'text-cyan-300' }, // europian winter
-  { min: -9.9, max: -4.9, color: 'text-sky-400' },
-  { min: -4.9, max: -0.1, color: 'text-cyan-400' },
-  { min: -0.1, max: -0.0, color: 'text-neutral-900 dark:text-neutral-200' }, // - 0
-  { min: 0.0, max: 0.1, color: 'text-zinc-900 dark:text-zinc-500' }, // 0
-  { min: 0.2, max: 5.1, color: 'text-emerald-400' }, // arctic spring
-  { min: 5.2, max: 10.1, color: 'text-lime-400' }, //  siberian spring
-  { min: 10.2, max: 15.1, color: 'text-yellow-400' }, // europian spring
-  { min: 15.2, max: 20.1, color: 'text-amber-300' },
-  { min: 20.2, max: 35.1, color: 'text-orange-600' }, // miami summer
-  { min: 35.1, max: 40.1, color: 'text-pink-600' }, // turkmenistan summer
-  { min: 40.2, max: Infinity, color: 'text-rose-600' } // quatar summer
+  { min: -60, max: -50, color: 'text-purple-800' }, // arctic winter
+  { min: -50, max: -40, color: 'text-violet-600' }, // siberian winter
+  { min: -40, max: -30, color: 'text-violet-500' }, // ural winter
+  { min: -30, max: -20, color: 'text-indigo-400' }, // asian winter
+  { min: -20, max: -10, color: 'text-sky-600' }, // europian winter
+  { min: -10, max: -5, color: 'text-cyan-500' },
+  { min: -5, max: 0, color: 'text-cyan-300' },
+  { min: 0, max: 5, color: 'text-zinc-900 dark:text-zinc-500' }, // 0
+  { min: 5, max: 10, color: 'text-emerald-400' }, // arctic spring
+  { min: 10, max: 15, color: 'text-lime-400' }, //  siberian spring
+  { min: 15, max: 20, color: 'text-yellow-400' }, // europian spring
+  { min: 20, max: 30, color: 'text-amber-300' },
+  { min: 30, max: 35, color: 'text-orange-600' }, // miami summer
+  { min: 35, max: 40, color: 'text-pink-600' }, // turkmenistan summer
+  { min: 40, max: Infinity, color: 'text-rose-600' } // quatar summer
 ]
 
 const getTemperatureColor = (tempCelsius: number): string => {

src/features/WeatherNow/item-weather/ui/TheItemWeather.vue

@@ -90,7 +90,7 @@ const props = defineProps<Partial<Props>>()
 </script>
 
 <template>
-  <div class="dark:bg-gray-800 dark:text-gray-400 px-3 h-auto">
+  <div>
     <div class="weather-wrap" v-if="props.weather?.main">
       <div class="location-box">
         <div class="location px-2">

src/features/WeatherNow/main-component/model/useWeatherNow.ts

@@ -20,7 +20,7 @@ export const useWeatherNow = () => {
   const maxResults = 5
   const isSaveDisabled = computed(() => savedCities.value.length >= 3)
 
-  const setResults = (city: string, results: any) => {
+  const setResults = (city: string, results: string) => {
     theWeather.value[city] = results
   }
 
@@ -55,7 +55,7 @@ export const useWeatherNow = () => {
         data.list.map((city: any) => `${city.name}, ${city.sys.country}`) || []
       ).slice(0, maxResults)
     } catch (err) {
-      console.error('Ошибка при получении подсказок:', err)
+      console.error('Error when receiving hints:', err) 
       suggestions.value = []
     }
   }

src/features/WeatherNow/main-component/ui/WeatherNow.vue

@@ -112,14 +112,14 @@ onMounted(async () => {
         <li v-for="(city, index) in savedCities" :key="city" :data-index="index" class="relative min-w-40"
           draggable="true" @dragstart="handleDragStart" @dragover="handleDragOver" @drop="handleDrop">
           <IconClose
-            class="absolute top-0 right-0 w-8 h-8 rounded-full fill-blue-600 hover:fill-blue-500 cursor-pointer"
+            class="absolute top-0 right-0 w-8 h-8 rounded-full fill-orange-tomato hover:fill-white dark:fill-gray-500 dark:hover:fill-blue-300 cursor-pointer"
             @click="removeCityFromStorage(city)">
           </IconClose>
           <div>
-            <BarsFour class="absolute top-2 left-2 hover: cursor-pointer" />
+            <BarsFour class="absolute top-2 left-2 cursor-grab dark:bg-gray-700" />
           </div>
           <TheItemWeather v-if="theWeather[city]" :weather="theWeather[city]" :imgUrl="imgUrl"
-            class="w-full h-80 pt-10 border-2 rounded-md border-blue-500">
+            class="w-full pt-10 rounded-md bg-orange-fruit text-white dark:bg-gray-700 dark:text-gray-400 px-3 h-auto">
           </TheItemWeather>
         </li>
       </ul>

src/shared/config/index.ts

@@ -7,4 +7,4 @@ export const urlBase: string = 'https://api.openweathermap.org/data/2.5/'
 export const imgUrl: string = 'https://openweathermap.org/img/wn/'
 
 // url to geo
-export const reverseGeo: string = 'http://api.openweathermap.org/geo/1.0/'
+export const reverseGeo: string = 'https://api.openweathermap.org/geo/1.0/'

src/widgets/navbar/ui/TheNavbar.vue

@@ -37,35 +37,27 @@ onUnmounted(() => {
 
 <template>
   <div :class="isDarkMode ? 'dark' : ''">
-    <div class="bg-indigo-600 dark:bg-gray-400 relative">
+    <div class="bg-indigo-600 dark:bg-gray-400 relative text-white dark:text-gray-800">
       <nav class="container px-4 mb-8 py-4 mx-auto md:flex md:justify-between md:items-center">
         <div class="flex items-center justify-between">
           <div class="flex items-center">
-            <button
-              @click="toggleDarkMode"
-              class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400 mr-4"
-            >
+            <button @click="toggleDarkMode"
+              class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400 mr-4">
               <span v-if="isDarkMode" class="dark-mode-icon">🌙</span>
               <span v-else class="light-mode-icon">☀️</span>
             </button>
           </div>
           <!-- Mobile menu button -->
           <div @click="handleMenuToggle" class="flex md:hidden">
-            <button
-              type="button"
-              class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400"
-            >
+            <button type="button" class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400">
               <BarsTree class="h-6 w-6 text-gray-50" :class="showMenu ? 'hidden' : 'flex'" />
               <IconClose class="h-6 w-6 text-gray-50" :class="showMenu ? 'flex' : 'hidden'" />
             </button>
           </div>
         </div>
         <!-- Mobile Menu  -->
-        <ul
-          ref="menuRef"
-          :class="{ flex: showMenu, hidden: !showMenu, 'md:flex': true }"
-          class="absolute top-full left-0 w-full bg-indigo-600 dark:bg-gray-400 flex-col mt-4 space-y-4 md:static md:mt-0 md:flex md:flex-row md:items-center md:space-y-0 md:space-x-10"
-        >
+        <ul ref="menuRef" :class="{ flex: showMenu, hidden: !showMenu, 'md:flex': true }"
+          class="absolute top-full left-0 w-full bg-indigo-600 dark:bg-gray-400 flex-col mt-4 space-y-4 md:static md:mt-0 md:flex md:flex-row md:items-center md:space-y-0 md:space-x-10">
           <li>
             <div>
               <RouterLink to="/"> Home </RouterLink>

tailwind.config.js

@@ -7,6 +7,13 @@ module.exports = {
     extend: {
       fontFamily: {
         sans: ['"Roboto"', ...defaultTheme.fontFamily.sans]
+      },
+      colors: {
+        'orange-fruit': '#c5948c',
+        'orange-tomato': '#e7b382',
+        'green-banana': '#85DCB9',
+        'sea-mood': '#81BECE',
+        'deep-sea': '#378BA4'
       }
     }
   },