Merge pull request #860 from mapswipe/feature/information-pages

Feature/information pages

Author: tnagorra

docker-compose.yaml

@@ -138,6 +138,10 @@ services:
             REACT_APP_SENTRY_DSN: ${MANAGER_DASHBOARD_SENTRY_DSN}
             REACT_APP_SENTRY_TRACES_SAMPLE_RATE: ${MANAGER_DASHBOARD_SENTRY_TRACES_SAMPLE_RATE}
             REACT_APP_COMMUNITY_DASHBOARD_URL: ${MANAGER_DASHBOARD_COMMUNITY_DASHBOARD_URL}
+            REACT_APP_IMAGE_BING_API_KEY: ${IMAGE_BING_API_KEY}
+            REACT_APP_IMAGE_MAPBOX_API_KEY: ${IMAGE_MAPBOX_API_KEY}
+            REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY: ${IMAGE_MAXAR_PREMIUM_API_KEY}
+            REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY: ${IMAGE_MAXAR_STANDARD_API_KEY}
         volumes:
             - manager-dashboard-static:/code/build/
         command: bash -c 'yarn build'

manager-dashboard/.env.example

@@ -10,3 +10,9 @@ REACT_APP_FIREBASE_STORAGE_BUCKET=
 REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
 REACT_APP_FIREBASE_APP_ID=
 REACT_APP_COMMUNITY_DASHBOARD_URL=
+
+REACT_APP_IMAGE_BING_API_KEY=
+REACT_APP_IMAGE_MAPBOX_API_KEY=
+REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY=
+# -- NOTE: not used and seems to be discontinued
+REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY=

manager-dashboard/app/Base/components/Navbar/styles.css

@@ -5,7 +5,7 @@
     box-shadow: 0 3px 5px -2px var(--color-shadow);
     background-color: var(--color-primary);
     padding: var(--spacing-medium) var(--spacing-large);
