From d03d35bbe3b8e332ae89d624aba2cd2600c66601 Mon Sep 17 00:00:00 2001
From: Anderson Correa <andersonfpcorrea@gmail.com>
Date: Sat, 12 Nov 2022 19:22:00 -0300
Subject: [PATCH] style: adjust apacing in Progress component

---
 breakpoints media queries                        |  4 +++-
 src/App.jsx                                      |  2 +-
 src/components/MyCoursesAside/MyCoursesAside.jsx |  2 +-
 src/components/Progress/Progress.jsx             |  2 +-
 src/components/SearchBar/SearchBar.jsx           |  2 +-
 src/components/SearchFilters/SearchFilters.jsx   |  2 +-
 src/components/VideoPlayer/VideoPlayer.jsx       |  2 +-
 src/index.css                                    | 12 +++---------
 8 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/breakpoints media queries b/breakpoints media queries
index 67c5476..e25a248 100644
--- a/breakpoints media queries	
+++ b/breakpoints media queries	
@@ -2,4 +2,6 @@ min-width 1150 - MyCourses (ajusta vídeo e aside)
 
 min-width 1070 - Home (ajusta sidebar - app modo mobile)
 
-min-width 960 - Home (ajustar padding lateral), Sidebar (mover para o fundo da tela), NavBackArrow (Ajustar posicionamento)
\ No newline at end of file
+min-width 960 - Home (ajustar padding lateral), Sidebar (mover para o fundo da tela), NavBackArrow (Ajustar posicionamento)
+
+min-width 360 - Main (ajusta padding lateral), VideoList (remove padding lateral)
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 6876494..306bd65 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -21,7 +21,7 @@ function App() {
       <div>
         <Sidebar setView={setView} view={view} />
       </div>
-      <main className="pt-14 pb-36 min-[960px]:py-20 px-8 min-[960px]:px-16 overflow-y-auto w-full">
+      <main className="overflow-y-auto w-full pt-14 pb-36 px-6 min-[960px]:py-20 min-[960px]:px-16 ">
         <Animate id={view}>{views[view]}</Animate>
       </main>
     </div>
diff --git a/src/components/MyCoursesAside/MyCoursesAside.jsx b/src/components/MyCoursesAside/MyCoursesAside.jsx
index 3f035b4..6d56725 100644
--- a/src/components/MyCoursesAside/MyCoursesAside.jsx
+++ b/src/components/MyCoursesAside/MyCoursesAside.jsx
@@ -83,7 +83,7 @@ function MyCoursesAside({ selectedVideo, courseList, setSelectedVideo }) {
   }
 
   return (
-    <aside className="p-4 min-[1150px]:p-0 flex flex-col min-[1150px]:gap-12 ">
+    <aside className="pt-4 min-[360px]:p-4 min-[1150px]:p-0 flex flex-col min-[1150px]:gap-12 ">
       <h2 className="hidden min-[1150px]:block text-2xl font-medium pl-8">
         Trilha
       </h2>
diff --git a/src/components/Progress/Progress.jsx b/src/components/Progress/Progress.jsx
index b022496..7811c16 100644
--- a/src/components/Progress/Progress.jsx
+++ b/src/components/Progress/Progress.jsx
@@ -35,7 +35,7 @@ function Progress() {
             <div className="isolate text-5xl text-evolutionGrey">{`${progress}%`}</div>
           </div>
         </div>
-        <div className="flex flex-col gap-6 p-8 justify-start text-lg">
+        <div className="flex flex-col  min-[960px]:gap-6 justify-around min-[960px]:justify-start text-lg  pt-4 pl-4 min-[960px]:p-8">
           <p>
             Você está na formação&nbsp;
             <span className="font-semibold">{currentRoadmap}</span>
diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
index 64e0401..439c3aa 100644
--- a/src/components/SearchBar/SearchBar.jsx
+++ b/src/components/SearchBar/SearchBar.jsx
@@ -12,7 +12,7 @@ function SearchBar({ normalText, boldText }) {
         <input
           type="text"
           id="search"
-          className="bg-evolutionIce w-full h-14 rounded-2xl px-16"
+          className="bg-evolutionIce w-full h-16 rounded-2xl px-16"
           placeholder="Procure mais conteúdos"
         />
       </label>
diff --git a/src/components/SearchFilters/SearchFilters.jsx b/src/components/SearchFilters/SearchFilters.jsx
index 950c240..4e18c0d 100644
--- a/src/components/SearchFilters/SearchFilters.jsx
+++ b/src/components/SearchFilters/SearchFilters.jsx
@@ -2,7 +2,7 @@ import { MdFilterList } from "react-icons/md";
 
 function SearchFilters({ filters }) {
   return (
-    <div className="flex gap-14">
+    <div className="flex max-[959px]:justify-around min-[960px]:gap-14">
       {filters.map((f) => (
         <div
           className="relative border-[1px] rounded-2xl border-orangeGrey"
diff --git a/src/components/VideoPlayer/VideoPlayer.jsx b/src/components/VideoPlayer/VideoPlayer.jsx
index 4bdbe3b..53103d8 100644
--- a/src/components/VideoPlayer/VideoPlayer.jsx
+++ b/src/components/VideoPlayer/VideoPlayer.jsx
@@ -24,7 +24,7 @@ function VideoPlayer({ video }) {
 
   function InfoCard() {
     return (
-      <div className="flex gap-4">
+      <div className="flex gap-4 relative">
         <div className="h-16 w-16 rounded-full grid place-items-center bg-evolution after:block after:absolute after:bg-white after:h-14 after:w-14 after:rounded-full">
           <img
             src={OrangeLogo}
diff --git a/src/index.css b/src/index.css
index daa29e5..8ec7ef4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -31,24 +31,18 @@ html {
 
 @media (max-width: 540px) {
   html {
-    font-size: 2.6vw;
+    font-size: 2.4vw;
   }
 }
 
 @media (max-width: 460px) {
   html {
-    font-size: 2.8vw;
+    font-size: 2.4vw;
   }
 }
 
 @media (max-width: 400px) {
   html {
-    font-size: 2.9vw;
-  }
-}
-
-@media (max-width: 350px) {
-  html {
-    font-size: 3.1vw;
+    font-size: 2.5vw;
   }
 }