Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

complete and style about view #63

Merged
merged 5 commits into from
Oct 13, 2024
Merged

complete and style about view #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cd5f50d
complete and style about view
Oct 12, 2024
c260384
eliminate top padding of items in about view
Oct 12, 2024
a54011f
add navlink to icons in about view+
Oct 12, 2024
72e205a
add nav background, adjust header margin, add styling for hover state…
eva-lng Oct 13, 2024
afc87ee
typo fix in text
eva-lng Oct 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/components/DeveloperCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { FaLinkedin, FaGithub } from 'react-icons/fa';

export function DeveloperCard({ name, githubLink, linkedinLink }) {
return (
<div>
<ul>
<li className="flex flex-row align-middle">
{name}{' '}
<a className="p-2" href={githubLink}>
<FaGithub className="hover:text-accent" />
</a>{' '}
<a className="p-2" href={linkedinLink}>
<FaLinkedin className="hover:text-accent" />
</a>{' '}
</li>
</ul>
</div>
);
}
4 changes: 2 additions & 2 deletions src/components/ListItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
<div className="flex items-center space-x-1">
<FaCartShopping className="hidden md:block md:ml-2" />
Expand All @@ -61,7 +61,7 @@ export function ListItem({
</label>
<div className="flex items-center space-x-2">
<span
className={`px-2 p-1 text-xs font-bold rounded-lg uppercase ${categoryColor[category]}`}
className={`px-1.5 py-[3px] text-xs font-light rounded-md uppercase ${categoryColor[category]}`}
style={{ color: categoryColor[category] }}
>
{category}
Expand Down
124 changes: 111 additions & 13 deletions src/views/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,115 @@
import { FaGithub, FaShareAlt, FaHome } from 'react-icons/fa';
import { DeveloperCard } from '../components/DeveloperCard';
import { NavLink } from 'react-router-dom';

export function About() {
return (
<>
<h2>This is the About page</h2>
<p>We want to add following info here:</p>
<ul>
<li>introduction to the app - what does it do</li>
<li>how to use the app</li>
<li>info/link to collab lab</li>
<li>github link to the app repo</li>
<li>
info/github links to dev team - <i>optional</i>
</li>
</ul>
</>
<div className="flex flex-col h-dvh">
<section className="mb-4 text-center">
<h1 className="subheading">About this application</h1>
<p>
Shop&apos;n Go is a smart shopping list application that enables users
to level up their shopping experience. Create specialized lists, share
them with your friends, and keep track of your shopping with ease!
</p>
</section>
<section className="m-4">
<h3 className="subheading">How does it work?</h3>
<ol className="list-decimal pl-5">
<li>Sign in with your Gmail account</li>
<li>
Create a List (if you don&apos;t already have one), click on an
existing one or manage your lists in{' '}
<NavLink
to="/"
className="inline-flex items-center font-semibold hover:text-accent hover:underline underline-offset-2 decoration-[2px]"
>
<FaHome className="mr-1" /> Home
</NavLink>
</li>
<li>
Inside your list, add a new item and select how soon you will need
to buy it
</li>
<li>
Once you have bought your item, check it off and wait to be reminded
when you need it again
</li>
<li>
Share your list with friends, family, colleagues or whomever you
wish. Just click on{' '}
<NavLink
to="/manage-list"
className="inline-flex items-center font-semibold hover:text-accent hover:underline underline-offset-2 decoration-[2px]"
>
{' '}
<FaShareAlt className="mr-1" /> Share
</NavLink>
</li>
</ol>
</section>
<section className="m-5 text-center">
<h3 className="subheading mb-4">This application was developed by:</h3>
<section className="flex justify-items-center grid grid-cols-1 sm:grid-cols-2 gap-4 mt-2 max-w-4xl">
<DeveloperCard
name="Rebeca Taboada"
githubLink={'https://github.com/GrannyYetta'}
linkedinLink={'https://www.linkedin.com/in/rebecataboada/'}
/>
<DeveloperCard
name="Didem Aydin Cakir"
githubLink={'https://github.com/didemydn'}
linkedinLink={'https://linkedin.com/in/didem-aydin-cakir'}
/>

<DeveloperCard
name="Eva Langerova"
githubLink={'https://github.com/eva-lng'}
linkedinLink={'https://linkedin.com/in/eva-langerova-61059027a'}
/>
<DeveloperCard
name="Tataw Clarkson"
githubLink={'https://github.com/tataw-cl'}
linkedinLink={'https://www.linkedin.com/in/tataw-clarkson-tech/'}
/>
</section>
<p className="m-4">
Get in touch with us, we&apos;d love to hear from you!
</p>
<p className="m-2 inline-flex items-center justify-center">
You can find the repository to this application on GitHub{' '}
<a href="https://github.com/the-collab-lab/tcl-78-smart-shopping-list">
<FaGithub className="ml-1 hover:text-accent" />
</a>
</p>
</section>
<section className="m-5 text-center">
<p className="items-center justify-center">
Special thanks to our Mentors{' '}
<a
className="font-semibold hover:text-accent hover:underline underline-offset-2 decoration-[2px]"
href="https://www.linkedin.com/in/chiamakaumeh/"
>
Chiamaka Umeh
</a>{' '}
and{' '}
<a
className="font-semibold hover:text-accent hover:underline underline-offset-2 decoration-[2px]"
href="https://www.linkedin.com/in/viviana-yanez/"
>
Viviana Yanez{' '}
</a>
and{' '}
<a
className="font-semibold hover:text-accent hover:underline underline-offset-2 decoration-[2px]"
href="https://the-collab-lab.codes/"
>
The Collab Lab&apos;s
</a>{' '}
Program. Check out their website to learn more about their awesome
work!
</p>
</section>
</div>
);
}
4 changes: 2 additions & 2 deletions src/views/Layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export function Layout() {
return (
<>
<div className="flex flex-col h-dvh">
<header className="mb-4">
<header className="lg:mb-4">
<div className="container mx-auto flex justify-between items-center p-2">
<Link to="/">
<h1 className="logo">
Expand All @@ -36,7 +36,7 @@ export function Layout() {
<main className="mx-auto w-full max-w-[600px] p-5 pb-16 md:pb-20">
<Outlet />
</main>
<nav className="bottom-0 fixed w-full p-2 md:py-0">
<nav className="bottom-0 fixed w-full p-2 md:py-0 bg-base dark:bg-secondary">
<div className="container mx-auto flex flex-row justify-evenly">
<NavLink to="/" className="nav-link">
<FaHome />
Expand Down
Loading