fix: update theme colors and improve button styles; update dependencies

package.json

@@ -12,18 +12,18 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/cloudflare": "^12.2.0",
+    "@astrojs/cloudflare": "^12.2.1",
-    "@astrojs/react": "^4.1.4",
+    "@astrojs/react": "^4.2.0",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.4",
+    "@astrojs/tailwind": "^6.0.0",
     "@fontsource/bricolage-grotesque": "^5.1.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.1",
     "@fortawesome/free-brands-svg-icons": "^6.7.1",
     "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
-    "astro": "^5.1.6",
+    "astro": "^5.2.5",
     "astro-navbar": "^2.3.7",
     "autoprefixer": "10.4.14",
     "date-fns": "^4.1.0",

src/components/Button.astro

@@ -17,14 +17,14 @@ const {
       {...extra}
       href={href}
       class:list={[
-        'transition-bg flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200',
+        'transition-bg flex items-center justify-center gap-2 rounded-xl px-6 py-4 transition-transform duration-150 hover:scale-[1.02]',
         className,
         isPrimary
-          ? 'border-2 border-dark bg-dark text-paper hover:bg-paper hover:text-dark'
+          ? 'border-dark bg-dark text-paper shadow-lg'
           : isAlert
             ? 'bg-red-300 text-dark'
             : !isBordered
-              ? 'border-2 border-dark hover:bg-dark hover:text-paper'
+              ? 'bg-[rgba(0,0,0,.05)]'
               : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
       ]}
     >
@@ -35,14 +35,14 @@ const {
       id={id}
       {...extra}
       class:list={[
-        'flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200',
+        'transition-bg flex items-center justify-center gap-2 rounded-lg px-6 py-3 transition-transform duration-150 hover:scale-[1.02]',
         className,
         isPrimary
-          ? 'bg-dark text-paper'
+          ? 'border-dark bg-dark text-paper shadow-md'
           : isAlert
             ? 'bg-red-300 text-dark'
             : !isBordered
-              ? 'border-2 border-dark hover:bg-dark hover:text-paper'
+              ? ''
               : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
       ]}
     >

src/components/Features.astro

@@ -53,7 +53,7 @@ import Video from './Video.astro'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-3xl object-cover shadow-md"
       />
     </div>
     <div class="long-feature xl:!flex-row-reverse">
@@ -73,7 +73,7 @@ import Video from './Video.astro'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-3xl object-cover shadow-md"
       />
     </div>
     <div class="long-feature">
@@ -95,7 +95,7 @@ import Video from './Video.astro'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-3xl object-cover shadow-md"
       />
     </div>
     <div class="long-feature xl:!flex-row-reverse">
@@ -116,7 +116,7 @@ import Video from './Video.astro'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-3xl object-cover shadow-md"
       />
     </div>
     <div class="long-feature">
@@ -135,7 +135,7 @@ import Video from './Video.astro'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-3xl object-cover shadow-md"
       />
     </div>
   </div>

src/components/Hero.astro

@@ -3,8 +3,7 @@ import Title from '../components/Title.astro'
 import Description from '../components/Description.astro'
 import Button from '../components/Button.astro'
 import { Image } from 'astro:assets'
-import myImage from '../assets/browsers.png'
+import myImage from '../assets/browser.png'
-import myImageLight from '../assets/browsers-light.png'
 import { ArrowRight } from 'lucide-astro'
 import { motion } from 'motion/react'
 import { getTitleAnimation } from '../animations'
@@ -22,7 +21,7 @@ function getHeroTitleAnimation() {
 
 <header
   id="header"
-  class="flex w-full flex-col items-center gap-[20%] py-32 pb-16 text-center md:pb-32 lg:gap-[15%] lg:pb-16"
+  class="flex w-full flex-col items-center gap-[20%] py-32 text-center lg:gap-[25%]"
 >
   <div class="flex h-full flex-col items-center justify-center">
     <Title
@@ -68,13 +67,7 @@ function getHeroTitleAnimation() {
   <Image
     src={myImage}
     alt="Zen browser"
-    class="mx-auto mb-24 hidden dark:block"
+    class="mx-4 lg:mx-auto lg:w-3/4 mb-24 shadow-md rounded-3xl dark:opacity-80"
-    loading="eager"
-  />
-  <Image
-    src={myImageLight}
-    alt="Zen browser"
-    class="mx-auto mb-24 block dark:hidden"
     loading="eager"
   />
 </motion.span>

src/components/NavBar.astro

@@ -21,12 +21,13 @@ import { ThemeSwitch } from 'free-astro-components'
 >
   <Astronav>
     <MenuItems
-      class="relative mx-auto flex w-full gap-2 bg-paper p-2 lg:w-fit lg:gap-20"
+      class="relative mx-auto flex w-full gap-2 bg-paper p-2 lg:w-3/4 lg:min-w-fit"
     >
-      <a class="mr-3 flex items-center gap-2 text-lg font-bold" href="/">
+      <a class="flex items-center gap-2 text-lg font-bold" href="/">
         <Logo class="text-dark" />
         <span class="hidden lg:block">zen browser</span>
       </a>
+      <div class="flex mx-auto">
         <div class="flex items-center gap-6 text-xs sm:text-sm lg:text-base">
           <Dropdown class="group">
             <button class="flex items-center">
@@ -110,7 +111,8 @@ import { ThemeSwitch } from 'free-astro-components'
             <span>Mods</span>
           </a>
         </div>
-      <div class="ml-auto flex gap-2">
+      </div>
+      <div class="flex gap-2 lg:gap-4 items-center">
         <div id="theme-switcher" class="ml-auto md:mr-2">
           <ThemeSwitch label="" class="px-1 py-2" />
         </div>

src/layouts/Layout.astro

@@ -108,12 +108,12 @@ import Footer from '../components/Footer.astro'
 
   :root {
     --zen-paper: #f2f0e3;
-    --zen-dark: #202020;
+    --zen-dark: #2e2e2e;
     --zen-muted: rgba(0, 0, 0, 0.05);
 
     &[data-theme='dark'] {
-      --zen-paper: #202020;
+      --zen-paper: #1f1f1f;
-      --zen-dark: #f2f0e3;
+      --zen-dark: #d1cfc0;
       --zen-muted: rgba(255, 255, 255, 0.05);
     }
   }

src/release-notes/stable.json

@@ -363,9 +363,7 @@
     "version": "1.0.0-a.13",
     "date": "05/08/2024",
     "extra": "This is a smaller release to fix some bugs and improve some small details.\n\nIm going to try doing more frequent releases from now on, see how it goes.",
-    "features": [
+    "features": ["Allow to remember sidebar width even after collapsing it."],
-      "Allow to remember sidebar width even after collapsing it."
-    ],
     "fixes": [
       {
         "description": "Task Manager Icon Missing in Flatpak Version",
@@ -921,9 +919,7 @@
     "image": true,
     "workflowId": 11000317603,
     "extra": "This update addresses some significant issues with the previous release.\n\nWe appreciate your patience and support!",
-    "features": [
+    "features": ["Added a new system for handling keyboard shortcuts"],
-      "Added a new system for handling keyboard shortcuts"
-    ],
     "fixes": [
       {
         "description": "The New Tab button is not visible",
@@ -980,9 +976,7 @@
       "Enabled container tabs by default",
       "Improved Expand Tabs on Hover layout"
     ],
-    "themeChanges": [
+    "themeChanges": ["Toggle inputs will not use the themed tertiary color"],
-      "Toggle inputs will not use the themed tertiary color"
-    ],
     "breakingChanges": [
       "The keyboard shortcuts will be overriden by the defaults ones in this update"
     ],
@@ -1279,9 +1273,7 @@
         "issue": 2156
       }
     ],
-    "breakingChanges": [
+    "breakingChanges": ["Removed Show Expand Button option from settings"],
-      "Removed Show Expand Button option from settings"
-    ],
     "themeChanges": [
       "The variable '--zen-main-browser-background' will now contain the generated gradient",
       "Added the 'unread' attribute for background tabs that haven't been accessed yet"
@@ -1384,9 +1376,7 @@
         "description": "Fixed wrong aligment on glance action buttons"
       }
     ],
-    "features": [
+    "features": ["No new features, sorry"]
-      "No new features, sorry"
-    ]
   },
   {
     "version": "1.0.1-a.17",