style: adjust apacing in Progress component

andersonfpcorrea · Nov 12, 2022 · d03d35b · d03d35b
1 parent 89a690f
commit d03d35b
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 16 deletions.
diff --git 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)
+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)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
   }
 }