1 files changed, 23 insertions, 7 deletions
diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
index 5c8ef1a9..a78589d5 100644
--- a/ui/src/components/sidebar.tsx
+++ b/ui/src/components/sidebar.tsx
@@ -13,6 +13,7 @@ import {
   getUnixTime,
   pictshareAvatarThumbnail,
   showAvatars,
+  setupTippy,
 } from '../utils';
 import { CommunityForm } from './community-form';
 import { i18n } from '../i18next';
@@ -46,6 +47,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     this.handleEditCancel = this.handleEditCancel.bind(this);
   }
 
+  componentDidUpdate() {
+    setupTippy();
+  }
+
   render() {
     return (
       <div>
@@ -84,26 +89,37 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             <Link className="text-muted" to={`/c/${community.name}`}>
               /c/{community.name}
             </Link>
-            <ul class="list-inline mb-1 text-muted small font-weight-bold">
+            <ul class="list-inline mb-1 text-muted font-weight-bold">
               {this.canMod && (
                 <>
-                  <li className="list-inline-item">
+                  <li className="list-inline-item-action">
                     <span
                       class="pointer"
                       onClick={linkEvent(this, this.handleEditClick)}
+                      data-tippy-content={i18n.t('edit')}
                     >
-                      {i18n.t('edit')}
+                      <svg class="icon icon-inline">
+                        <use xlinkHref="#icon-edit"></use>
+                      </svg>
                     </span>
                   </li>
                   {this.amCreator && (
-                    <li className="list-inline-item">
+                    <li className="list-inline-item-action">
                       <span
                         class="pointer"
                         onClick={linkEvent(this, this.handleDeleteClick)}
+                        data-tippy-content={
+                          !community.deleted
+                            ? i18n.t('delete')
+                            : i18n.t('restore')
+                        }
                       >
-                        {!community.deleted
-                          ? i18n.t('delete')
-                          : i18n.t('restore')}
+                        <svg
+                          class={`icon icon-inline ${community.deleted &&
+                            'text-danger'}`}
+                        >
+                          <use xlinkHref="#icon-trash"></use>
+                        </svg>
                       </span>
                     </li>
                   )}