From a22fd911bf395e9b82a26858b57a4693307c828e Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Fri, 25 Jan 2019 11:44:39 +0100
Subject: [PATCH] smaller padding for notification buttons on <SM screens

---
 .../Notification/components/NotificationButton/index.js   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Notification/components/NotificationButton/index.js b/src/components/Notification/components/NotificationButton/index.js
index 9d001380..f2e9fcf6 100644
--- a/src/components/Notification/components/NotificationButton/index.js
+++ b/src/components/Notification/components/NotificationButton/index.js
@@ -8,7 +8,9 @@ import colors from 'config/colors';
 import { WHITE_COLOR } from 'config/animations';
 import { getPrimaryColor } from 'utils/notification';
 import Loader from 'components/Loader';
-import { TRANSITION, FONT_SIZE, FONT_WEIGHT } from 'config/variables';
+import {
+    TRANSITION, FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE,
+} from 'config/variables';
 
 type Props = {
     type: string;
@@ -48,6 +50,10 @@ const Wrapper = styled.button`
     border: 1px solid ${props => getPrimaryColor(props.type)};
     transition: ${TRANSITION.HOVER};
 
+    @media screen and (max-width: ${SCREEN_SIZE.SM}){
+        padding: 12px 24px; 
+    }
+
     &:hover {
         color: ${colors.WHITE};
         background: ${props => getPrimaryColor(props.type)};