diff --git a/quinzena7/labefy-projeto/src/Components/CatalogPlaylists/CatalogPlaylists.js b/quinzena7/labefy-projeto/src/Components/CatalogPlaylists/CatalogPlaylists.js index f12a4cc..fcf2de2 100644 --- a/quinzena7/labefy-projeto/src/Components/CatalogPlaylists/CatalogPlaylists.js +++ b/quinzena7/labefy-projeto/src/Components/CatalogPlaylists/CatalogPlaylists.js @@ -16,7 +16,7 @@ class CatalogPlaylists extends React.Component { }) .catch(() => { - alert("Erro ao criar playlist!") + alert("Erro ao carregar playlists!") }) }; diff --git a/quinzena7/labefy-projeto/src/Components/Menu/Styled.js b/quinzena7/labefy-projeto/src/Components/Menu/Styled.js index f360ef6..46912c3 100644 --- a/quinzena7/labefy-projeto/src/Components/Menu/Styled.js +++ b/quinzena7/labefy-projeto/src/Components/Menu/Styled.js @@ -4,14 +4,20 @@ export const LabefyHeader = styled.header` align-items: center; background-color: #121212; display: flex; + flex-wrap: wrap; height: 16vh; justify-content: space-around; padding: 16px; + + @media screen and (max-width: 543px) { + height: 24vh; + } ` export const LabefyLogo = styled.div` color: #1db954; - font-size: 20px; + font-size: 20px; + text-align: center; h6 { margin-top: 4px; diff --git a/quinzena7/labefy-projeto/src/Components/NewPlaylist/Styled.js b/quinzena7/labefy-projeto/src/Components/NewPlaylist/Styled.js index 89096cb..11cf922 100644 --- a/quinzena7/labefy-projeto/src/Components/NewPlaylist/Styled.js +++ b/quinzena7/labefy-projeto/src/Components/NewPlaylist/Styled.js @@ -14,11 +14,18 @@ export const SectionNewPlaylist = styled.section` form { display: flex; + flex-wrap: wrap; gap: 16px; + justify-content: center; } .inputNewPlaylistName { + height: 48px; text-align: center; width: 320px; + + @media screen and (max-width: 400px) { + width: 280px; + } } ` \ No newline at end of file diff --git a/quinzena7/labefy-projeto/src/Components/PlaylistItem/Styled.js b/quinzena7/labefy-projeto/src/Components/PlaylistItem/Styled.js index e766228..e14e31c 100644 --- a/quinzena7/labefy-projeto/src/Components/PlaylistItem/Styled.js +++ b/quinzena7/labefy-projeto/src/Components/PlaylistItem/Styled.js @@ -11,4 +11,8 @@ export const ButtonWrapper = styled.div` display: flex; gap: 16px; margin-top: 8px; + + @media screen and (max-width: 400px) { + flex-direction: column; + } ` \ No newline at end of file diff --git a/quinzena7/labefy-projeto/src/Components/ShowPlaylistSongs/Styled.js b/quinzena7/labefy-projeto/src/Components/ShowPlaylistSongs/Styled.js index 2bccecc..89fefe8 100644 --- a/quinzena7/labefy-projeto/src/Components/ShowPlaylistSongs/Styled.js +++ b/quinzena7/labefy-projeto/src/Components/ShowPlaylistSongs/Styled.js @@ -12,6 +12,7 @@ export const PlaylistSongsSection = styled.section` .titleAddSong { margin-top: 20px; + text-align: center; } .buttonAddNewSong { @@ -27,6 +28,7 @@ export const PlaylistSongsSection = styled.section` export const NewSongInputs = styled.div` display: flex; + flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 16px; diff --git a/quinzena7/labefy-projeto/src/Components/SongPlayer/Styled.js b/quinzena7/labefy-projeto/src/Components/SongPlayer/Styled.js index d098cde..c615c3e 100644 --- a/quinzena7/labefy-projeto/src/Components/SongPlayer/Styled.js +++ b/quinzena7/labefy-projeto/src/Components/SongPlayer/Styled.js @@ -17,4 +17,8 @@ export const SongPlayerStyled = styled.div` align-items: center; gap: 8px; display: flex; + + @media screen and (max-width: 500px) { + flex-direction: column; + } ` \ No newline at end of file