-    color: var(--color-text-on-light);
+    color: var(--color-text-on-dark);
 
     .container {
         display: flex;
@@ -42,7 +42,7 @@
 
                 .link {
                     opacity: 0.7;
-                    color: var(--color-text-on-light);
+                    color: var(--color-text-on-dark);
 
                     &.active {
                         opacity: 1;
@@ -58,7 +58,7 @@
             gap: var(--spacing-medium);
 
             .logout-button {
-                color: var(--color-text-on-light);
+                color: var(--color-text-on-dark);
             }
         }
     }

manager-dashboard/app/Base/components/SmartLink/index.tsx

@@ -3,7 +3,7 @@ import { Link, LinkProps } from 'react-router-dom';
 
 import {
     useButtonFeatures,
-    Props as ButtonProps,
+    ButtonProps,
 } from '#components/Button';
 
 import useRouteMatching, {

manager-dashboard/app/Base/index.tsx

@@ -12,6 +12,7 @@ import {
     ApolloProvider,
 } from '@apollo/client';
 import { initializeApp } from 'firebase/app';
+import 'react-mde/lib/styles/css/react-mde-all.css';
 
 import Init from '#base/components/Init';
 import PreloadMessage from '#base/components/PreloadMessage';

manager-dashboard/app/Base/styles.css

@@ -53,18 +53,21 @@ p {
     --color-background-primary-hint: #0d194920;
     --color-background-accent-hint: #4746f610;
 
+    --color-black: #000000;
+
     --color-scrollbar-foreground: rgba(0, 0, 0, .2);
     --color-scrollbar-background: rgba(0, 0, 0, .01);
     --color-hover-background: rgba(0, 0, 0, 0.03);
     --color-input-background: #4746f605;
 
     --color-primary: #0d1949;
     --color-primary-light: #2d5989;
-    --color-text-on-light: #ffffff;
+    --color-text-on-dark: #ffffff;
     --color-text-watermark: rgba(0, 0, 0, .4);
     --color-text: rgba(0, 0, 0, 0.8);
     --color-text-dark: rgba(0, 0, 0, 1);
     --color-text-light: rgba(0, 0, 0, 0.6);
+    --color-text-gray: #666666;
     --color-accent: #4746f6;
     --color-danger: #e04656;
     --color-success: #53b391;
@@ -83,24 +86,40 @@ p {
     --font-size-ultra-large: 4rem;
 
     --font-weight-medium: 400;
+    --font-weight-semibold: 600;
     --font-weight-bold: 700;
 
     --opacity-disabled-element: 0.5;
 
-    --width-separator-thin: 1px;
+    --width-separator-thin: 1pt;
+    --width-separator-thick: 5pt;
+    --width-separator-mobile-preview: 8pt;
     --width-scrollbar: 0.75rem;
     --width-page-content-max: 70rem;
     --width-navbar-content-max: 76rem;
 
+    --width-mobile-preview: 22rem;
+    --height-mobile-preview: 40rem;
+    --height-mobile-preview-builarea-content: 30rem;
+    --height-mobile-preview-footprint-content: 22rem;
+    --height-mobile-preview-change-detection-content: 14rem;
+
     --radius-popup-border: 0.25rem;
     --radius-scrollbar-border: 0.25rem;
     --radius-blur-shadow: 5px;
     --radius-modal: 0.25rem;
     --radius-button-border: 0.25rem;
     --radius-input-border: 0.25rem;
-    --radius-card-border: 0.25rem;
+    --radius-card-border: 0.5rem;
     --radius-badge-border: 1rem;
 
+    --line-height-none: 1;
+    --line-height-tight: 1.25;
+    --line-height-snug: 1.375;
+    --line-height-normal: 1.5;
+    --line-height-relaxed: 1.625;
+    --line-height-loose: 2;
+
 
     --shadow-card: 0 2px 4px -2px var(--color-shadow);
 

manager-dashboard/app/Base/utils/errorTransform.ts

@@ -1,8 +1,8 @@
-import { internal } from '@togglecorp/toggle-form';
+import { nonFieldError } from '@togglecorp/toggle-form';
 import { listToMap, isDefined, isNotDefined } from '@togglecorp/fujs';
 
 interface Error {
-    [internal]?: string | undefined;
+    [nonFieldError]?: string | undefined;
     [key: string]: string | Error | undefined;
 }
 
@@ -53,7 +53,7 @@ function transformObject(errors: ObjectError[] | undefined): Error | undefined {
     );
 
     return {
-        [internal]: finalNonFieldErrors,
+        [nonFieldError]: finalNonFieldErrors,
         ...finalFieldErrors,
     };
 }
@@ -68,7 +68,7 @@ function transformArray(errors: (ArrayError | null)[] | undefined): Error | unde
     const memberErrors = filteredErrors.filter((error) => error.clientId !== 'nonMemberErrors');
 
     return {
-        [internal]: topLevelError?.messages,
+        [nonFieldError]: topLevelError?.messages,
         ...listToMap(
             memberErrors,
             (error) => error.clientId,

manager-dashboard/app/components/Button/index.tsx

@@ -13,7 +13,7 @@ export type ButtonVariant = (
     | 'transparent'
 );
 
-export interface Props<N> extends RawButtonProps<N> {
+export interface ButtonProps<N> extends RawButtonProps<N> {
     /**
     * Variant of the button
     */
@@ -57,7 +57,7 @@ export interface Props<N> extends RawButtonProps<N> {
 type ButtonFeatureKeys = 'variant' | 'className' | 'actionsClassName' | 'iconsClassName' | 'childrenClassName' | 'children' | 'icons' | 'actions' | 'disabled';
 
 export function useButtonFeatures(
-    props: Pick<Props<string>, ButtonFeatureKeys>,
+    props: Pick<ButtonProps<string>, ButtonFeatureKeys>,
 ) {
     const {
         variant = 'default',
@@ -111,7 +111,7 @@ export function useButtonFeatures(
 /**
  * Basic button component
  */
-function Button<N>(props: Props<N>) {
+function Button<N>(props: ButtonProps<N>) {
     const {
         variant,
         className,

manager-dashboard/app/components/Button/styles.css

@@ -4,6 +4,7 @@
     border: var(--width-separator-thin) solid rgba(0, 0, 0, 0.3);
     border-radius: var(--radius-button-border);
     padding: var(--spacing-small) var(--spacing-medium);
+    width: fit-content;
     color: rgba(0, 0, 0, 0.8);
     gap: var(--spacing-small);
 

manager-dashboard/app/components/EmptyMessage/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import styles from './styles.css';
+
+interface Props {
+    title: string;
+    description: string;
+}
+
+function EmptyMessage(props: Props) {
+    const {
+        title,
+        description,
+    } = props;
+
+    return (
+        <div className={styles.emptyMessage}>
+            <div className={styles.emptyMessageTitle}>
+                {title}
+            </div>
+            <div className={styles.emptyMessageDescription}>
+                {description}
+            </div>
+        </div>
+    );
+}
+
+export default EmptyMessage;