Fixed horrible outline around notif clearing checkbox & moved the overlay to a more sr-friendly place

3 files changed, 7 insertions, 12 deletions

diff --git a/app/javascript/glitch/components/notification/follow.js b/app/javascript/glitch/components/notification/follow.js
index 0e0065eb1..d340e83c8 100644
--- a/app/javascript/glitch/components/notification/follow.js
+++ b/app/javascript/glitch/components/notification/follow.js
@@ -103,7 +103,6 @@ We can now render our component.
 
     return (
       <div className='notification notification-follow'>
-        <NotificationOverlayContainer notification={notification} />
         <div className='notification__message'>
           <div className='notification__favourite-icon-wrapper'>
             <i className='fa fa-fw fa-user-plus' />
@@ -117,6 +116,7 @@ We can now render our component.
         </div>
 
         <AccountContainer id={account.get('id')} withNote={false} />
+        <NotificationOverlayContainer notification={notification} />
       </div>
     );
   }
diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index dc06250ec..b7ec8b4ca 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -526,10 +526,6 @@ applicable.
     }
   }
 
-  markNotifForDelete = () => {
-    this.setState({ 'markedForDelete' : !this.state.markedForDelete });
-  }
-
 /*
 
 ####  `render()`.
@@ -699,11 +695,6 @@ collapsed.
         }}
         ref={handleRef}
       >
-        {notification ? (
-          <NotificationOverlayContainer
-            notification={notification}
-          />
-        ) : null}
         {prepend && account ? (
           <StatusPrepend
             type={prepend}
@@ -739,6 +730,11 @@ collapsed.
             account={status.get('account')}
           />
         ) : null}
+        {notification ? (
+          <NotificationOverlayContainer
+            notification={notification}
+          />
+        ) : null}
       </article>
     );
 
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index dbdf286a9..3e80569a9 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -503,8 +503,7 @@
   align-items: center;
 
   :focus & {
-    outline: rgb(77, 144, 254) auto 10px;
-    outline: -webkit-focus-ring-color auto 10px;
+    box-shadow: 0 0 2px 2px #3e6fc1;
   }
 }