Styling wip

navikt · Nov 14, 2023 · f773364 · f773364
1 parent f31a33e
commit f773364
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 20 deletions.
diff --git a/src/components/page/Page.tsx b/src/components/page/Page.tsx
@@ -12,15 +12,17 @@ interface Props {
 
 export const Page = ({ headerText, image, children }: Props) => {
   return (
-    <div className="mb-8">
-      {image ? (
-        <PageHeadingWithImage headerText={headerText} image={image} />
-      ) : (
-        <PageHeading headerText={headerText} />
-      )}
+    <>
+      <div className="mb-4 px-8">
+        {image ? (
+          <PageHeadingWithImage headerText={headerText} image={image} />
+        ) : (
+          <PageHeading headerText={headerText} />
+        )}
+      </div>
 
-      <div className="flex flex-col items-center p-8">
-        <div className="flex flex-col max-w-3xl gap-8">
+      <div className="flex flex-col items-center md:bg-ds-gray-50">
+        <div className="flex flex-col max-w-3xl gap-8 p-8 md:mt-8 mb-8 bg-white">
           {children}
           <Link
             className="flex self-center"
@@ -30,6 +32,6 @@ export const Page = ({ headerText, image, children }: Props) => {
           </Link>
         </div>
       </div>
-    </div>
+    </>
   );
 };
diff --git a/src/components/page/PageHeading.tsx b/src/components/page/PageHeading.tsx
@@ -7,7 +7,7 @@ interface Props {
 
 export const PageHeading = ({ headerText }: Props) => {
     return (
-        <div className="flex flex-row bg-header-color p-8 items-center justify-center">
+        <div className="flex flex-row bg-white pt-4 items-center justify-center">
             <Heading size="xlarge" level="1">
                 {headerText}
             </Heading>

diff --git a/src/components/page/PageHeadingWithImage.tsx b/src/components/page/PageHeadingWithImage.tsx
@@ -9,10 +9,10 @@ interface Props {
   headerText: ReactNode;
   image: MedUtenAGVisning;
 }
-
+// lex flex-row bg-white p-4 items-center justify-center
 export const PageHeadingWithImage = ({ headerText, image }: Props) => {
   return (
-    <div className="flex flex-row bg-header-color p-8 items-center justify-center gap-8 md:pr-48">
+    <div className="flex flex-row bg-white pt-4 items-center justify-center gap-8 md:pr-40">
       {image && (
         <div className="border-solid border-2 border-white p-2 w-32 hidden md:flex">
           <Image

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -19,14 +19,10 @@ const Home: NextPage = () => {
     throw error;
   }
 
-  return (
-    <div className="flex flex-col items-center justify-between md:p-8">
-      {isPending ? (
-        <AktivitetskravSkeletonComponent />
-      ) : (
-        <Aktivitetskrav aktivitetskrav={data} />
-      )}
-    </div>
+  return isPending ? (
+    <AktivitetskravSkeletonComponent />
+  ) : (
+    <Aktivitetskrav aktivitetskrav={data} />
   );
 };