Skip to content

[VK] Updated User-details component with some essential style and classes - #585

Open
3697varun wants to merge 2 commits into
mainfrom
Users-details-component-update
Open

[VK] Updated User-details component with some essential style and classes#585
3697varun wants to merge 2 commits into
mainfrom
Users-details-component-update

Conversation

@3697varun

Copy link
Copy Markdown

Added some font related styles.
one class added to first name span in HBS file to update style for that.

@3697varun
3697varun requested a review from jon-stevens October 14, 2021 07:46
}
&__last-name {
padding-right: 10px;
padding-left: 5px; //added padding left to first name

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I don't think we need all the comments

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Sorry to butt in, but could we stick to using the 8px unit spacing? :) so the equivalent would be:

padding-right: 8px padding-left: 4px

}
&__first-name,
&__last-name {
color: #004b83; // default text color

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This seems superfluous given it should inherit the color from line 17?

&__logout {
&:hover {
color: #fff;
background-color: #183642; // background-color is not coming from enhanced on hover

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The hover state background color is applied in enhances.scss for .c-user-details__link.
The core scss file doesn't need all of the rules, it is intended to contain just basic styling.

display: block;
font-size: $small-font-size;
line-height: 1.76; // added Line-height
letter-spacing: 0.14px; // added letter-spacing

@jon-stevens jon-stevens Oct 26, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I'm not sure about these rules being here, is this maybe some styling that you need for overriding some of your application scss?
We do have something in the SN brand context, $context--line-height-base:

&:hover,
&:focus {
text-decoration: underline; // text underline on hover
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Did you add this for a specific browser? I had thought the default browser styling for the button element was sufficient

&__content-item {
padding: 0 12px;
font-size: 12px;
line-height: 1.76; // added Line-height

@jon-stevens jon-stevens Oct 26, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
line-height: 1.76; // added Line-height
line-height: $context--line-height-base;

This will require importing following scss
@import '@springernature/brand-context/springernature/scss/10-settings/colors/default';

@james-alegria

Copy link
Copy Markdown
Contributor

Will follow up with Jon about spacing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants