From 00f2da552b861f922d25f78ff856d628a340f26e Mon Sep 17 00:00:00 2001
From: Marek Zelinka <mzelinka17@gmail.com>
Date: Fri, 14 Feb 2025 11:44:19 +0100
Subject: [PATCH] layout fixes

---
 app/layouts/search.tsx       |  7 ++-----
 app/lib/format.ts            |  7 +++++++
 app/routes/search-result.tsx | 38 ++++++++++++++----------------------
 3 files changed, 24 insertions(+), 28 deletions(-)
 create mode 100644 app/lib/format.ts

diff --git a/app/layouts/search.tsx b/app/layouts/search.tsx
index f36f7f8..6a54f22 100644
--- a/app/layouts/search.tsx
+++ b/app/layouts/search.tsx
@@ -5,15 +5,12 @@ import { SearchBar } from "~/components/search-bar";
 export default function SearchLayout() {
   return (
     <div className="min-h-full">
-      <header className="bg-gray-800 pb-24 [color-scheme:dark]">
+      <header className="bg-gray-800 pb-24 scheme-dark">
         <div className="mx-auto max-w-3xl px-2 sm:px-4 lg:px-8">
           <div className="relative flex items-center justify-between py-5">
             <div className="flex items-center max-lg:px-2">
-              <div className="flex flex-none items-center gap-3">
+              <div className="flex-none">
                 <Logo className="h-6 w-auto text-sky-500" />
-                <span className="text-base font-medium text-white max-md:hidden">
-                  DevFinder
-                </span>
               </div>
             </div>
             <div className="flex flex-1 justify-end px-2 md:ml-6">
diff --git a/app/lib/format.ts b/app/lib/format.ts
new file mode 100644
index 0000000..6f2934c
--- /dev/null
+++ b/app/lib/format.ts
@@ -0,0 +1,7 @@
+export const decimalFormatter = new Intl.NumberFormat("en-GB", {
+  style: "decimal",
+});
+
+export const dateFormatter = new Intl.DateTimeFormat("en-GB", {
+  dateStyle: "medium",
+});
diff --git a/app/routes/search-result.tsx b/app/routes/search-result.tsx
index fef07fd..886ef02 100644
--- a/app/routes/search-result.tsx
+++ b/app/routes/search-result.tsx
@@ -13,6 +13,7 @@ import { useState, type CSSProperties } from "react";
 import { data, redirect } from "react-router";
 import { EmptyState } from "~/components/empty-state";
 import { GeneralErrorBoundary } from "~/components/error-boundary";
+import { dateFormatter, decimalFormatter } from "~/lib/format";
 import { getUserByLogin } from "~/lib/github.server";
 import type { User } from "~/types";
 import type { Route } from "./+types/search-result";
@@ -90,21 +91,19 @@ export default function Results({ loaderData }: Route.ComponentProps) {
           </Select>
           <ChevronDownIcon className="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500" />
         </div>
-        <TabList
-          as="nav"
-          aria-label="Tabs"
-          className="flex gap-4 max-sm:hidden"
-        >
-          {tabs.map((tab) => (
-            <Tab
-              key={tab.name}
-              className="rounded-md px-3 py-2 text-sm font-medium text-gray-600 focus:outline-none data-focus:outline-1 data-focus:outline-white data-hover:text-gray-800 data-selected:bg-gray-200 data-selected:text-gray-800"
-            >
-              {tab.name}
-            </Tab>
-          ))}
-        </TabList>
-        <TabPanels className="overflow-hidden bg-white shadow-sm sm:rounded-lg">
+        <div className="max-sm:hidden">
+          <TabList as="nav" aria-label="Tabs" className="flex gap-4">
+            {tabs.map((tab) => (
+              <Tab
+                key={tab.name}
+                className="rounded-md px-3 py-2 text-sm font-medium text-gray-600 focus:outline-none data-focus:outline-1 data-focus:outline-white data-hover:text-gray-800 data-selected:bg-gray-200 data-selected:text-gray-800"
+              >
+                {tab.name}
+              </Tab>
+            ))}
+          </TabList>
+        </div>
+        <TabPanels className="overflow-hidden rounded-lg bg-white shadow-sm">
           {tabs.map((tab) => (
             <TabPanel key={tab.name}>{tab.children}</TabPanel>
           ))}
@@ -114,14 +113,6 @@ export default function Results({ loaderData }: Route.ComponentProps) {
   );
 }
 
-const decimalFormatter = new Intl.NumberFormat("en-GB", {
-  style: "decimal",
-});
-
-const dateFormatter = new Intl.DateTimeFormat("en-GB", {
-  dateStyle: "medium",
-});
-
 function UserInfoCard({ user }: { user: User }) {
   const stats = {
     Repositories: user.repositories.totalCount,
@@ -131,6 +122,7 @@ function UserInfoCard({ user }: { user: User }) {
 
   return (
     <div className="overflow-hidden rounded-lg bg-white shadow-sm">
+      <h2 className="sr-only">Profile Overview</h2>
       <div className="bg-white p-6">
         <div className="sm:flex sm:items-center sm:justify-between">
           <div className="sm:flex sm:space-x-5">