From 84972340b3cfdaf2cb726ab6d978ac7be37cc451 Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Fri, 8 Jul 2022 11:03:21 +0200
Subject: [PATCH] correct mini challenges alignment and metric icon

---
 src/assets/metric_ico.svg                |  4 +---
 src/components/elements/IconLabel.js     |  3 +--
 src/components/elements/MiniChallenge.js | 10 +++++-----
 src/pages/Challenges.js                  | 18 ++++++++++--------
 4 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/assets/metric_ico.svg b/src/assets/metric_ico.svg
index 311c19f..9691616 100644
--- a/src/assets/metric_ico.svg
+++ b/src/assets/metric_ico.svg
@@ -1,3 +1 @@
-<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.27174 15.555C5.67838 16.1483 4.71376 16.1483 4.1204 15.555L1.1961 12.6294C0.601299 12.036 0.601299 11.0714 1.1961 10.4781L2.80643 8.86615L4.32982 10.3892C4.52655 10.5891 4.85021 10.5891 5.04694 10.3892C5.24684 10.1925 5.24684 9.86884 5.04694 9.67211L3.52418 8.14904L4.83751 6.83539L6.36059 8.35846C6.55732 8.55837 6.88097 8.55837 7.0777 8.35846C7.2776 8.16173 7.2776 7.83808 7.0777 7.64135L5.55463 6.11828L6.86828 4.80463L8.39135 6.3277C8.58808 6.5276 8.91173 6.5276 9.10846 6.3277C9.30836 6.13097 9.30836 5.80732 9.10846 5.61059L7.58539 4.08752L8.89904 2.77418L10.4221 4.29694C10.6188 4.49684 10.9425 4.49684 11.1392 4.29694C11.3391 4.10021 11.3391 3.77656 11.1392 3.57983L9.61615 2.05644L11.2281 0.446105C11.8214 -0.148702 12.786 -0.148702 13.3794 0.446105L16.305 3.3704C16.8983 3.96377 16.8983 4.92838 16.305 5.52174L6.27174 15.555Z" fill="#343434"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M554.9 154.5c-17.62-35.25-68.12-35.38-85.87 0c-87 174.3-84.1 165.9-84.1 181.5c0 44.13 57.25 80 128 80s127.1-35.88 127.1-80C639.1 319.9 641.4 327.3 554.9 154.5zM439.1 320l71.96-144l72.17 144H439.1zM256 336c0-16.12 1.375-8.75-85.12-181.5c-17.62-35.25-68.12-35.38-85.87 0c-87 174.3-84.1 165.9-84.1 181.5c0 44.13 57.25 80 127.1 80S256 380.1 256 336zM127.9 176L200.1 320H55.96L127.9 176zM495.1 448h-143.1V153.3C375.5 143 393.1 121.8 398.4 96h113.6c17.67 0 31.1-14.33 31.1-32s-14.33-32-31.1-32h-128.4c-14.62-19.38-37.5-32-63.62-32S270.1 12.62 256.4 32H128C110.3 32 96 46.33 96 64S110.3 96 127.1 96h113.6c5.25 25.75 22.87 47 46.37 57.25V448H144c-26.51 0-48.01 21.49-48.01 48c0 8.836 7.165 16 16 16h416c8.836 0 16-7.164 16-16C544 469.5 522.5 448 495.1 448z"/></svg>
\ No newline at end of file
diff --git a/src/components/elements/IconLabel.js b/src/components/elements/IconLabel.js
index 4cc72d1..4f4772f 100644
--- a/src/components/elements/IconLabel.js
+++ b/src/components/elements/IconLabel.js
@@ -5,8 +5,7 @@ import {Medium} from "../../utils/fonts";
 const IconLabel = (props) => {
     return (
         <FlexRow gap={props.gap}>
-            <Svg className='icon'
-                 width={props.size} height={props.size}
+            <Svg width={props.size} height={props.size}
                  src={props.ico}/>
             <Medium as='p'>
                 {props.children}
diff --git a/src/components/elements/MiniChallenge.js b/src/components/elements/MiniChallenge.js
index 2a7032d..f6adbc0 100644
--- a/src/components/elements/MiniChallenge.js
+++ b/src/components/elements/MiniChallenge.js
@@ -30,7 +30,7 @@ const ChallengeStyle = styled(FlexColumn)`
 
 const Line = styled(Container)`
   height: 1px;
-  width: 80%;
+  width: 85%;
   background-color: ${({theme}) => theme.colors.dark05};
   margin-bottom: 14px;
 `;
@@ -49,13 +49,13 @@ const IconsGrid = styled(Grid)`
 const MiniChallenge = (props) => {
     return (
         <ChallengeStyle as='article' alignmentX='flex-start'>
-            <FlexRow margin='0 0 14px 0' gap='12px'>
-                <H3 as='h3' width='80%'>
+            <FlexRow margin='0 0 14px 0' gap='12px' width='100%' alignmentX='space-between'>
+                <H3 as='h3' width='85%'>
                     {props.title}
                 </H3>
-                <Svg className='icon' src={props.ico} width='30px' height='30px'/>
+                <Svg src={props.ico} width='30px' height='30px'/>
             </FlexRow>
-            <Line className='icon'/>
+            <Line/>
             <Body as='p' margin='0 0 14px 0'>
                 {props.describe}
             </Body>
diff --git a/src/pages/Challenges.js b/src/pages/Challenges.js
index 8d880b7..772ceae 100644
--- a/src/pages/Challenges.js
+++ b/src/pages/Challenges.js
@@ -17,14 +17,16 @@ const Challenges = () => {
                     Challenges
                 </H1>
                 <Search/>
-                <Grid margin='32px 0' gridGap='32px 0'>
-                    <MiniChallenge title='Challenging America geo prediction' ico={textIco}
-                                   describe={`Guess publication location for a piece of text.`}/>
-                    <MiniChallenge title='Challenging America geo prediction' ico={tabularIco}
-                                   describe={`Guess publication location for a piece of text.`}/>
-                    <MiniChallenge title='Challenging America geo prediction' ico={imageIco}
-                                   describe={`Guess publication location for a piece of text.`}/>
-                </Grid>
+                <FlexColumn width='100%'>
+                    <Grid margin='32px 0' gridGap='32px 0'>
+                        <MiniChallenge title='Challenging America geo prediction' ico={textIco}
+                                       describe={`Guess publication location for a piece of text.`}/>
+                        <MiniChallenge title='Challenging America geo prediction' ico={tabularIco}
+                                       describe={`Guess publication location for a piece of text.`}/>
+                        <MiniChallenge title='Challenging America geo prediction' ico={imageIco}
+                                       describe={`Guess publication location for a piece of text.`}/>
+                    </Grid>
+                </FlexColumn>
             </FlexColumn>
             <Pager pages={5}/>
         </FlexColumn>