[Glitch] Make visibility icon clickable as part of the time of a toot

Port 1d07f51039625c2eafa7eb0b1b6d5a7f8cf00e41 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

3 files changed, 7 insertions, 9 deletions

diff --git a/app/javascript/flavours/glitch/features/ui/components/boost_modal.js b/app/javascript/flavours/glitch/features/ui/components/boost_modal.js
index 8092e862f..12ad426c8 100644
--- a/app/javascript/flavours/glitch/features/ui/components/boost_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/boost_modal.js
@@ -78,9 +78,10 @@ class BoostModal extends ImmutablePureComponent {
           <div className={classNames('status', `status-${status.get('visibility')}`, 'light')}>
             <div className='boost-modal__status-header'>
               <div className='boost-modal__status-time'>
-                <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
+                <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
+                  <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
+                  <RelativeTimestamp timestamp={status.get('created_at')} /></a>
               </div>
-              <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
 
               <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
                 <div className='status__avatar'>
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index 85f216887..7abe8818b 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -427,10 +427,8 @@
 
   .status__visibility-icon {
     color: $dark-text-color;
-    float: right;
     font-size: 14px;
-    margin-left: 4px;
-    margin-right: 4px;
+    padding: 0 4px;
   }
 
   .status__display-name {
diff --git a/app/javascript/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.scss
index 982a1ab9a..58f74f954 100644
--- a/app/javascript/flavours/glitch/styles/statuses.scss
+++ b/app/javascript/flavours/glitch/styles/statuses.scss
@@ -201,19 +201,18 @@
       display: initial;
     }
 
-    .status__relative-time,
-    .status__visibility-icon {
+    .status__relative-time {
       color: $dark-text-color;
       float: right;
       font-size: 14px;
       width: auto;
       margin: initial;
       padding: initial;
+      padding-bottom: 1px;
     }
 
     .status__visibility-icon {
-      margin-left: 4px;
-      margin-right: 4px;
+      padding: 0 4px;
     }
 
     .status__info .status__display-name {