[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>

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 8092e862f3a7df87072c7b7d318f4143d18a5841..12ad426c84cd4e76031d43953b8bf7ac16b5f74e 100644 (file)
--- 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 85f216887eb177f47328fa9eefbe3dd71577b2d4..7abe8818b67a9de70d30103302f582e4e1ac396f 100644 (file)
--- 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 982a1ab9ae175d240c3d9e201b2f8c29a27a3c33..58f74f954e6da32e159c6db42615866c5212503c 100644 (file)
--- 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 {