Merge pull request #28 from Nexters/feat/qa-stock-detail

style: apply qa review on stock detail
Nexters · Feb 24, 2024 · b4b5d54 · b4b5d54
2 parents 2f92003 + 3c03a43
commit b4b5d54
Show file tree

Hide file tree

Showing 15 changed files with 60 additions and 40 deletions.
diff --git a/src/app/(main)/report/sector-detail/_components/header.tsx b/src/app/(main)/report/sector-detail/_components/header.tsx
@@ -7,7 +7,7 @@ interface HeaderProps {
 
 export const Header = React.memo(({ tickerCount }: HeaderProps) => {
   return (
-    <div className="w-full border-b border-b-gray-200 p-5 pb-8">
+    <div className="w-full border-b border-b-grey-200 p-5 pb-8">
       <div className="mb-6 flex w-full items-center justify-between gap-0.5">
         <div>
           <h2 className="text-h5 text-grey-600">In Financial Services</h2>
@@ -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-100 px-2.5 py-1.5 text-h6">{`${tickerCount} Stocks`}</div>
+      <div className="inline-block rounded-2xl bg-grey-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
@@ -26,18 +26,18 @@ export const SectorInsightsItem = React.memo(({ title, stocks, type }: SectorIns
       <div className="scrollbar-none flex gap-2.5 overflow-x-auto overflow-y-hidden px-5 ">
         {stocks.map((stock, idx) => {
           return (
-            <div key={idx} className="rounded-lg border border-gray-200 p-4" style={{ minWidth: 119, maxWidth: 119 }}>
+            <div key={idx} className="rounded-lg border border-grey-200 p-4" style={{ minWidth: 119, maxWidth: 119 }}>
               <div className="flex flex-col gap-4">
                 <Image
                   src={"/next.svg"}
                   alt={stock.ticker}
-                  className="h-8 w-8 rounded-full border border-gray-100"
+                  className="h-8 w-8 rounded-full border border-grey-100"
                   width={32}
                   height={32}
                 />
 
                 <div>
-                  <h5 className="text-h5 text-gray-900">{stock.ticker}</h5>
+                  <h5 className="text-h5 text-grey-900">{stock.ticker}</h5>
                   <p className="mt-0.5 truncate text-body2 text-main-900">
                     {type === "Date" && formatDateStringToMonthDay(stock.exDividendDate)}
                     {type === "Rate" &&

diff --git a/src/app/(main)/report/sector-detail/_components/sector-insights.tsx b/src/app/(main)/report/sector-detail/_components/sector-insights.tsx
@@ -61,7 +61,7 @@ const dummyTopDividendList: InsightsStock[] = [
 export const SectorInsights = React.memo(() => {
   return (
     <div>
-      <div className="flex w-full flex-col gap-2 border-b border-b-gray-200 px-5 py-8">
+      <div className="flex w-full flex-col gap-2 border-b border-b-grey-200 px-5 py-8">
         <h2 className="text-h2 text-grey-900">Sector Insights</h2>
         <p className="text-body3 text-grey-600">
           {`Last updated `}

diff --git a/src/app/(main)/report/sector-detail/page.tsx b/src/app/(main)/report/sector-detail/page.tsx
@@ -35,7 +35,7 @@ const SectorDetailPage = React.memo(() => {
     <div>
       <Header tickerCount={4} />
       <DividendList dividendList={dummyDividendList} />
-      <div className="h-4 bg-gray-100" />
+      <div className="h-4 bg-grey-100" />
       <SectorInsights />
     </div>
   );

diff --git a/src/app/(main)/stock/[id]/_components/dividend-info.tsx b/src/app/(main)/stock/[id]/_components/dividend-info.tsx
@@ -1,33 +1,37 @@
 import React from "react";
+import { Months } from "../_data";
+import { StockDetailResponseDividendMonthsItem } from "@/api/generated/endpoint.schemas";
 
 interface DividendInfoProps {
   dividendYield?: number;
   dividendPerShare?: number;
-  dividendMonths?: string[];
+  dividendMonths?: StockDetailResponseDividendMonthsItem[];
 }
 
 export const DividendInfo = React.memo(({ dividendYield, dividendPerShare, dividendMonths }: DividendInfoProps) => {
   return (
     <div className="flex w-full flex-col px-5 py-8">
-      <h4 className="mb-7 text-h4 text-grey-800">Dividend Info</h4>
+      <h4 className="mb-6 text-h4 text-grey-800">Dividend Info</h4>
 
       <div className="mb-2 flex w-full justify-between gap-2">
-        <div className="flex flex-1 flex-col items-center justify-between gap-2 bg-gray-50 p-4">
-          <p className="text-body3 text-gray-500">Dividend Yield</p>
-          <p className="text-h5 text-gray-800">{`${dividendYield ?? 0}%`}</p>
+        <div className="flex flex-1 flex-col items-center justify-between gap-2 bg-grey-50 p-4">
+          <p className="text-body3 text-grey-500">Dividend Yield</p>
+          <p className="text-h5 text-grey-800">{`${dividendYield ?? 0}%`}</p>
         </div>
-        <div className="flex flex-1 flex-col items-center justify-between bg-gray-50 p-4">
-          <p className="text-body3 text-gray-500">Dividend per Share</p>
-          <p className="text-h5 text-gray-800">{`${dividendPerShare ?? 0}$`}</p>
+        <div className="flex flex-1 flex-col items-center justify-between bg-grey-50 p-4">
+          <p className="text-body3 text-grey-500">Dividend per Share</p>
+          <p className="text-h5 text-grey-800">{`${dividendPerShare ?? 0}$`}</p>
         </div>
       </div>
 
       {dividendMonths && (
-        <div className="flex w-full flex-col items-center justify-between gap-2 bg-gray-50 p-4">
-          <p className="text-body3 text-gray-500">Dividend Frequency</p>
-          <span className="text-center text-h5 text-gray-800">
+        <div className="flex w-full flex-col items-center justify-between gap-2 bg-grey-50 p-4">
+          <p className="text-body3 text-grey-500">Dividend Frequency</p>
+          <span className="text-center text-h5 text-grey-800">
             {`${dividendMonths.length} Times`}
-            <span className=" text-body3 text-main-900">{` (${dividendMonths?.join(", ")})`}</span>
+            <span className=" text-body3 text-main-900">{` (${dividendMonths
+              .map((month) => Months[month])
+              ?.join(", ")})`}</span>
           </span>
         </div>
       )}

diff --git a/src/app/(main)/stock/[id]/_components/header.tsx b/src/app/(main)/stock/[id]/_components/header.tsx
@@ -21,7 +21,7 @@ export const Header = React.memo(({ stock, handleInfoClick }: HeaderProps) => {
         <Info className="text-grey-400" onClick={handleInfoClick} />
       </div>
 
-      <div className="inline-block rounded bg-gray-100 px-2 py-1">{stock.industry}</div>
+      <div className="inline-block rounded bg-grey-100 px-2 py-1 text-body3 text-grey-700">{stock.industry}</div>
     </div>
   );
 });
diff --git a/src/app/(main)/stock/[id]/_components/investment-tip.tsx b/src/app/(main)/stock/[id]/_components/investment-tip.tsx
@@ -10,7 +10,7 @@ interface InvestmentTipProps {
 
 export const InvestmentTip = React.memo(({ exDividendDate, earliestPaymentDate }: InvestmentTipProps) => {
   return (
-    <div className="flex w-full flex-col border border-gray-200 px-5 py-8">
+    <div className="flex w-full flex-col border-b border-grey-200 px-5 py-8">
       <h4 className="mb-7 text-h4 text-grey-800">Investment Tip</h4>
 
       <div className="flex w-full flex-col gap-5">
@@ -21,7 +21,7 @@ export const InvestmentTip = React.memo(({ exDividendDate, earliestPaymentDate }
                 <InfoCalendar />
                 <h6 className="text-h6 text-grey-500">{"Ex-Dividend Date"}</h6>
               </div>
-              <p>{formatDateStringToMonthDay(exDividendDate)}</p>
+              <p className="text-h5 text-grey-800">{formatDateStringToMonthDay(exDividendDate)}</p>
             </>
           )}
         </div>
@@ -32,7 +32,7 @@ export const InvestmentTip = React.memo(({ exDividendDate, earliestPaymentDate }
                 <InfoDate />
                 <h6 className="text-h6 text-grey-500">{"Approaching Payment Date"}</h6>
               </div>
-              <p>{formatDateStringToMonthDay(earliestPaymentDate)}</p>
+              <p className="text-h5 text-grey-800">{formatDateStringToMonthDay(earliestPaymentDate)}</p>
             </>
           )}
         </div>

diff --git a/src/app/(main)/stock/[id]/_components/stock-drawer.tsx b/src/app/(main)/stock/[id]/_components/stock-drawer.tsx
@@ -19,14 +19,14 @@ export const StockInfoDrawer = React.memo(({ handleInfoClick }: StockInfoDrawerP
     <DrawerContent className="mx-auto  max-w-[--max-width] ">
       <DrawerHeader>
         <DrawerTitle className="mb-6 flex flex-col">
-          {"Latest Price"}
-          <span className="mt-1 text-body3 text-gray-600">
-            {`Last updated `}
+          <p className=" text-h3 text-grey-900">{"Latest Price"}</p>
+          <p className="mt-1 ">
+            <span className="text-body3 text-grey-600">{`Last updated `}</span>
             <span className="text-body3 text-main-700">2024/01/27 21:38</span>
-          </span>
+          </p>
         </DrawerTitle>
         <DrawerDescription>
-          <span className="text-body1 text-gray-700">
+          <span className="text-body1 text-grey-700">
             Please note that Payout’s stock information may not always align with the real-time data as they are updated
             everyday at midnight.
           </span>

diff --git a/src/app/(main)/stock/[id]/_data/index.ts b/src/app/(main)/stock/[id]/_data/index.ts
@@ -0,0 +1,16 @@
+import { StockDetailResponseDividendMonthsItem } from "@/api/generated/endpoint.schemas";
+
+export const Months: Record<StockDetailResponseDividendMonthsItem, string> = {
+  JANUARY: "Jan",
+  FEBRUARY: "Feb",
+  MARCH: "Mar",
+  APRIL: "Apr",
+  MAY: "May",
+  JUNE: "Jun",
+  JULY: "Jul",
+  AUGUST: "Aug",
+  SEPTEMBER: "Sep",
+  OCTOBER: "Oct",
+  NOVEMBER: "Nov",
+  DECEMBER: "Dec",
+} as const;
diff --git a/src/app/(main)/stock/[id]/page.tsx b/src/app/(main)/stock/[id]/page.tsx
@@ -35,7 +35,7 @@ export default function StockPage({ params }: { params: { id: string } }) {
       <DrawerOverlay onClick={() => setShowStockInfo(false)} />
       <StockInfoDrawer handleInfoClick={handleInfoClick} />
       <Header stock={dummyStock} handleInfoClick={handleInfoClick} />
-      <div className="h-4 bg-gray-100" />
+      <div className="h-4 bg-grey-100" />
       <InvestmentTip exDividendDate={dummyStock.exDividendDate} earliestPaymentDate={dummyStock.earliestPaymentDate} />
       <DividendInfo
         dividendPerShare={dummyStock.dividendPerShare}

diff --git a/src/app/(main)/ticker/_components/intro.tsx b/src/app/(main)/ticker/_components/intro.tsx
@@ -20,10 +20,10 @@ const Intro = () => {
           }}
           className="flex w-full items-center justify-start gap-4 pl-0"
         >
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-gray-500">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-grey-100 text-grey-500">
             <Plus />
           </div>
-          <p className="text-h5 text-gray-700">Add Stock</p>
+          <p className="text-h5 text-grey-700">Add Stock</p>
         </Button>
       </div>
     </div>

diff --git a/src/app/(main)/ticker/_components/ticker-list.tsx b/src/app/(main)/ticker/_components/ticker-list.tsx
@@ -17,10 +17,10 @@ const TickerList = React.memo(({ data, hasShares, onClick }: TickerProps) => {
         {data.map((item, index) => (
           <div key={index} className="flex w-full justify-between" onClick={() => onClick(item)}>
             <div className="flex">
-              <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full border border-gray-100 bg-gray-50" />
+              <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full border border-grey-100 bg-grey-50" />
               <div>
-                <p className="text-left text-h3 text-gray-900">{item.ticker}</p>
-                <p className="line-clamp-1 break-all text-body3 text-gray-600">{item.companyName}</p>
+                <p className="text-left text-h3 text-grey-900">{item.ticker}</p>
+                <p className="line-clamp-1 break-all text-body3 text-grey-600">{item.companyName}</p>
               </div>
             </div>
             {hasShares && (

diff --git a/src/components/common/toast/toast.tsx b/src/components/common/toast/toast.tsx
@@ -19,7 +19,7 @@ const Toast = React.memo(({ t, title, isRevertable, handleUndo, ...props }: Toas
   return (
     <div
       className={cn(
-        "flex items-center justify-between rounded bg-gray-900 px-4 py-3 text-white shadow",
+        "flex items-center justify-between rounded bg-grey-900 px-4 py-3 text-white shadow",
         props.className
       )}
       {...props}

diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
@@ -46,7 +46,7 @@ const DrawerContent = React.forwardRef<
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("grid gap-1.5 p-4 text-h3 text-gray-900", className)} {...props} />
+  <div className={cn("grid gap-1.5 p-4 text-h3 text-grey-900", className)} {...props} />
 );
 DrawerHeader.displayName = "DrawerHeader";
 

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
@@ -18,7 +18,7 @@ interface InputProps extends HTMLProps<HTMLInputElement> {
 const containerVariants = cva("", {
   variants: {
     variant: {
-      default: "border-gray-300",
+      default: "border-grey-300",
       focused: "border-2 border-blue-700",
       error: "border-error",
     },
@@ -31,7 +31,7 @@ const containerVariants = cva("", {
 const inputVariants = cva("outline-none w-full h-9", {
   variants: {
     variant: {
-      default: "border-gray-300",
+      default: "border-grey-300",
       focused: "border-2 border-blue-700",
       error: "border-error",
     },
@@ -43,7 +43,7 @@ const inputVariants = cva("outline-none w-full h-9", {
 const labelVariants = cva("block text-h6 mb-1.5", {
   variants: {
     variant: {
-      default: "text-gray-700",
+      default: "text-grey-700",
       focused: "text-main-700",
       error: "text-error",
     },
@@ -90,7 +90,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           {!props.disabled && props.value && (
             <div className="flex items-center pl-4 ">
               <button
-                className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-300"
+                className="flex h-5 w-5 items-center justify-center rounded-full bg-grey-300"
                 onClick={clearInput}
               >
                 <IcXCircle color={"#f9fafb"} />