css refactor

Anusree6154s · Aug 10, 2024 · 32832d2 · 32832d2
1 parent cdd72ac
commit 32832d2
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 111 deletions.
diff --git a/qtify/public/favicon.ico b/qtify/public/favicon.ico
diff --git a/qtify/public/index.html b/qtify/public/index.html
@@ -7,18 +7,18 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Qtify music app"
     />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -28,7 +28,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Qtify</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/qtify/public/logo.png b/qtify/public/logo.png
diff --git a/qtify/public/logo192.png b/qtify/public/logo192.png
diff --git a/qtify/public/logo512.png b/qtify/public/logo512.png
diff --git a/qtify/public/manifest.json b/qtify/public/manifest.json
@@ -8,14 +8,9 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "logo.png",
       "type": "image/png",
       "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/qtify/src/App.test.js b/qtify/src/App.test.js
diff --git a/qtify/src/components/Section/Section.js b/qtify/src/components/Section/Section.js
@@ -11,78 +11,79 @@ import AccordionDetails from "@mui/material/AccordionDetails";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 export default React.memo(function Section({
-  title,
-  data: { data, type },
-  songs = false,
-  genres,
+    title,
+    data: { data, type },
+    songs = false,
+    genres,
 }) {
-  const [collapsed, setCollapse] = useState(true);
+    const [collapsed, setCollapse] = useState(true);
 
-  const handleCollapse = () => {
-    setCollapse(!collapsed);
-  };
+    const handleCollapse = () => {
+        setCollapse(!collapsed);
+    };
 
-  return (
-    <div>
-      {type === "grid" ? (
-        <Grid container spacing={4} className={styles.container}>
-          <Grid item xs={12} className={styles.header}>
-            <span className={styles.title}>
-              {songs ? title : `${title} Albums`}
-            </span>
-            {!songs && (
-              <button
-                className={styles.collapseButton}
-                onClick={handleCollapse}
-              >
-                {collapsed ? "Show All" : "Collapse"}
-              </button>
-            )}
-          </Grid>
-          {collapsed ? (
-            <Carousel data={data} songs={songs} genres={genres} />
-          ) : (
-            data &&
-            data.map((group, index) => (
-              <Grid
-                item
-                xs={12 / 7}
-                key={index}
-                className={styles.cardContainer}
-              >
-                <Card image={group.image} follows={group.follows} />
-                <Typography className={styles.cardTitle}>
-                  {group.title}
-                </Typography>
-              </Grid>
-            ))
-          )}
-        </Grid>
-      ) : (
+    return (
         <div>
-          <h2>{title}</h2>
-          <Stack className={styles.faqContainer} spacing={1}>
-            {data.map((faq, index) => (
-              <Accordion key={index} className={styles.faqAccordion}>
-                <AccordionSummary
-                  expandIcon={
-                    <ExpandMoreIcon sx={{ color: "var(--color-primary)" }} />
-                  }
-                  aria-controls="panel1-content"
-                  id="panel1-header"
-                >
-                  {faq.question}
-                </AccordionSummary>
-                <AccordionDetails className={styles.faqAccordionDetails}>
-                  {faq.answer}
-                </AccordionDetails>
-              </Accordion>
-            ))}
-          </Stack>
+            {type === "grid" ? (
+                <Grid container spacing={4} className={styles.container}>
+                    <Grid item xs={12} className={styles.header}>
+                        <span className={styles.title}>
+                            {songs ? title : `${title} Albums`}
+                        </span>
+                        {!songs && (
+                            <button
+                                className={styles.collapseButton}
+                                onClick={handleCollapse}
+                            >
+                                {collapsed ? "Show All" : "Collapse"}
+                            </button>
+                        )}
+                    </Grid>
+                    {collapsed ? (
+                        <Carousel data={data} songs={songs} genres={genres} />
+                    ) : (
+                        data &&
+                        data.map((group, index) => (
+                            <Grid
+                                item
+                                xs={12 / 7}
+                                key={index}
+                                className={styles.cardContainer}
+                            >
+                                <Card image={group.image} follows={group.follows} />
+                                <Typography className={styles.cardTitle}>
+                                    {group.title}
+                                </Typography>
+                            </Grid>
+                        ))
+                    )}
+                </Grid>
+            ) : (
+                <div>
+                    <h2>{title}</h2>
+                    <Stack className={styles.faqContainer} spacing={1}>
+                        {data.map((faq, index) => (
+                            <Accordion key={index} className={styles.faqAccordion}>
+                                <AccordionSummary
+                                    expandIcon={
+                                        <ExpandMoreIcon sx={{ color: "var(--color-primary)" }} />
+                                    }
+                                    aria-controls="panel1-content"
+                                    id="panel1-header"
+                                    className={styles.faqAccordionSummary}
+                                >
+                                    {faq.question}
+                                </AccordionSummary>
+                                <AccordionDetails className={styles.faqAccordionDetails}>
+                                    {faq.answer}
+                                </AccordionDetails>
+                            </Accordion>
+                        ))}
+                    </Stack>
 
-          <br />
+                    <br />
+                </div>
+            )}
         </div>
-      )}
-    </div>
-  );
+    );
 });
diff --git a/qtify/src/components/Section/Section.module.css b/qtify/src/components/Section/Section.module.css
@@ -40,10 +40,14 @@ h2 {
 }
 
 .faqAccordion {
+    border: 1px solid white;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.faqAccordionSummary {
   background-color: var(--color-black);
   color: white;
-  border: 1px solid white;
-  border-radius: 5px;
 }
 
 .faqAccordionDetails {

diff --git a/qtify/src/index.js b/qtify/src/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
@@ -14,7 +13,3 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/qtify/src/reportWebVitals.js b/qtify/src/reportWebVitals.js
diff --git a/qtify/src/setupTests.js b/qtify/src/setupTests.js
@@ -1,5 +1,5 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+// // jest-dom adds custom jest matchers for asserting on DOM nodes.
+// // allows you to do things like:
+// // expect(element).toHaveTextContent(/react/i)
+// // learn more: https://github.com/testing-library/jest-dom
+// import '@testing-library/jest-dom';