fix PR comments

Author: shreeyash07

docker-compose.yaml

@@ -138,10 +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}'
+            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/app/components/Card/index.tsx

@@ -12,7 +12,7 @@
 
         .header {
             flex-grow: 1;
-            font-size: 1.2rem;
+            font-size: var(--font-size-large);
         }
 
         .icons {
@@ -21,7 +21,7 @@
             flex-shrink: 0;
 
             >* {
-                font-size: 1.2rem;
+                font-size: var(--font-size-large);
             }
         }
 
@@ -31,7 +31,7 @@
             flex-shrink: 0;
 
             >* {
-                font-size: 1.2rem;
+                font-size: var(--font-size-large);
             }
         }
     }

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

@@ -96,9 +96,9 @@ function GeoJsonFileInput<N>(props: Props<N>) {
             const file = newValue;
 
             async function handleValidationAndChange() {
-                const text = await readUploadedFileAsText(file);
                 let fileAsJson;
                 try {
+                    const text = await readUploadedFileAsText(file);
                     if (!mountedRef.current) {
                         return;
                     }

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

@@ -6,7 +6,6 @@ import {
     TileLayer,
     Coords,
     StyleFunction,
-    PointExpression,
 } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
 
@@ -51,16 +50,14 @@ interface Props {
     geoJson: GeoJSON.GeoJSON | undefined;
     url?: string | undefined;
     previewStyle?: StyleFunction;
-    boundsPadding?: PointExpression | undefined;
 }
 
 function GeoJsonPreview(props: Props) {
     const {
         className,
         geoJson,
-        url,
+        url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
         previewStyle,
-        boundsPadding = [0, 0],
     } = props;
 
     const mapRef = React.useRef<Map>();
@@ -83,7 +80,7 @@ function GeoJsonPreview(props: Props) {
                     1,
                 );
 
-                const finalUrl = url || 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+                const finalUrl = url;
                 const quadKeyUrl = finalUrl.indexOf('{quad_key}') !== -1;
                 const Layer = quadKeyUrl
                     ? BingTileLayer
@@ -129,7 +126,7 @@ function GeoJsonPreview(props: Props) {
             const bounds = newGeoJson.getBounds();
 
             if (bounds.isValid()) {
-                map.fitBounds(bounds, { padding: boundsPadding });
+                map.fitBounds(bounds);
             }
 
             return () => {
@@ -142,7 +139,6 @@ function GeoJsonPreview(props: Props) {
             geoJson,
             url,
             previewStyle,
-            boundsPadding,
         ],
     );
 

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

@@ -6,18 +6,18 @@ import MarkdownPreview from '../MarkdownPreview';
 
 import styles from './styles.css';
 
-interface MarkdownEditorProps<K extends string> {
-    name: K;
+interface MarkdownEditorProps<NAME extends string> {
+    name: NAME;
     className?: string;
     readOnly?: boolean;
     disabled?: boolean;
     value: string | null | undefined;
-    onChange?:(newVal: string | undefined, name: K) => void;
+    onChange?:(newVal: string | undefined, name: NAME) => void;
 }
 
-export type Props<K extends string> = Omit<InputContainerProps, 'input'> & MarkdownEditorProps<K>;
+export type Props<NAME extends string> = Omit<InputContainerProps, 'input'> & MarkdownEditorProps<NAME>;
 
-function MarkdownEditor<K extends string>(props: Props<K>) {
+function MarkdownEditor<NAME extends string>(props: Props<NAME>) {
     const {
         name,
         value,

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

@@ -29,15 +29,15 @@
 
         .icons {
             .back-icon {
-                font-size: 2rem;
+                font-size: var(--font-size-super-large);
             }
         }
 
         .actions {
             flex-shrink: 0;
 
             .info-icon {
-                font-size: 1.6rem;
+                font-size: var(--font-size-extra-large);
             }
         }
     }
@@ -49,7 +49,7 @@
         flex-grow: 1;
         z-index: 0;
         background-color: var(--color-primary);
-        padding: 1rem;
+        padding: var(--spacing-medium);
         overflow: auto;
 
         .content {
@@ -75,7 +75,7 @@
 
             .icons {
                 flex-shrink: 0;
-                font-size: 2rem;
+                font-size: var(--font-size-super-large);
             }
         }
     }

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

@@ -11,7 +11,7 @@ import Popup from '../Popup';
 
 import styles from './styles.css';
 
-export interface PopupButtonProps<N extends number | string | undefined> extends Omit<ButtonProps<N>, 'label'> {
+export interface PopupButtonProps<NAME extends number | string | undefined> extends Omit<ButtonProps<NAME>, 'label'> {
     popupClassName?: string;
     popupContentClassName?: string;
     label: React.ReactNode;
@@ -23,7 +23,7 @@ export interface PopupButtonProps<N extends number | string | undefined> extends
     defaultShown?: boolean;
 }
 
-function PopupButton<N extends number | string | undefined>(props: PopupButtonProps<N>) {
+function PopupButton<NAME extends number | string | undefined>(props: PopupButtonProps<NAME>) {
     const {
         popupClassName,
         popupContentClassName,