Settings modal jumper #981
Conversation
Component for new settings jumper, including the modal structure, sidebar and the first profile tab
|
|
|
|
|
|
|
|
|
|
|
Let's make sure that user.body has a length limit of 2000, name has a length limit of 255 |
|
The profile image upload doesn't seem to be working right now btw |
|
|
|
Also, we are not going to have the theme tab for now b/c implementing darkmode is pretty involved. So you can just take that out |
|
|
components/core/Settings/Jumper.js
Outdated
| import { ButtonPrimary, ButtonSecondary } from "~/components/system/components/Buttons"; | ||
| import * as Type from "~/components/system/components/Typography"; | ||
|
|
||
| const STYLES_FLEX_ROW = ` |
There was a problem hiding this comment.
We have a style in common/styles.js for this called HORIZONTAL_CONTAINER. There's other commonly used styles there. Go check it out and see.
To use it, import it like:
import * as Styles from "~/common/styles";
and use it like this:
You can add on styles to it with inline styles like this:
You can also add on styles to it like this, then use the resulting css style:
css design updates from the figma file
| <div css={STYLES_MENU_ITEM_ICON}> | ||
| {tab.icon} | ||
| </div> | ||
| {tab.title} |
There was a problem hiding this comment.
make sure every text is wrapped by a style.
I think this one should be: <SYSTEM.P2>{tab.title}</SYSTEM.P2>
| size={48} | ||
| /> | ||
| <div css={STYLES_ACCOUNT_USER}> | ||
| <p style={{ fontWeight: "500", fontSize: "14px" }}>{props.viewer.name}</p> |
There was a problem hiding this comment.
this should be <SYSTEM.H5 style={{ marginBottom: "2px"}}>{props.viewer.name}</SYSTEM.H5>
| /> | ||
| <div css={STYLES_ACCOUNT_USER}> | ||
| <p style={{ fontWeight: "500", fontSize: "14px" }}>{props.viewer.name}</p> | ||
| <p style={{ fontWeight: "normal", fontSize: "12px" }}> |
There was a problem hiding this comment.
this would be <SYSTEM.P3>{truncateString(props.viewer.email, 20)}</SYTEM.P3>
| width: 100%; | ||
| height: 32px; | ||
| border-radius: 12px; | ||
| padding: 8px; |
There was a problem hiding this comment.
I think the padding and alignment here is off, refer to design file for this.
| <div css={STYLES_ACCOUNT}> | ||
| <ProfilePhoto | ||
| user={props.viewer} | ||
| style={{ marginBottom: "4px", borderRadius: '10px' }} |
There was a problem hiding this comment.
borderRadius would be 12px, refer to design file for this.
| width: 448px; | ||
| height: 50px; | ||
| padding: 12px 20px; | ||
| background-color: ${Constants.system.white}; |
There was a problem hiding this comment.
${Constants.semantic.bgWhite}
| width: 190px; | ||
| height: 100%; | ||
| padding: 20px 0px; | ||
| border-right: 1px solid ${Constants.system.grayLight5}; |
There was a problem hiding this comment.
${Constants.semantic.borderGrayLight}
| margin-top: 24px; | ||
| `; | ||
|
|
||
| const STYLES_ITEM_HEADER = css` |
There was a problem hiding this comment.
I think you could use <SYSTEM.H6> rather than a separate style.
| <ProfilePhoto | ||
| user={state} | ||
| size={48} | ||
| style={{ borderRadius: '10px' }} |
There was a problem hiding this comment.
border radius is 12px in design
| right: 0; | ||
| width: 448px; | ||
| height: 50px; | ||
| padding: 12px 20px; |
Component for new settings jumper, including the modal structure, sidebar and the first profile tab
┆Issue is synchronized with this Notion page by Unito