From 0244019ca17288802a144c84b7e0f319f1685695 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Fri, 21 Jul 2017 21:12:43 +0200
Subject: [PATCH] Fixed horrible outline around notif clearing checkbox & moved
 the overlay to a more sr-friendly place

---
 .../glitch/components/notification/follow.js       |  2 +-
 app/javascript/glitch/components/status/index.js   | 14 +++++---------
 app/javascript/styles/components.scss              |  3 +--
 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 0e0065eb17d..d340e83c8b1 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 dc06250ec79..b7ec8b4ca01 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 dbdf286a9dd..3e80569a922 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;
   }
 }