diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index 10bfd38c..b67f2437 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -120,30 +120,14 @@ h4 { .statsGrid { display: grid; grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); column-gap: 100px; row-gap: 100px; padding: 25px; - div { - padding: 25px; - @include themed() { - padding: 45px; - border-radius: t($borderRadius); - background: t($modal-sidebar); - box-shadow: 0 0 0 4px t($modal-sidebarActive); - svg { - font-size: 50px; - color: t($subColor); - } - } - } div:nth-child(1) { grid-area: 1 / 1 / 3 / 3; } - div:nth-child(2) { - grid-area: 3 / 1 / 4 / 3; - } - div:nth-child(3) { + .rightPanel { grid-area: 1 / 3 / 4 / 4; display: flex; flex-flow: column; @@ -192,3 +176,47 @@ h4 { } } } + +.achievements { + margin-top: 25px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + grid-gap: 10px; +} + +.achievement { + padding: 20px 10px 20px 10px; + display: flex; + flex-flow: row !important; + align-items: center; + @include themed() { + background: t($modal-sidebarActive); + border-radius: t($borderRadius); + gap: 20px; + } + svg { + font-size: 25px !important; + } +} + +.statSection { + padding: 25px; + @include themed() { + padding: 45px; + border-radius: t($borderRadius); + background: t($modal-sidebar); + box-shadow: 0 0 0 4px t($modal-sidebarActive); + svg { + font-size: 50px; + color: t($subColor); + } + } +} + +.achievementContent { + display: flex; + flex-flow: column; + span { + font-size: 15px; + } +} \ No newline at end of file diff --git a/src/components/modals/main/settings/sections/Stats.jsx b/src/components/modals/main/settings/sections/Stats.jsx index b32fb6b7..949b01c6 100644 --- a/src/components/modals/main/settings/sections/Stats.jsx +++ b/src/components/modals/main/settings/sections/Stats.jsx @@ -4,6 +4,7 @@ import { MdShowChart } from 'react-icons/md'; import Switch from '../Switch'; import SettingsItem from '../SettingsItem'; +import { FaTrophy } from 'react-icons/fa'; import EventBus from 'modules/helpers/eventbus'; @@ -71,19 +72,30 @@ export default class Stats extends PureComponent { />