chore: visual fixes (#94)

* chore: visual fixes

* fix: bg

Author: hmbanan666

apps/atrium-telegram/app/assets/css/styles.css

@@ -3,7 +3,7 @@
   --ui-secondary: var(--tg-theme-link-color);
   --ui-border: var(--tg-theme-section-separator-color);
   --ui-text: var(--tg-theme-text-color);
-  --ui-bg: var(--tg-theme-secondary-bg-color);
+  --ui-bg: var(--tg-theme-section-bg-color);
 
   --ui-color-neutral-400: var(--tg-theme-subtitle-text-color);
   --ui-color-neutral-500: var(--tg-theme-subtitle-text-color);
@@ -101,17 +101,11 @@
   }
 }
 
-/* Preserve scrolling behavior */
-/* html, body, #app {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  overscroll-behavior: none;
+html, body {
+  background: transparent !important;
 }
-#app {
-  overflow-y: auto;
-}
-#app::-webkit-scrollbar {
+
+::-webkit-scrollbar {
   display: none;
   width: 0;
-} */
+}

apps/atrium-telegram/app/components/Navigation.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="z-50 touch-pan-x fixed bottom-0 left-0 right-0 w-full h-25 tg-bg-bottom-bar rounded-t-lg">
+  <nav class="z-50 touch-pan-x fixed bottom-0 left-0 right-0 w-full h-25 tg-bg-bottom-bar border-t border-default rounded-t-lg">
     <div class="max-w-[28rem] mx-auto">
       <div class="mt-3 grid grid-cols-4">
         <button

apps/atrium-telegram/app/components/TaskCard.vue

@@ -60,31 +60,20 @@
         :ui="{
           trailingIcon: [
             'self-start mt-0.5 text-dimmed',
-            isFocused ? 'tg-text-button' : undefined,
+            isFocused ? 'text-secondary' : undefined,
           ],
         }"
         class="group/task duration-200 motion-preset-bounce cursor-pointer"
-        :class="{
-          'bg-secondary border-b-2 border-secondary': isFocused,
-        }"
+        :class="[
+          isFocused && 'border border-secondary',
+        ]"
       >
         <div class="flex flex-col gap-2 items-start">
           <div class="flex flex-col gap-1 items-start text-left">
-            <h4
-              class="text-base/5 font-semibold tg-text"
-              :class="[
-                isFocused ? 'tg-text-button' : undefined,
-              ]"
-            >
+            <h4 class="text-base/5 font-medium tg-text">
               {{ task.name }}
             </h4>
-            <p
-              v-if="task.description"
-              class="text-sm/4 text-muted font-medium"
-              :class="[
-                isFocused ? 'tg-text-button' : undefined,
-              ]"
-            >
+            <p v-if="task.description" class="text-sm/4 text-muted font-normal">
               {{ task.description }}
             </p>
           </div>
@@ -101,12 +90,9 @@
             <UBadge
               v-if="task?.date"
               size="md"
-              color="neutral"
-              variant="outline"
+              color="primary"
+              variant="subtle"
               icon="i-lucide-calendar"
-              :ui="{
-                leadingIcon: 'text-dimmed',
-              }"
               class="shrink-0"
             >
               {{ df.format(parseDate(task.date).toDate(getLocalTimeZone())) }}

apps/atrium-telegram/app/components/TaskList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 rounded-lg border border-default tg-bg group/list space-y-2.5">
+  <div class="p-4 rounded-lg border border-default tg-bg-section group/list space-y-3.5">
     <div class="flex flex-row gap-2 items-center justify-between">
       <div class="flex flex-row gap-2.5 items-center">
         <UPopover

apps/atrium-telegram/app/components/TasksTodaySwitch.vue

@@ -9,31 +9,9 @@
       root: 'flex-row-reverse items-center',
       label: 'mr-3 text-base/5 md:text-lg/5 font-semibold',
     }"
-    @change="onChange"
   />
 </template>
 
 <script setup lang="ts">
-const toast = useToast()
 const taskStore = useTaskStore()
-
-function onChange() {
-  if (taskStore.isTodayOnly) {
-    toast.add({
-      title: 'Так уже лучше',
-      description: 'Фокусируйся на сегодняшних задачах. Ничего не потерялось?',
-      icon: 'i-lucide-notebook-text',
-      color: 'secondary',
-      duration: 2000,
-    })
-  } else {
-    toast.add({
-      title: 'Ого, как много задач!',
-      description: 'Все и сразу. Ничего не потерялось. Или нет?',
-      icon: 'i-lucide-notebook',
-      color: 'secondary',
-      duration: 2000,
-    })
-  }
-}
 </script>

apps/atrium-telegram/app/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="tg-bg-secondary tg-text tg-safe-area">
+  <main class="tg-bg tg-text tg-safe-area">
     <slot />
   </main>
 

apps/atrium-telegram/app/pages/index.vue

@@ -5,7 +5,7 @@
         <UTooltip :text="$t('app.update.user-photo.button')">
           <UAvatar
             :src="userStore?.avatarUrl ?? undefined"
-            class="size-18 cursor-pointer hover:scale-95 active:scale-90 duration-200"
+            class="size-14 cursor-pointer hover:scale-95 active:scale-90 duration-200"
             @click="modalUploadUserAvatar.open()"
           />
         </UTooltip>