change icons

packages/app/src/client/app.jsx

@@ -127,7 +127,6 @@ if (pageContainer.state.pageId != null) {
     'page-content-footer': <PageContentFooter />,
 
     'recent-created-icon': <RecentlyCreatedIcon />,
-    'user-bookmark-icon': <BookmarkIcon />,
   });
 
   // show the Page accessory modal when query of "compare" is requested

packages/app/src/components/Admin/Notification/GlobalNotificationList.jsx

@@ -116,7 +116,7 @@ class GlobalNotificationList extends React.Component {
                   )}
                   {notification.triggerEvents.includes('pageLike') && (
                     <li className="list-inline-item badge badge-pill badge-info">
-                      <i className="icon-like"></i> LIKE
+                      <i className="fa fa-heart-o"></i> LIKE
                     </li>
                   )}
                   {notification.triggerEvents.includes('comment') && (

packages/app/src/components/Admin/Notification/ManageGlobalNotification.jsx

@@ -275,7 +275,7 @@ class ManageGlobalNotification extends React.Component {
                   onChange={() => this.onChangeTriggerEvents('pageLike')}
                 >
                   <span className="badge badge-pill badge-info">
-                    <i className="icon-like mr-1" />LIKE
+                    <i className="fa fa-heart-o mr-1" />LIKE
                   </span>
                 </TriggerEventCheckBox>
               </div>

packages/app/src/components/BookmarkButton.jsx

@@ -38,7 +38,7 @@ class LegacyBookmarkButton extends React.Component {
           className={`btn btn-bookmark border-0
           ${`btn-${this.props.size}`} ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
         >
-          <i className="icon-star"></i>
+          <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
           { !hideTotalNumber && (
             <span className="total-bookmarks ml-3">
               {sumOfBookmarks && (

packages/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -63,7 +63,7 @@ const PageItemControl: FC<PageItemControlProps> = (props: PageItemControlProps)
         )}
         {isEnableActions && (
           <DropdownItem onClick={() => toastr.warning(t('search_result.currently_not_implemented'))}>
-            <i className="icon-fw icon-star"></i>
+            <i className="fa fa-fw fa-bookmark-o"></i>
             {t('Add to bookmark')}
           </DropdownItem>
         )}

packages/app/src/components/ContentLinkButtons.jsx

@@ -55,7 +55,7 @@ const ContentLinkButtons = (props) => {
         className="btn btn-outline-secondary btn-sm px-2"
         onClick={() => smoothScrollIntoView(getBookMarkListHeaderDom, WIKI_HEADER_LINK)}
       >
-        <i className="mr-2 icon-star"></i>
+        <i className="fa fa-fw fa-bookmark-o"></i>
         <span>Bookmarks</span>
       </button>
 

packages/app/src/components/Icons/BookmarkIcon.jsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-const BookmarkIcon = () => (
-
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-  >
-
-    <g transform="translate(-925.888 168.873)">
-      <rect width="20" height="20" transform="translate(925.888 -168.873)" fill="none" />
-      <path d="M936.092-168.527a1.141,1.141,0,0,1,.205.039,1.685,1.685,0,0,1,.185.068c.058.026.116.056.175.088a1.038,1.038,0,0,1,
-        .166.117,1.826,1.826,0,0,1,.146.146c.045.052.088.1.127.156a.8.8,0,0,1,.1.175l2.26,4.7,5.2.76a1.424,1.424,0,0,1,.7.311,1.413,
-        1.413,0,0,1,.449.643,1.294,1.294,0,0,1-.351,1.423l-3.8,3.8.876,5.28a1.225,1.225,0,0,1-.088.76,1.451,1.451,0,0,1-.5.6,1.456,
-        1.456,0,0,1-.838.253,1.614,1.614,0,0,1-.351-.039,1.316,1.316,0,0,1-.35-.137l-4.52-2.435-4.54,2.435a1.37,1.37,0,0,1-.682.176h-.156a.525.525,
-        0,0,1-.146-.02l-.137-.039a1.117,1.117,0,0,1-.136-.049,1.231,1.231,0,0,1-.136-.068c-.046-.026-.088-.052-.127-.077a1.462,1.462,
-        0,0,1-.5-.6,1.232,1.232,0,0,1-.087-.76l.877-5.28-3.8-3.8a1.29,1.29,0,0,1-.35-1.423,1.4,1.4,0,0,1,.448-.643,1.423,1.423,0,0,1,
-        .7-.311l5.2-.76,2.26-4.7a1.351,1.351,0,0,1,.526-.584,1.467,1.467,0,0,1,.78-.215C935.953-168.537,936.02-168.533,936.092-168.527Zm-2.49,
-        5.9-.41.84-6.1.9,4.415,4.415-.136.879-.9,5.275,5.412-2.891,5.411,2.891-.9-5.275-.137-.879,4.415-4.415-6.115-.9-2.676-5.587Z"
-      />
-    </g>
-  </svg>
-
-);
-
-export default BookmarkIcon;

packages/app/src/components/LikeButtons.tsx

@@ -49,7 +49,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
         className={`btn btn-like border-0
             ${isLiked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
-        <i className="icon-like"></i>
+        <i className={`fa ${isLiked ? 'fa-heart' : 'fa-heart-o'}`}></i>
       </button>
       {isGuestUser && (
         <UncontrolledTooltip placement="top" target="like-button" fade={false}>

packages/app/src/components/Sidebar/SidebarNav.tsx

@@ -81,7 +81,7 @@ const SidebarNav: FC<Props> = (props: Props) => {
         {!isSharedUser && <PrimaryItem contents={SidebarContentsType.RECENT} label="Recent Changes" iconName="update" onItemSelected={onItemSelected} />}
         {!isSharedUser && <PrimaryItem contents={SidebarContentsType.TREE} label="Page Tree" iconName="format_list_bulleted" onItemSelected={onItemSelected} />}
         {/* <PrimaryItem id="tag" label="Tags" iconName="icon-tag" /> */}
-        {/* <PrimaryItem id="favorite" label="Favorite" iconName="icon-star" /> */}
+        {/* <PrimaryItem id="favorite" label="Favorite" iconName="fa fa-bookmark-o" /> */}
       </div>
       <div className="grw-sidebar-nav-secondary-container">
         {isAdmin && <SecondaryItem label="Admin" iconName="settings" href="/admin" />}

packages/app/src/components/User/LikerList.jsx

@@ -15,7 +15,7 @@ class LikerList extends React.Component {
       <div className="user-list-content text-truncate text-muted text-right">
         <span className="text-info">
           <span className="liker-user-count">{pageContainer.state.sumOfLikers}</span>
-          <i className="icon-fw icon-like"></i>
+          <i className="fa fa-fw fa-heart-o"></i>
         </span>
         <span className="mr-1">
           <UserPictureList users={pageContainer.state.likerUsers} />

packages/app/src/server/views/layout-growi/user_page.html

@@ -16,7 +16,7 @@
 
       <div class="grw-user-page-list-m d-edit-none">
         <h2 class="grw-user-page-header border-bottom pb-2 mb-3" id="bookmarks-list">
-          <i id="user-bookmark-icon"></i>
+          <i class="fa fa-fw fa-bookmark-o" style="font-size: 1.3em"></i>
           Bookmarks
         </h2>
         <div class="page-list" id="user-bookmark-list">
@@ -27,7 +27,7 @@
 
       <div class="grw-user-page-list-m mt-5 d-edit-none">
         <h2 class="grw-user-page-header border-bottom pb-2 mb-3" id="recently-created-list">
-          <i id="recent-created-icon"></i>
+          <i id="recent-created-icon" class="mr-1"></i>
           Recently Created
         </h2>
         <div class="page-list" id="user-created-list">

packages/app/src/server/views/widget/page_list.html

@@ -29,7 +29,7 @@
 
     {% if listPage.liker.length > 0 %}
     <span class="page-list-liker" data-count="{{ listPage.liker.length }}">
-      <i class="icon-like"></i>{{ listPage.liker.length }}
+      <i class="fa fa-heart-o"></i>{{ listPage.liker.length }}
     </span>
     {% endif  %}
 

packages/app/src/styles/atoms/_buttons.scss

@@ -1,8 +1,8 @@
 .btn.btn-like {
-  @include button-outline-variant($secondary, lighten($info, 15%), rgba(lighten($info, 10%), 0.15), rgba(lighten($info, 10%), 0.5));
+  @include button-outline-variant($secondary, lighten($red, 15%), rgba(lighten($red, 10%), 0.15), rgba(lighten($red, 10%), 0.5));
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
-    color: lighten($info, 15%);
+    color: lighten($red, 15%);
   }
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;
@@ -11,10 +11,10 @@
 }
 
 .btn.btn-bookmark {
-  @include button-outline-variant($secondary, $warning, rgba(lighten($warning, 20%), 0.5), rgba(lighten($warning, 20%), 0.5));
+  @include button-outline-variant($secondary, $orange, rgba(lighten($orange, 20%), 0.5), rgba(lighten($orange, 20%), 0.5));
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
-    color: $warning;
+    color: $orange;
   }
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;

packages/ui/src/components/PagePath/PageListMeta.jsx

@@ -30,7 +30,7 @@ export class PageListMeta extends React.Component {
 
     let likerCount;
     if (page.liker != null && page.liker.length > 0) {
-      likerCount = <span className="meta-icon"><i className="icon-like" />{page.liker.length}</span>;
+      likerCount = <span className="meta-icon"><i className="fa fa-heart-o" />{page.liker.length}</span>;
     }
 
     let locked;
@@ -50,11 +50,11 @@ export class PageListMeta extends React.Component {
 
     let bookmarkCount;
     if (this.props.bookmarkCount > 0) {
-      bookmarkCount = <span className="meta-icon"><i className="icon-star" />{this.props.bookmarkCount}</span>;
+      bookmarkCount = <span className="meta-icon"><i className="fa fa-bookmark-o" />{this.props.bookmarkCount}</span>;
     }
 
     return (
-      <span className="page-list-meta">
+      <span className="page-list-meta ml-2">
         {topLabel}
         {templateLabel}
         {seenUserCount}