From 80980bb5d4bf175b2488973299b10147c56a06aa Mon Sep 17 00:00:00 2001
From: YoheiZuho <yuuman002@gmail.com>
Date: Tue, 2 Jan 2024 10:35:47 +0000
Subject: [PATCH] fix tabs bar bottom

---
 .../mastodon/features/ui/components/columns_area.jsx |  7 ++++---
 .../mastodon/features/ui/components/tabs_bar.jsx     | 12 ++++++++----
 app/javascript/styles/plugin.scss                    |  4 ++++
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/javascript/mastodon/features/ui/components/columns_area.jsx b/app/javascript/mastodon/features/ui/components/columns_area.jsx
index 5b76b2a69..dfb6a6127 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area.jsx
+++ b/app/javascript/mastodon/features/ui/components/columns_area.jsx
@@ -34,6 +34,8 @@ import { Link } from 'react-router-dom';
 import { Icon }  from 'mastodon/components/icon';
 import TabsBar from './tabs_bar';
 
+import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
+
 const componentMap = {
   'COMPOSE': Compose,
   'HOME': HomeTimeline,
@@ -164,12 +166,12 @@ export default class ColumnsArea extends ImmutablePureComponent {
             </div>
 
             <div className='columns-area__panels__main timeline'>
-              <div className='tabs-bar__wrapper'><div id='tabs-bar__portal' /></div>
+              <div className='tabs-bar__wrapper'><TabsBarPortal /></div>
               <div className='columns-area columns-area--mobile'>{children}</div>
             </div>
 
             <div className='columns-area__panels__main navber'>
-              {location.pathname !== '/publish' && <Link to='/publish' className='button bottom_right'><Icon id='pencil' fixedWidth /></Link>}
+              {location.pathname !== '/publish' && <Link to='/publish' icon='Edit' className='button bottom_right'><EditIcon fill="white"/></Link>}
               <TabsBar key='tabs' />
             </div>
 
@@ -178,7 +180,6 @@ export default class ColumnsArea extends ImmutablePureComponent {
                 <NavigationPanel />
               </div>
             </div>
-
           </div>
         ); 
       } else {
diff --git a/app/javascript/mastodon/features/ui/components/tabs_bar.jsx b/app/javascript/mastodon/features/ui/components/tabs_bar.jsx
index 2e675d7d4..9b764e465 100644
--- a/app/javascript/mastodon/features/ui/components/tabs_bar.jsx
+++ b/app/javascript/mastodon/features/ui/components/tabs_bar.jsx
@@ -4,6 +4,10 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ColumnLink from './column_link';
 import NotificationsCounterIcon from './notifications_counter_icon';
 
+import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
+import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
 
 const messages = defineMessages({
   home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
@@ -41,11 +45,11 @@ class TabsBar extends Component {
 
     return (
       <div className='tabs-bar__wrapper'>
-        <ColumnLink transparent to='/home' icon='home' text={intl.formatMessage(messages.home)} />
+        <ColumnLink transparent to='/home' icon='home' iconComponent={HomeIcon} text={intl.formatMessage(messages.home)} />
         <ColumnLink transparent to='/notifications' icon={<NotificationsCounterIcon className='column-link__icon' />} text={intl.formatMessage(messages.notifications)} />
-        <ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' text={intl.formatMessage(messages.firehose)} />
-        <ColumnLink transparent to='/search' icon='search' text={intl.formatMessage(messages.search)} />
-        <ColumnLink transparent to='/getting-started' icon='bars' text={intl.formatMessage(messages.gettingStarted)} />
+        <ColumnLink transparent to='/public/local'  iconComponent={PublicIcon} isActive={this.isFirehoseActive} icon='globe' text={intl.formatMessage(messages.firehose)} />
+        <ColumnLink transparent to='/search' icon='search' iconComponent={SearchIcon} text={intl.formatMessage(messages.search)} />
+        <ColumnLink transparent to='/getting-started' icon='bars' iconComponent={MoreHorizIcon} text={intl.formatMessage(messages.gettingStarted)} />
       </div>
     );
   }
diff --git a/app/javascript/styles/plugin.scss b/app/javascript/styles/plugin.scss
index 6a43d3289..1476fe884 100644
--- a/app/javascript/styles/plugin.scss
+++ b/app/javascript/styles/plugin.scss
@@ -18,6 +18,10 @@
   display: none;
 }
 
+.column-link--transparent{
+  justify-content: center;
+}
+
 @media screen and (max-width: 630px) {
   .tab-ber-bottom .timeline{
     width:100%;