diff --git a/package.json b/package.json
index 39c33c4..5420fd0 100644
--- 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
index c9dd36a..f18b601 100644
--- 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 = () => (
+
-
);
diff --git a/src/components/APOD.css b/src/components/APOD.css
index 148633d..e69de29 100644
--- 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 */
\ No newline at end of file
diff --git a/src/components/APOD.tsx b/src/components/APOD.tsx
index c90e96b..aff7bc4 100644
--- a/src/components/APOD.tsx
+++ b/src/components/APOD.tsx
@@ -26,7 +26,7 @@ function NasaAPOD() {
}
return (
-
+
{apodData && (
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index dfa7e33..8c77f8c 100644
--- 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 = () => {
Space Explorer
-
-
-
-
+
+
+
+
+
);
diff --git a/src/components/MarsPhotos.tsx b/src/components/MarsPhotos.tsx
index 0964b59..4643a21 100644
--- 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([]);
- // 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
index a108b52..d701b9d 100644
--- 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;
}
\ No newline at end of file