[Glitch] Rename CSS classes for profile redesign
Port df64716b3407cc423cd261126350ed238206febd to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
parent
979b1a78cb
commit
68a2b592bf
@ -28,9 +28,9 @@ import { AccountHeaderFields } from './fields';
|
|||||||
import { AccountInfo } from './info';
|
import { AccountInfo } from './info';
|
||||||
import { MemorialNote } from './memorial_note';
|
import { MemorialNote } from './memorial_note';
|
||||||
import { MovedNote } from './moved_note';
|
import { MovedNote } from './moved_note';
|
||||||
import { AccountNote as AccountNoteRedesign } from './note';
|
import { AccountNote } from './note';
|
||||||
import { AccountNumberFields } from './number_fields';
|
import { AccountNumberFields } from './number_fields';
|
||||||
import redesignClasses from './redesign.module.scss';
|
import classes from './styles.module.scss';
|
||||||
import { AccountTabs } from './tabs';
|
import { AccountTabs } from './tabs';
|
||||||
|
|
||||||
const titleFromAccount = (account: Account) => {
|
const titleFromAccount = (account: Account) => {
|
||||||
@ -112,12 +112,7 @@ export const AccountHeader: React.FC<{
|
|||||||
<FollowRequestNoteContainer account={account} />
|
<FollowRequestNoteContainer account={account} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div
|
<div className={classNames('account__header__image', classes.header)}>
|
||||||
className={classNames(
|
|
||||||
'account__header__image',
|
|
||||||
redesignClasses.header,
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{me !== account.id && relationship && (
|
{me !== account.id && relationship && (
|
||||||
<AccountInfo relationship={relationship} />
|
<AccountInfo relationship={relationship} />
|
||||||
)}
|
)}
|
||||||
@ -131,16 +126,11 @@ export const AccountHeader: React.FC<{
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div className={classNames('account__header__bar', classes.barWrapper)}>
|
||||||
className={classNames(
|
|
||||||
'account__header__bar',
|
|
||||||
redesignClasses.barWrapper,
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
'account__header__tabs',
|
'account__header__tabs',
|
||||||
redesignClasses.avatarWrapper,
|
classes.avatarWrapper,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
@ -161,13 +151,13 @@ export const AccountHeader: React.FC<{
|
|||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
'account__header__tabs__name',
|
'account__header__tabs__name',
|
||||||
redesignClasses.displayNameWrapper,
|
classes.displayNameWrapper,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<AccountName accountId={accountId} />
|
<AccountName accountId={accountId} />
|
||||||
<AccountButtons
|
<AccountButtons
|
||||||
accountId={accountId}
|
accountId={accountId}
|
||||||
className={redesignClasses.buttonsDesktop}
|
className={classes.buttonsDesktop}
|
||||||
noShare={!isMe || 'share' in navigator}
|
noShare={!isMe || 'share' in navigator}
|
||||||
forceMenu={'share' in navigator}
|
forceMenu={'share' in navigator}
|
||||||
/>
|
/>
|
||||||
@ -185,7 +175,7 @@ export const AccountHeader: React.FC<{
|
|||||||
<div className='account__header__extra'>
|
<div className='account__header__extra'>
|
||||||
<div className='account__header__bio'>
|
<div className='account__header__bio'>
|
||||||
{me && account.id !== me && (
|
{me && account.id !== me && (
|
||||||
<AccountNoteRedesign accountId={accountId} />
|
<AccountNote accountId={accountId} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<AccountBio
|
<AccountBio
|
||||||
@ -193,7 +183,7 @@ export const AccountHeader: React.FC<{
|
|||||||
accountId={accountId}
|
accountId={accountId}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
'account__header__content',
|
'account__header__content',
|
||||||
redesignClasses.bio,
|
classes.bio,
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -208,8 +198,8 @@ export const AccountHeader: React.FC<{
|
|||||||
|
|
||||||
<AccountButtons
|
<AccountButtons
|
||||||
className={classNames(
|
className={classNames(
|
||||||
redesignClasses.buttonsMobile,
|
classes.buttonsMobile,
|
||||||
!isIntersecting && redesignClasses.buttonsMobileIsStuck,
|
!isIntersecting && classes.buttonsMobileIsStuck,
|
||||||
)}
|
)}
|
||||||
accountId={accountId}
|
accountId={accountId}
|
||||||
noShare
|
noShare
|
||||||
|
|||||||
@ -21,7 +21,7 @@ import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
|
|||||||
import HelpIcon from '@/material-icons/400-24px/help.svg?react';
|
import HelpIcon from '@/material-icons/400-24px/help.svg?react';
|
||||||
import DomainIcon from '@/material-icons/400-24px/language.svg?react';
|
import DomainIcon from '@/material-icons/400-24px/language.svg?react';
|
||||||
|
|
||||||
import classes from './redesign.module.scss';
|
import classes from './styles.module.scss';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
lockedInfo: {
|
lockedInfo: {
|
||||||
|
|||||||
@ -18,7 +18,7 @@ import type { FieldStatus } from 'flavours/glitch/components/form_fields';
|
|||||||
import { TextInputField } from 'flavours/glitch/components/form_fields/text_input_field';
|
import { TextInputField } from 'flavours/glitch/components/form_fields/text_input_field';
|
||||||
import { useAppSelector } from 'flavours/glitch/store';
|
import { useAppSelector } from 'flavours/glitch/store';
|
||||||
|
|
||||||
import classes from './redesign.module.scss';
|
import classes from './styles.module.scss';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
emailInvalid: {
|
emailInvalid: {
|
||||||
|
|||||||
@ -23,7 +23,7 @@ import { cleanExtraEmojis } from '../../emoji/normalize';
|
|||||||
import type { AccountField } from '../common';
|
import type { AccountField } from '../common';
|
||||||
import { useFieldHtml } from '../hooks/useFieldHtml';
|
import { useFieldHtml } from '../hooks/useFieldHtml';
|
||||||
|
|
||||||
import classes from './redesign.module.scss';
|
import classes from './styles.module.scss';
|
||||||
|
|
||||||
const verifyMessage = defineMessage({
|
const verifyMessage = defineMessage({
|
||||||
id: 'account.link_verified_on',
|
id: 'account.link_verified_on',
|
||||||
|
|||||||
@ -43,7 +43,7 @@ import PersonRemoveIcon from '@/material-icons/400-24px/person_remove.svg?react'
|
|||||||
import ReportIcon from '@/material-icons/400-24px/report.svg?react';
|
import ReportIcon from '@/material-icons/400-24px/report.svg?react';
|
||||||
import ShareIcon from '@/material-icons/400-24px/share.svg?react';
|
import ShareIcon from '@/material-icons/400-24px/share.svg?react';
|
||||||
|
|
||||||
import classes from './redesign.module.scss';
|
import classes from './styles.module.scss';
|
||||||
|
|
||||||
export const AccountMenu: FC<{ accountId: string }> = ({ accountId }) => {
|
export const AccountMenu: FC<{ accountId: string }> = ({ accountId }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
@ -64,7 +64,7 @@ export const AccountMenu: FC<{ accountId: string }> = ({ accountId }) => {
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
return redesignMenuItems({
|
return getMenuItems({
|
||||||
account,
|
account,
|
||||||
signedIn: !isMe && signedIn,
|
signedIn: !isMe && signedIn,
|
||||||
permissions,
|
permissions,
|
||||||
@ -226,7 +226,7 @@ const redesignMessages = defineMessages({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
function redesignMenuItems({
|
function getMenuItems({
|
||||||
account,
|
account,
|
||||||
signedIn,
|
signedIn,
|
||||||
permissions,
|
permissions,
|
||||||
|
|||||||
@ -10,7 +10,7 @@ import { IconButton } from '@/flavours/glitch/components/icon_button';
|
|||||||
import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
|
import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
|
||||||
import EditIcon from '@/material-icons/400-24px/edit_square.svg?react';
|
import EditIcon from '@/material-icons/400-24px/edit_square.svg?react';
|
||||||
|
|
||||||
import classes from './redesign.module.scss';
|
import classes from './styles.module.scss';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
title: {
|
title: {
|
||||||
|
|||||||
@ -10,7 +10,7 @@ import { useAccountId } from '@/flavours/glitch/hooks/useAccountId';
|
|||||||
|
|
||||||
import { areCollectionsEnabled } from '../../collections/utils';
|
import { areCollectionsEnabled } from '../../collections/utils';
|
||||||
|
|
||||||
import classes from './redesign.module.scss';
|
import classes from './styles.module.scss';
|
||||||
|
|
||||||
const isActive: Required<NavLinkProps>['isActive'] = (match, location) =>
|
const isActive: Required<NavLinkProps>['isActive'] = (match, location) =>
|
||||||
match?.url === location.pathname ||
|
match?.url === location.pathname ||
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user