Adjust the background color of the card, making it slightly different…

… from the general background color.
linea-it · Nov 22, 2023 · 8e9c69c · 8e9c69c
1 parent b21e150
commit 8e9c69c
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 67 deletions.
diff --git a/frontend/components/SpeczCatalogs.js b/frontend/components/SpeczCatalogs.js
@@ -1,29 +1,38 @@
-// SpeczCatalogs.jsx
 import * as React from 'react'
 import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import CardMedia from '@mui/material/CardMedia'
 import Typography from '@mui/material/Typography'
 import Link from '../components/Link'
+import { useTheme } from '@mui/system'
 
 function SpeczCatalogs() {
+  const theme = useTheme()
+
   return (
     <Link href="/specz_catalogs">
-      <Card sx={{ display: 'flex' }}>
+      <Card
+        sx={{
+          display: 'flex',
+          backgroundColor:
+            theme.palette.mode === 'light' ? theme.palette.grey[100] : '',
+          boxShadow: 4
+        }}
+      >
         <CardMedia
           component="img"
           sx={{ width: 350 }}
           image="../interfaces/milkyway.jpg"
           alt="Spec-z Catalogs"
         />
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Box>
           <CardContent m={2} sx={{ maxWidth: 500 }}>
             <Typography variant="h5">Combine Spec-z Catalogs</Typography>
             <Typography variant="body1" color="text.secondary">
-              Creates a single spec-z from the multiple spatial cross-matching
-              (all-to-all) of a list of pre-registered individual spec-z
-              catalogs.
+              Creates a single spec-z sample from the multiple spatial
+              cross-matching (all-to-all) of a list of pre-registered individual
+              Spec-z Catalogs.
             </Typography>
           </CardContent>
         </Box>

diff --git a/frontend/components/TrainingSetMaker.js b/frontend/components/TrainingSetMaker.js
@@ -1,28 +1,38 @@
-// TrainingSetMaker.jsx
 import * as React from 'react'
 import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import CardMedia from '@mui/material/CardMedia'
 import Typography from '@mui/material/Typography'
 import Link from '../components/Link'
+import { useTheme } from '@mui/system'
 
 function TrainingSetMaker() {
+  const theme = useTheme()
+
   return (
     <Link href="/training_set_maker">
-      <Card sx={{ display: 'flex', flexDirection: 'row-reverse' }}>
+      <Card
+        sx={{
+          display: 'flex',
+          flexDirection: 'row-reverse',
+          backgroundColor:
+            theme.palette.mode === 'light' ? theme.palette.grey[100] : '',
+          boxShadow: 4
+        }}
+      >
         <CardMedia
           component="img"
           sx={{ width: 350 }}
           image="../interfaces/lsst_summit.jpg"
           alt="Training Set Maker"
         />
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Box>
           <CardContent m={2} sx={{ maxWidth: 500 }}>
             <Typography variant="h5">Training Set Maker</Typography>
             <Typography variant="body1" color="text.secondary">
               Creates a training set from the spatial cross-matching of a given
-              spec-z catalog and the LSST Objects Catalogs.
+              Spec-z Catalog and the LSST Objects Catalogs.
             </Typography>
           </CardContent>
         </Box>

diff --git a/frontend/pages/pz_pipelines.js b/frontend/pages/pz_pipelines.js
@@ -1,4 +1,3 @@
-// PZPipelines.jsx
 import React from 'react'
 import { Grid, Typography } from '@mui/material'
 import SpeczCatalogs from '../components/SpeczCatalogs'

diff --git a/frontend/pages/specz_catalogs.js b/frontend/pages/specz_catalogs.js
@@ -4,7 +4,10 @@ import {
   IconButton,
   Select,
   MenuItem,
-  TextField
+  TextField,
+  Card,
+  CardContent,
+  Grid
 } from '@mui/material'
 import InfoIcon from '@mui/icons-material/Info'
 import SpeczData from '../components/SpeczData'
@@ -27,54 +30,72 @@ export default function SpeczCatalogs() {
   }
 
   return (
-    <div>
-      <Typography variant="h4" style={{ textAlign: 'center' }}>
-        Combine Spec-z Catalogs
-        <IconButton aria-label="info" title="Combine Spec-z Catalogs">
-          <InfoIcon />
-        </IconButton>
-      </Typography>
+    <Card>
+      <CardContent>
+        <Grid container spacing={3}>
+          <Grid item xs={12}>
+            <Typography variant="h4" style={{ textAlign: 'center' }}>
+              Combine Spec-z Catalogs
+              <IconButton aria-label="info" title="Combine Spec-z Catalogs">
+                <InfoIcon />
+              </IconButton>
+            </Typography>
+          </Grid>
 
-      <div>
-        <p>1. Combined catalog name:</p>
-        <TextField
-          id="combinedCatalogName"
-          label="Combined catalog name"
-          variant="outlined"
-          value={combinedCatalogName}
-          onChange={handleCatalogNameChange}
-        />
-      </div>
+          <Grid item xs={12}>
+            <div>
+              <p>1. Combined catalog name:</p>
+              <TextField
+                id="combinedCatalogName"
+                label="Combined catalog name"
+                variant="outlined"
+                value={combinedCatalogName}
+                onChange={handleCatalogNameChange}
+              />
+            </div>
+          </Grid>
 
-      <div>
-        <p>2. Select the Spec-z Catalogs to include in your sample:</p>
-        <Select
-          multiple
-          value={selectedSpeczCatalogs}
-          onChange={handleSpeczCatalogsChange}
-        >
-          <MenuItem value="catalog1">teste 1</MenuItem>
-          <MenuItem value="catalog2">teste 2</MenuItem>
-        </Select>
-        <TextField
-          id="searchSpeczCatalogs"
-          label="Search Spec-z Catalogs"
-          variant="outlined"
-        />
-      </div>
+          <Grid item xs={12}>
+            <div>
+              <p>2. Select the Spec-z Catalogs to include in your sample:</p>
+              <Select
+                multiple
+                value={selectedSpeczCatalogs}
+                onChange={handleSpeczCatalogsChange}
+              >
+                <MenuItem value="catalog1">teste 1</MenuItem>
+                <MenuItem value="catalog2">teste 2</MenuItem>
+              </Select>
+              <TextField
+                id="searchSpeczCatalogs"
+                label="Search Spec-z Catalogs"
+                variant="outlined"
+              />
+            </div>
+          </Grid>
 
-      <SpeczData />
+          <Grid item xs={12}>
+            <Card>
+              <CardContent>
+                <SpeczData />
+              </CardContent>
+            </Card>
+          </Grid>
 
-      <div>
-        <p>3. Select the cross-matching configuration choices:</p>
-        <TextField
-          id="searchRadius"
-          label="Search Radius (arcsec)"
-          variant="outlined"
-          value={searchRadius}
-          onChange={handleSearchRadiusChange}
-        />
-      </div>
-    </div>
+          <Grid item xs={12}>
+            <div>
+              <p>3. Select the cross-matching configuration choices:</p>
+              <TextField
+                id="searchRadius"
+                label="Search Radius (arcsec)"
+                variant="outlined"
+                value={searchRadius}
+                onChange={handleSearchRadiusChange}
+              />
+            </div>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
   )
 }
diff --git a/frontend/styles/pages/tutorials.js b/frontend/styles/pages/tutorials.js
@@ -1,4 +1,3 @@
-import { TheaterComedy } from '@mui/icons-material'
 import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
@@ -12,8 +11,6 @@ const useStyles = makeStyles(theme => ({
     margin: 0,
     borderRadius: '2px',
     overflowX: 'auto',
-    // background: theme.palette.grey[400],
-    //  color: theme.palette.text.primary
     background: theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[700]
   }
 }))

diff --git a/frontend/themes/light.js b/frontend/themes/light.js
@@ -6,8 +6,6 @@ const light = createTheme({
       light: '#4f5964',
       main: '#283663',
       dark: '#24292e'
-      // dark: '#283663',
-      // main: '#24292e'
     },
     secondary: {
       main: '#ffdd00'
@@ -26,11 +24,6 @@ const light = createTheme({
       secondary: 'rgba(18,48,78,0.6)',
       disabled: 'rgba(18,48,78,0.38)'
     }
-    // text: {
-    //   primary: 'rgb(52, 71, 103)',
-    //   secondary: 'rgb(52, 71, 103, 0.6)',
-    //   disabled: 'rgb(52, 71, 103, 0.38)'
-    // }
   }
 })