feat: adjust spacing & colors

plum-in-a-compote · Oct 23, 2022 · 05e08fd · 05e08fd
1 parent 6e22a4e
commit 05e08fd
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 30 deletions.
diff --git a/components/composited/HomePage/HomeFeature.tsx b/components/composited/HomePage/HomeFeature.tsx
@@ -12,7 +12,7 @@ export const HomeFeature = ({ title, description, children }: HomeFeatureProps)
     <article className="flex gap-2">
       {children}
       <div className="ml-2">
-        <h3 className="text-lg font-semibold leading-6 text-gray-700 lg:text-2xl">{title}</h3>
+        <h3 className="text-lg font-semibold text-gray-700 lg:text-2xl lg:leading-9">{title}</h3>
         <p className="text-base text-gray-500 lg:text-xl">{description}</p>
       </div>
     </article>

diff --git a/components/composited/HomePage/HomeFeatureList.tsx b/components/composited/HomePage/HomeFeatureList.tsx
@@ -14,7 +14,8 @@ export const HomeFeatureList = () => {
         <PeopleIcon
           width={40}
           height={40}
-          className="fill-gray-600 shrink-0 p-1 rounded bg-blue-200 lg:w-14 lg:h-14"
+          fill="fill-blue-800"
+          className="shrink-0 p-1 rounded bg-blue-200 lg:w-14 lg:h-14"
         />
       </HomeFeature>
       <HomeFeature
@@ -24,6 +25,7 @@ export const HomeFeatureList = () => {
         <TimelineIcon
           width={40}
           height={40}
+          fill="fill-blue-800"
           className="shrink-0 p-1 rounded bg-blue-200 lg:w-14 lg:h-14"
         />
       </HomeFeature>
@@ -34,6 +36,7 @@ export const HomeFeatureList = () => {
         <ProjectIcon
           width={40}
           height={40}
+          fill="fill-blue-800"
           className="shrink-0 p-1 rounded bg-blue-200 lg:w-14 lg:h-14"
         />
       </HomeFeature>
@@ -44,7 +47,7 @@ export const HomeFeatureList = () => {
         <FavoriteIcon
           width={40}
           height={40}
-          className="fill-gray-600 shrink-0 p-1 rounded bg-blue-200 lg:w-14 lg:h-14"
+          className="fill-blue-800 shrink-0 p-1 rounded bg-blue-200 lg:w-14 lg:h-14"
         />
       </HomeFeature>
     </ul>

diff --git a/components/composited/HomePage/HomePage.tsx b/components/composited/HomePage/HomePage.tsx
@@ -6,45 +6,33 @@ export const HomePage = () => {
   return (
     <section className="relative sm:grid sm:grid-cols-2 sm:gap-x-14">
       <div>
-        <header className="pb-4 lg:pb-4">
-          <h1 className="mb-2 pb-2 text-2xl leading-7 text-gray-800 font-bold text-center sm:text-start lg:text-3xl">
-            Organizacja funduszy jest prosta i przyjemna.
+        <header className="pb-12">
+          <h1 className="mb-2 pb-2 text-2xl leading-8 text-gray-800 font-bold text-center sm:text-start lg:text-3xl lg:leading-10">
+            Organizacja funduszy jest prosta i przyjemna
           </h1>
-          <p className="text-lg text-gray-500 text-center sm:text-start lg:text-xl">
+          <p className="text-lg leading-8 text-gray-500 text-center sm:text-start lg:text-xl lg:leading-8">
             Uniwersalne podejście do pracy z Twoją lokalną społecznością i współpraca przy
             podejmowaniu finansowych decyzji.
           </p>
         </header>
-        <h2 className="mt-6 mb-2 text-xl font-bold lg:text-2xl lg:mt-12">
+        <h2 className="mt-6 mb-2 text-gray-800 text-xl font-bold lg:text-2xl lg:mt-12">
           Przeglądaj budżety online
         </h2>
-        <p className="text-base text-gray-500 lg:text-lg">
+        <p className="text-base leading-7 text-gray-500 lg:text-lg">
           Twórz społeczności, budżety i proponuj projekty innym członkom. Aktualizuj ich przebieg i
           bądż na bieżąco. To wszystko (i więcej) w jednym miejscu. Ułatwienie pracy dla Ciebie i
           twojej grupy.
         </p>
       </div>
-      <CoverImage className="mt-8 sm:mt-0 lg:w-96">
-        <Image
-          layout="responsive"
-          width={579}
-          height={935}
-          src="/../public/home-cover.png"
-          alt="Preview of budget page"
-        />
+      <CoverImage className="mt-12 sm:mt-0 lg:w-96">
+        <img src="/home-cover.png" alt="Preview of budget page" />
       </CoverImage>
 
-      <div className="mt-12 col-span-2 sm:mt-16 lg:mt-0 sm:flex sm:flex-row-reverse sm:gap-14 sm:justify-between lg:gap-0">
+      <div className="mt-16 col-span-2 sm:mt-16 lg:mt-0 sm:flex sm:flex-row-reverse sm:gap-14 sm:justify-between lg:gap-0">
         <HomeFeatureList />
 
-        <CoverImage className="w-full mt-8 sm:mt-0 sm:w-1/2 lg:w-80 lg:mt-16 xl:w-96 xl:absolute xl:left-0 xl:bottom-56">
-          <Image
-            layout="responsive"
-            width={517}
-            height={795}
-            src="/../public/home-cover-secondary.png"
-            alt="Preview of project"
-          />
+        <CoverImage className="w-full mt-16 sm:mt-0 sm:w-1/2 lg:w-80 lg:mt-16 xl:w-96 xl:absolute xl:left-0 xl:bottom-56">
+          <img src="/home-cover-secondary.png" alt="Preview of project" />
         </CoverImage>
       </div>
     </section>

diff --git a/components/generic/Icons/PeopleIcon.tsx b/components/generic/Icons/PeopleIcon.tsx
@@ -1,21 +1,22 @@
-// </g><g><g><path d="M6.32,13.01c0.96,0.02,1.85,0.5,2.45,1.34C9.5,15.38,10.71,16,12,16c1.29,0,2.5-0.62,3.23-1.66 c0.6-0.84,1.49-1.32,2.45-1.34C16.96,11.78,14.08,11,12,11C9.93,11,7.04,11.78,6.32,13.01z"/><path d="M4,13L4,13c1.66,0,3-1.34,3-3c0-1.66-1.34-3-3-3s-3,1.34-3,3C1,11.66,2.34,13,4,13z"/><path d="M20,13L20,13c1.66,0,3-1.34,3-3c0-1.66-1.34-3-3-3s-3,1.34-3,3C17,11.66,18.34,13,20,13z"/><path d="M12,10c1.66,0,3-1.34,3-3c0-1.66-1.34-3-3-3S9,5.34,9,7C9,8.66,10.34,10,12,10z"/><path d="M21,14h-3.27c-0.77,0-1.35,0.45-1.68,0.92C16.01,14.98,14.69,17,12,17c-1.43,0-3.03-0.64-4.05-2.08 C7.56,14.37,6.95,14,6.27,14L3,14c-1.1,0-2,0.9-2,2v3c0,0.55,0.45,1,1,1h5c0.55,0,1-0.45,1-1v-1.26c1.15,0.8,2.54,1.26,4,1.26 s2.85-0.46,4-1.26V19c0,0.55,0.45,1,1,1h5c0.55,0,1-0.45,1-1v-3C23,14.9,22.1,14,21,14z"/></g></g>
 import { clsx as cx } from 'clsx';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from './constants';
 
 type PeopleIconProps = {
   width?: number;
   height?: number;
   className?: string;
+  fill?: string;
 };
 
 export const PeopleIcon = ({
   width = DEFAULT_WIDTH,
   height = DEFAULT_HEIGHT,
   className,
+  fill = 'fill-gray-600',
 }: PeopleIconProps) => {
   return (
     <svg
-      className={cx('fill-gray-600', className)}
+      className={cx(className, fill)}
       xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={height}

diff --git a/components/generic/Icons/ProjectIcon.tsx b/components/generic/Icons/ProjectIcon.tsx
@@ -5,16 +5,18 @@ type ProjectIconProps = {
   width?: number;
   height?: number;
   className?: string;
+  fill?: string;
 };
 
 export const ProjectIcon = ({
   width = DEFAULT_WIDTH,
   height = DEFAULT_HEIGHT,
   className,
+  fill = 'fill-gray-600',
 }: ProjectIconProps) => {
   return (
     <svg
-      className={cx('fill-gray-600', className)}
+      className={cx(className, fill)}
       xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={height}

diff --git a/components/generic/Icons/TimelineIcon.tsx b/components/generic/Icons/TimelineIcon.tsx
@@ -5,16 +5,18 @@ type TimelineIconProps = {
   width?: number;
   height?: number;
   className?: string;
+  fill?: string;
 };
 
 export const TimelineIcon = ({
   width = SMALL_WIDTH,
   height = SMALL_HEIGHT,
   className,
+  fill = 'fill-gray-600',
 }: TimelineIconProps) => {
   return (
     <svg
-      className={cx('fill-gray-600', className)}
+      className={cx(fill, className)}
       xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={height}

diff --git a/public/home-cover-secondary.png b/public/home-cover-secondary.png