moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ProfilePreview: link to internal profile, improve styles

This commit is contained in:
Alex Gleason 2021-10-08 13:49:59 -05:00
parent 92fc853642
commit bba3564ef3
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/soapbox/features/edit_profile/components/profile_preview.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { Link } from 'react-router-dom';
import { getAcct, isVerified } from 'soapbox/utils/accounts'; import { getAcct, isVerified } from 'soapbox/utils/accounts';
import StillImage from 'soapbox/components/still_image'; import StillImage from 'soapbox/components/still_image';
import VerificationBadge from 'soapbox/components/verification_badge'; import VerificationBadge from 'soapbox/components/verification_badge';
@ -13,7 +14,7 @@ const mapStateToProps = state => ({
const ProfilePreview = ({ account, displayFqn }) => ( const ProfilePreview = ({ account, displayFqn }) => (
<div className='card h-card'> <div className='card h-card'>
<a target='_blank' rel='noopener' href={account.get('url')}> <Link to={`/@${account.get('acct')}`}>
<div className='card__img'> <div className='card__img'>
<StillImage alt='' src={account.get('header')} /> <StillImage alt='' src={account.get('header')} />
</div> </div>
@ -32,7 +33,7 @@ const ProfilePreview = ({ account, displayFqn }) => (
<span>@{getAcct(account, displayFqn)}</span> <span>@{getAcct(account, displayFqn)}</span>
</div> </div>
</div> </div>
</a> </Link>
</div> </div>
); );

16
app/styles/accounts.scss
View File

@ -3,7 +3,9 @@
display: block; display: block;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
border-radius: 4px;
overflow: hidden;
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
box-shadow: none; box-shadow: none;
@ -13,7 +15,7 @@
&:active, &:active,
&:focus { &:focus {
.card__bar { .card__bar {
background: var(--foreground-color); background-color: var(--brand-color--faint);
} }
} }
} }
@ -22,7 +24,6 @@
height: 130px; height: 130px;
position: relative; position: relative;
background: var(--background-color); background: var(--background-color);
border-radius: 4px 4px 0 0;
.still-image { .still-image {
display: block; display: block;
@ -30,7 +31,6 @@
height: 100%; height: 100%;
margin: 0; margin: 0;
object-fit: cover; object-fit: cover;
border-radius: 4px 4px 0 0;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
@ -48,12 +48,8 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background: var(--brand-color--faint); background: var(--background-color);
border-radius: 0 0 4px 4px; transition: 0.2s;
@media screen and (max-width: $no-gap-breakpoint) {
border-radius: 0;
}
.avatar { .avatar {
flex: 0 0 auto; flex: 0 0 auto;