Костыли с кнопкой....

.env

@@ -1 +1 @@
-REACT_APP_LOCALHOST='http://localhost:5000/'
+REACT_APP_DATABASE='http://localhost:3000/'

data.json

@@ -502,7 +502,7 @@
         {
             "id": "1",
             "name": "Advert 1",
-            "photo": "./src/september.png"
+            "photo": "https://sun9-15.userapi.com/impg/5IS2PMmTs9YGUuo2CGNDm3KxKbe6T7205_PT6A/-VHlhuPWlGk.jpg?size=1640x856&quality=95&sign=77953363d2f78b014aff77f540f7bfa0&type=album"
         }
 
     ]

src/API/api.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 import { IAdvertisement, IGenre, IPlaylist, ISong } from "../models/IModels";
 
-const localhost = process.env.REACT_APP_LOCALHOST || 'http://localhost:3000';
+const localhost = process.env.REACT_APP_DATABASE;
 
 export function getPlaylistsByGenre(genre: string, playlists: IPlaylist[]) {
     return playlists.filter((playlist: IPlaylist) => playlist.genres.includes(genre));
@@ -21,24 +21,24 @@ export async function getPlaylist(id: string) {
 
 export async function getSongs() {
     
-    return await axios.get<ISong[]>('http://localhost:3000/songs');
+    return await axios.get<ISong[]>(`${localhost}songs`);
 
 }
 
 export async function getSong(id: string) {
     
-    return await axios.get<IPlaylist[]>('http://localhost:3000/songs/' + id);
+    return await axios.get<IPlaylist[]>(`${localhost}songs/` + id);
 
 }
 
 export async function getGenres() {
     
-    return await axios.get<IGenre[]>('http://localhost:3000/genres');
+    return await axios.get<IGenre[]>(`${localhost}genres`);
 
 }
 
 export async function getAds() {
     
-    return await axios.get<IAdvertisement[]>('http://localhost:3000/ads');
+    return await axios.get<IAdvertisement[]>(`${localhost}advertisements`);
 
 }

src/App.css

@@ -118,17 +118,20 @@
 
 .play-song-button:after {
   content: attr(data-content);
-  font-size: 40px;
-  text-align: center;
-  display: block;
+  font-size: 28px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: center;
   color: #fff;
   position: absolute;
   width: 100%; height:100%;
   top:0; left:0;
   background:rgba(0,0,0,0.6);
   opacity: 0;
-  transition: all 0.25s;
-  -webkit-transition: all 1s;
+  transition: all 0.15s;
+  -webkit-transition: all 0.5s;
 }
 
 .play-song-button:hover:after {

src/App.tsx

@@ -26,8 +26,6 @@ function App() {
 
   async function fetchData() {
 
-    
-
     const responseSongs = getSongs();
     // const responseAlbums = await axios.get<IAlbum[]>('http://localhost:3000/albums');
     const responseGenres = getGenres();

src/components/menuComponents/SongsBlock.tsx

@@ -17,9 +17,7 @@ export function SongsBlock({songs}: {songs: ISong[]}) {
       width: 100,
 
       render: (text: string, song: ISong) => (
-        <Button data-content={
-          <PlayCircleFilled />
-        } className='play-song-button rounded' style={{background: 'transparent', display: 'contents'}}>
+        <Button data-content="▷" className='play-song-button rounded' style={{background: 'transparent', display: 'contents'}}>
           <img 
             className="rounded" 
             src={song.cover}