fix: added removed notification scss file (#516)

* fix: added removed notification scss file * refactor: added notification scss file to notifications index.jsx * refactor: added extra line in notification .scss * fix: removed duplicate notificationTray id --------- Co-authored-by: Awais Ansari <[email protected]>
edx · Nov 20, 2023 · b955303 · b955303
1 parent df19573
commit b955303
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 145 deletions.
diff --git a/example/index.js b/example/index.js
@@ -5,7 +5,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
-import Header from '@edx/frontend-component-header';
+import Header, { StudioHeader } from '@edx/frontend-component-header';
 
 import './index.scss';
 

diff --git a/src/Notifications/index.jsx b/src/Notifications/index.jsx
@@ -24,6 +24,8 @@ import NotificationContext from './context';
 import messages from './messages';
 import NotificationTabs from './NotificationTabs';
 
+import './notification.scss';
+
 const Notifications = () => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -78,7 +80,6 @@ const Notifications = () => {
         trigger="click"
         key="bottom"
         placement="bottom"
-        id="notificationTray"
         show={enableNotificationTray}
         overlay={(
           <Popover
@@ -134,7 +135,7 @@ const Notifications = () => {
           </Popover>
         )}
       >
-        <div ref={buttonRef}>
+        <div ref={buttonRef} id="notificationIcon">
           <IconButton
             isActive={enableNotificationTray}
             alt={intl.formatMessage(messages.notificationBellIconAltMessage)}

diff --git a/src/Notifications/notification.scss b/src/Notifications/notification.scss
@@ -1,167 +1,96 @@
-.content {
-  strong {
-    color: #00262B !important;
-    font-weight: 500 !important;
-  }
-}
-
-.font-size-18 {
-  font-size: 18px !important;
-}
-
-.font-size-12 {
-  font-size: 12px !important;
-}
-
-.font-size-14 {
-  font-size: 14px !important;
-}
-
-.font-size-22 {
-  font-size: 22px !important;
-}
-
-.py-10px {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.pb-10px {
-  padding-bottom: 10px;
-}
-
-.line-height-24 {
-  line-height: 24px;
-}
-
-.line-height-20 {
-  line-height: 20px;
-}
-
-.line-height-10 {
-  line-height: 10px !important;
-}
-
-.zIndex-2{
+.zIndex-2 {
   z-index: 2 !important;
 }
 
-#pgn__checkpoint{
+#pgn__checkpoint {
   z-index: 1 !important;
 }
 
-.icon-size-20 {
-  width: 20px !important;
-  height: 20px !important;
-}
-
-.icon-size-56 {
-  width: 56px !important;
-  height: 56px !important;
-}
-
-.plus-icon {
-  margin-top: -0.5px;
-}
-
 .cursor-pointer {
   cursor: pointer;
 }
 
-.notification-button {
-  width: 36px !important;
-  height: 36px !important;
-
-  &:focus, &:active {
-    box-shadow: inset 0 0 0 2px #00262B !important;
+#notificationIcon {
+  .plus-icon {
+    margin-top: -0.5px;
   }
 
-  &:focus, &:active, &:hover {
-    background-color: #F2F0EF !important;
-  }
+  .notification-button {
+    width: 36px !important;
+    height: 36px !important;
 
-  span:first-child {
-    margin: 0px !important;
-  }
-}
+    &:focus,
+    &:active {
+      box-shadow: inset 0 0 0 2px #00262B !important;
+    }
 
-.notification-lg-bell-icon {
-  width: 56px !important;
-  height: 56px !important;
+    &:focus,
+    &:active,
+    &:hover {
+      background-color: #F2F0EF !important;
+    }
 
-  span:first-child {
-    width: 32px !important;
-    height: 32px !important;
+    span:first-child {
+      margin: 0px !important;
+    }
   }
-}
 
-.notification-button.btn-icon-light-active {
-    background-color: #F2F0EF !important;
-}
+  .notification-lg-bell-icon {
+    width: 56px !important;
+    height: 56px !important;
 
-.notification-icon {
-  height: 23.33px !important;
-  width: 23.33px !important;
-  z-index: 1;
-}
+    span:first-child {
+      width: 32px !important;
+      height: 32px !important;
+    }
+  }
 
-.notification-badge {
-  position: absolute;
-  border: 2px solid #FFFFFF;
-  font-size: 11px !important;
-  font-weight: 500 !important;
-  font-variant-numeric: lining-nums tabular-nums;
-  background: var(--text-on-light-brand-500, #D23228) !important;
-  line-height: 20px !important;
-  padding: 4px !important;
-  padding-left: 4px !important;
-  margin-left: -21px;
-}
+  .notification-button.btn-icon-light-active {
+    background-color: #F2F0EF !important;
+  }
 
-@supports (-webkit-backdrop-filter: blur(1px)) {
   .notification-badge {
-    margin-left: -17px;
+    position: absolute;
+    border: 2px solid #FFFFFF;
+    font-size: 11px !important;
+    font-weight: 500 !important;
+    font-variant-numeric: lining-nums tabular-nums;
+    background: var(--text-on-light-brand-500, #D23228) !important;
+    line-height: 20px !important;
+    padding: 4px !important;
+    padding-left: 3px !important;
+    margin-left: -21px;
   }
-}
 
-.notification-end-title {
-  font-weight: 500 !important;
-  color: #00262B !important;
-  margin-top: 20px !important;
-}
-
-.line-height-normal {
-  line-height: normal;
-}
-
-.notification-badge-unrounded {
-  margin-top: 4px !important;
-  min-width: 23px !important;
-  height: 16px;
-  min-height: 16px !important;
-  border-radius: 54px !important;
-}
+  .notification-badge-unrounded {
+    margin-top: 4px !important;
+    min-width: 23px !important;
+    height: 16px;
+    min-height: 16px !important;
+    border-radius: 54px !important;
+  }
 
-.notification-badge-rounded {
-  border-radius: 50%;
-  margin-top: 1px;
-  height: 20px;
-  min-height: 20px !important;
-  width: 20px !important;
-  min-width: 20px !important;
+  .notification-badge-rounded {
+    border-radius: 50%;
+    margin-top: 1px;
+    height: 20px;
+    min-height: 20px !important;
+    width: 20px !important;
+    min-width: 20px !important;
+  }
 }
 
-.popover {
+#notificationTray {
   filter: none;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);
   margin-left: 5px !important;
   margin-top: 7px !important;
 
-  .popover-header{
+  .popover-header {
     top: 0px;
   }
 
-  .tabs{
+  .tabs {
     top: 72px;
   }
 
@@ -173,6 +102,18 @@
     min-width: 34.313rem;
   }
 
+  &.popover-margin-top {
+    margin-top: -68px !important;
+  }
+
+  &.height-100vh {
+    height: 100vh;
+  }
+
+  &.height-91vh {
+    height: 91vh;
+  }
+
   .dropdown-toggle::after {
     display: none;
   }
@@ -229,21 +170,78 @@
     transform: rotate(270deg) !important;
     top: 50% !important;
   }
-}
 
+  .height-inherit {
+    height: inherit;
+  }
 
-.popover-margin-top {
-  margin-top: -68px !important;
-}
+  .line-height-normal {
+    line-height: normal;
+  }
 
-.height-inherit {
-  height: inherit;
-}
+  .notification-end-title {
+    font-weight: 500 !important;
+    color: #00262B !important;
+    margin-top: 20px !important;
+  }
 
-.height-100vh {
-  height: 100vh
-}
+  .notification-icon {
+    height: 23.33px !important;
+    width: 23.33px !important;
+    z-index: 1;
+  }
 
-.height-91vh {
-  height: 91vh
+  .icon-size-56 {
+    width: 56px !important;
+    height: 56px !important;
+  }
+
+  .icon-size-20 {
+    width: 20px !important;
+    height: 20px !important;
+  }
+
+  .line-height-24 {
+    line-height: 24px;
+  }
+
+  .line-height-20 {
+    line-height: 20px;
+  }
+
+  .line-height-10 {
+    line-height: 10px !important;
+  }
+
+  .py-10px {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .pb-10px {
+    padding-bottom: 10px;
+  }
+
+  .font-size-18 {
+    font-size: 18px !important;
+  }
+
+  .font-size-12 {
+    font-size: 12px !important;
+  }
+
+  .font-size-14 {
+    font-size: 14px !important;
+  }
+
+  .font-size-22 {
+    font-size: 22px !important;
+  }
+
+  .content {
+    strong {
+      color: #00262B !important;
+      font-weight: 500 !important;
+    }
+  }
 }