wip: refactoring layout (recapitulation)

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

Hide file tree

Showing 3 changed files with 37 additions and 16 deletions.
diff --git a/apps/web/app/abc/rekapitulace/page.tsx b/apps/web/app/abc/rekapitulace/page.tsx
@@ -15,10 +15,10 @@ export default function Page() {
   const answerNo = useQuestionsStore((state) => state.answerNo);
 
   return (
-    <div className="flex flex-col min-h-screen">
+    <div className="flex min-h-screen flex-col">
       {/* rekapitulace header */}
       {/* sticky not working when scrolling over some portion of h */}
-      <header className="items-center  sticky w-full top-0 grid grid-cols-[auto_1fr_auto] items-center gap-2 sm:gap-8 bg-white p-2 sm:justify-center 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:justify-center 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">
@@ -59,7 +59,7 @@ export default function Page() {
         </div>
       </header>
       {/* main content */}
-      <main className="grid grid-cols-1 sm:grid-cols-[clamp(32rem,50vw,48rem)] justify-center p-4 gap-4">
+      <main className="grid grid-cols-1 justify-center gap-4 p-4 min-[701px]:grid-cols-[clamp(32rem,50vw,48rem)]">
         {/* grid col 1 */}
         {/* replace with typo compoment */}
         <p className="text-sm leading-tight text-neutral">

diff --git a/packages/design-system/config/padding.ts b/packages/design-system/config/padding.ts
@@ -5,6 +5,7 @@ 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))",
   },
 };
 

diff --git a/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx b/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx
@@ -41,29 +41,49 @@ export function RecapitulationCard({
     switch (answerType) {
       case true: {
         return (
-          <Button fitContent kind="inverse" color="primary">
-            <YesIcon className="size-6" />
+          <Button
+            fitContent
+            kind="inverse"
+            color="primary"
+            className="xs:k1-px-6"
+          >
+            <YesIcon className="k1-size-6" />
           </Button>
         );
       }
       case false: {
         return (
-          <Button fitContent kind="inverse" color="secondary">
-            <NoIcon className="size-6" />
+          <Button
+            fitContent
+            kind="inverse"
+            color="secondary"
+            className="xs:k1-px-6"
+          >
+            <NoIcon className="k1-size-6" />
           </Button>
         );
       }
       case null: {
         return (
-          <Button fitContent kind="inverse" color="neutral">
-            <NeutralIcon className="size-6" />
+          <Button
+            fitContent
+            kind="inverse"
+            color="neutral"
+            className="xs:k1-px-6"
+          >
+            <NeutralIcon className="k1-size-6" />
           </Button>
         );
       }
       case undefined: {
         return (
-          <Button fitContent kind="inverse" color="neutral">
-            <NeutralIcon className="size-6" />
+          <Button
+            fitContent
+            kind="inverse"
+            color="neutral"
+            className="xs:k1-px-6"
+          >
+            <NeutralIcon className="k1-size-6" />
           </Button>
         );
       }
@@ -76,13 +96,13 @@ export function RecapitulationCard({
       corner="topLeft"
       color="white"
       // add custom calculated padding
-      className="k1-flex k1-min-w-full k1-flex-col"
+      className="k1-p-custom k1-flex k1-min-w-full k1-flex-col"
     >
       <div className="k1-grid k1-grid-cols-[min-content_1fr_min-content_min-content] k1-items-center">
         {/* toggle star */}
         {/* icon edit large icon size and wrapper */}
         <StarIconButton
-          iconSize="default"
+          iconSize="large"
           iconWrapper="default"
           starPressed={isImportant ? true : false}
           onClick={() => onClick("toggleImportant")}
@@ -101,11 +121,11 @@ export function RecapitulationCard({
           <div>
             {/* TODO: line height fix value */}
             {/* replace with typo compoment */}
-            <span className="hidden font-primary text-base k1-font-semibold k1-leading-6 k1-tracking-wide k1-text-neutral sm:k1-inline">
+            {/* <span 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>
+            </span> */}
             {/* mobile title */}
-            <span className="k1-inline k1-font-primary k1-font-light k1-text-neutral sm:k1-hidden">
+            <span className="k1-font-primary k1-text-sm k1-font-light !k1-leading-[10px] k1-text-neutral sm:k1-hidden">
               {title}
             </span>
           </div>