style: fix the styling

Nexters · Feb 27, 2024 · e40ee62 · e40ee62
1 parent c6a427d
commit e40ee62
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 12 deletions.
diff --git a/src/app/(main)/ticker/_components/intro.tsx b/src/app/(main)/ticker/_components/intro.tsx
@@ -9,7 +9,7 @@ const Intro = () => {
   const { stocks } = useStocksStore();
   const hasStock = stocks.length > 0;
   return (
-    <div className={`${hasStock && "border-b border-b-grey-100"} px-4`}>
+    <div className={`${hasStock && "border-b border-b-grey-100"} sticky top-0 w-full bg-white px-4`}>
       <h2 className="pt-4 text-h2">
         You added <span className="text-main-700">{stocks.length}</span> {`${hasStock ? "stocks" : "stock"}`}.
       </h2>

diff --git a/src/app/(main)/ticker/_components/ticker-drawer.tsx b/src/app/(main)/ticker/_components/ticker-drawer.tsx
@@ -77,7 +77,7 @@ export const TickerDrawer = React.memo(
 
           {drawerType !== "name" && (
             <Input
-              value={String(tickerCount)}
+              value={tickerCount === 0 ? "" : String(tickerCount)}
               label="Shares"
               type="number"
               errorDescription="You can enter 1 or more."

diff --git a/src/app/(main)/ticker/_components/ticker-footer.tsx b/src/app/(main)/ticker/_components/ticker-footer.tsx
@@ -16,15 +16,15 @@ export default function TickerFooter() {
 
   return (
     <div
-      className="fixed bottom-4 flex w-full justify-center p-5 pb-4 pt-12"
+      className="sticky bottom-0 flex w-full justify-center p-5 pb-4 pt-0 "
       style={{
         backgroundImage: "linear-gradient(0deg, var(--color-white) 52.78%, rgba(255, 255, 255, 0.00) 100%)",
         maxWidth: 768,
       }}
     >
       <Button
         variant={"default"}
-        className="mx-5 h-14 w-full rounded-lg bg-main-700 p-4"
+        className="mt-14 h-14 w-full rounded-lg bg-main-700 p-4"
         style={{
           backgroundColor: "#4F6AFC",
           color: "#fff",

diff --git a/src/app/(main)/ticker/_components/ticker-list.tsx b/src/app/(main)/ticker/_components/ticker-list.tsx
@@ -36,24 +36,28 @@ const TickerList = React.memo(({ data, tickerName, hasShares, onClick }: TickerP
   );
 
   return (
-    <div className="flex h-full w-full flex-1 flex-col items-start">
+    <div className="flex h-full w-full flex-1 flex-col items-start" style={{}}>
       <div
-        className={`flex w-full flex-1 flex-col items-start ${hasShares ? "gap-6" : "gap-5"} overflow-scroll px-4 py-6`}
+        className={`flex w-full flex-1 flex-col items-start ${
+          hasShares ? "gap-6" : "gap-5"
+        } overflow-scroll px-4 pb-1 pt-6`}
       >
         {data.map((item, index) => (
           <div key={index} className="flex w-full justify-between" onClick={() => onClick(item)}>
             <div className="flex items-center">
-              <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full border border-grey-100 bg-grey-50" />
+              <div className="mr-4 flex h-10 min-w-10 max-w-10 items-center justify-center rounded-full border border-grey-100 bg-grey-50" />
               <div className="flex flex-col justify-between gap-1">
-                <span className="mb-1 text-left text-h5 text-grey-900">{getHighlightText(item.ticker)}</span>
+                <span className="mb-1 line-clamp-1 break-all text-left text-h5 text-grey-900">
+                  {getHighlightText(item.ticker)}
+                </span>
                 <span className="line-clamp-1 break-all text-body3 text-grey-600">
                   {getHighlightText(item.companyName)}
                 </span>
               </div>
             </div>
             {hasShares && (
-              <div className="ml-2 text-nowrap">
-                <p className="text-body1 text-main-900">{`${item.count} Shares`}</p>
+              <div className="ml-2 max-w-20">
+                <p className="truncate text-body1 text-main-900">{`${item.count} Shares`}</p>
               </div>
             )}
           </div>

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
@@ -75,7 +75,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             onBlur={handleBlur}
             {...props}
           />
-          {!props.disabled && props.value && (
+          {inputState === "focused" && !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-grey-300"
@@ -84,7 +84,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
                 <IcXCircle color={"#f9fafb"} />
               </button>
             </div>
-          )}
+          ) : null}
         </div>
         {inputState === "error" && errorDescription && <p className="mt-1 text-body4 text-error">{errorDescription}</p>}
       </div>