26 | {children}
27 |
34 |
35 | );
36 | }
37 |
38 | export default Chip;
39 |
--------------------------------------------------------------------------------
/src/root/components/Chip/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .chip {
4 | display: flex;
5 | align-items: center;
6 | gap: $spacing*0.75;
7 | border: $base-border-width solid $base-border-color;
8 | padding: $spacing*0.25 $spacing * 0.75;
9 | border-radius: $base-border-radius;
10 | background-color: $grey-mist;
11 | font-size: $font-size-sm;
12 | color: $color-text-light;
13 | }
14 |
--------------------------------------------------------------------------------
/src/root/components/ConfirmButton/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .confirmation-modal {
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 |
8 | .inner-container {
9 | width: 24rem;
10 | min-height: 10rem;
11 | background-color: $white;
12 | border-radius: $base-border-radius;
13 |
14 | .content {
15 | padding: $spacing!important;
16 | }
17 |
18 | .actions {
19 | display: flex;
20 | gap: $spacing;
21 | padding: $spacing;
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/root/components/DREFFileImport/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import GoFileInput, { Props as GoFileInputProps } from '../GoFileInput';
4 |
5 | type Props
19 | { children }
20 |
21 | );
22 | }
23 |
24 | export default Description;
25 |
--------------------------------------------------------------------------------
/src/root/components/Description/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .description {
4 | color: $color-text-light;
5 | }
6 |
--------------------------------------------------------------------------------
/src/root/components/DrefPdfDocument/PageNumberPdf/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Image, Text, View } from '@react-pdf/renderer';
3 |
4 | import pdfStyles from '#utils/pdf/pdfStyles';
5 |
6 | const logoUrl = '/assets/graphics/layout/go-pdf-footer.png';
7 | function PageNumberPdf() {
8 | return (
9 | 22 | {strings.emptyMessage} 23 |
24 |25 | {strings.emptyMessageHelpText} 26 |
27 |
25 | {bannerDescription}
26 |
27 | );
28 | }
29 |
30 | export default EnvironmentBanner;
31 |
--------------------------------------------------------------------------------
/src/root/components/EnvironmentBanner/styles.module.scss:
--------------------------------------------------------------------------------
1 | .environment-banner {
2 | text-transform: uppercase;
3 | }
4 |
--------------------------------------------------------------------------------
/src/root/components/ExpandableContainer/styles.module.scss:
--------------------------------------------------------------------------------
1 | .expandable-container {
2 | .header {
3 | cursor: pointer;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/root/components/ExportableView/ExportButton.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import exportContext from './exportContext';
4 |
5 | function ExportButton(p) {
6 | const { startExport } = React.useContext(exportContext);
7 |
8 | const handleExportButtonClick = React.useCallback(() => {
9 | startExport();
10 | }, [startExport]);
11 |
12 | const {
13 | className,
14 | children = 'Export',
15 | } = p;
16 |
17 | return (
18 |
24 | );
25 | }
26 |
27 | export default ExportButton;
28 |
--------------------------------------------------------------------------------
/src/root/components/ExportableView/ExportContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import _cs from 'classnames';
3 |
4 | import exportContext from './exportContext';
5 |
6 | function ExportContainer(p) {
7 | const {
8 | setContainerRef,
9 | isExporting,
10 | } = React.useContext(exportContext);
11 | const containerRef = React.useRef();
12 |
13 | React.useEffect(() => {
14 | setContainerRef(containerRef);
15 | }, [setContainerRef, containerRef]);
16 |
17 | const {
18 | className,
19 | exportClassName,
20 | children,
21 | } = p;
22 |
23 | return (
24 |
31 | { children }
32 |
33 | );
34 | }
35 |
36 | export default ExportContainer;
37 |
--------------------------------------------------------------------------------
/src/root/components/ExportableView/ExportFooter.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import _cs from 'classnames';
3 |
4 | import Translate from '#components/Translate';
5 |
6 | import ExportOnlyContent from './ExportOnlyContent';
7 | import styles from './styles.module.scss';
8 |
9 | function ExportHeader (p) {
10 | const {
11 | className,
12 | mode,
13 | children,
14 | } = p;
15 |
16 | return (
17 |
32 | { children }
33 |
34 | );
35 | }
36 |
37 | export default InputLabel;
38 |
--------------------------------------------------------------------------------
/src/root/components/InputLabel/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .input-label {
4 | color: $color-input-label;
5 | padding: 0 $spacing;
6 | }
7 |
--------------------------------------------------------------------------------
/src/root/components/Link/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .link {
4 | text-decoration: underline;
5 |
6 | &.table {
7 | font-weight: $base-font-medium;
8 | }
9 | &:hover {
10 | color: $primary-color;
11 | opacity: 1;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/root/components/ListView/Message/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .message {
4 | color: $primary-color;
5 | }
--------------------------------------------------------------------------------
/src/root/components/MapTooltipContent/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .map-tooltip-content {
4 | border: $base-border-width solid $base-border-color;
5 | width: 100%;
6 | height: 100%;
7 | overflow: auto;
8 | display: flex;
9 | flex-direction: column;
10 |
11 | .header {
12 | flex-shrink: 0;
13 | padding: $spacing*0.5 $spacing*3*0.125;
14 | border-bottom: $base-border-width solid $base-border-color;
15 |
16 | .normal-title {
17 | padding: 0 $spacing*0.5;
18 | }
19 | }
20 |
21 | .content {
22 | flex-grow: 1;
23 | padding: $spacing*0.25;
24 | overflow: auto;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/root/components/NewGlobalLoading/styles.module.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFRCGo/go-frontend/88eaf132b59b01f56891e4fece048c9809ad2ab5/src/root/components/NewGlobalLoading/styles.module.scss
--------------------------------------------------------------------------------
/src/root/components/NonFieldError/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .non-field-error {
4 | color: $danger-color;
5 | font-weight: $base-font-bold;
6 | padding: $spacing*0.5;
7 |
8 | animation: flash $duration-animation-fast 5 ease-in-out;
9 | animation-delay: $duration-animation-medium;
10 | }
11 |
12 | @keyframes flash {
13 | 0% {
14 | opacity: 1;
15 | }
16 | 50% {
17 | opacity: 0.7;
18 | }
19 | 100% {
20 | opacity: 1;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/root/components/NumberInput/styles.module.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFRCGo/go-frontend/88eaf132b59b01f56891e4fece048c9809ad2ab5/src/root/components/NumberInput/styles.module.scss
--------------------------------------------------------------------------------
/src/root/components/NumberOutput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .number-output {
4 | display: flex;
5 | font-family: $base-font-family;
6 | font-size: inherit;
7 |
8 | .prefix,
9 | .sign,
10 | .number,
11 | .normalization-suffix,
12 | .suffix {
13 | white-space: nowrap;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/root/components/Page/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .page {
4 | position: relative;
5 |
6 | .main-section {
7 | padding: $spacing*2 0;
8 | }
9 |
10 | &.with-main-content-background {
11 | .page-header {
12 | background-color: $color-background;
13 | }
14 |
15 | .main-section {
16 | background-color: $color-foreground;
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/root/components/PageHeader/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .page-header {
4 | display: flex;
5 | flex-direction: column;
6 | gap: $spacing;
7 | padding: $spacing*2 0;
8 |
9 | .container {
10 | --header-padding: 0;
11 | padding-top: 0;
12 |
13 | .main-content {
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | gap: $spacing*2;
18 |
19 | padding: $spacing*6 $spacing*2 $spacing*3 $spacing*2;
20 |
21 | .heading {
22 | text-align: center;
23 | }
24 |
25 | .description {
26 | text-align: center;
27 | max-width: 48rem;
28 | }
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/root/components/Pager/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .pager {
4 | .page-list {
5 | display: flex;
6 | align-items: center;
7 |
8 | .page-button {
9 | display: flex;
10 | align-items: center;
11 | justify-content: center;
12 | width: 2.2em;
13 | height: 2.2em;
14 |
15 | &.active {
16 | background-color: $primary-color;
17 | color: $color-text-on-dark;
18 | border-radius: 50%;
19 | }
20 |
21 | &:disabled {
22 | opacity: $opacity-disabled-element;
23 | }
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/root/components/PdfTextOutput/pdfStyles.ts:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from "@react-pdf/renderer";
2 | import * as styles from '#utils/pdf/pdfVariables';
3 |
4 | const pdfStyles = StyleSheet.create({
5 |
6 | oneByThree: {
7 | width: '33.33%',
8 | },
9 | twoByThree: {
10 | width: '66.66%',
11 | },
12 | threeByThree: {
13 | width: '99.99%',
14 | },
15 | oneByTwo: {
16 | width: '50%',
17 | },
18 | textOutput: {
19 | backgroundColor: styles.COLOR_BACKGROUND,
20 | margin: 1,
21 | padding: styles.TABLE_CELL_PADDING,
22 | },
23 |
24 | textOutputLabel: {
25 | fontFamily: 'OpenSans',
26 | fontWeight: 'medium',
27 | },
28 |
29 | textOutputValue: {
30 | fontFamily: 'OpenSans',
31 | fontWeight: 'extrabold',
32 | },
33 | });
34 |
35 | export default pdfStyles;
36 |
--------------------------------------------------------------------------------
/src/root/components/ProgressBar/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .progress {
4 | width: 8rem;
5 |
6 | .progress-label {
7 | display: flex;
8 | justify-content: center;
9 | }
10 |
11 | .progress-bar {
12 | background-color: $grey-titanium;
13 | height: 0.25rem;
14 |
15 | .progress-done {
16 | background: $primary-color;
17 | height: 100%;
18 | opacity: 1;
19 | }
20 | }
21 | }
22 | .progress-label-bar {
23 | width: 10rem;
24 | }
25 |
--------------------------------------------------------------------------------
/src/root/components/RadioInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .radio-input {
4 | position: relative;
5 |
6 | .radio-list-container {
7 | display: flex;
8 | flex-wrap: wrap;
9 | gap: $spacing;
10 | }
11 |
12 | &.disabled {
13 | opacity: $opacity-disabled-element;
14 | filter: saturate(50%);
15 | }
16 |
17 | .clear-button {
18 | position: absolute;
19 | inset-inline-end: 0;
20 | inset-block-start: 0;
21 | background-color: transparent;
22 | border: 0;
23 | cursor: pointer;
24 | transition: $duration-transition-medium opacity ease-in-out;
25 | opacity: 0;
26 | }
27 |
28 | &:hover {
29 | .clear-button {
30 | z-index: 1;
31 | opacity: 1;
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/root/components/RawButton/styles.module.scss:
--------------------------------------------------------------------------------
1 | .raw-button {
2 | position: relative;
3 | outline: none;
4 | border: 0;
5 | background-color: transparent;
6 | cursor: pointer;
7 | padding: 0;
8 | color: inherit;
9 | font-family: inherit;
10 | font-size: inherit;
11 | }
12 |
--------------------------------------------------------------------------------
/src/root/components/RawInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .raw-input {
4 | margin: unset;
5 | outline: unset;
6 | border: unset;
7 | padding: unset;
8 | width: 100%;
9 | color: inherit;
10 | background-color: unset;
11 | font-family: inherit;
12 | font-weight: inherit;
13 | font-size: inherit;
14 | }
15 |
--------------------------------------------------------------------------------
/src/root/components/RawTextArea/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .raw-input {
4 | margin: 0;
5 | outline: 0;
6 | border: 0;
7 | background-color: transparent;
8 | padding: 0;
9 | width: 100%;
10 | color: inherit;
11 | font-family: inherit;
12 | font-size: inherit;
13 | }
14 |
--------------------------------------------------------------------------------
/src/root/components/ReducedListDisplay/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .reduced-list-label {
4 | text-decoration: underline;
5 | font-weight: $base-font-medium;
6 | color: $secondary-color;
7 | padding: 0;
8 |
9 | &:hover, &:focus {
10 | color: $primary-color;
11 | opacity: 1;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/root/components/RegionOutput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .region-output {
4 | display: flex;
5 | flex-direction: column;
6 | padding: $spacing;
7 | gap: $spacing;
8 |
9 | .district {
10 | .district-label {
11 | font-weight: $font-weight-medium;
12 | }
13 |
14 | .admin-two-list {
15 | font-size: $font-size-sm;
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/root/components/RichTextArea/styles.module.scss:
--------------------------------------------------------------------------------
1 | .rich-text-area {
2 | position: relative;
3 | z-index: 0;
4 |
5 | :global {
6 | .tox-tinymce {
7 | border: unset;
8 |
9 | .tox-editor-container {
10 | .tox-editor-header {
11 | .tox-toolbar-overlord {
12 | .tox-toolbar__primary {
13 | background-color: unset;
14 | background: unset;
15 | }
16 | }
17 | }
18 |
19 | .tox-edit-area__iframe {
20 | background-color: unset;
21 | }
22 | }
23 |
24 | .tox-statusbar {
25 | background-color: unset;
26 | }
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/root/components/RichTextOutput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .rich-text-output {
4 | p {
5 | margin: $spacing*0.5 0;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/root/components/RiskImminentEventMap/ADAMEventMap/Sidebar/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .sidebar {
4 | .event-list {
5 | margin: $spacing*0.5 0;
6 | display: flex;
7 | flex-direction: column;
8 | gap: $spacing*0.25;
9 |
10 | scrollbar-gutter: stable;
11 | overflow-y: hidden;
12 | display: flex;
13 | flex-direction: column;
14 |
15 | &:hover {
16 | overflow-y: auto;
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/root/components/RiskImminentEventMap/GDACSEventMap/Sidebar/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .sidebar {
4 | .event-list {
5 | margin: $spacing*0.5 0;
6 | display: flex;
7 | flex-direction: column;
8 | gap: $spacing*0.25;
9 |
10 | scrollbar-gutter: stable;
11 | overflow-y: hidden;
12 | display: flex;
13 | flex-direction: column;
14 |
15 | &:hover {
16 | overflow-y: auto;
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/root/components/RiskImminentEventMap/MeteoSwissEvent/Sidebar/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .sidebar {
4 | --overflow: auto;
5 |
6 | .event-list {
7 | padding: 0 $spacing*0.5!important;
8 | margin: $spacing*0.5 0;
9 | display: flex;
10 | flex-direction: column;
11 | gap: $spacing*0.25;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/root/components/RiskImminentEventMap/PDCEventMap/Sidebar/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .sidebar {
4 | .event-list {
5 | margin: $spacing*0.5 0;
6 | display: flex;
7 | flex-direction: column;
8 | gap: $spacing*0.25;
9 |
10 | scrollbar-gutter: stable;
11 | overflow-y: hidden;
12 | display: flex;
13 | flex-direction: column;
14 |
15 | &:hover {
16 | overflow-y: auto;
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/root/components/SegmentInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @use "sass:math";
2 |
3 | @import '~styles/settings/_variables.scss';
4 |
5 | .segment-input {
6 | width: fit-content;
7 |
8 | .list {
9 | gap: 0;
10 | background-color: $color-background;
11 | width: fit-content;
12 | border: $base-border-width solid $base-border-color--light;
13 | border-radius: calc(#{$spacing} + 1em);
14 | padding: 0;
15 | }
16 |
17 | .segment {
18 | border-color: transparent;
19 | padding: math.div($spacing*1, 3) $spacing*2;
20 |
21 | &.active {
22 | background-color: $primary-color;
23 | color: $color-text-on-dark;
24 | }
25 | }
26 |
27 | &.secondary-variant {
28 | .segment {
29 | &.active {
30 | background-color: $secondary-color;
31 | color: $color-text-on-dark;
32 | }
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/root/components/Svg/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .svg-container {
4 | .svg {
5 | width: 100%;
6 | height: 100%;
7 | color: inherit;
8 |
9 | path {
10 | color: inherit;
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/root/components/Switch/SwitchIcon/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { _cs } from '@togglecorp/fujs';
3 |
4 | import styles from './styles.module.scss';
5 |
6 | export interface SwitchIconProps {
7 | className?: string;
8 | value?: boolean | null;
9 | }
10 |
11 | function SwitchIcon(props: SwitchIconProps) {
12 | const {
13 | className,
14 | value,
15 | } = props;
16 |
17 | return (
18 |
25 |
26 |
27 | );
28 | }
29 |
30 | export default SwitchIcon;
31 |
--------------------------------------------------------------------------------
/src/root/components/Switch/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Checkbox, { Props as CheckboxProps } from '../Checkbox';
4 | import SwitchIcon from './SwitchIcon';
5 |
6 | export interface SwitchProps
23 | {value}
24 |
25 | );
26 | }
27 |
28 | export default genericMemo(Cell);
29 |
--------------------------------------------------------------------------------
/src/root/components/Table/TableData/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { _cs } from '@togglecorp/fujs';
3 |
4 | import styles from './styles.module.scss';
5 |
6 | export interface Props extends Omit
30 |
31 | );
32 | }
33 |
34 | export default WikiLink;
35 |
--------------------------------------------------------------------------------
/src/root/components/WikiLink/styles.module.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFRCGo/go-frontend/88eaf132b59b01f56891e4fece048c9809ad2ab5/src/root/components/WikiLink/styles.module.scss
--------------------------------------------------------------------------------
/src/root/components/backdrop.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Portal from './portal';
3 | import _cs from 'classnames';
4 |
5 | function Backdrop (p) {
6 | React.useEffect(() => {
7 | const html = document.getElementsByTagName('html')[0];
8 | const prevValue = html.style.overflow;
9 | html.style.overflow = 'hidden';
10 |
11 | return () => {
12 | html.style.overflow = prevValue;
13 | };
14 | }, []);
15 |
16 | return (
17 |
19 | { p.children }
20 |
21 |
11 |
13 | );
14 | }
15 |
16 | export default BlockLoading;
17 |
--------------------------------------------------------------------------------
/src/root/components/common/fullscreen-header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PropTypes as T } from 'prop-types';
3 | import { environment } from '#config';
4 |
5 | const FullScreenHeader = ({ title }) => (
6 |
7 |
18 | );
19 |
20 | export default FullScreenHeader;
21 |
22 | if (environment !== 'production') {
23 | FullScreenHeader.propTypes = {
24 | title: T.string
25 | };
26 | }
27 |
--------------------------------------------------------------------------------
/src/root/components/connected/styles.module.scss:
--------------------------------------------------------------------------------
1 | .fold-header {
2 | :global {
3 | .fold__header__block {
4 | display: flex;
5 | flex-grow: 1;
6 |
7 | h2 {
8 | flex-grow: 1;
9 | }
10 | }
11 |
12 | }
13 |
14 | .export-button {
15 | flex-shrink: 0;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/root/components/error-panel.js:
--------------------------------------------------------------------------------
1 |
2 | import React from 'react';
3 | import { PropTypes as T } from 'prop-types';
4 | import { environment } from '#config';
5 |
6 | import Fold from './fold';
7 |
8 | const ErrorPanel = props => {
9 | return (
10 |
8 | 
13 |
14 |
13 | 15 | {title} 16 |
17 |
25 | { dateString }
26 |
27 | );
28 | };
29 |
30 | export default FormattedDate;
31 |
--------------------------------------------------------------------------------
/src/root/components/map/common/map-footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Translate from '#components/Translate';
3 |
4 | const MapFooter = () => (
5 |
23 | );
24 |
25 | export default MapFooter;
26 |
--------------------------------------------------------------------------------
/src/root/components/map/common/map-header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { formatDate } from '#utils/format';
3 |
4 | const MapHeader = (props) => (
5 |
6 | {props.downloadedHeaderTitle}
7 | ({formatDate(new Date())})
8 |
12 | );
13 |
14 | export default MapHeader;
15 |
--------------------------------------------------------------------------------
/src/root/components/map/home-map/filtering/comparator/appeal-type-comparator.js:
--------------------------------------------------------------------------------
1 |
2 | export const AppealTypeComparator = (atype) => {
3 | return atype.target.value !== 'all'
4 | ? emergency => emergency.atype.toString() === atype.target.value.toString()
5 | : () => true;
6 | };
7 |
--------------------------------------------------------------------------------
/src/root/components/map/home-map/filtering/comparator/date-comparator.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The date comparator for emergencies looks at a window of emergency start dates.
3 | * Emergency end dates do exist but are assigned to arbitrary dates in the future so
4 | * they are rarely useful to users seraching for emergencies by date.
5 | * @param {object} dates Contains a start_date and end_date specified by the user
6 | */
7 | export const DateComparator = (dates) => {
8 | return dates.startDate && dates.endDate
9 | ? emergency => emergency.start_date >= dates.startDate && emergency.start_date <= dates.endDate : () => true;
10 | };
11 |
--------------------------------------------------------------------------------
/src/root/components/map/home-map/filtering/comparator/emergency-type-comparator.js:
--------------------------------------------------------------------------------
1 |
2 | export const EmergencyTypeComparator = (emergencyTypeId) => {
3 | return emergencyTypeId > 0
4 | ? emergency => emergency.dtype.toString() === emergencyTypeId.toString()
5 | : () => true;
6 | };
7 |
--------------------------------------------------------------------------------
/src/root/components/map/home-map/filtering/filtering-processor.js:
--------------------------------------------------------------------------------
1 |
2 | import { aggregateAppealStats } from '#utils/utils';
3 |
4 | export function filtering (geoJSON, comparator) {
5 | const features = geoJSON.features.map(d => {
6 | const appeals = d.properties.appeals.filter(comparator);
7 | const properties = Object.assign(aggregateAppealStats(appeals), {
8 | atype: d.properties.atype,
9 | id: d.properties.id,
10 | name: d.properties.name,
11 | iso: d.properties.iso,
12 | appeals: appeals
13 | });
14 | return {
15 | geometry: d.geometry,
16 | properties
17 | };
18 | }).filter(feature => feature.properties.appeals.length > 0);
19 | return { type: 'FeatureCollection', features };
20 | }
21 |
--------------------------------------------------------------------------------
/src/root/components/per-forms/factory/request-factory.js:
--------------------------------------------------------------------------------
1 | export default class RequestFactory {
2 | // TODO: remove this after it's not used anywhere
3 | numAnswerToString (answer) {
4 | if (answer === 0) {
5 | return 'no';
6 | } else if (answer === 1) {
7 | return 'yes';
8 | } else if (answer === 2) {
9 | return 'Not Reviewed';
10 | } else if (answer === 3) {
11 | return 'Does not exist';
12 | } else if (answer === 4) {
13 | return 'Partially exists';
14 | } else if (answer === 5) {
15 | return 'Need improvements';
16 | } else if (answer === 6) {
17 | return 'Exist, could be strengthened';
18 | } else if (answer === 7) {
19 | return 'High performance';
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/root/components/pills.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PropTypes as T } from 'prop-types';
3 | import { environment } from '#config';
4 |
5 | class Pills extends React.Component {
6 | render () {
7 | return (
8 |
9 |
10 |
11 |
10 |
9 | {
10 | this.props.links.map(link => {
11 | return (
12 |
21 | );
22 | }
23 | }
24 |
25 | if (environment !== 'production') {
26 | Pills.propTypes = {
27 | links: T.array
28 | };
29 | }
30 |
31 | export default Pills;
32 |
--------------------------------------------------------------------------------
/src/root/components/portal.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from 'react-dom';
2 |
3 | function Portal (props) {
4 | const { children } = props;
5 | return (
6 | ReactDOM.createPortal(
7 | children,
8 | document.body,
9 | )
10 | );
11 | }
12 |
13 | export default Portal;
14 |
--------------------------------------------------------------------------------
/src/root/components/preparedness/contact-per.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Translate from '#components/Translate';
3 |
4 | export default class ContactPer extends React.Component {
5 | render () {
6 | return (
7 |
13 |
14 |
17 | );
18 | })
19 | }
20 | {link.text}
15 |
16 |
8 |
9 |
17 | );
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/root/components/progress-labeled.js:
--------------------------------------------------------------------------------
1 |
2 | import React from 'react';
3 | import { PropTypes as T } from 'prop-types';
4 | import { environment } from '#config';
5 | import { round } from '#utils/format';
6 |
7 | const Progress = ({max, value}) => {
8 | value = round(value, 2);
9 | return (
10 |
12 |
*/}
16 |
13 |
11 |
15 | );
16 | };
17 |
18 | if (environment !== 'production') {
19 | Progress.propTypes = {
20 | max: T.number,
21 | value: T.number,
22 | children: T.object
23 | };
24 | }
25 |
26 | export default Progress;
27 |
--------------------------------------------------------------------------------
/src/root/components/progress.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PropTypes as T } from 'prop-types';
3 | import { environment } from '#config';
4 |
5 | const Progress = ({max, value, children, start}) => {
6 | start = start || 0;
7 | return (
8 |
12 |
14 | max ? max : value) + '%'}}>
13 |
9 |
11 | );
12 | };
13 | if (environment !== 'production') {
14 | Progress.propTypes = {
15 | max: T.number,
16 | value: T.number,
17 | children: T.object
18 | };
19 | }
20 |
21 | export default Progress;
22 |
--------------------------------------------------------------------------------
/src/root/components/spinner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { _cs } from '@togglecorp/fujs';
3 |
4 | function Spinner (props) {
5 | return (
6 | {children}
10 |
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
14 | export default Spinner;
15 |
--------------------------------------------------------------------------------
/src/root/declarations/docx4js.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'docx4js' {
2 | export interface Node {
3 | name: string;
4 | prev: Node | null;
5 | next: Node | null;
6 | children: Node[] | null;
7 | attribs?: Record
20 | All cache cleared, goto Home
21 |
22 | );
23 | }
24 |
25 | export default ClearInitCache;
26 |
--------------------------------------------------------------------------------
/src/root/views/ClearInitCache/styles.module.scss:
--------------------------------------------------------------------------------
1 | .clear-init-cache {
2 | padding: 2em;
3 | }
4 |
--------------------------------------------------------------------------------
/src/root/views/Country/CountryPlan/StrategicPrioritiesTable/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .strategic-priorities-table {
4 | .content {
5 | padding: 0!important;
6 |
7 | table {
8 | width: 100%;
9 |
10 | th {
11 | text-align: left;
12 | padding: $spacing;
13 | border-bottom: $base-border-width solid $base-border-color;
14 | background-color: $color-background;
15 | }
16 |
17 | td {
18 | padding: $spacing;
19 | border-bottom: $base-border-width solid $base-border-color;
20 | }
21 | }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/root/views/Country/RiskWatch/ImminentEvents/ImminentEventsADAM/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .loading {
4 | z-index: 1;
5 | position: absolute;
6 | left: 0;
7 | top: 0;
8 | width: 100%;
9 | height: 100%;
10 | margin: 0;
11 | background-color: rgba(255, 255, 255, 0.8);
12 | }
13 |
14 | .empty-message {
15 | position: absolute;
16 | display: flex;
17 | align-items: center;
18 | justify-content: center;
19 | top: 0;
20 | left: 0;
21 | width: 100%;
22 | height: 100%;
23 | background-color: rgba(255, 255, 255, 0.8);
24 |
25 | .text {
26 | background-color: $white;
27 | padding: $spacing*2;
28 | box-shadow: $base-box-shadow;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/root/views/Country/RiskWatch/ImminentEvents/ImminentEventsMeteoSwiss/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .empty {
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | color: $color-text-disabled;
8 | padding: $spacing;
9 | height: 16rem;
10 | font-size: $font-size-lg;
11 | font-weight: $base-font-medium;
12 | }
13 |
--------------------------------------------------------------------------------
/src/root/views/Country/RiskWatch/ImminentEvents/ImminentEventsPDC/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .empty-message {
4 | position: absolute;
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 | top: 0;
9 | left: 0;
10 | width: 100%;
11 | height: 100%;
12 | background-color: rgba(255, 255, 255, 0.8);
13 |
14 | .text {
15 | background-color: $white;
16 | padding: $spacing*2;
17 | box-shadow: $base-box-shadow;
18 | }
19 | }
20 |
21 | .loading {
22 | z-index: 1;
23 | position: absolute;
24 | left: 0;
25 | top: 0;
26 | width: 100%;
27 | height: 100%;
28 | margin: 0;
29 | background-color: rgba(255, 255, 255, 0.8);
30 | }
31 |
--------------------------------------------------------------------------------
/src/root/views/Country/RiskWatch/ImminentEvents/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .imminent-events {
4 | margin: $spacing*2 0;
5 |
6 | .map-description {
7 | display: flex;
8 | flex-direction: column;
9 | gap: $spacing;
10 | padding: $spacing 0;
11 | }
12 |
13 | .main-content {
14 | position: relative;
15 | min-height: 16rem;
16 |
17 | .map {
18 | z-index: 0;
19 | flex-grow: 1;
20 | height: 50rem;
21 | }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/root/views/Country/RiskWatch/ImminentEventsGDACS/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .loading {
4 | z-index: 1;
5 | position: absolute;
6 | left: 0;
7 | top: 0;
8 | width: 100%;
9 | height: 100%;
10 | margin: 0;
11 | background-color: rgba(255, 255, 255, 0.8);
12 | }
13 |
14 | .empty-message {
15 | position: absolute;
16 | display: flex;
17 | align-items: center;
18 | justify-content: center;
19 | top: 0;
20 | left: 0;
21 | width: 100%;
22 | height: 100%;
23 | background-color: rgba(255, 255, 255, 0.8);
24 |
25 | .text {
26 | background-color: $white;
27 | padding: $spacing*2;
28 | box-shadow: $base-box-shadow;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/root/views/Country/RiskWatch/SeasonalRisk/ReturnPeriodTable/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .return-period-table-container {
4 | .return-period-table {
5 | width: 100%;
6 | }
7 |
8 | .column-heading {
9 | display: flex;
10 | }
11 | }
12 |
13 | .container-description {
14 | display: flex;
15 | align-items: center;
16 | justify-content: space-between;
17 | padding: $spacing*0.5 0;
18 | }
19 |
20 | .filter-input {
21 | width: 14rem;
22 | }
23 |
24 | .link {
25 | color: $primary-color;
26 | }
27 |
--------------------------------------------------------------------------------
/src/root/views/Country/RiskWatch/SeasonalRisk/RiskTable/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .risk-table {
4 | width: 100%;
5 | margin: $spacing*2 0;
6 |
7 | .column-heading {
8 | display: flex;
9 | }
10 | }
11 |
12 | .return-period-table-container {
13 | margin: $spacing*2 0;
14 |
15 | .return-period-table {
16 | width: 100%;
17 | }
18 | }
19 |
20 | .container-description {
21 | display: flex;
22 | align-items: center;
23 | justify-content: space-between;
24 | }
25 |
26 | .filter-input {
27 | width: 14rem;
28 | }
29 |
30 | .link {
31 | color: $primary-color;
32 | }
33 |
--------------------------------------------------------------------------------
/src/root/views/Country/RiskWatch/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { _cs } from '@togglecorp/fujs';
3 |
4 | import Container from '#components/Container';
5 |
6 | import ImminentEvents from './ImminentEvents';
7 | import SeasonalRisk from './SeasonalRisk';
8 |
9 | import styles from './styles.module.scss';
10 |
11 | interface Props {
12 | countryId: number;
13 | className?: string;
14 | }
15 |
16 | function RiskWatch(props: Props) {
17 | const {
18 | className,
19 | countryId,
20 | } = props;
21 |
22 | return (
23 |
16 |
28 | );
29 |
30 | export default IndicatorOutput;
31 |
--------------------------------------------------------------------------------
/src/root/views/CountryProfile/common.js:
--------------------------------------------------------------------------------
1 | export const monthList = [
2 | 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
3 | ];
4 |
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/ActionsFields/NSActionInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .content {
4 | display: flex;
5 | align-items: flex-end;
6 |
7 | >* {
8 | flex-basis: 0;
9 | flex-grow: 1;
10 | }
11 |
12 | .remove-button {
13 | flex-basis: unset;
14 | flex-grow: unset;
15 | flex-shrink: 0;
16 | margin-bottom: 0.5em;
17 | padding: $spacing*0.5 $spacing;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/ActionsFields/NeedInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .content {
4 | display: flex;
5 | align-items: flex-end;
6 |
7 | >* {
8 | flex-basis: 0;
9 | flex-grow: 1;
10 | }
11 |
12 | .remove-button {
13 | flex-basis: unset;
14 | flex-grow: unset;
15 | flex-shrink: 0;
16 | margin-bottom: 0.5em;
17 | padding: $spacing*0.5 $spacing;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/ActionsFields/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .national-society-actions,
4 | .needs-identified {
5 | .actions {
6 | display: flex;
7 | align-items: flex-end;
8 | padding: $spacing*0.5;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/CaptionInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .image-input {
4 | display: flex;
5 | flex-direction: column;
6 |
7 | .caption-input {
8 | width: 100%;
9 | max-width: 12rem;
10 | padding: 0;
11 | }
12 | }
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/DrefOverview/CopyFieldReportSection/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .actions {
4 | flex-grow: unset;
5 | padding: $spacing;
6 | }
7 |
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/DrefOverview/CountryDistrictInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .country-district-input {
4 | display: flex;
5 | align-items: flex-end;
6 | gap: $spacing;
7 |
8 | >* {
9 | flex-basis: 0;
10 | flex-grow: 1;
11 | }
12 | }
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/DrefOverview/ImageWithCaptionInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .image-input {
4 | display: flex;
5 | flex-direction: column;
6 | justify-content: center;
7 | gap: $spacing;
8 |
9 | .caption-input {
10 | width: 100%;
11 | max-width: 12rem;
12 | padding: 0;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/EventDetails/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .map-input-content,
4 | .image-input-content {
5 | display: flex;
6 | flex-direction: column;
7 |
8 | .preview-list {
9 | display: flex;
10 | flex-wrap: wrap;
11 | gap: $spacing;
12 | }
13 | }
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/ObsoletePayloadResolutionModal/styles.module.scss:
--------------------------------------------------------------------------------
1 | .obsolete-payload-resolution-modal {
2 | max-width: 30rem;
3 | width: 100%;
4 | }
5 |
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/Response/IndicatorInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .indicator {
4 | display: flex;
5 | gap: $spacing ;
6 | align-items: center;
7 |
8 | .inputs {
9 | display: flex;
10 | gap: $spacing ;
11 | }
12 | }
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/Response/InterventionInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .intervention-input {
4 | display: flex;
5 | background-color: $white;
6 |
7 | .input-section {
8 | display: flex;
9 | flex-grow: 1;
10 | }
11 |
12 | .remove-button {
13 | align-self: flex-start;
14 | flex-shrink: 0;
15 | margin-right: $spacing*2;
16 | margin-top: $spacing*2;
17 | padding: $spacing*0.25;
18 | }
19 |
20 | .male-female {
21 | display: flex;
22 | gap: $spacing;
23 | }
24 |
25 | .addIndicatorContainer {
26 | display: flex;
27 | flex-direction: column;
28 | gap: $spacing*2;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/Response/RiskSecurityInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .risk-security-input {
4 | display: flex;
5 | align-items: flex-end;
6 | gap: $spacing;
7 |
8 | >* {
9 | flex-basis: 0;
10 | flex-grow: 1;
11 | }
12 |
13 | .remove-button {
14 | flex-grow: 0;
15 | flex-shrink: 0;
16 | flex-basis: unset;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/Submission/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .submission {
4 | :global {
5 | .go-input-section {
6 | margin: $spacing 0;
7 | box-shadow: $box-shadow-component;
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/root/views/DrefApplicationForm/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .new-field-report-form {
4 | padding: 0;
5 |
6 | .tab-list {
7 | justify-content: center;
8 | margin: $spacing*2 4vw;
9 | }
10 | }
11 |
12 | .actions {
13 | padding: $spacing*3 $spacing;
14 | display: flex;
15 | align-items: center;
16 | justify-content: center;
17 |
18 | >* {
19 | margin: 0 $spacing*0.5;
20 | }
21 | }
22 |
23 | .error-message {
24 | display: flex;
25 | flex-direction: column;
26 | align-items: center;
27 | text-align: center;
28 | padding: $spacing*4 $spacing*2 !important;
29 | opacity: 0.8;
30 |
31 | h3 {
32 | color: $danger-color;
33 | }
34 |
35 | p {
36 | margin: 0;
37 | }
38 | }
39 |
40 | .language-mismatch {
41 | text-align: center;
42 | }
43 |
--------------------------------------------------------------------------------
/src/root/views/DrefOpPdfPreview/styles.module.scss:
--------------------------------------------------------------------------------
1 | .pdf-preview {
2 | width: 100%;
3 | height: 100vh;
4 | }
5 |
--------------------------------------------------------------------------------
/src/root/views/DrefOperationalUpdateForm/EventDetails/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .map-input-content,
4 | .image-input-content {
5 | display: flex;
6 | flex-direction: column;
7 |
8 | .preview-list {
9 | display: flex;
10 | flex-wrap: wrap;
11 | gap: $spacing;
12 | }
13 | }
--------------------------------------------------------------------------------
/src/root/views/DrefOperationalUpdateForm/Needs/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .national-society-actions,
4 | .needs-identified {
5 | .actions {
6 | display: flex;
7 | align-items: flex-end;
8 | padding: $spacing*0.5;
9 | }
10 | }
11 |
12 | .map-input-content,
13 | .image-input-content {
14 | display: flex;
15 | flex-direction: column;
16 |
17 | .preview-list {
18 | display: flex;
19 | flex-wrap: wrap;
20 | gap: $spacing;
21 | }
22 | }
--------------------------------------------------------------------------------
/src/root/views/DrefOperationalUpdateForm/ObsoletePayloadResolutionModal/styles.module.scss:
--------------------------------------------------------------------------------
1 | .obsolete-payload-resolution-modal {
2 | max-width: 30rem;
3 | width: 100%;
4 | }
5 |
--------------------------------------------------------------------------------
/src/root/views/DrefOperationalUpdateForm/Overview/styles.module.scss:
--------------------------------------------------------------------------------
1 | .generate-title-button {
2 | flex-grow: unset!important;
3 | flex-basis: initial!important;
4 | flex-shrink: 0!important;
5 | }
6 |
--------------------------------------------------------------------------------
/src/root/views/DrefOperationalUpdateForm/Submission/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .submission {
4 | :global {
5 | .go-input-section {
6 | margin: $spacing 0;
7 | box-shadow: $box-shadow-component;
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/root/views/DrefOperationalUpdateForm/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .actions {
4 | padding: $spacing*3 $spacing;
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 |
9 | >* {
10 | margin: 0 $spacing*0.5;
11 | }
12 | }
13 |
14 | .warning {
15 | color: $warning-color;
16 | font-weight: $base-font-medium;
17 | padding: $spacing*0.5;
18 | }
19 |
20 | .language-mismatch {
21 | text-align: center;
22 | }
23 |
--------------------------------------------------------------------------------
/src/root/views/DrefPdfPreview/styles.module.scss:
--------------------------------------------------------------------------------
1 | .pdf-preview {
2 | width: 100%;
3 | height: 100vh;
4 | }
5 |
--------------------------------------------------------------------------------
/src/root/views/Emergency/Activities/Filters/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .filters {
4 | display: flex;
5 | gap: $spacing;
6 |
7 | .filter {
8 | flex-basis: 16rem;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/root/views/Emergency/Activities/StatsPie/styles.module.scss:
--------------------------------------------------------------------------------
1 | .project-stat-pie-chart {
2 | :global {
3 | .recharts-legend-item-text {
4 | color: rgba(0, 0, 0, .7)!important;
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/root/views/EmergencyThreeW/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .three-w-details {
4 | .content {
5 | padding: 0;
6 | }
7 |
8 | .last-modified {
9 | display: flex;
10 | justify-content: center;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/root/views/EmergencyThreeWEdit/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .emergency-three-w-edit {
4 | }
5 |
--------------------------------------------------------------------------------
/src/root/views/FieldReportForm/ActionsFields/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .category {
4 | padding: $spacing;
5 | font-weight: $base-font-bold;
6 | }
7 |
8 | .action-taken {
9 | margin: $spacing 0;
10 | }
11 |
12 | .actions-fields {
13 | .numeric-section {
14 | display: flex;
15 | flex-wrap: wrap;
16 | background-color: $color-foreground;
17 | box-shadow: $box-shadow-component;
18 | margin: $spacing 0;
19 |
20 | >* {
21 | flex-basis: 50%;
22 |
23 | >:first-child {
24 | flex-basis: 50%;
25 | }
26 | }
27 | }
28 |
29 | .other-section {
30 | :global {
31 | .go-input-section {
32 | margin: $spacing 0;
33 | box-shadow: $box-shadow-component;
34 | }
35 | }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/root/views/FieldReportForm/ContextFields/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .context-fields {
4 | :global {
5 | .go-input-section {
6 | margin: $spacing 0;
7 | box-shadow: $box-shadow-component;
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/root/views/FieldReportForm/EarlyActionsFields/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .early-action-fields {
4 | .numeric-section {
5 | display: flex;
6 | flex-wrap: wrap;
7 | background-color: $color-foreground;
8 | box-shadow: $box-shadow-component;
9 | margin: $spacing 0;
10 |
11 | >* {
12 | flex-basis: 50%;
13 |
14 | >:first-child {
15 | flex-basis: 50%;
16 | }
17 | }
18 | }
19 |
20 | .other-section {
21 | :global {
22 | .go-input-section {
23 | margin: $spacing 0;
24 | box-shadow: $box-shadow-component;
25 | }
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/root/views/FieldReportForm/ResponseFields/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .contacts-section {
4 | :global {
5 | .go-input-section {
6 | margin: $spacing 0;
7 | box-shadow: $box-shadow-component;
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/root/views/FieldReportForm/RiskAnalysisFields/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .risk-analysis-fields {
4 | .source-radio-list-container {
5 | flex-direction: column;
6 | }
7 |
8 | :global {
9 | .go-input-section {
10 | margin: $spacing 0;
11 | box-shadow: $box-shadow-component;
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/root/views/FieldReportForm/SituationFields/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .situation-fields {
4 | .source-radio-list-container {
5 | flex-direction: column;
6 | }
7 |
8 | :global {
9 | .go-input-section {
10 | margin: $spacing 0;
11 | box-shadow: $box-shadow-component;
12 | }
13 | }
14 | }
15 |
16 | .covid-situation-fields {
17 | .input-section-group {
18 | background-color: $color-foreground;
19 | margin: $spacing 0;
20 | box-shadow: $box-shadow-component;
21 | }
22 |
23 | .non-grouped-inputs-section {
24 | :global {
25 | .go-input-section {
26 | margin: $spacing 0;
27 | box-shadow: $box-shadow-component;
28 | }
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/root/views/FieldReportForm/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .new-field-report-form {
4 | padding: 0;
5 |
6 | .tab-list {
7 | justify-content: center;
8 | margin: $spacing*2 4vw;
9 | }
10 |
11 | .actions {
12 | padding: $spacing*3 $spacing;
13 | display: flex;
14 | align-items: center;
15 | justify-content: center;
16 |
17 | >* {
18 | margin: 0 $spacing*0.5;
19 | }
20 | }
21 |
22 | .language-mismatch {
23 | text-align: center;
24 | }
25 |
26 | .tab-content {
27 | display: flex;
28 | flex-direction: column;
29 | gap: $spacing*4;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/root/views/FinalReportForm/EventDetails/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .image-input-content {
4 | display: flex;
5 | flex-direction: column;
6 |
7 | .preview-list {
8 | display: flex;
9 | flex-wrap: wrap;
10 | gap: $spacing;
11 | }
12 | }
--------------------------------------------------------------------------------
/src/root/views/FinalReportForm/Needs/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .national-society-actions,
4 | .needs-identified {
5 | .actions {
6 | display: flex;
7 | align-items: flex-end;
8 | padding: $spacing*0.5;
9 | }
10 | }
11 |
12 | .map-input-content,
13 | .image-input-content {
14 | display: flex;
15 | flex-direction: column;
16 |
17 | .preview-list {
18 | display: flex;
19 | flex-wrap: wrap;
20 | gap: $spacing;
21 | }
22 | }
--------------------------------------------------------------------------------
/src/root/views/FinalReportForm/ObsoletePayloadResolutionModal/styles.module.scss:
--------------------------------------------------------------------------------
1 | .obsolete-payload-resolution-modal {
2 | max-width: 30rem;
3 | width: 100%;
4 | }
5 |
--------------------------------------------------------------------------------
/src/root/views/FinalReportForm/Operation/IndicatorInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .indicator {
4 | display: flex;
5 | gap: $spacing ;
6 | align-items: center;
7 |
8 | .inputs {
9 | display: flex;
10 | gap: $spacing;
11 | }
12 | }
--------------------------------------------------------------------------------
/src/root/views/FinalReportForm/Overview/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .disaster-category-help-link {
4 | display: flex;
5 | align-items: center;
6 | margin-inline-start: $spacing;
7 | font-size: 1rem;
8 | }
9 |
10 | .people-targeted-help-link {
11 | margin-inline-start: $spacing;
12 | font-size: 1rem;
13 | }
--------------------------------------------------------------------------------
/src/root/views/FinalReportForm/Submission/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .submission {
4 | :global {
5 | .go-input-section {
6 | margin: $spacing 0;
7 | box-shadow: $box-shadow-component;
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/root/views/FinalReportForm/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .actions {
4 | padding: $spacing*3 $spacing;
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 |
9 | >* {
10 | margin: 0 $spacing*0.5;
11 | }
12 | }
13 |
14 | .language-mismatch {
15 | text-align: center;
16 | }
17 |
--------------------------------------------------------------------------------
/src/root/views/FinalReportPdfPreview/styles.module.scss:
--------------------------------------------------------------------------------
1 | .pdf-preview {
2 | width: 100%;
3 | height: 100vh;
4 | }
5 |
--------------------------------------------------------------------------------
/src/root/views/FlashUpdateApplicationForm/ActionsInput/ActionInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .action-input {
4 | display: flex;
5 | flex-direction: column;
6 | gap: $spacing*2;
7 | }
8 |
--------------------------------------------------------------------------------
/src/root/views/FlashUpdateApplicationForm/Context/CountryProvinceInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .country-district-input {
4 | display: flex;
5 | align-items: flex-start;
6 | gap: $spacing;
7 |
8 | >* {
9 | flex-basis: 0;
10 | flex-grow: 1;
11 | }
12 |
13 | .remove-button {
14 | flex-basis: unset;
15 | flex-grow: unset;
16 | flex-shrink: 0;
17 | margin-top: 2rem;
18 | padding: $spacing*0.5 $spacing;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/root/views/FlashUpdateApplicationForm/Context/GraphicInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | .graphic-input {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 |
6 | .caption-input {
7 | max-width: 12rem;
8 | padding: 0;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/root/views/FlashUpdateApplicationForm/Context/MapInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | .map-input {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 |
6 | .caption-input {
7 | max-width: 12rem;
8 | padding: 0;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/root/views/FlashUpdateApplicationForm/Context/ReferenceInput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .reference {
4 | display: flex;
5 | flex-wrap: wrap;
6 |
7 | .first-column {
8 | flex-grow: 1;
9 | }
10 |
11 | .second-column {
12 | flex-basis: 16rem;
13 | flex-shrink: 0;
14 | }
15 |
16 | .actions {
17 | flex-shrink: 0;
18 | padding: $spacing;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/root/views/FlashUpdateApplicationForm/Context/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .context {
4 | .actions {
5 | justify-content: flex-end;
6 | flex-basis: unset;
7 | flex-grow: unset;
8 | padding: 0 $spacing;
9 | }
10 |
11 | .map-input-content,
12 | .graphics-input-content {
13 | display: flex;
14 | flex-direction: column;
15 |
16 | .preview-list {
17 | display: flex;
18 | flex-wrap: wrap;
19 | gap: $spacing;
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/root/views/FlashUpdateApplicationForm/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/_variables.scss';
2 |
3 | .actions {
4 | padding: $spacing*3 $spacing;
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 |
9 | >* {
10 | margin: 0 $spacing*0.5;
11 | }
12 | }
13 |
14 | .error-message {
15 | padding: $spacing*4 $spacing*2 !important;
16 | opacity: 0.7;
17 |
18 | h3 {
19 | color: $danger-color;
20 | }
21 |
22 | p {
23 | margin: 0;
24 | }
25 | }
26 |
27 | .language-mismatch {
28 | text-align: center;
29 | }
30 |
--------------------------------------------------------------------------------
/src/root/views/FlashUpdateReport/ExportButton/styles.module.scss:
--------------------------------------------------------------------------------
1 | @keyframes spin {
2 | from {
3 | transform: rotate(0deg);
4 | }
5 |
6 | to {
7 | transform: rotate(360deg);
8 | }
9 | }
10 |
11 | .export-button {
12 | .spinner {
13 | animation: spin 1s linear infinite;
14 | }
15 | }
16 |
17 |
--------------------------------------------------------------------------------
/src/root/views/FlashUpdateReport/ShareButton/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .backdrop {
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | z-index: 11;
8 |
9 | .share-modal {
10 | width: 30rem;
11 | height: 30rem;
12 | max-width: 100vw;
13 | max-height: 96vh;
14 | background-color: #fff;
15 | padding: $spacing;
16 | border-radius: .3rem;
17 |
18 | .body {
19 | position: relative;
20 | padding: $spacing*2 0;
21 | display: flex;
22 | flex-direction: column;
23 | gap: $spacing;
24 |
25 | .loading {
26 | position: absolute;
27 | left: 0;
28 | top: 0;
29 | width: 100%;
30 | height: 100%;
31 | margin: 0;
32 | border: none;
33 | z-index: 1;
34 | }
35 | }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/root/views/GlobalRiskWatch/ImminentEvents/ImminentEventsADAM/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .imminent-events {
4 | margin: $spacing*2 0;
5 |
6 | .map-description {
7 | padding: $spacing;
8 | }
9 |
10 | .main-content {
11 | position: relative;
12 | min-height: 20rem;
13 |
14 | .map {
15 | z-index: 0;
16 | flex-grow: 1;
17 | height: 50rem;
18 | }
19 | }
20 | }
21 | .empty-message {
22 | position: absolute;
23 | display: flex;
24 | align-items: center;
25 | justify-content: center;
26 | top: 0;
27 | left: 0;
28 | width: 100%;
29 | height: 100%;
30 | background-color: rgba(255, 255, 255, 0.8);
31 |
32 | .text {
33 | background-color: $white;
34 | padding: $spacing*2;
35 | box-shadow: $base-box-shadow;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/root/views/GlobalRiskWatch/ImminentEvents/ImminentEventsPDC/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .empty-message {
4 | position: absolute;
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 | top: 0;
9 | left: 0;
10 | width: 100%;
11 | height: 100%;
12 | background-color: rgba(255, 255, 255, 0.8);
13 |
14 | .text {
15 | background-color: $white;
16 | padding: $spacing*2;
17 | box-shadow: $base-box-shadow;
18 | }
19 | }
20 |
21 | .pdc-link {
22 | text-decoration: underline;
23 | }
24 |
--------------------------------------------------------------------------------
/src/root/views/GlobalRiskWatch/SeasonalRisk/Filters/FilterOutput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .filter-output {
4 | display: flex;
5 | align-items: baseline;
6 | gap: $spacing;
7 |
8 | .label {
9 | color: $light-base-color;
10 | font-size: $font-size-sm;
11 | font-weight: $base-font-light;
12 | }
13 |
14 | .selected-values {
15 | display: flex;
16 | flex-wrap: wrap;
17 | gap: $spacing*0.5;
18 |
19 | .chip {
20 | border: none;
21 | background-color: $color-filter-tag;
22 | color: $color-filter-tag-text;
23 | }
24 | }
25 |
26 | .reduced-list-details {
27 | display: flex;
28 | gap: $spacing;
29 | align-items: center;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/root/views/GlobalRiskWatch/SeasonalRisk/Filters/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .filters {
4 | display: flex;
5 | flex-direction: column;
6 | justify-content: center;
7 | gap: $spacing * 2;
8 |
9 | .inputs {
10 | display: flex;
11 | align-items: center;
12 | gap: $spacing;
13 | flex-wrap: wrap;
14 |
15 | .filter-input {
16 | width: 11.25rem;
17 | }
18 | }
19 |
20 | .outputs {
21 | display: flex;
22 | align-items: center;
23 | flex-wrap: wrap;
24 | gap: $spacing*1.5;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/root/views/GlobalRiskWatch/SeasonalRisk/Map/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import "~styles/settings/variables";
2 |
3 | .map {
4 | position: relative;
5 |
6 | .map-container {
7 | height: 40rem;
8 | }
9 |
10 | .map-disclaimer {
11 | position: absolute;
12 | left: $mapbox-icon-width + $spacing*0.5;
13 | bottom: $spacing*0.25;
14 | }
15 |
16 | :global {
17 |
18 | .mapboxgl-popup-close-button {
19 | position: absolute;
20 | right: $spacing !important;
21 | top: $spacing !important;
22 | font-size: $font-size-heading-widget !important;
23 | font-weight: $base-font-light !important;
24 | opacity: 0.6 !important;
25 | }
26 | }
27 | }
28 |
29 |
--------------------------------------------------------------------------------
/src/root/views/GlobalRiskWatch/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .regional-risk-watch {
4 | .content {
5 | display: flex;
6 | flex-direction: column;
7 | padding: $spacing*2 0;
8 | gap: $spacing*2;
9 |
10 | .tab-list {
11 | align-self: center;
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/root/views/GlobalThreeW/Filters/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .filters {
4 | display: flex;
5 | flex-wrap: wrap;
6 | gap: $spacing;
7 |
8 | >* {
9 | flex-grow: 1;
10 | flex-basis: 0;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/root/views/GlobalThreeW/common.ts:
--------------------------------------------------------------------------------
1 | export interface NSOngoingProjectStat {
2 | id: number;
3 | iso3: string;
4 | ongoing_projects: number;
5 | target_total: number;
6 | society_name: string;
7 | name: string;
8 | operation_types: number[];
9 | operation_types_display: string[];
10 | budget_amount_total: number;
11 | projects_per_sector: {
12 | primary_sector: number;
13 | primary_sector_display: string;
14 | count: number;
15 | }[];
16 | }
17 |
18 |
--------------------------------------------------------------------------------
/src/root/views/NewThreeW/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .new-three-w {
4 | .main-content {
5 | display: flex;
6 | flex-direction: column;
7 | gap: $spacing;
8 | }
9 |
10 | .three-w-program {
11 | display: flex;
12 | flex-direction: column;
13 | gap: $spacing;
14 |
15 | :global {
16 | .go-input-section {
17 | box-shadow: $box-shadow-component;
18 | }
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/root/views/RegionalRiskWatch/ImminentEvents/ImminentEventsADAM/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .imminent-events {
4 | margin: $spacing*2 0;
5 |
6 | .map-description {
7 | padding: $spacing;
8 | }
9 |
10 | .main-content {
11 | position: relative;
12 | min-height: 20rem;
13 |
14 | .map {
15 | z-index: 0;
16 | flex-grow: 1;
17 | height: 50rem;
18 | }
19 | }
20 | }
21 | .empty-message {
22 | position: absolute;
23 | display: flex;
24 | align-items: center;
25 | justify-content: center;
26 | top: 0;
27 | left: 0;
28 | width: 100%;
29 | height: 100%;
30 | background-color: rgba(255, 255, 255, 0.8);
31 |
32 | .text {
33 | background-color: $white;
34 | padding: $spacing*2;
35 | box-shadow: $base-box-shadow;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/root/views/RegionalRiskWatch/ImminentEvents/ImminentEventsGDACS/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .empty-message {
4 | position: absolute;
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 | top: 0;
9 | left: 0;
10 | width: 100%;
11 | height: 100%;
12 | background-color: rgba(255, 255, 255, 0.8);
13 |
14 | .text {
15 | background-color: $white;
16 | padding: $spacing*2;
17 | box-shadow: $base-box-shadow;
18 | }
19 | }
20 |
21 | .pdc-link {
22 | text-decoration: underline;
23 | }
--------------------------------------------------------------------------------
/src/root/views/RegionalRiskWatch/ImminentEvents/ImminentEventsMeteoSwiss/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .imminent-events {
4 | margin: $spacing*2 0;
5 |
6 | .map-description {
7 | padding: $spacing;
8 | }
9 |
10 | .main-content {
11 | position: relative;
12 | min-height: 20rem;
13 |
14 | .map {
15 | z-index: 0;
16 | flex-grow: 1;
17 | height: 50rem;
18 | }
19 | }
20 | }
21 | .empty-message {
22 | position: absolute;
23 | display: flex;
24 | align-items: center;
25 | justify-content: center;
26 | top: 0;
27 | left: 0;
28 | width: 100%;
29 | height: 100%;
30 | background-color: rgba(255, 255, 255, 0.8);
31 |
32 | .text {
33 | background-color: $white;
34 | padding: $spacing*2;
35 | box-shadow: $base-box-shadow;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/root/views/RegionalRiskWatch/ImminentEvents/ImminentEventsPDC/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .empty-message {
4 | position: absolute;
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 | top: 0;
9 | left: 0;
10 | width: 100%;
11 | height: 100%;
12 | background-color: rgba(255, 255, 255, 0.8);
13 |
14 | .text {
15 | background-color: $white;
16 | padding: $spacing*2;
17 | box-shadow: $base-box-shadow;
18 | }
19 | }
20 |
21 | .pdc-link {
22 | text-decoration: underline;
23 | }
24 |
--------------------------------------------------------------------------------
/src/root/views/RegionalRiskWatch/SeasonalRisk/Filters/FilterOutput/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .filter-output {
4 | display: flex;
5 | align-items: baseline;
6 | gap: $spacing;
7 |
8 | .label {
9 | color: $light-base-color;
10 | font-size: $font-size-sm;
11 | font-weight: $base-font-light;
12 | }
13 |
14 | .selected-values {
15 | display: flex;
16 | flex-wrap: wrap;
17 | gap: $spacing*0.5;
18 |
19 | .chip {
20 | border: none;
21 | background-color: $color-filter-tag;
22 | color: $color-filter-tag-text;
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/root/views/RegionalRiskWatch/SeasonalRisk/Filters/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .filters {
4 | display: flex;
5 | flex-direction: column;
6 | justify-content: center;
7 | gap: $spacing * 2;
8 |
9 | .inputs {
10 | display: flex;
11 | align-items: center;
12 | gap: $spacing;
13 | flex-wrap: wrap;
14 |
15 | .filter-input {
16 | width: 11.25rem;
17 | }
18 | }
19 |
20 | .outputs {
21 | display: flex;
22 | align-items: center;
23 | flex-wrap: wrap;
24 | gap: $spacing*1.5;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/root/views/RegionalRiskWatch/SeasonalRisk/Map/LegendItem/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.module.scss';
4 |
5 | interface Props {
6 | color: string;
7 | label: string;
8 | }
9 |
10 | function LegendItem(props: Props) {
11 | const {
12 | color,
13 | label,
14 | } = props;
15 |
16 | return (
17 |
17 | {label}
18 |
19 |
20 |
27 |
18 |
22 |
26 | );
27 | }
28 |
29 | export default LegendItem;
30 |
--------------------------------------------------------------------------------
/src/root/views/RegionalRiskWatch/SeasonalRisk/Map/LegendItem/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import "~styles/settings/variables";
2 |
3 | .legend-item {
4 | display: flex;
5 | gap: $spacing;
6 |
7 | .symbol {
8 | width: 1rem;
9 | height: 1rem;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/root/views/RegionalRiskWatch/SeasonalRisk/Map/MapLegend/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import "~styles/settings/variables";
2 |
3 | .map-legend {
4 | background-color: $color-foreground;
5 | padding: $spacing;
6 | }
7 |
--------------------------------------------------------------------------------
/src/root/views/RegionalRiskWatch/SeasonalRisk/Map/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import "~styles/settings/variables";
2 |
3 | .map {
4 | position: relative;
5 |
6 | .map-container {
7 | height: 40rem;
8 | }
9 |
10 | .map-disclaimer {
11 | position: absolute;
12 | left: $mapbox-icon-width + $spacing*0.5;
13 | bottom: $spacing*0.25;
14 | }
15 |
16 | :global {
17 |
18 | .mapboxgl-popup-close-button {
19 | position: absolute;
20 | right: $spacing !important;
21 | top: $spacing !important;
22 | font-size: $font-size-heading-widget !important;
23 | font-weight: $base-font-light !important;
24 | opacity: 0.6 !important;
25 | }
26 | }
27 | }
28 |
29 |
--------------------------------------------------------------------------------
/src/root/views/RegionalRiskWatch/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .regional-risk-watch {
4 | .content {
5 | display: flex;
6 | flex-direction: column;
7 | padding: $spacing*2 0;
8 | gap: $spacing*2;
9 |
10 | .tab-list {
11 | align-self: center;
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/root/views/Search/CountryList/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .country-list {
4 | display: flex;
5 | flex-direction: column;
6 | gap: $spacing;
7 | padding: $spacing !important;
8 |
9 | .search-title {
10 | font-size: $font-size-sm;
11 | color: $title-color;
12 | font-weight: $base-font-regular;
13 | }
14 |
15 | .country-name {
16 | display: flex;
17 | color: $primary-color;
18 | text-decoration: none;
19 | font-weight: $base-font-medium;
20 | align-items: center;
21 | gap: $global-spacing*0.5;
22 | line-height: 1.3rem;
23 | font-size: $base-font-size;
24 | padding: $spacing 0;
25 | border-bottom: $base-border-width solid $base-border-color;
26 |
27 | &:hover {
28 | text-decoration: underline;
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/root/views/Search/EmergencyPlanningTable/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .emergency-planning-table {
4 | .content {
5 | table {
6 | width: 100%;
7 |
8 | th {
9 | padding: 0;
10 | text-align: left;
11 | border-bottom: $base-border-width solid $base-border-color;
12 | background-color: $color-background;
13 | }
14 |
15 | td {
16 | padding: $spacing;
17 | border-bottom: $base-border-width solid $base-border-color;
18 |
19 | >* {
20 | padding: 0!important;
21 | }
22 | }
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/root/views/Search/FieldReportTable/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .field-report-table {
4 | .content {
5 | table {
6 | width: 100%;
7 |
8 | th {
9 | text-align: left;
10 | padding: 0;
11 | border-bottom: $base-border-width solid $base-border-color;
12 | background-color: $color-background;
13 | }
14 |
15 | td {
16 | padding: $spacing;
17 | border-bottom: $base-border-width solid $base-border-color;
18 |
19 | >* {
20 | padding: 0!important;
21 | }
22 | }
23 | }
24 | }
25 | }
--------------------------------------------------------------------------------
/src/root/views/Search/ProjectTable/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .project-table {
4 | .content {
5 | table {
6 | width: 100%;
7 |
8 | th {
9 | text-align: left;
10 | padding: 0;
11 | border-bottom: $base-border-width solid $base-border-color;
12 | background-color: $color-background;
13 | }
14 |
15 | td {
16 | padding: $spacing;
17 | border-bottom: $base-border-width solid $base-border-color;
18 |
19 | >* {
20 | padding: 0!important;
21 | }
22 | }
23 | }
24 | }
25 | }
26 |
27 | .project-date {
28 | display: flex;
29 | gap: $spacing*0.25;
30 | flex-wrap: wrap;
31 | }
32 |
--------------------------------------------------------------------------------
/src/root/views/Search/RapidDeploymentTable/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .rapid-response-table {
4 | .content {
5 | table {
6 | width: 100%;
7 | th {
8 | padding: 0;
9 | text-align: left;
10 | border-bottom: $base-border-width solid $base-border-color;
11 | background-color: $color-background;
12 | }
13 |
14 | td {
15 | padding: $spacing;
16 | border-bottom: $base-border-width solid $base-border-color;
17 | width: $global-spacing-table;
18 | >* {
19 | padding: 0!important;
20 | }
21 | }
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/root/views/Search/RegionList/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .region-list {
4 | display: flex;
5 | flex-direction: column;
6 | gap: $spacing;
7 | padding: $spacing !important;
8 |
9 | .search-title {
10 | font-size: $font-size-sm;
11 | color: $title-color;
12 | font-weight: $base-font-regular;
13 | }
14 |
15 | .region-name {
16 | display: flex;
17 | color: $primary-color;
18 | text-decoration: none;
19 | font-weight: $base-font-medium;
20 | align-items: center;
21 | gap: $global-spacing*0.5;
22 | line-height: 1.3rem;
23 | font-size: $base-font-size;
24 | padding: $spacing 0;
25 | border-bottom: $base-border-width solid $base-border-color;
26 |
27 | &:hover {
28 | text-decoration: underline;
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/root/views/Search/SurgeAlertTable/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .surge-alerts-table {
4 | .content {
5 | table {
6 | width: 100%;
7 | th {
8 | padding: 0;
9 | text-align: left;
10 | border-bottom: $base-border-width solid $base-border-color;
11 | background-color: $color-background;
12 | }
13 |
14 | td {
15 | padding: $spacing;
16 | border-bottom: $base-border-width solid $base-border-color;
17 | width: $global-spacing-table;
18 | >* {
19 | padding: 0!important;
20 | }
21 | }
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/root/views/Search/SurgeDeploymentTable/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .surge-deployement-table {
4 | .content {
5 | table {
6 | width: 100%;
7 |
8 | th {
9 | padding: 0;
10 | text-align: left;
11 | border-bottom: $base-border-width solid $base-border-color;
12 | background-color: $color-background;
13 | }
14 |
15 | td {
16 | padding: $spacing;
17 | border-bottom: $base-border-width solid $base-border-color;
18 |
19 | >* {
20 | padding: 0!important;
21 | }
22 | }
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/root/views/ThreeW/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .three-w-details {
4 | .content {
5 | padding: 0;
6 | }
7 |
8 | .last-modified {
9 | display: flex;
10 | justify-content: center;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/root/views/ThreeWEdit/styles.module.scss:
--------------------------------------------------------------------------------
1 | @import '~styles/settings/variables';
2 |
3 | .three-w-details {
4 | :global {
5 | .go-input-section {
6 | margin: $spacing 0;
7 | box-shadow: $box-shadow-component;
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/root/views/emergencyWrapper.js:
--------------------------------------------------------------------------------
1 | import React, { lazy } from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import { withLanguage } from '#root/languageContext';
4 | import { useRequest } from '#utils/restRequest';
5 | import Translate from '#components/Translate';
6 |
7 | const Emergency = lazy(() => import('../views/Emergency'));
8 |
9 | function EmergencyWrapper(props) {
10 | const { pending, response } = useRequest({url: 'api/v2/event/' + props.match.params.slug});
11 | if (!pending && response) {
12 | props.match.params.id = response.id;
13 | }
14 | return !pending && response ?
15 |
23 | { label }
24 |
25 | 17 |