wip: refactoring css

kalkulacka-one · Jan 16, 2025 · 5904d2c · 5904d2c
1 parent c752f31
commit 5904d2c
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 21 deletions.
diff --git a/apps/web/app/abc/header.tsx b/apps/web/app/abc/header.tsx
@@ -1,16 +1,49 @@
 "use client";
 
+import { Logo } from "@repo/design-system/svg";
 import { useQuestionsStore } from "./providers/storeProvider";
+import { Button } from "@repo/design-system/ui";
+import { CloseIcon } from "@repo/design-system/icons";
+import { usePathname } from "next/navigation";
 
 export default function Header() {
-  const isRekapitulace = useQuestionsStore((state) => state.isRekapitulace);
-  const currentLocation = useQuestionsStore((state) => state.currentLocation);
+  const guide = useQuestionsStore((state) => state.guide);
+  const path = usePathname();
 
   return (
-    // sticky implementation?
-    <header className="flex h-14 w-screen items-center justify-center bg-primary">
-      Volební kalkulačka {isRekapitulace ? "Rekap true" : "Rekap false"}
-      Location: {currentLocation}
+    <header className="h-1/6 max-w-[100vw]">
+      <div className="flex w-full items-center justify-between gap-2 p-4 sm:p-8">
+        {/* logo wrapper */}
+        <div className="flex gap-2">
+          <Logo className="h-5 w-[5.953rem]" />
+          <div className="hidden text-sm font-bold uppercase sm:block">
+            Volební kalkulačka
+          </div>
+        </div>
+        {/* title component, refactor */}
+        {guide[0]?.title && guide[0]?.region ? (
+          <div className="mr-auto">
+            <p className="font-primary text-sm text-neutral">
+              {guide[0]?.title} — {guide[0]?.region}
+            </p>
+          </div>
+        ) : null}
+        {/* refactor visiblity condition later */}
+        {path != "/" && (
+          <Button
+            fitContent
+            kind="link"
+            size="auto"
+            icon={CloseIcon}
+            hasIcon
+            iconPosition="right"
+            // refactor
+            onClick={() => alert("Back to home")}
+          >
+            Zpět na hlavní stránku
+          </Button>
+        )}
+      </div>
     </header>
   );
 }
diff --git a/apps/web/app/abc/layout.tsx b/apps/web/app/abc/layout.tsx
@@ -5,6 +5,7 @@ import { StoreProvider } from "./providers/storeProvider";
 import UrlUpdater from "./utils/urlUpdater";
 import getQuestions from "./utils/getQuestions";
 import Header from "./header";
+import { Blobs } from "@repo/design-system/ui";
 
 const baseUrl =
   "https://www.volebnikalkulacka.cz/data/instance/volebnikalkulacka.cz/krajske-2024/10-jihomoravsky/questions.json";
