style changes

jlthompson96 · Jul 26, 2024 · 397544a · 397544a
1 parent 61eee15
commit 397544a
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 132 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.15.14",
     "axios": "^1.7.2",
     "react": "^18.2.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,34 +1,28 @@
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import NasaApod from './components/APOD';
-import MarsPhotos from './components/MarsPhotos';
+import Header from './components/Header';
+import './index.css'; // Ensure this line is present to import the CSS file
 
 
 const theme = createTheme({
   palette: {
+    mode: 'dark',
     primary: {
-      main: '#1e88e5',
+      main: '#8f9cec',
     },
     secondary: {
-      main: '#ff4081',
-    },
-    background: {
-      default: '#0d47a1',
-      paper: '#1a237e',
-    },
-    text: {
-      primary: '#ffffff',
-      secondary: '#bbdefb',
+      main: '#651fff',
     },
   },
   typography: {
-    fontFamily: 'Roboto, Open Sans, sans-serif',
+    fontFamily: 'Montserrat, sans-serif',
   },
 });
 
 const App = () => (
   <ThemeProvider theme={theme}>
+    <Header />
     <NasaApod />
-    <MarsPhotos />
   </ThemeProvider>
 );
 

diff --git a/src/components/APOD.css b/src/components/APOD.css
@@ -1,98 +0,0 @@
-body {
-    background-color: #000;
-    background-image: radial-gradient(circle, #ffffff 1%, transparent 1%);
-    background-size: 3px 3px;
-}
-
-.stars {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-}
-
-.star {
-    position: absolute;
-    background-color: #fff;
-    border-radius: 50%;
-    animation: twinkle 1.5s infinite alternate;
-
-}
-
-/* Randomly position stars */
-.star:nth-child(1) {
-    top: 10%;
-    left: 20%;
-    width: 2px;
-    height: 2px;
-}
-
-.star:nth-child(2) {
-    top: 20%;
-    left: 50%;
-    width: 1px;
-    height: 1px;
-}
-
-.star:nth-child(3) {
-    top: 30%;
-    left: 80%;
-    width: 1.5px;
-    height: 1.5px;
-}
-
-
-@keyframes twinkle {
-    0% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0.5;
-    }
-}
-
-.spaceship-error {
-    background-color: #2a2a2a;
-    /* Dark gray background */
-    color: #ff4d4d;
-    /* Red color for the error text */
-    border: 2px solid #ff4d4d;
-    /* Red border */
-    border-radius: 8px;
-    /* Rounded corners */
-    padding: 10px 20px;
-    /* Padding for the error message */
-
-    /* Font family */
-    font-size: 16px;
-    /* Font size */
-    text-align: center;
-    /* Center align text */
-    max-width: 300px;
-    /* Max width for better readability */
-    margin: 0 auto;
-    /* Center horizontally */
-}
-
-.spaceship-error::before {
-    content: '';
-    /* Empty content for pseudo-element */
-    background-image: url('error-icon.png');
-    /* URL to your error icon image */
-    background-size: cover;
-    /* Ensure the icon covers the pseudo-element */
-    width: 40px;
-    /* Icon width */
-    height: 40px;
-    /* Icon height */
-    display: block;
-    /* Make the icon a block element */
-    margin: 0 auto 10px;
-    /* Margin below the icon */
-}
-
-
-/* Add more stars as needed */

diff --git a/src/components/APOD.tsx b/src/components/APOD.tsx
@@ -26,7 +26,7 @@ function NasaAPOD() {
     }
 
     return (
-        <Container maxWidth="md">
+        <Container maxWidth="md" style={{ paddingTop: '50px' }}>
             {apodData && (
                 <Card>
                     <CardMedia
@@ -35,7 +35,7 @@ function NasaAPOD() {
                         height="500px"
                         image={apodData.url}
                         title={apodData.title}
-                        style={{ objectFit: 'contain' }}
+                        style={{ objectFit: 'contain', paddingTop: '50px', paddingBottom: '50px' }}
                     />
                     <CardContent>
                         <Typography variant="h5" component="div">

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,4 +1,12 @@
+/** @jsxImportSource @emotion/react */
 import { AppBar, Toolbar, Typography, Button } from '@mui/material';
+import { css } from '@emotion/react';
+
+const buttonStyle = css`
+    &:hover {
+        color: #9d70ff;
+    }
+`;
 
 const Header = () => {
     return (
@@ -7,10 +15,11 @@ const Header = () => {
                 <Typography variant="h6" style={{ flexGrow: 1 }}>
                     Space Explorer
                 </Typography>
-                <Button color="inherit">Home</Button>
-                <Button color="inherit">Gallery</Button>
-                <Button color="inherit">Live Data</Button>
-                <Button color="inherit">About</Button>
+                <Button css={buttonStyle} color="inherit">Home</Button>
+                <Button css={buttonStyle} color="inherit">APOD</Button>
+                <Button css={buttonStyle} color="inherit">Mars Rover Photos</Button>
+                <Button css={buttonStyle} color="inherit">Satellite Tracker</Button>
+                <Button css={buttonStyle} color="inherit">About</Button>
             </Toolbar>
         </AppBar>
     );

diff --git a/src/components/MarsPhotos.tsx b/src/components/MarsPhotos.tsx
@@ -7,7 +7,6 @@ const MARS_ROVER_PHOTOS_URL = `https://api.nasa.gov/mars-photos/api/v1/rovers/cu
 
 
 function MarsPhotos() {
-    // Step 1: Define an interface for the photo objects
     interface Photo {
         id: string;
         img_src: string;
@@ -17,11 +16,8 @@ function MarsPhotos() {
         };
     }
 
-    // Assuming `photos` is a state or prop, ensure it's typed correctly
-    // For example, if using useState in a React component:
     const [photos, setPhotos] = useState<Photo[]>([]);
 
-    // Ensure that wherever you're setting `photos`, the data conforms to this structure
     const [loading, setLoading] = useState(true);
 
     useEffect(() => {

diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,9 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+html {
+  --font-family: 'Montserrat', sans-serif;
+  --font-size: 16px;
+  --font-weight-normal: 400;
+  --font-weight-bold: 700;
+  background-color: #121212;
 }