Merge pull request #8465 from weseek/imprv/139436-140339-update-user-homepage-side-contents

imprv: Update design for user homepage side contents

apps/app/src/components/ContentLinkButtons.module.scss

@@ -1,6 +0,0 @@
-.grw-icon-container-recently-created :global {
-  svg {
-    width: 14px;
-    height: 14px;
-  }
-}

apps/app/src/components/ContentLinkButtons.tsx

@@ -1,22 +1,19 @@
 import React from 'react';
 
-import type { IUserHasId } from '@growi/core';
+import { USER_STATUS, type IUserHasId } from '@growi/core';
+import { useTranslation } from 'next-i18next';
 import { Link as ScrollLink } from 'react-scroll';
 
-import { RecentlyCreatedIcon } from '~/components/Icons/RecentlyCreatedIcon';
-
-import styles from './ContentLinkButtons.module.scss';
-
 const BookMarkLinkButton = React.memo(() => {
-
+  const { t } = useTranslation();
   return (
     <ScrollLink to="bookmarks-list" offset={-120}>
       <button
         type="button"
-        className="btn btn-outline-secondary btn-sm px-2"
+        className="btn btn-sm btn-outline-neutral-secondary rounded-pill d-flex align-items-center w-100"
       >
-        <span className="material-symbols-outlined">bookmark</span>
-        <span>Bookmarks</span>
+        <span className="material-symbols-outlined p-0">bookmark</span>
+        <span>{t('footer.bookmarks')}</span>
       </button>
     </ScrollLink>
   );
@@ -25,15 +22,15 @@ const BookMarkLinkButton = React.memo(() => {
 BookMarkLinkButton.displayName = 'BookMarkLinkButton';
 
 const RecentlyCreatedLinkButton = React.memo(() => {
-
+  const { t } = useTranslation();
   return (
     <ScrollLink to="recently-created-list" offset={-120}>
       <button
         type="button"
-        className="btn btn-outline-secondary btn-sm px-3"
+        className="btn btn-sm btn-outline-neutral-secondary rounded-pill d-flex align-items-center w-100"
       >
-        <i className={`${styles['grw-icon-container-recently-created']} grw-icon-container-recently-created me-2`}><RecentlyCreatedIcon /></i>
-        <span>Recently Created</span>
+        <span className="growi-custom-icons mx-1">recently_created</span>
+        <span>{t('footer.recently_created')}</span>
       </button>
     </ScrollLink>
   );
@@ -47,18 +44,16 @@ export type ContentLinkButtonsProps = {
 }
 
 export const ContentLinkButtons = (props: ContentLinkButtonsProps): JSX.Element => {
-
   const { author } = props;
 
-  if (author == null || author.status === 4) {
+  if (author == null || author.status === USER_STATUS.DELETED) {
     return <></>;
   }
 
   return (
-    <div className="mt-3 d-flex justify-content-between">
+    <div className="d-grid gap-2">
       <BookMarkLinkButton />
       <RecentlyCreatedLinkButton />
     </div>
   );
-
 };

packages/custom-icons/svg/recently_created.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21.569" viewBox="0 0 21 21.569">
+  <g id="8883" data-name="8883" transform="translate(-288.73 -162.502)">
+    <path id="14245" data-name="14245" d="M18.841,15.3a4.123,4.123,0,1,1-1.028-2.714H16.271v1.158h3.213V10.53H18.326v.929A5.261,5.261,0,1,0,20,15.3Z" transform="translate(289.23 163.002)" fill="#C4C2BD" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+    <path id="14246" data-name="14246" d="M14.151,12.351v3.165l2.021,2.312.872-.762L15.31,15.081v-2.73Z" transform="translate(289.23 163.002)" fill="#C4C2BD" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+    <path id="14247" data-name="14247" d="M16.933,4.241a1.645,1.645,0,0,0,.489-1.19,1.582,1.582,0,0,0-.469-1.19L15.6.5a1.631,1.631,0,0,0-2.36,0L12.075,1.667l3.706,3.726Z" transform="translate(289.23 163.002)" fill="#C4C2BD" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+    <path id="14248" data-name="14248" d="M10.932,2.819,0,13.751v3.706H3.706L14.638,6.525ZM3,15.81H1.647V14.459l9.3-9.3.682.683.667.667Z" transform="translate(289.23 163.002)" fill="#C4C2BD" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+  </g>
+</svg>