style: update AppHeader layout and button styles

- Increased gap between items in the header for better spacing.
- Added background color to buttons for improved visibility.
- Changed button variant for consistency in design.

Author: cgoinglove

src/components/layouts/app-header.tsx

@@ -68,12 +68,13 @@ export function AppHeader() {
       {componentByPage}
       <div className="flex-1" />
 
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-2">
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
               size={"icon"}
               variant={"ghost"}
+              className="bg-secondary/40"
               onClick={() => {
                 appStoreMutate((state) => ({
                   voiceChat: {
@@ -103,14 +104,13 @@ export function AppHeader() {
             </div>
           </TooltipContent>
         </Tooltip>
-        <div className="h-4">
-          <Separator orientation="vertical" />
-        </div>
+
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
               size={"icon"}
-              variant={"ghost"}
+              variant={"secondary"}
+              className="bg-secondary/40"
               onClick={() => {
                 appStoreMutate((state) => ({
                   temporaryChat: {