Skip to content
This repository has been archived by the owner on Apr 20, 2024. It is now read-only.

Web/feature/user overview v2 #164

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

Conversation

iamseye
Copy link
Contributor

@iamseye iamseye commented Jul 12, 2022

Related to Couchers-org/couchers#4139

  • move userOverview components to the component folder
  • add HTML symbol & update v2 UI of userOverview
  • show user Id

Noted, left some questions for design. still looks very different from the design: https://www.figma.com/file/z1aQUklCQewLsEFUo2HsLz/Desktop-Mockups?node-id=9722%3A63431

Before After
Screen Shot 2022-07-22 at 3 07 35 PM Screen Shot 2022-07-22 at 3 05 23 PM

Web frontend checklist

  • Formatted my code with make format
  • There are no warnings from make lint
  • There are no console warnings when running the app
  • Added any new components to storybook
  • Added tests where relevant
  • All tests pass
  • Clicked around my changes running locally and it works
  • Checked Desktop, Mobile and Tablet screen sizes

@iamseye iamseye temporarily deployed to web-frontend-web-feature-user-overview-v2 July 12, 2022 20:44 Inactive
* master:
  Translation updates (#170)
  Fixed some miswording in the handbook (#168)
  Removed a redundant word (#166)
  Web/chore/profile i18n keys (#138)

# Conflicts:
#	components/UserOverview/UserOverview.test.tsx
#	features/profile/view/Overview.tsx
#	features/profile/view/leaveReference/LeaveReferencePage.tsx
@iamseye iamseye temporarily deployed to web-frontend-web-feature-user-overview-v2 July 22, 2022 15:55 Inactive
@iamseye iamseye temporarily deployed to web-frontend-web-feature-user-overview-v2 July 22, 2022 19:09 Inactive
@iamseye iamseye marked this pull request as ready for review July 22, 2022 19:12
@iamseye iamseye self-assigned this Jul 22, 2022
@iamseye iamseye requested a review from lucaslcode July 22, 2022 19:12
Copy link
Member

@lucaslcode lucaslcode left a comment

Choose a reason for hiding this comment

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

This looks great! Sorry it took so long to review!
Just some minor nits that are not particularly important.

@@ -52,12 +52,17 @@ const useStyles = makeStyles((theme) => ({
flexDirection: "column",
justifyContent: "center",
alignItems: "stretch",
padding: theme.spacing(0.5),
padding: "0px",
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
padding: "0px",
padding: 0,

},
"& > button": {
fontWeight: "bold",
padding: theme.spacing(1.6),
Copy link
Member

Choose a reason for hiding this comment

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

Why 1.6? If it's to pixel-match figma I'd probably leave it as 1.5 for consistency (we tend to try to have all uses of spacing in 0.5 increments)

</Typography>
<Typography variant="body1" className={classes.intro}>
{user.city}
<Typography variant="h1" className={classes.intro} align={"left"}>
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<Typography variant="h1" className={classes.intro} align={"left"}>
<Typography variant="h1" className={classes.intro} align="left">

</Typography>
<Typography
color={"textSecondary"}
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
color={"textSecondary"}
color="textSecondary"

{actions && (
<CardActions className={classes.cardActions}>{actions}</CardActions>
)}
<Typography color={"primary"} variant="body1" className={classes.intro}>
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<Typography color={"primary"} variant="body1" className={classes.intro}>
<Typography color="primary" variant="body1" className={classes.intro}>

@@ -1,10 +1,10 @@
import Alert from "components/Alert";
import Button from "components/Button";
import UserOverview from "components/UserOverview/UserOverview";
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
import UserOverview from "components/UserOverview/UserOverview";
import UserOverview from "components/UserOverview";

Since you added the index file

@@ -1,10 +1,10 @@
import Hidden from "@material-ui/core/Hidden";
import Alert from "components/Alert";
import CircularProgress from "components/CircularProgress";
import UserOverview from "components/UserOverview/UserOverview";
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
import UserOverview from "components/UserOverview/UserOverview";
import UserOverview from "components/UserOverview";

Copy link
Member

@darrenvong darrenvong left a comment

Choose a reason for hiding this comment

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

This is probably more of a design question, but for users with super long names (as we have deliberately set in the test account to see how it looks for some other feature...), do we want to center the name instead of having it left aligned like it does now?
Screenshot 2022-07-31 145534

@@ -2,7 +2,7 @@ import { Meta, Story } from "@storybook/react";
import { User } from "proto/api_pb";
import users from "test/fixtures/users.json";

import { ProfileUserProvider } from "../hooks/useProfileUser";
import { ProfileUserProvider } from "../../features/profile/hooks/useProfileUser";
Copy link
Member

@darrenvong darrenvong Jul 31, 2022

Choose a reason for hiding this comment

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

We should prefer absolute imports here when it's more than one level of . or .. to ease future changes if needed rather than having to guess how many .. levels to go up.

Comment on lines +6 to +10
import {
hostingStatusLabels,
meetupStatusLabels,
} from "../../features/profile/constants";
import { ProfileUserProvider } from "../../features/profile/hooks/useProfileUser";
Copy link
Member

Choose a reason for hiding this comment

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

Same comment on absolute import as before

Comment on lines +17 to +21
import { useProfileUser } from "../../features/profile/hooks/useProfileUser";
import {
ReferencesLastActiveLabels,
ResponseRateLabel,
} from "../../features/profile/view/userLabels";
Copy link
Member

Choose a reason for hiding this comment

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

Same comment on absolute import as before

@darrenvong
Copy link
Member

@iamseye How are you getting on with this? Will you have time to wrap this up?

@aapeliv aapeliv added the web label Apr 20, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants