[Glitch] Profile: Remove old classes

Port f24f98ce40a144762f4b7343797c2d754cb41afb to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/account_header/buttons.tsx

@@ -3,8 +3,6 @@ import type { FC } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
-import classNames from 'classnames';
-
 import { followAccount } from '@/flavours/glitch/actions/accounts';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
 import { getAccountHidden } from '@/flavours/glitch/selectors/accounts';
@@ -18,6 +16,7 @@ import { FollowButton } from '../follow_button';
 import { IconButton } from '../icon_button';
 
 import { AccountMenu } from './menu';
+import classes from './styles.module.scss';
 
 const messages = defineMessages({
   enableNotifications: {
@@ -49,7 +48,7 @@ export const AccountButtons: FC<AccountButtonsProps> = ({
   const me = useAppSelector((state) => state.meta.get('me') as string);
 
   return (
-    <div className={classNames('account__header__buttons', className)}>
+    <div className={className}>
       {!hidden && (
         <AccountButtonsOther accountId={accountId} noShare={noShare} />
       )}
@@ -94,7 +93,7 @@ const AccountButtonsOther: FC<
       {!isMovedAndUnfollowedAccount && (
         <FollowButton
           accountId={accountId}
-          className='account__header__follow-button'
+          className={classes.followButton}
           labelLength='long'
         />
       )}

app/javascript/flavours/glitch/components/account_header/fields.tsx

@@ -107,15 +107,8 @@ const FieldCard: FC<{
   field: AccountField;
 }> = ({ htmlHandlers, field }) => {
   const intl = useIntl();
-  const {
+  const { name, nameHasEmojis, value_plain, valueHasEmojis, verified_at } =
-    name,
+    field;
-    name_emojified,
-    nameHasEmojis,
-    value_emojified,
-    value_plain,
-    valueHasEmojis,
-    verified_at,
-  } = field;
 
   const { wrapperRef, isLabelOverflowing, isValueOverflowing } =
     useFieldOverflow();
@@ -139,7 +132,6 @@ const FieldCard: FC<{
       label={
         <FieldHTML
           text={name}
-          textEmojified={name_emojified}
           textHasCustomEmoji={nameHasEmojis}
           className='translate'
           isOverflowing={isLabelOverflowing}
@@ -150,7 +142,6 @@ const FieldCard: FC<{
       value={
         <FieldHTML
           text={value_plain}
-          textEmojified={value_emojified}
           textHasCustomEmoji={valueHasEmojis}
           isOverflowing={isValueOverflowing}
           onOverflowClick={handleOverflowClick}
@@ -175,7 +166,6 @@ const FieldCard: FC<{
 
 type FieldHTMLProps = {
   text: string;
-  textEmojified: string;
   textHasCustomEmoji: boolean;
   isOverflowing?: boolean;
   onOverflowClick?: () => void;
@@ -183,9 +173,7 @@ type FieldHTMLProps = {
 
 const FieldHTML: FC<FieldHTMLProps> = ({
   className,
-  extraEmojis,
   text,
-  textEmojified,
   textHasCustomEmoji,
   isOverflowing,
   onOverflowClick,
@@ -198,7 +186,7 @@ const FieldHTML: FC<FieldHTMLProps> = ({
   const html = (
     <EmojiHTML
       as='span'
-      htmlString={textEmojified}
+      htmlString={text}
       className={className}
       onElement={handleElement}
       data-contents

app/javascript/flavours/glitch/components/account_header/index.tsx

@@ -97,22 +97,20 @@ export const AccountHeader: React.FC<{
   const isMe = me && account.id === me;
 
   return (
-    <div className='account-timeline__header'>
+    <div>
       {!hidden && account.memorial && <MemorialNote />}
       {!hidden && account.moved && (
         <MovedNote accountId={account.id} targetAccountId={account.moved} />
       )}
 
       <AnimateEmojiProvider
-        className={classNames('account__header', {
+        className={classNames(!!account.moved && classes.moved)}
-          inactive: !!account.moved,
-        })}
       >
         {!suspendedOrHidden && !account.moved && relationship?.requested_by && (
           <FollowRequestNoteContainer account={account} />
         )}
 
-        <div className={classNames('account__header__image', classes.header)}>
+        <div className={classes.header}>
           {!suspendedOrHidden && (
             <img
               src={autoPlayGif ? account.header : account.header_static}
@@ -122,21 +120,16 @@ export const AccountHeader: React.FC<{
           )}
         </div>
 
-        <div className={classNames('account__header__bar', classes.barWrapper)}>
+        <div className={classes.barWrapper}>
-          <div
+          <div className={classes.avatarWrapper}>
-            className={classNames(
-              'account__header__tabs',
-              classes.avatarWrapper,
-            )}
-          >
             <a
-              className='avatar'
               href={account.avatar}
               rel='noopener'
               target='_blank'
               onClick={handleOpenAvatar}
             >
               <Avatar
+                className={classes.avatar}
                 account={suspendedOrHidden ? undefined : account}
                 alt={account.avatar_description}
                 size={80}
@@ -144,12 +137,7 @@ export const AccountHeader: React.FC<{
             </a>
           </div>
 
-          <div
+          <div className={classes.displayNameWrapper}>
-            className={classNames(
-              'account__header__tabs__name',
-              classes.displayNameWrapper,
-            )}
-          >
             <AccountName accountId={accountId} />
             <AccountButtons
               accountId={accountId}
@@ -169,23 +157,16 @@ export const AccountHeader: React.FC<{
           )}
 
           {!suspendedOrHidden && (
-            <div className='account__header__extra'>
+            <div className={classes.bioButtonsWrapper}>
-              <div className='account__header__bio'>
+              {me && account.id !== me && <AccountNote accountId={accountId} />}
-                {me && account.id !== me && (
-                  <AccountNote accountId={accountId} />
-                )}
 
-                <AccountBio
+              <AccountBio
-                  showDropdown
+                showDropdown
-                  accountId={accountId}
+                accountId={accountId}
-                  className={classNames(
+                className={classes.bio}
-                    'account__header__content',
+              />
-                    classes.bio,
-                  )}
-                />
 
-                <AccountHeaderFields accountId={accountId} />
+              <AccountHeaderFields accountId={accountId} />
-              </div>
 
               {!me && account.email_subscriptions && (
                 <AccountSubscriptionForm accountId={accountId} />

app/javascript/flavours/glitch/components/account_header/styles.module.scss

@@ -1,26 +1,79 @@
+.moved {
+  opacity: 0.5;
+}
+
+// Account header
 .header {
   height: 120px;
+  overflow: hidden;
   background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border-primary);
+
+  img {
+    object-fit: cover;
+    display: block;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
 
   @container (width >= 500px) {
     height: 160px;
   }
+
+  :global(.inactive) & {
+    filter: grayscale(100%);
+  }
 }
 
+// Wraps everything except the header image.
 .barWrapper {
-  border-bottom: none;
   padding-inline: 16px;
 }
 
+// Avatar
 .avatarWrapper {
   margin-top: -64px;
   padding-top: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  overflow: hidden;
+  margin-inline-start: -2px; // aligns the pfp with content below
+}
+
+.avatar {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--avatar-border-radius);
+
+  .moved & {
+    filter: grayscale(100%);
+  }
 }
 
 .displayNameWrapper {
   display: flex;
   align-items: start;
   gap: 16px;
+  margin-top: 16px;
+  margin-bottom: 16px;
+
+  h1 {
+    font-size: 17px;
+    line-height: 22px;
+    color: var(--color-text-primary);
+    font-weight: 600;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  :global(.emojione) {
+    width: 22px;
+    height: 22px;
+  }
 }
 
 .nameWrapper {
@@ -112,21 +165,6 @@
   }
 }
 
-$button-breakpoint: 420px;
-$button-fallback-breakpoint: $button-breakpoint + 55px;
-
-.buttonsDesktop {
-  @container (width < #{$button-breakpoint}) {
-    display: none;
-  }
-
-  @supports (not (container-type: inline-size)) {
-    @media (max-width: #{$button-fallback-breakpoint}) {
-      display: none;
-    }
-  }
-}
-
 .handleCopy {
   border: 1px solid var(--color-border-primary);
   border-radius: 8px;
@@ -147,6 +185,45 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   }
 }
 
+$button-breakpoint: 420px;
+$button-fallback-breakpoint: $button-breakpoint + 55px;
+
+.buttonsDesktop,
+.buttonsMobile {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  :global(.button) {
+    flex-shrink: 1;
+    white-space: nowrap;
+    min-width: 80px;
+  }
+
+  :global(.icon-button) {
+    border: 1px solid var(--color-border-primary);
+    border-radius: 4px;
+    box-sizing: content-box;
+    padding: 5px;
+
+    &:global(.copied) {
+      border-color: var(--color-text-success);
+    }
+  }
+}
+
+.buttonsDesktop {
+  @container (width < #{$button-breakpoint}) {
+    display: none;
+  }
+
+  @supports (not (container-type: inline-size)) {
+    @media (max-width: #{$button-fallback-breakpoint}) {
+      display: none;
+    }
+  }
+}
+
 .buttonsMobile {
   position: sticky;
   bottom: var(--mobile-bottom-nav-height);
@@ -188,6 +265,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
 
 .bio {
   font-size: 15px;
+  color: var(--color-text-primary);
 }
 
 .familiarFollowers {
@@ -420,3 +498,13 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
     background: var(--color-bg-primary);
   }
 }
+
+// Buttons
+
+.followButton {
+  flex-grow: 1;
+}
+
+.bioButtonsWrapper {
+  margin-top: 16px;
+}

app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx

@@ -8,11 +8,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 
+import { AccountBio } from '@/flavours/glitch/components/account_bio';
 import { Avatar } from '@/flavours/glitch/components/avatar';
 import { DisplayName } from '@/flavours/glitch/components/display_name';
 import { IconButton } from '@/flavours/glitch/components/icon_button';
 import { injectIntl } from '@/flavours/glitch/components/intl';
-import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
 import { Permalink } from '@/flavours/glitch/components/permalink';
 
 const messages = defineMessages({
@@ -40,11 +40,7 @@ class AccountAuthorize extends ImmutablePureComponent {
             <DisplayName account={account} />
           </Permalink>
 
-          <EmojiHTML
+          <AccountBio accountId={account.id} />
-            className='account__header__content translate'
-            htmlString={account.get('note_emojified')}
-            extraEmojis={account.get('emojis')}
-          />
         </div>
 
         <div className='account--panel'>

app/javascript/flavours/glitch/styles/mastodon/accounts.scss

@@ -238,75 +238,6 @@
   border-color: var(--color-border-on-bg-warning-softer);
 }
 
-.account__header__fields {
-  max-width: 100vw;
-  padding: 0;
-  margin: 15px -15px -15px;
-  border: 0 none;
-  border-top: 1px solid var(--color-border-primary);
-  border-bottom: 1px solid var(--color-border-primary);
-  font-size: 14px;
-  line-height: 20px;
-
-  dl {
-    display: flex;
-    border-bottom: 1px solid var(--color-border-primary);
-  }
-
-  dt,
-  dd {
-    box-sizing: border-box;
-    padding: 14px;
-    text-align: center;
-    max-height: 48px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  dt {
-    font-weight: 500;
-    width: 120px;
-    flex: 0 0 auto;
-    color: var(--color-text-primary);
-    background: var(--color-bg-secondary);
-  }
-
-  dd {
-    flex: 1 1 auto;
-    color: var(--color-text-secondary);
-  }
-
-  a {
-    color: var(--color-text-brand);
-    text-decoration: none;
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: underline;
-    }
-  }
-
-  .verified {
-    border: 1px solid var(--color-border-success-soft);
-    background: var(--color-bg-success-softest);
-
-    a {
-      color: var(--color-text-success);
-      font-weight: 500;
-    }
-
-    &__mark {
-      color: var(--color-text-success);
-    }
-  }
-
-  dl:last-child {
-    border-bottom: 0;
-  }
-}
-
 .directory__tag .trends__item__current {
   width: auto;
 }

app/javascript/flavours/glitch/styles/mastodon/admin.scss

@@ -1050,35 +1050,121 @@ a.name-tag,
     max-width: 100%;
   }
 
-  .account__header__fields,
+  &__fields,
-  .account__header__content {
+  &__content {
     background: var(--color-bg-primary);
     border: 1px solid var(--color-border-primary);
     border-radius: 4px;
     height: 100%;
   }
 
-  .account__header__fields {
+  &__fields {
-    margin: 0;
     border: 1px solid var(--color-border-primary);
+    font-size: 14px;
+    line-height: 20px;
+    display: grid;
+    grid-template-columns: 120px auto;
+    grid-auto-flow: row;
+
+    dl {
+      display: flex;
+    }
+
+    dt,
+    dd {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      padding: 14px;
+      text-align: center;
+      border-bottom: 1px solid var(--color-border-primary);
+
+      &:last-of-type:not(.verified) {
+        border-bottom: none;
+      }
+    }
+
+    dt {
+      font-weight: 500;
+      width: 120px;
+      flex: 0 0 auto;
+      color: var(--color-text-primary);
+      background: var(--color-bg-secondary);
+    }
+
+    dd {
+      flex: 1 1 auto;
+      color: var(--color-text-secondary);
+
+      &:first-of-type.verified {
+        border-top-right-radius: 4px;
+      }
+
+      &:last-of-type.verified {
+        border-bottom-right-radius: 4px;
+      }
+    }
 
     a {
       color: var(--color-text-brand);
+      text-decoration: none;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
     }
 
-    dl:first-child .verified {
+    .verified {
-      border-radius: 0 4px 0 0;
+      border: 1px solid var(--color-border-success-soft);
-    }
+      background: var(--color-bg-success-softest);
 
-    .verified a {
+      a {
-      color: var(--color-text-success);
+        color: var(--color-text-success);
+        font-weight: 500;
+      }
+
+      &__mark {
+        color: var(--color-text-success);
+
+        > svg {
+          vertical-align: middle;
+        }
+      }
     }
   }
 
-  .account__header__content {
+  &__content {
     box-sizing: border-box;
     padding: 20px;
     color: var(--color-text-primary);
+    font-size: 14px;
+    font-weight: 400;
+    overflow: hidden;
+    word-break: normal;
+    overflow-wrap: break-word;
+
+    p {
+      margin-bottom: 20px;
+      unicode-bidi: plaintext;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    a {
+      color: var(--color-text-brand);
+      text-decoration: none;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
+    }
   }
 }
 

app/javascript/flavours/glitch/styles/mastodon/components.scss

@@ -8654,372 +8654,6 @@ noscript {
   }
 }
 
-.account__header__content {
-  color: var(--color-text-secondary);
-  font-size: 14px;
-  font-weight: 400;
-  overflow: hidden;
-  word-break: normal;
-  overflow-wrap: break-word;
-
-  p {
-    margin-bottom: 20px;
-    unicode-bidi: plaintext;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  a {
-    color: inherit;
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
-.account__header {
-  container: account-header / inline-size;
-
-  &.inactive {
-    opacity: 0.5;
-
-    .account__header__image,
-    .account__avatar {
-      filter: grayscale(100%);
-    }
-  }
-
-  &__info {
-    position: absolute;
-    top: 20px;
-    inset-inline-end: 20px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2px;
-  }
-
-  &__image {
-    overflow: hidden;
-    height: 145px;
-    position: relative;
-    background: var(--color-bg-tertiary);
-    border-bottom: 1px solid var(--color-border-primary);
-
-    img {
-      object-fit: cover;
-      display: block;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-    }
-  }
-
-  &__bar {
-    position: relative;
-    padding: 0 20px;
-    border-bottom: 1px solid var(--color-border-primary);
-
-    .avatar {
-      display: block;
-      flex: 0 0 auto;
-
-      .account__avatar {
-        background: var(--color-bg-primary);
-        border: 1px solid var(--color-border-primary);
-        border-radius: var(--avatar-border-radius);
-      }
-    }
-  }
-
-  &__tabs {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    margin-top: -55px;
-    padding-top: 10px;
-    gap: 8px;
-    overflow: hidden;
-    margin-inline-start: -2px; // aligns the pfp with content below
-
-    &__name {
-      margin-top: 16px;
-      margin-bottom: 16px;
-
-      .emojione {
-        width: 22px;
-        height: 22px;
-      }
-
-      h1 {
-        font-size: 17px;
-        line-height: 22px;
-        color: var(--color-text-primary);
-        font-weight: 600;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-
-        small {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          font-size: 14px;
-          line-height: 20px;
-          color: var(--color-text-secondary);
-          font-weight: 400;
-          overflow: hidden;
-          text-overflow: ellipsis;
-
-          span {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            user-select: all;
-          }
-
-          .icon-lock {
-            height: 18px;
-            width: 18px;
-          }
-        }
-      }
-    }
-
-    .spacer {
-      flex: 1 1 auto;
-    }
-  }
-
-  &__follow-button {
-    flex-grow: 1;
-  }
-
-  &__buttons {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    $button-breakpoint: 420px;
-    $button-fallback-breakpoint: $button-breakpoint + 55px;
-
-    &--desktop {
-      margin-top: 55px;
-
-      @container (width < #{$button-breakpoint}) {
-        display: none;
-      }
-
-      @supports (not (container-type: inline-size)) {
-        @media (max-width: #{$button-fallback-breakpoint}) {
-          display: none;
-        }
-      }
-    }
-
-    &--mobile {
-      margin-block: 16px;
-
-      @container (width >= #{$button-breakpoint}) {
-        display: none;
-      }
-
-      @supports (not (container-type: inline-size)) {
-        @media (min-width: ($button-fallback-breakpoint + 1px)) {
-          display: none;
-        }
-      }
-    }
-
-    .button {
-      flex-shrink: 1;
-      white-space: nowrap;
-      min-width: 80px;
-    }
-
-    .icon-button {
-      border: 1px solid var(--color-border-primary);
-      border-radius: 4px;
-      box-sizing: content-box;
-      padding: 5px;
-
-      .icon {
-        width: 24px;
-        height: 24px;
-      }
-
-      &.copied {
-        border-color: var(--color-text-success);
-      }
-    }
-  }
-
-  &__bio {
-    .account__header__content {
-      color: var(--color-text-primary);
-    }
-
-    .account__header__fields {
-      margin: 0;
-      margin-top: 16px;
-      border-radius: 4px;
-      border: 1px solid var(--color-border-primary);
-
-      dl {
-        display: block;
-        padding: 8px 16px; // glitch-soc: padding purposefuly reduced
-        border-bottom-color: var(--color-border-primary);
-      }
-
-      dd,
-      dt {
-        font-size: 13px;
-        line-height: 18px;
-        padding: 0;
-        text-align: initial;
-      }
-
-      dt {
-        width: auto;
-        background: transparent;
-        text-transform: uppercase;
-        color: var(--color-text-tertiary);
-      }
-
-      dd {
-        color: var(--color-text-secondary);
-      }
-
-      a {
-        color: var(--color-text-brand);
-      }
-
-      .icon {
-        width: 18px;
-        height: 18px;
-      }
-
-      .verified {
-        border: 1px solid var(--color-text-success);
-        margin-top: -1px;
-        margin-inline: -1px;
-
-        &:first-child {
-          border-top-left-radius: 4px;
-          border-top-right-radius: 4px;
-        }
-
-        &:last-child {
-          border-bottom-left-radius: 4px;
-          border-bottom-right-radius: 4px;
-          margin-bottom: -1px;
-        }
-
-        dt,
-        dd {
-          color: var(--color-text-success);
-        }
-
-        dd {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-
-          span {
-            display: flex;
-          }
-        }
-
-        a {
-          color: var(--color-text-success);
-        }
-      }
-    }
-  }
-
-  &__extra {
-    margin-top: 16px;
-
-    &__links {
-      font-size: 14px;
-      color: var(--color-text-secondary);
-      margin: 0 -10px;
-      padding-top: 16px;
-      padding-bottom: 10px;
-
-      a {
-        display: inline-block;
-        color: var(--color-text-secondary);
-        text-decoration: none;
-        padding: 5px 10px;
-        font-weight: 500;
-
-        strong {
-          font-weight: 700;
-          color: var(--color-text-primary);
-        }
-      }
-    }
-  }
-
-  &__account-note {
-    color: var(--color-text-primary);
-    font-size: 14px;
-    font-weight: 400;
-    margin-bottom: 10px;
-
-    &__loading-indicator-wrapper {
-      position: relative;
-      height: 37px;
-
-      .loading-indicator {
-        left: 10px;
-      }
-
-      .circular-progress {
-        width: 14px;
-        height: 14px;
-      }
-    }
-
-    label {
-      display: block;
-      font-size: 12px;
-      font-weight: 500;
-      color: var(--color-text-secondary);
-      text-transform: uppercase;
-      margin-bottom: 5px;
-    }
-
-    textarea {
-      display: block;
-      box-sizing: border-box;
-      width: calc(100% + 20px);
-      color: var(--color-text-primary);
-      background: transparent;
-      padding: 10px;
-      margin: 0 -10px;
-      font-family: inherit;
-      font-size: 14px;
-      resize: none;
-      border: 0;
-      outline: 0;
-      border-radius: 4px;
-
-      &::placeholder {
-        color: var(--color-text-tertiary);
-        opacity: 1;
-      }
-
-      &:focus {
-        background: var(--color-bg-brand-softest);
-      }
-    }
-  }
-}
-
 .account__contents {
   overflow: hidden;
 }