diff --git a/CommonUI/src/Components/Alerts/Alert.tsx b/CommonUI/src/Components/Alerts/Alert.tsx index cc4920af77..0e38cbe14e 100644 --- a/CommonUI/src/Components/Alerts/Alert.tsx +++ b/CommonUI/src/Components/Alerts/Alert.tsx @@ -46,7 +46,7 @@ const Alert: FunctionComponent = (
{props.onClose && ( diff --git a/CommonUI/src/Components/Header/HeaderAlert.tsx b/CommonUI/src/Components/Header/HeaderAlert.tsx new file mode 100644 index 0000000000..7bfdad5ac4 --- /dev/null +++ b/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 = ( + props: ComponentProps +): ReactElement => { + return ( + +
+ +
+
+ ); +}; + +export default Header; diff --git a/CommonUI/src/Styles/theme.scss b/CommonUI/src/Styles/theme.scss index 2942baefd9..8e58c4bcc3 100644 --- a/CommonUI/src/Styles/theme.scss +++ b/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; } diff --git a/Dashboard/src/Components/Header/Header.tsx b/Dashboard/src/Components/Header/Header.tsx index a0b7518607..39dfff0076 100644 --- a/Dashboard/src/Components/Header/Header.tsx +++ b/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) => {}} /> + {}} /> }