From cd5f50d4e7cc048bb2d760b34fc721ae092f975a Mon Sep 17 00:00:00 2001 From: GrannyYetta Date: Sat, 12 Oct 2024 22:33:13 +0200 Subject: [PATCH 1/5] complete and style about view --- src/components/DeveloperCard.jsx | 19 ++++++ src/views/About.jsx | 114 +++++++++++++++++++++++++++---- 2 files changed, 120 insertions(+), 13 deletions(-) create mode 100644 src/components/DeveloperCard.jsx diff --git a/src/components/DeveloperCard.jsx b/src/components/DeveloperCard.jsx new file mode 100644 index 0000000..08d6d6d --- /dev/null +++ b/src/components/DeveloperCard.jsx @@ -0,0 +1,19 @@ +import { FaLinkedin, FaGithub } from 'react-icons/fa'; + +export function DeveloperCard({ name, githubLink, linkedinLink }) { + return ( +
+ +
+ ); +} diff --git a/src/views/About.jsx b/src/views/About.jsx index be2e9bb..0cd33d2 100644 --- a/src/views/About.jsx +++ b/src/views/About.jsx @@ -1,17 +1,105 @@ +import { FaGithub, FaShareAlt, FaHome } from 'react-icons/fa'; +import { DeveloperCard } from '../components/DeveloperCard'; + export function About() { return ( - <> -

This is the About page

-

We want to add following info here:

- - +
+
+

About this application

+

+ Shop'n Go is a smart shopping list application that enables our + users to level up their shopping experience. Create specialized lists + and share them how best suits you! +

+
+
+

How does it work?

+
    +
  1. Sign in with your Gmail account
    2. +
  2. + Create a List (if you don't already have one), click on an + existing one or manage your lists in{' '} + + + Home + +
    3. +
  3. + Inside your list, add a new item and select how soon you will need + to buy it. +
    4. +
  4. + Once you have bought your item, check it off and wait to be reminded + when you need it again. +
    5. +
  5. + Share your list with friends, family, colleagues or whomever you + wish. Just click on{' '} + + {' '} + + Share{' '} + +
    6. +
+
+
+

This application was developed by:

+
+ + + + + +
+

+ Get in touch with us, we'd love to hear from you! +

+

+ You can find the repository to this application on GitHub{' '} + +

+
+
+

+ Special thanks to our Mentors{' '} + + Chiamaka Umeh + {' '} + and{' '} + + Viviana Yanez{' '} + + and{' '} + + The Collab Lab's + {' '} + Program. Check out their website to learn more about their awesome + work! +

+
+
); } From c260384edfe969ac801498f1e7d8c7e5bc079924 Mon Sep 17 00:00:00 2001 From: GrannyYetta Date: Sat, 12 Oct 2024 22:59:29 +0200 Subject: [PATCH 2/5] eliminate top padding of items in about view --- src/components/DeveloperCard.jsx | 2 +- src/views/About.jsx | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/DeveloperCard.jsx b/src/components/DeveloperCard.jsx index 08d6d6d..9285794 100644 --- a/src/components/DeveloperCard.jsx +++ b/src/components/DeveloperCard.jsx @@ -4,7 +4,7 @@ export function DeveloperCard({ name, githubLink, linkedinLink }) { return (
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index b834453..729d761 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -52,7 +52,7 @@ export function ListItem({ checked={isChecked} onChange={onCheck} disabled={isChecked} - className="form-checkbox h-4 w-4 lg:h-5 lg:w-5" + className="form-checkbox h-4 w-4 lg:h-5 lg:w-5 cursor-pointer" />
@@ -61,7 +61,7 @@ export function ListItem({
{category} diff --git a/src/views/About.jsx b/src/views/About.jsx index 69f2c79..71b5d4f 100644 --- a/src/views/About.jsx +++ b/src/views/About.jsx @@ -20,12 +20,12 @@ export function About() {
  • Create a List (if you don't already have one), click on an existing one or manage your lists in{' '} - - - - - Home - + + Home +
  • Inside your list, add a new item and select how soon you will need @@ -38,14 +38,13 @@ export function About() {
  • Share your list with friends, family, colleagues or whomever you wish. Just click on{' '} - + {' '} - - {' '} - - - Share{' '} - + Share +
    • @@ -80,7 +79,7 @@ export function About() {

    You can find the repository to this application on GitHub{' '} - +

    @@ -88,20 +87,23 @@ export function About() {

    Special thanks to our Mentors{' '} Chiamaka Umeh {' '} and{' '} Viviana Yanez{' '} and{' '} - + The Collab Lab's {' '} Program. Check out their website to learn more about their awesome diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx index cbd5b6e..7fb7d84 100644 --- a/src/views/Layout.jsx +++ b/src/views/Layout.jsx @@ -13,7 +13,7 @@ export function Layout() { return ( <>

    -
    +

    @@ -36,7 +36,7 @@ export function Layout() {
    -