Ajustes de layout e label da experience

williamdlm · Oct 12, 2021 · bbf8d1b · bbf8d1b · vercel · Oct 12, 2021
1 parent c6275e0
commit bbf8d1b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/pages/_app.js b/pages/_app.js
@@ -3,8 +3,8 @@ import db from "../db.json";
 import { ExperienceProvider } from "../src/contexts/ExperienceContext";
 
 const GlobalStyle = createGlobalStyle`
- @import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');
- @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
+ /* @import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); */
 
  * {
  box-sizing: border-box;

diff --git a/src/components/ExperienceBar/index.js b/src/components/ExperienceBar/index.js
@@ -6,23 +6,23 @@ import db from "../../../db.json";
 
 const ExperienceBar = styled.div`
  display: flex;
- /* justify-content: end; */
- overflow: hidden;
+ justify-content: end;
+ /* overflow: hidden; */
  position: relative;
  margin-top: 2rem;
  width: 100%;
  height: 1rem;
  border-radius: 50px;
  background-color: ${({ theme }) => theme.colors.primary};
 
- /* &::after {
+ &::before {
+ flex: 1;
  position: absolute;
  top: -1.5rem;
- width: 10rem;
  content: "Experience";
  font-style: italic;
  text-align: right;
- } */
+ }
 `;
 
 function ExpBar() {
@@ -45,12 +45,19 @@ function ExpBar() {
  >
  <div
  style={{
- backgroundColor: `${db.theme.colors.red}`,
  height: "100%",
- width: `${percentToNextLevel}%`,
- alignSelf: "self-start",
+ width: "100%",
  }}
- />
+ >
+ <div
+ style={{
+ backgroundColor: `${db.theme.colors.red}`,
+ height: "100%",
+ borderRadius: "50px",
+ width: `${percentToNextLevel}%`,
+ }}
+ />
+ </div>
  </ExperienceBar>
  );
 }

diff --git a/src/components/Main/index.js b/src/components/Main/index.js
@@ -81,7 +81,7 @@ Main.Ranking = styled.div`
  border-radius: 50px;
  background-color: ${({ theme }) => theme.colors.primary};
  background-image: url("https://res.cloudinary.com/dhmkfekt2/image/upload/v1633575907/58889546bc2fc2ef3a1860b8_kkud4g.png");
- background-size: cover;
+ background-size: 25vmax;
 
  @media screen and (max-width: 849px) {
  width: 100%;