@@ -20,8 +21,7 @@ export default async function RootLayout({
     <html lang="en">
       <StoreProvider questions={questions}>
         <UrlUpdater>
-          <body>
-            {/* implementation sticky but does not make sense, ask  */}
+          <body className="flex h-screen flex-col">
             <Header />
             {children}
           </body>

diff --git a/apps/web/app/abc/navod/[guideNumber]/page.tsx b/apps/web/app/abc/navod/[guideNumber]/page.tsx
@@ -44,9 +44,8 @@ export default function Page() {
 
   return (
     <>
-      <Blobs />
       {/* mobile arrow bar */}
-      <div className="absolute top-0 flex w-dvw justify-between p-2 sm:hidden">
+      <div className="absolute top-0 flex w-full justify-between p-2 sm:hidden">
         <Button
           hasIcon
           icon={ArrowIconLeft}
@@ -64,9 +63,9 @@ export default function Page() {
           onClick={nextGuide}
         />
       </div>
-      <div className="grid h-screen grid-rows-[1fr_auto]">
+      <main className="grid h-5/6 grid-rows-[1fr_auto]">
         {/* fix height !!! */}
-        <main className="place-content-center items-center xs:flex xs:flex-col xs:gap-2 min-[701px]:grid min-[701px]:grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr] sm:grid sm:grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr] sm:gap-8">
+        <div className="place-content-center items-center xs:flex xs:flex-col xs:gap-2 min-[701px]:grid min-[701px]:grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr] sm:grid sm:grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr] sm:gap-8">
           {/* grid col 1 */}
           {/* empty div for 700 - 767 screen width */}
           <div className="block sm:hidden"></div>
@@ -86,17 +85,20 @@ export default function Page() {
           <div className="flex flex-col gap-4 p-4">
             {/* store content */}
             {/* add as title-m typography component, make content dynamic */}
-            <span className="text-3xl font-bold text-neutral-strong">
-              Krajské volby 2024{" "}
-              <span style={{ fontSize: "smaller" }} className="text-neutral">
-                Jihomoravský kraj
-              </span>
-            </span>
             {guide.map((item, index) => {
               const current = index + 1;
               if (current === guideNumber) {
                 return (
                   <>
+                    <span className="text-3xl font-bold text-neutral-strong">
+                      {item.title}
+                      <span
+                        style={{ fontSize: "smaller" }}
+                        className="text-neutral"
+                      >
+                        {item.region}
+                      </span>
+                    </span>
                     <div className="flex flex-col gap-4 text-base font-normal text-neutral">
                       {item.contentBefore}
                       {guideCardSwitcher(current)}
@@ -122,7 +124,7 @@ export default function Page() {
               />
             )}
           </div>
-        </main>
+        </div>
         {/* bottom bar wrapper */}
         <div className="sticky bottom-0 grid grid-cols-2 justify-center gap-4 bg-white p-4 min-[701px]:grid min-[701px]:[grid-template-columns:repeat(2,8rem)] sm:bg-transparent md:w-1/4 md:justify-self-center">
           {/* grid col 1 */}
@@ -187,7 +189,7 @@ export default function Page() {
             </Link>
           </div>
         </div>
-      </div>
+      </main>
     </>
   );
 }
diff --git a/apps/web/app/abc/navod/guide.json b/apps/web/app/abc/navod/guide.json
@@ -1,5 +1,7 @@
 [
     {
+        "title": "Krajské volby 2024",
+        "region": "Jihomoravský kraj",
         "contentBefore": "Vítejte ve Volební kalkulačce pro krajské volby 2024 pro Jihomoravský kraj. Čeká vás 25 otázek. Stejné otázky dostaly všechny kandidující strany. Zodpovězení otázek zabere zhruba 10 minut a na konci se dozvíte, jak se jednotlivé strany shodují s vašimi názory. Oslovili jsme všechny strany bez výjimky. Pokud se některá neobjeví ve výsledcích, je to proto, že (zatím) neposlala svoje odpovědi."
     },
     {

diff --git a/apps/web/app/abc/providers/storeProvider.tsx b/apps/web/app/abc/providers/storeProvider.tsx
@@ -12,7 +12,12 @@ type ExtendedQuestions = Question & {
   answerType: true | false | null;
 };
 
-type Guide = { contentBefore?: string; contentAfter?: string }[];
+type Guide = {
+  title?: string;
+  region?: string;
+  contentBefore?: string;
+  contentAfter?: string;
+}[];
 
 // divide store, to the external file?
 

diff --git a/apps/web/app/abc/rekapitulace/page.tsx b/apps/web/app/abc/rekapitulace/page.tsx
@@ -18,6 +18,7 @@ export default function Page() {
     <>
       <Blobs />
       {/* rekapitulace header */}
+      {/* sticky not working when scrolling over some portion of h */}
       <header className="sticky top-0 grid grid-cols-[auto_1fr_auto] items-center gap-8 bg-white p-4 sm:justify-center sm:p-8">
         {/* fix link wrap, should be link in style of a button! */}
         {/*Link to the last question "current quesiton" */}

diff --git a/packages/design-system/src/icons/closeIcon.tsx b/packages/design-system/src/icons/closeIcon.tsx
@@ -0,0 +1,18 @@
+export function CloseIcon(
+  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      {props.children}
+      <path
+        d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}
diff --git a/packages/design-system/src/icons/index.ts b/packages/design-system/src/icons/index.ts
@@ -17,3 +17,4 @@ export * from "./forwardIcon";
 export * from "./blueCheckIcon";
 export * from "./redCrossIcon";
 export * from "./percentageIcon";
+export * from "./closeIcon";
diff --git a/packages/design-system/src/svg/index.ts b/packages/design-system/src/svg/index.ts
@@ -1,2 +1,3 @@
 export * from "./blueBlob";
 export * from "./redBlob";
+export * from "./logo";
diff --git a/packages/design-system/src/svg/logo.tsx b/packages/design-system/src/svg/logo.tsx
@@ -0,0 +1,38 @@
+export function Logo(
+  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 300 65"
+      fill="none"
+      role="img"
+      {...props}
+    >
+      <path
+        d="M65.9601 0.28401L77.9054 12.248L37.9138 52.3008L25.9684 64.2647L0 38.2562L11.9454 26.2923L25.9684 40.337L65.9601 0.28401Z"
+        fill="var(--primary-50)"
+      />
+      <path
+        d="M126.768 0.283997L74.8308 52.3007L86.7762 64.2647L138.713 12.248L126.768 0.283997Z"
+        fill="var(--neutral-10)"
+      />
+      <path
+        d="M207.144 0.000134698L219.089 11.9641L199.093 31.9906L219.089 52.0171L207.143 63.981L187.148 43.9544L167.152 63.9809L155.207 52.0169L175.202 31.9905L155.207 11.9639L167.152 1.38557e-05L187.148 20.0267L207.144 0.000134698Z"
+        fill="var(--secondary-50)"
+      />
+      <path
+        d="M255.196 9.84723C255.196 15.1288 250.921 19.4104 245.647 19.4104C240.374 19.4104 236.099 15.1288 236.099 9.84723C236.099 4.56561 240.374 0.28401 245.647 0.28401C250.921 0.28401 255.196 4.56561 255.196 9.84723Z"
+        fill="var(--primary-50)"
+      />
+      <path
+        d="M288.036 0.28401L236.099 52.3007L248.044 64.2647L299.981 12.248L288.036 0.28401Z"
+        fill="var(--neutral-10)"
+      />
+      <path
+        d="M300 54.4368C300 59.7184 295.725 64 290.452 64C285.178 64 280.903 59.7184 280.903 54.4368C280.903 49.1552 285.178 44.8736 290.452 44.8736C295.725 44.8736 300 49.1552 300 54.4368Z"
+        fill="var(--secondary-50)"
+      />
+    </svg>
+  );
+}