feat(profiles): design tests to improve users's understanding

* chore(Profiles/Notice): tries to display pin info if or not featured * chore(Profiles/ProfileIntro): removes website link * chore(Profiles/ProfileIntro): improves username and button display * feat(profile): featured props determine link position * fix(ProfileNoticeListItem): fixes some CSS * fix(ProfileNoticeListItem): changes order between button and date * fix(profilenoticelistitem): return text inside jsx element * fix(ProfileIntro): simplifies code Co-authored-by: Gregoire <[email protected]>
dis-moi · Jul 12, 2021 · 84e1f88 · 84e1f88
1 parent 5e93c19
commit 84e1f88
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 29 deletions.
diff --git a/src/app/profiles/App/Pages/Profiles/Profile/ProfileIntro.tsx b/src/app/profiles/App/Pages/Profiles/Profile/ProfileIntro.tsx
@@ -4,11 +4,8 @@ import { StatefulContributor } from 'libs/domain/contributor';
 import {
   ContributorCard,
   ContributorInfos,
-  ContributorWrapper,
-  StatsWrapper
+  ContributorWrapper
 } from 'components/atoms/Contributor';
-import { LinkIcon } from 'components/atoms/icons';
-import ExternalLink from 'components/atoms/Link/ExternalLink';
 import UserName from 'components/atoms/UserName/UserName';
 import Avatar from 'components/molecules/Avatar/Avatar';
 import ContributorLarge from 'components/organisms/Contributor/ContributorLarge';
@@ -70,10 +67,12 @@ const ProfileIntroContent = styled.section`
 
     ${ContributorInfos} {
       flex-basis: 100%;
+      align-items: center;
       margin: 0;
 
       ${UserName} {
         display: inline;
+        margin-bottom: 0;
 
         ${Anchor} {
           display: block;
@@ -84,23 +83,14 @@ const ProfileIntroContent = styled.section`
         }
       }
 
-      ${StatsWrapper} {
-        grid-row: 2 /3;
-
-        & + div {
-          margin-top: -5px;
-        }
+      button {
+        padding-top: 6px;
+        padding-bottom: 6px;
       }
 
       @media (max-width: ${props => props.theme.tabletWidth}) {
         display: flex;
         margin-left: 16px;
-
-        ${StatsWrapper} {
-          & + div {
-            margin-top: 15px;
-          }
-        }
       }
     }
   }
@@ -132,13 +122,7 @@ export const ProfileIntro = ({
           loading={loading}
           avatarSize="large"
           usernameAs={usernameAs}
-        >
-          {contributor && !!contributor.website && (
-            <ExternalLink href={contributor.website}>
-              <LinkIcon /> {contributor.website}
-            </ExternalLink>
-          )}
-        </ContributorLarge>
+        />
       </ProfileIntroContent>
     </>
   );

diff --git a/src/app/profiles/App/Pages/Profiles/Profile/ProfileNoticeListItem.tsx b/src/app/profiles/App/Pages/Profiles/Profile/ProfileNoticeListItem.tsx
@@ -11,9 +11,12 @@ const Loading = styled(LoadingRotator)`
 `;
 
 const NoticeTopLine = styled.div`
-  margin-top: 20px;
   margin-bottom: 26px;
 
+  &:not(:first-child) {
+    margin-top: 20px;
+  }
+
   & > svg {
     margin-right: 5px;
     vertical-align: bottom;
@@ -38,7 +41,7 @@ const NoticeBottomLine = styled.div`
   font-size: 14px;
 
   & > ${BorderButton} {
-    margin-left: 20px;
+    margin-right: 20px;
   }
 
   @media (max-width: ${props => props.theme.tabletWidth}) {
@@ -65,7 +68,8 @@ export const ProfileNoticeListItem = ({
   loading,
   notice,
   seeInContext,
-  className
+  className,
+  featured
 }: ProfileNoticeListItemProps) => {
   const { t } = useTranslation();
 
@@ -87,7 +91,21 @@ export const ProfileNoticeListItem = ({
   const exampleMatchingUrl =
     notice.exampleMatchingUrl && stripUrlProtocol(notice.exampleMatchingUrl);
   return (
-    <Box className={className}>
+    <Box as="article" className={className}>
+      {featured && exampleMatchingUrl && (
+        <NoticeTopLine>
+          <Pin />
+
+          <Trans i18nKey={'profiles:notice.pined_on'}>
+            <NoticeHighlight>
+              Message épinglé sur
+              <NoticeURL>{{ exampleMatchingUrl }}</NoticeURL>
+            </NoticeHighlight>{' '}
+            et d&apos;autres pages web
+          </Trans>
+        </NoticeTopLine>
+      )}
+
       {notice.screenshot && (
         <img
           style={{ width: '100%' }}
@@ -97,10 +115,13 @@ export const ProfileNoticeListItem = ({
           })}
         />
       )}
+
       <Paragraph dangerouslySetInnerHTML={{ __html: notice.strippedMessage }} />
-      {exampleMatchingUrl && (
+
+      {!featured && exampleMatchingUrl && (
         <NoticeTopLine>
           <Pin />
+
           <Trans i18nKey={'profiles:notice.pined_on'}>
             <NoticeHighlight>
               Message épinglé sur
@@ -110,14 +131,17 @@ export const ProfileNoticeListItem = ({
           </Trans>
         </NoticeTopLine>
       )}
+
       <NoticeBottomLine>
-        {t('profiles:notice.since', { date: new Date(notice.created) })}
         <BorderButton
           onClick={seeInContext}
           disabled={!notice.exampleMatchingUrl}
         >
           {t('profiles:action.see_context')}
         </BorderButton>
+        {!featured && (
+          <>{t('profiles:notice.since', { date: new Date(notice.created) })}</>
+        )}
       </NoticeBottomLine>
     </Box>
   );