ui updates-2

src/App.jsx

@@ -6,7 +6,7 @@ import './App.css';
 import Navbar from './components/Navbar';
 
 function App() {
-  const [value, setValue] = useState(1);
+  const [value, setValue] = useState();
   const [episodeNumber, setEpisodeNumber] = useState(1);
   const [startPlayback, setStartPlayback] = useState(true);
   const [progress, setProgress] = useState(0);

src/components/Cards/Card.css

@@ -7,6 +7,46 @@ body {
     border-radius: 5px
   }
 
+  .rhap_container {
+    background: #f7f7f9;
+  }
+
+  .rhap_controls-section {
+    margin-bottom: 15px;
+  }
+
+  .rhap_progress-section {
+    height: 20px;
+    padding-bottom: 20px;
+  }
+
+  /* .rhap_main-controls-button {
+    width: 80px !important;
+    height: 80px !important;
+  } */
+
+  /* .rhap_main-controls-button {
+    width: 4vw;
+    height: 4vw;
+  } */
 
+  .rhap_main-controls-button svg {
+    color: #ff5555;
+    width: 100%;
+    height: 100%;
+  }
+  .rhap_progress-filled,
+  .rhap_progress-indicator {
+    background-color: #ff5555 !important;
+  }
+
+  .rhap_button-clear.rhap_volume-button {
+    color: #ff5555 !important;
+  }
+
+  .rhap_volume-bar, .rhap_volume-indicator {
+    background-color: red;
+  }
 
+
 

src/components/Cards/Card.jsx

@@ -48,7 +48,7 @@ const Card = (props) => {
             customAdditionalControls={[]}
             customVolumeControls={[]}
             showDownloadProgress={[]}
-            className='audio-player'
+            className='my-2 py-4'
             showSkipControls={true}
             style={{ color: "white" }}
           />

src/components/Navbar.jsx

@@ -6,7 +6,7 @@ function Navbar(props) {
   const ww=window.innerWidth;
   return (
     <>
-      <nav className={`d-flex flex-wrap justify-content-${ww>650?'between':'center'} align-items-center my-3`}>
+      <nav className={`d-flex ${ww<750 && 'flex-column'} flex-wrap justify-content-${ww>550?'between':'center'} align-items-center my-3`}>
         <div className='fs-4 my-2 ' >
           <img src="https://raw.githubusercontent.com/Avdhesh-Varshney/Chanakya/main/src/assets/Chanakya-Logo.webp" alt="Chanakya-Image" width={"auto"} style={{ width: '5rem' }} />
           चाणक्य नीति

src/components/Searchepisode.jsx

@@ -2,11 +2,12 @@ import React from 'react'
 
 function Searchepisode(props) {
     const { handleOnChange, handleKeyPress, value, handleKey } = props;
+    const ww=window.innerWidth;
     return (
         <>
             <div className="d-flex text-center align-items-center justify-content-center ">
                 <div className="col-auto">
-                    <label htmlFor="inputNumber" className="col-form-label">Search</label>
+                    {ww>740 && <label htmlFor="inputNumber" className="col-form-label">Search</label>}
                 </div>
                 <div className="col-auto mx-2">
                     <input type="number" id="inputNumber" className="form-control" value={value} onKeyDown={handleKeyPress} onChange={handleOnChange} placeholder='Episode number' />