Merge pull request #15 from fullstacktf/develop

Fixit a css on achievements

Author: RubenZagon

src/components/achievements/achievementItem.tsx

@@ -1,30 +1,24 @@
 import React, { FC } from "react";
-import styled from '@emotion/styled';
+import styled from "@emotion/styled";
 import { AchievementInterface } from "./achievementList";
 
-
-
 export interface achievmentItemProps {
-  achievement: AchievementInterface
-  className?: string
+  achievement: AchievementInterface;
+  className?: string;
 }
 
 export const AchievmentItem: FC<achievmentItemProps> = ({ achievement, className }) => {
   return (
     <>
       <ImgContainer>
-        <img className={className} src={achievement.image} alt={achievement.name} title={achievement.description} />
+        <img className={className} src={achievement.image} alt={achievement.name} title={achievement.description} width="100%" height="100%" />
       </ImgContainer>
     </>
   );
 };
 
-
 const ImgContainer = styled.div`
-  display:flex;
-  min-width:25px;
-  min-height: 25px;
-  width:5em;
+  display: flex;
+  width: 5em;
   height: 5em;
-`
-
+`;

src/components/achievements/achievements.tsx

@@ -1,38 +1,34 @@
 import React, { FC } from "react";
-import styled from '@emotion/styled';
+import styled from "@emotion/styled";
 import { achievementList } from "./achievementList";
 import { AchievmentItem } from "./achievementItem";
 
-interface AchievementsProps {
-}
-
-export const Achievements: FC<AchievementsProps> = (props) => {
+interface AchievementsProps {}
 
+export const Achievements: FC<AchievementsProps> = props => {
   return (
     <Container>
       <h1>Logros</h1>
-      <ContainerAchievements>
-        {achievementList && achievementList.map(item => <AchievmentItem achievement={item} className={item.unlock} />)}
-      </ContainerAchievements>
+      <ContainerAchievements>{achievementList && achievementList.map(item => <AchievmentItem achievement={item} className={item.unlock} />)}</ContainerAchievements>
     </Container>
   );
 };
 
 const Container = styled.div`
-  display:flex;
-  flex-direction:column;
-`
+  display: flex;
+  flex-direction: column;
+`;
 const ContainerAchievements = styled.div`
-  display:flex;
-  flex-direction:wrap;
+  display: flex;
+  flex-direction: wrap;
 
-  & > div{
-    margin-left:10px;
-    padding:10px;
+  & > div {
+    margin-left: 10px;
+    padding: 10px;
     border-radius: 15px;
   }
 
   & > div > img:not(.unlock) {
     filter: grayscale(1);
   }
-`
+`;