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

Jump to bottom

16. Layout Changes and Tailwind Implementation #40

Merged
merged 15 commits into from
Mar 25, 2024
Merged

16. Layout Changes and Tailwind Implementation #40

merged 15 commits into from
Mar 25, 2024

Conversation

eonflower
Copy link
Collaborator

@eonflower eonflower commented Mar 25, 2024 •
edited
Loading

Description

  • Installed Tailwind and react-icons for creating a cleaner ui
  • Created a tailwind.config file with some updated variables for screen sizing and fonts
  • Implemented figma layout design and styles for main content and basic sidebar
  • Removed manage-list view from nav bar, and moved addItem logic from that view to the list view
    • Did keep the manage-list file because it had the invite feature, and we might want to migrate that somewhere else, but currently there is no share button displayed anywhere
  • Added a welcome message with user display name to home view
  • Updated styling to be responsive based on screen size
    • Note: I did not implement a nav bar at the top when the screen was small because creating the logic for having the nav bar become a menu button seemed outside of the scope of this. That seemed like it would be it's own ticket after delving deeper.
  • Updated helpers to have hex codes for colours to be more accessible in contrast
  • Added capitalizeFirstLetterOfEachWord function to capitalize first letter of each word for list items when rendering list
  • Added hover effect for nav bar items and items in list
  • Updated strikethrough to be a different background colour and "checked off" badge for better readability

Note: I did not style buttons and only styled inputs in order to be more responsive.

It's a lot of code changes, sorryyyyyyy <3

Related Issue

closes #38

Acceptance criteria

  • The layout resembles the figma design and basic theming
  • The layout should be responsive based on screen sizes
  • TailwindCSS should be implemented for overall app consistency

Type of Changes

accessibility, enhancement, and refactoring

Updates

Before

Screenshot 2024-03-24 at 6 42 21 PM Screenshot 2024-03-24 at 6 42 36 PM

After

Screenshot 2024-03-24 at 6 43 15 PM Screenshot 2024-03-24 at 6 43 01 PM

Updated UI of list with no items:
Screenshot 2024-03-24 at 6 43 31 PM

Testing Steps / QA Criteria

  1. git pull from main
  2. git checkout an-layout
  3. npm install
  4. navigate to localhost
  5. click links, add items, delete items, do whatever
  6. create a new list or go to a list without items to see new UI for adding first item
  7. let me know if I am missing something :)

@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 25, 2024 •
edited
Loading

Visit the preview URL for this PR (updated for commit a1c223c):

https://tcl-66-smart-shopping-list--pr40-an-layout-pijdok8q.web.app

(expires Mon, 01 Apr 2024 18:48:59 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 2dc16cb2a79cbd6723fdc511b73e0743df1d18d0

StefieCaff
StefieCaff approved these changes Mar 25, 2024
View reviewed changes
Copy link
Collaborator

@StefieCaff StefieCaff left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aloooooe!! Great work! Thanks for all your efforts!! I left a few comments in the code at places where I though we could add some specificity to user messages. These might just be my preference, so not a hard stop.

src/views/List.jsx
@@ -27,26 +31,39 @@ export function List({ data, listPath, loading }) {

return (
<>
<p>
Hello from the <code>{listName}</code> page!
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should say 'list' instead of 'page'. Maybe even 'your' instead of 'the'?

welcome to the 'badger' list!
welcome to your 'badger' list!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes sense! I like it

src/components/ListItem.jsx Outdated
// Join the words back into a single string
return capitalizedWords.join(' ');
};

const handleDelete = async () => {
try {
if (window.confirm('Are you sure you want to delete this item?')) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can add the name of the item we are deleting here.

are you sure you want to delete {name} ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also like this!

tailwind.config.js
@@ -0,0 +1,28 @@
/** @type {import('tailwindcss').Config} */
Copy link
Collaborator

@StefieCaff StefieCaff Mar 25, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can common colors be added here as well? so that way if we want to change the main font color or the main background color we can go to one file? Also not sure if you like the font family or not, but I think that the font in the figma design is better than the one we have now.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep! I can add some variables and change things.

@eonflower eonflower merged commit a1f7ffa into main Mar 25, 2024
2 checks passed
@eonflower eonflower deleted the an-layout branch March 25, 2024 18:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@StefieCaff StefieCaff StefieCaff approved these changes

Assignees
No one assigned
Labels
accessibility enhancement New feature or request refactoring
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

16. Layout Changes and Tailwind Implementation
2 participants
@eonflower @StefieCaff