Merge pull request #26 from Nexters/feat/qa-sector-detail

style: fix the design qa on sector detail page
Nexters · Feb 24, 2024 · 88d740f · 88d740f
2 parents 2299a9f + 788d370
commit 88d740f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/src/app/(main)/report/sector-detail/_components/header.tsx b/src/app/(main)/report/sector-detail/_components/header.tsx
@@ -16,7 +16,7 @@ export const Header = React.memo(({ tickerCount }: HeaderProps) => {
         <Image src={"/next.svg"} alt={"section-logo"} width={56} height={56} />
       </div>
 
-      <div className="inline-block rounded-2xl bg-gray-200 px-2.5 py-1.5">{`${tickerCount} Tickers`}</div>
+      <div className="inline-block rounded-2xl bg-gray-100 px-2.5 py-1.5 text-h6">{`${tickerCount} Stocks`}</div>
     </div>
   );
 });
diff --git a/src/app/(main)/report/sector-detail/_components/sector-insights-item.tsx b/src/app/(main)/report/sector-detail/_components/sector-insights-item.tsx
@@ -28,7 +28,13 @@ export const SectorInsightsItem = React.memo(({ title, stocks, type }: SectorIns
           return (
             <div key={idx} className="rounded-lg border border-gray-200 p-4" style={{ minWidth: 119, maxWidth: 119 }}>
               <div className="flex flex-col gap-4">
-                <Image src={"/next.svg"} alt={stock.ticker} width={32} height={32} />
+                <Image
+                  src={"/next.svg"}
+                  alt={stock.ticker}
+                  className="h-8 w-8 rounded-full border border-gray-100"
+                  width={32}
+                  height={32}
+                />
 
                 <div>
                   <h5 className="text-h5 text-gray-900">{stock.ticker}</h5>

diff --git a/src/app/(main)/report/sector-detail/_components/sector-insights.tsx b/src/app/(main)/report/sector-detail/_components/sector-insights.tsx
@@ -63,7 +63,10 @@ export const SectorInsights = React.memo(() => {
     <div>
       <div className="flex w-full flex-col gap-2 border-b border-b-gray-200 px-5 py-8">
         <h2 className="text-h2 text-grey-900">Sector Insights</h2>
-        <p className=" text-body3 text-grey-600">{`Last updated ${"2024/01/27 21:38"}`}</p>
+        <p className="text-body3 text-grey-600">
+          {`Last updated `}
+          <span className="text-main-700">{`${"2024/01/27 21:38"}`}</span>{" "}
+        </p>
       </div>
 
       <div className="flex w-full flex-col gap-10 py-8">

diff --git a/src/components/common/navigation-bar/navigation-bar.tsx b/src/components/common/navigation-bar/navigation-bar.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 import Logo from "../logo/logo";
+import Link from "next/link";
 
 const NavigationBar = () => {
   return (
-    <div className="flex w-full items-center justify-start bg-transparent px-5 py-2.5">
+    <Link href="/" className="flex w-full items-center justify-start bg-transparent px-5 py-2.5">
       <Logo />
-    </div>
+    </Link>
   );
 };