wip: refactor layout and button styles for recapitulation page

kalkulacka-one · Jan 24, 2025 · b3e5f55 · b3e5f55
1 parent 832a114
commit b3e5f55
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 26 deletions.
diff --git a/apps/web/app/abc/rekapitulace/page.tsx b/apps/web/app/abc/rekapitulace/page.tsx
@@ -18,26 +18,31 @@ export default function Page() {
     <div className="flex min-h-screen flex-col">
       {/* rekapitulace header */}
       {/* sticky not working when scrolling over some portion of h */}
-      <header className="sticky  top-0 grid w-full grid-cols-[auto_1fr_auto] items-center gap-2 bg-white p-2 sm:justify-center sm:gap-8 sm:p-8">
+      <header className="sticky top-0 grid w-full grid-cols-[auto_1fr_auto] items-center gap-2 bg-white p-2  sm:gap-8 sm:p-8">
         {/* fix link wrap, should be link in style of a button! */}
         {/*Link to the last question "current quesiton" */}
-        <Link href="/abc/otazka/1">
-          <Button
-            hasIcon
-            icon={ArrowIconLeft}
-            iconPosition="left"
-            kind="link"
-            fitContent
-            size="default"
-          />
-        </Link>
+        <div className="flex items-center  justify-self-start">
+          <Link className="flex items-center" href="/abc/otazka/1">
+            <Button
+              hasIcon
+              icon={ArrowIconLeft}
+              iconPosition="left"
+              kind="link"
+              fitContent
+              size="auto"
+            />
+          </Link>
+        </div>
 
         {/* replace with typo compoment */}
-        <h2 className="text-center text-5xl font-bold tracking-snug text-neutral-strong sm:mr-auto">
-          Rekapitulace
-        </h2>
+        <div className="justify-self-center sm:mr-auto">
+          <h2 className="text-3xl font-bold tracking-snug text-neutral-strong sm:text-5xl">
+            Rekapitulace
+          </h2>
+        </div>
+
         {/* twmerge button fix here */}
-        <div className="hidden sm:block">
+        <div className="hidden sm:block sm:justify-self-end">
           {/* fix link wrap, should be link in style of a button! */}
           <Link href="/abc/vysledky">
             <Button

diff --git a/packages/design-system/config/padding.ts b/packages/design-system/config/padding.ts
@@ -5,7 +5,8 @@ const padding: Pick<Partial<ThemeConfig>, "padding"> = {
   padding: {
     customDesktop: "calc(calc(1rem * 2) - calc(1rem / 16))",
     customMobile: "calc(1rem / 2 - 1rem / 16)",
-    custom: "calc(1rem - calc(1rem / 16))",
+    recapitulationCardMobile: "calc(calc(1rem / 2) - calc(1rem / 16))",
+    recapitulationCardDesktop: "calc(1rem - calc(1rem / 16))",
   },
 };
 

diff --git a/packages/design-system/src/ui/card/card.tsx b/packages/design-system/src/ui/card/card.tsx
@@ -15,7 +15,7 @@ const cardVariants = cva(
       color: {
         white:
           // TODO: add white as neutral-fg-inverse to the config?
-          "k1-bg-white active:k1-bg-neutral-backdrop-active",
+          "k1-bg-white",
         blue: "k1-bg-primary hover:k1-bg-primary-strong-hover active:k1-bg-primary-strong-active",
         transparent:
           "k1-bg-transparent hover:k1-bg-neutral-backdrop-hover active:k1-bg-neutral-backdrop-active",

diff --git a/packages/design-system/src/ui/iconButton/detailIconButton.tsx b/packages/design-system/src/ui/iconButton/detailIconButton.tsx
@@ -17,6 +17,9 @@ const DetailIconButton = ({ starPressed, onClick, ...props }: Props) => {
       iconDefault={DetailDownIcon}
       iconPressed={DetailUpIcon}
       onClick={onClick}
+      size="auto"
+      iconSize="default"
+      iconWrapper="fit"
       togglePressed={starPressed}
       {...props}
     ></ToggleIconButton>

diff --git a/packages/design-system/src/ui/iconButton/iconButton.tsx b/packages/design-system/src/ui/iconButton/iconButton.tsx
@@ -11,6 +11,7 @@ const IconButtonVariants = cva(
         small: "k1-h-8 k1-w-8",
         default: "k1-h-10 k1-w-10",
         large: "k1-h-14 k1-w-14",
+        auto: "k1-h-auto k1-w-auto",
       },
     },
   },
@@ -26,6 +27,7 @@ const IconVariants = cva(
         small: "k1-h-8 k1-w-8",
         default: "k1-h-fit k1-w-fit k1-p-2",
         large: "k1-h-14 k1-w-14",
+        fit: "k1-h-fit k1-w-fit",
       },
       iconSize: {
         small: "k1-h-4 k1-w-4",

diff --git a/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx b/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx
@@ -96,9 +96,9 @@ export function RecapitulationCard({
       corner="topLeft"
       color="white"
       // add custom calculated padding
-      className="k1-p-custom k1-flex k1-min-w-full k1-flex-col"
+      className="k1-p-recapitulationCardMobile lg:k1-py-recapitulationCardDesktop k1-flex k1-min-w-full k1-flex-col k1-gap-4"
     >
-      <div className="k1-grid k1-grid-cols-[min-content_1fr_min-content_min-content] k1-items-center">
+      <div className="k1-grid k1-grid-cols-[min-content_1fr_min-content_min-content] k1-items-center k1-gap-x-2 min-[700px]:k1-gap-x-6">
         {/* toggle star */}
         {/* icon edit large icon size and wrapper */}
         <StarIconButton
@@ -121,13 +121,13 @@ export function RecapitulationCard({
           <div>
             {/* TODO: line height fix value */}
             {/* replace with typo compoment */}
-            {/* <span className="hidden font-primary k1-font-semibold k1-leading-6 k1-tracking-wide k1-text-neutral sm:k1-inline sm:k1-text-base">
+            <p className="hidden font-primary k1-font-semibold k1-leading-6 k1-tracking-wide k1-text-neutral sm:k1-inline sm:k1-text-base">
               {statement}
-            </span> */}
+            </p>
             {/* mobile title */}
-            <span className="k1-font-primary k1-text-sm k1-font-light !k1-leading-[10px] k1-text-neutral sm:k1-hidden">
+            <p className="k1-font-primary k1-text-sm k1-font-light k1-leading-tight k1-text-neutral sm:k1-hidden">
               {title}
-            </span>
+            </p>
           </div>
         </div>
         <div className={`${detailToggled ? "k1-invisible" : "k1-block"}`}>

diff --git a/packages/design-system/src/ui/toggleIconButton/toggleIconButton.tsx b/packages/design-system/src/ui/toggleIconButton/toggleIconButton.tsx
@@ -30,9 +30,6 @@ const ToggleIconButton = React.forwardRef<
         pressed={isPressed}
         onClick={handleToggle}
         icon={isPressed || togglePressed ? iconPressed : iconDefault}
-        size="default"
-        iconSize="default"
-        iconWrapper="default"
         aria-pressed={isPressed}
         {...props}
         ref={ref}