ft(header-alert): add the header alert

CommonUI/src/Components/Alerts/Alert.tsx

@@ -46,7 +46,7 @@ const Alert: FunctionComponent<ComponentProps> = (
         <div className="row">
             <div className="col-xl-12">
                 <div
-                    className={`alert-label-icon label-arrow alert ${cssClass} alert-dismissible fade show`}
+                    className={`alert-label-icon label-arrow alert m-0 ${cssClass} alert-dismissible fade show`}
                     role="alert"
                 >
                     {props.onClose && (

CommonUI/src/Components/Header/HeaderAlert.tsx

@@ -0,0 +1,18 @@
+import React, { FunctionComponent, ReactElement } from 'react';
+import Alert, { ComponentProps as AlertProps } from '../Alerts/Alert';
+
+export interface ComponentProps extends AlertProps {}
+
+const Header: FunctionComponent<ComponentProps> = (
+    props: ComponentProps
+): ReactElement => {
+    return (
+        <React.Fragment>
+            <div className="d-flex align-items-center px-3">
+                <Alert {...props} />
+            </div>
+        </React.Fragment>
+    );
+};
+
+export default Header;

CommonUI/src/Styles/theme.scss

@@ -1,8 +1,8 @@
-@import "./icons.scss";
+@import './Icons.scss';
 
 // Light Theme
-@import "./bootstrap.scss";
-@import "./app.scss";
+@import './Bootstrap.scss';
+@import './App.scss';
 
 // RTL
 // @import "Custom/rtl/general-rtl";
@@ -16,173 +16,173 @@
 // @import "Custom/rtl/pages-rtl";
 
 body {
-  * {
-    outline: none !important;
-  }
+    * {
+        outline: none !important;
+    }
 }
 
 .bg-primary {
-  background-color: #000000 !important;
+    background-color: #000000 !important;
 }
 
 /* close button **/
 .close {
-  background: transparent;
-  border: 0;
-  font-size: 10px;
-  padding: 1.35rem 1.25rem;
-  background: transparent escape-svg($btn-close-bg) center / $btn-close-width
-    auto no-repeat;
-  position: absolute;
-  top: 0;
-  right: 0;
-  opacity: 0.5;
-  width: 1em;
-  height: 1em;
-  z-index: 2;
-  span {
-    display: none;
-  }
+    background: transparent;
+    border: 0;
+    font-size: 10px;
+    padding: 1.35rem 1.25rem;
+    background: transparent escape-svg($btn-close-bg) center / $btn-close-width
+        auto no-repeat;
+    position: absolute;
+    top: 0;
+    right: 0;
+    opacity: 0.5;
+    width: 1em;
+    height: 1em;
+    z-index: 2;
+    span {
+        display: none;
+    }
 }
 
 /* drawer */
 .react-drawer-drawer {
-  z-index: 9999;
-  background: #fff;
+    z-index: 9999;
+    background: #fff;
 }
 .drawer-main-menu {
-  padding-top: 8px;
-  padding-bottom: 8px;
+    padding-top: 8px;
+    padding-bottom: 8px;
 }
 .drawer-menu a i {
-  min-width: 2rem;
-  display: inline-block;
-  min-width: 1.75rem;
-  padding-bottom: 0.125em;
-  font-size: 1.25rem;
-  line-height: 1.40625rem;
-  vertical-align: middle;
-  color: #7f8387;
-  transition: all 0.4s;
+    min-width: 2rem;
+    display: inline-block;
+    min-width: 1.75rem;
+    padding-bottom: 0.125em;
+    font-size: 1.25rem;
+    line-height: 1.40625rem;
+    vertical-align: middle;
+    color: #7f8387;
+    transition: all 0.4s;
 }
 .drawer-menu a {
-  display: block;
-  padding: 0.625rem 1.5rem;
-  color: #545a6d;
-  position: relative;
-  font-size: 13px;
-  transition: all 0.4s;
+    display: block;
+    padding: 0.625rem 1.5rem;
+    color: #545a6d;
+    position: relative;
+    font-size: 13px;
+    transition: all 0.4s;
 }
 .drawer-close {
-  padding: 0.5rem 0.5rem;
-  margin: -0.5rem -0.5rem -0.5rem auto;
+    padding: 0.5rem 0.5rem;
+    margin: -0.5rem -0.5rem -0.5rem auto;
 }
 .ReactModal__Overlay {
-  z-index: 5000 !important;
+    z-index: 5000 !important;
 }
 .rangeslider__handle:focus {
-  outline: none;
+    outline: none;
 }
 // React Table next css
 .react-bootstrap-table-page-btns-ul {
-  float: right !important;
+    float: right !important;
 }
 .search-label {
-  float: right;
+    float: right;
 }
 .react-drawer-overlay {
-  z-index: 9999;
+    z-index: 9999;
 }
 
 /* rating**/
 .rating-container {
-  background-color: transparent !important;
+    background-color: transparent !important;
 }
 
 /* form editor **/
 .rdw-editor-main {
-  border: 1px solid $gray-300;
-  height: 239px;
-  padding-left: 15px;
+    border: 1px solid $gray-300;
+    height: 239px;
+    padding-left: 15px;
 }
 .dz-message {
-  text-align: center;
-  padding: 30px;
+    text-align: center;
+    padding: 30px;
 }
 
 .search-box .search-icon-search {
-  font-size: 16px !important;
-  position: absolute !important;
-  left: 13px !important;
-  top: 0 !important;
-  line-height: 38px !important;
+    font-size: 16px !important;
+    position: absolute !important;
+    left: 13px !important;
+    top: 0 !important;
+    line-height: 38px !important;
 }
 
 //Two verification Page
 .verification {
-  input {
-    &:focus {
-      border: none;
-      outline: none !important;
+    input {
+        &:focus {
+            border: none;
+            outline: none !important;
+        }
     }
-  }
 }
 
 @media (max-width: 768px) {
-  .verification {
-    input {
-      width: 30px !important;
+    .verification {
+        input {
+            width: 30px !important;
+        }
     }
-  }
 }
 
 @media (max-width: 320px) {
-  .verification {
-    input {
-      width: 30px !important;
-      height: 30px !important;
-      font-size: 15px !important;
+    .verification {
+        input {
+            width: 30px !important;
+            height: 30px !important;
+            font-size: 15px !important;
+        }
     }
-  }
 }
 
 .rangeslider-horizontal .rangeslider__fill {
-  background-color: #000000 !important;
+    background-color: #000000 !important;
 }
 .preview-thumbsnav {
-  display: flex !important;
-  list-style-type: none;
+    display: flex !important;
+    list-style-type: none;
 }
 .flatpickr-current-month .flatpickr-monthDropdown-months,
 .flatpickr-months .flatpickr-month,
 .flatpickr-weekdays,
 span.flatpickr-weekday {
-  background: #000000 !important;
+    background: #000000 !important;
 }
 .flatpickr-calendar.arrowBottom:after {
-  border-top-color: #000000 !important;
+    border-top-color: #000000 !important;
 }
 .flatpickr-calendar.arrowTop:after {
-  border-bottom-color: #000000 !important;
+    border-bottom-color: #000000 !important;
 }
 
 // Flatepicker
 .flatpickr-months,
 .flatpickr-weekdays,
 .flatpickr-monthDropdown-months {
-  background-color: #42a5f5 !important;
+    background-color: #42a5f5 !important;
 }
 .flatpickr-current-month .flatpickr-monthDropdown-months,
 .flatpickr-months .flatpickr-month,
 .flatpickr-weekdays,
 span.flatpickr-weekday {
-  background-color: #42a5f5 !important;
+    background-color: #42a5f5 !important;
 }
 
 .search-box .search-icon {
-  font-size: 16px;
-  position: absolute;
-  left: 13px;
-  top: 0;
-  line-height: 38px !important;
+    font-size: 16px;
+    position: absolute;
+    left: 13px;
+    top: 0;
+    line-height: 38px !important;
 }

Dashboard/src/Components/Header/Header.tsx

@@ -4,6 +4,8 @@ import Notifications from './Notifications';
 import Help from './Help';
 import UserProfile from './UserProfile';
 import ProjectPicker from 'CommonUI/src/Components/Header/ProjectPicker/ProjectPicker';
+import HeaderAlert from 'CommonUI/src/Components/Header/HeaderAlert';
+import { AlertType } from 'CommonUI/src/Components/Alerts/Alert';
 // import ObjectID from 'Common/Types/ObjectID';
 
 import Header from 'CommonUI/src/Components/Header/Header';
@@ -17,6 +19,10 @@ const DashboardHeader: FunctionComponent = (): ReactElement => {
                         key={1}
                         //onChange={(_value: ObjectID) => {}}
                     />
+                    <HeaderAlert
+                        title="Action required"
+                        type={AlertType.DANGER}
+                    />
                     <SearchBox key={2} onChange={(_value: string) => {}} />
                 </>
             }