Add icons

epicyon-profile.css

@@ -77,7 +77,7 @@ body, html {
     text-align: center;
     font-size: 18px;
     padding: 10px;
-    width: 25%;
+    width: 20%;
     max-width: 200px;
     min-width: 100px;
     transition: all 0.5s;
@@ -85,20 +85,8 @@ body, html {
     margin: 5px;
 }
 
-.followerApprovalsButton {
-    border-radius: 4px;
-    background-color: darkgreen;
-    border: none;
-    color: #FFFFFF;
-    text-align: center;
-    font-size: 18px;
-    padding: 10px;
-    width: 25%;
-    max-width: 200px;
-    min-width: 100px;
-    transition: all 0.5s;
-    cursor: pointer;
-    margin: 5px;
+.timelineIcon {
+    width: 10%;
 }
 
 .followApprove {
@@ -137,13 +125,6 @@ body, html {
     padding: 0px 20px;
 }
 
-.followerApprovalsButton span {
-    cursor: pointer;
-    display: inline-block;
-    position: relative;
-    transition: 0.5s;
-}
-
 .button span {
     cursor: pointer;
     display: inline-block;
@@ -151,15 +132,6 @@ body, html {
     transition: 0.5s;
 }
 
-.followerApprovalsButton span:after {
-    content: '\00bb';
-    position: absolute;
-    opacity: 0;
-    top: 0;
-    right: -20px;
-    transition: 0.5s;
-}
-
 .button span:after {
     content: '\00bb';
     position: absolute;
@@ -169,19 +141,10 @@ body, html {
     transition: 0.5s;
 }
 
-.followerApprovalsButton:hover span {
-    padding-right: 25px;
-}
-
 .button:hover span {
     padding-right: 25px;
 }
 
-.followerApprovalsButton:hover span:after {
-    opacity: 1;
-    right: 0;
-}
-
 .button:hover span:after {
     opacity: 1;
     right: 0;

webinterface.py

@@ -521,21 +521,21 @@ def htmlTimeline(session,baseDir: str,wfRequest: {},personCache: {}, \
         with open(followRequestsFilename,'r') as f:
             for line in f:
                 if len(line)>0:
-                    # show a star on the followers tab
-                    followApprovals='<a href="'+actor+'/followers"><button class="followerApprovalsButton"><span>Approvals </span></button></a>'
+                    # show follow approvals icon
+                    followApprovals='<a href="'+actor+'/followers"><img class="right" src="/icons/person.png"/></a>'
                     break
 
     tlStr=htmlHeader(profileStyle)
-    newPostStr='    <a href="'+actor+'/newpost"><button class="'+newPostButton+'"><span>New Post </span></button></a>'
+    newPostStr='    <a href="'+actor+'/newpost"><button class="'+newPostButton+'"><span>Post </span></button></a>'
     tlStr+= \
         '<div class="timeline-banner">' \
         '</div>' \
-        '<div class="container">\n' \
-        '  <center>'+newPostStr+ \
-        '    <a href="'+actor+'/inbox"><button class="'+localButton+'"><span>Local </span></button></a>' \
-        '    <a href="'+actor+'/outbox"><button class="'+personalButton+'"><span>Personal </span></button></a>'+ \
+        '<div class="container">\n'+ \
+        newPostStr+ \
+        '    <a href="'+actor+'/inbox"><button class="'+localButton+'"><span>Inbox </span></button></a>' \
+        '    <a href="'+actor+'/outbox"><button class="'+personalButton+'"><span>Sent </span></button></a>' \
+        '    <a href="'+actor+'/newfollow"><img src="/icons/add.png" class="right"/></a>'+ \
         followApprovals+ \
-        '  </center>' \
         '</div>'
     for item in timelineJson['orderedItems']:
         if item['type']=='Create':