Merge pull request #118 from RENCI/feature/nopp

Logo changes for NOPP branded website

src/components/control-panel/branding.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  Box,
+  Stack,
+} from '@mui/joy';
+import apsLogo from '@images/aps-trans-logo.png';
+import noppLogo from '@images/nopp-logo.png';
+import { getBrandingHandler } from "@utils/map-utils";
+
+
+export const Branding = () => {
+
+    // get the branded website if any
+    let product_code = getBrandingHandler();
+    // for testing: let product_code = '&project_code=nopp';
+    if (product_code) {
+        product_code = product_code.split('=')[1];
+    }
+
+    return (
+        <div>
+        {product_code === "nopp" ?
+            ( <Stack direction="row" gap={ 1 } alignItems="center">
+                <Box
+                    component="img"
+                    width="100px"
+                    alt="National Oceanograhic Partnership Program"
+                    src={noppLogo}
+                    />
+                <Box
+                    component="img"
+                    width="150px"
+                    alt="ADCIRC Prediction System"
+                    src={apsLogo}
+            />
+            </Stack>)
+            :
+            ( <Stack direction="column" gap={ 1 } alignItems="center">
+                <Box
+                    component="img"
+                    width="250px"
+                    alt="ADCIRC Prediction System"
+                    src={apsLogo}
+            />
+            </Stack>)
+        }
+        </div>
+    );
+};

src/components/control-panel/control-panel.js

@@ -6,7 +6,6 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Box,
   Divider,
   IconButton,
   Stack,
@@ -23,8 +22,8 @@ import {
   Water as MaxElevationIcon,
   Waves as HIResMaxElevationIcon,
 } from '@mui/icons-material';
-import apsLogo from '@images/aps-trans-logo.png';
 import { getBrandingHandler, getNamespacedEnvParam } from "@utils/map-utils";
+import { Branding } from './branding';
 
 const layerIcons = {
   maxele63: <MaxElevationIcon />,
@@ -327,15 +326,7 @@ export const ControlPanel = () => {
       }}
     >
       <AccordionSummary slotProps={{buttonClasses: {size: 'xx-large'}}}>
-      {/* <ExpandMoreIcon sx={{ color: 'blue', size: 'xx-large' }} /> */}
-      <Stack direction="column" gap={ 1 } alignItems="center">
-        <Box
-          component="img"
-          width="250px"
-          alt="ADCIRC Prediction System"
-          src={apsLogo}
-        />
-      </Stack>
+        <Branding/>
       </AccordionSummary>
       <AccordionDetails sx={{'marginBottom': '15px'}}>
       <Stack direciton="column" gap={ 1 } alignItems="center">