update outline

apps/app/src/components/ContentLinkButtons.tsx

@@ -4,14 +4,13 @@ import { USER_STATUS, type IUserHasId } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 import { Link as ScrollLink } from 'react-scroll';
 
-const BookMarkLinkButton = React.memo(({ fontSize }: { fontSize: number }) => {
+const BookMarkLinkButton = React.memo(() => {
   const { t } = useTranslation();
   return (
     <ScrollLink to="bookmarks-list" offset={-120}>
       <button
         type="button"
-        className="btn btn-sm btn-outline-neutral-secondary rounded-pill d-flex align-items-center"
-        style={{ fontSize }}
+        className="btn btn-sm btn-outline-neutral-secondary rounded-pill d-flex align-items-center w-100"
       >
         <span className="material-symbols-outlined p-0">bookmark</span>
         <span>{t('footer.bookmarks')}</span>
@@ -22,16 +21,15 @@ const BookMarkLinkButton = React.memo(({ fontSize }: { fontSize: number }) => {
 
 BookMarkLinkButton.displayName = 'BookMarkLinkButton';
 
-const RecentlyCreatedLinkButton = React.memo(({ fontSize }: { fontSize: number }) => {
+const RecentlyCreatedLinkButton = React.memo(() => {
   const { t } = useTranslation();
   return (
     <ScrollLink to="recently-created-list" offset={-120}>
       <button
         type="button"
-        className="btn btn-sm btn-outline-neutral-secondary rounded-pill d-flex align-items-center"
-        style={{ fontSize }}
+        className="btn btn-sm btn-outline-neutral-secondary rounded-pill d-flex align-items-center w-100"
       >
-        <span className="growi-custom-icons me-1">recently_created</span>
+        <span className="growi-custom-icons mx-1">recently_created</span>
         <span>{t('footer.recently_created')}</span>
       </button>
     </ScrollLink>
@@ -47,22 +45,15 @@ export type ContentLinkButtonsProps = {
 
 export const ContentLinkButtons = (props: ContentLinkButtonsProps): JSX.Element => {
   const { author } = props;
-  const fontSize = 10;
 
   if (author == null || author.status === USER_STATUS.DELETED) {
     return <></>;
   }
 
   return (
-    <div className="container">
-      <div className="row">
-        <div className="col-5 p-0 d-flex align-items-center justify-content-center">
-          <BookMarkLinkButton fontSize={fontSize} />
-        </div>
-        <div className="col-7 p-0 d-flex align-items-center justify-content-center">
-          <RecentlyCreatedLinkButton fontSize={fontSize} />
-        </div>
-      </div>
+    <div className="d-grid gap-2">
+      <BookMarkLinkButton />
+      <RecentlyCreatedLinkButton />
     </div>
   );
 };