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 { />
-
- - {getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}:{' '} - {this.state.stats['tabs-opened'] || 0} - +
+ Achievements +
+ {this.state.stats['tabs-opened'] > 10 && ( +
+ +
+ 10/10 IGN + Opened 10 tabs +
+
+ )} + {this.state.stats['tabs-opened'] > 100 && ( +
+ +
+ Seasoning + Opened 100 tabs +
+
+ )}
-
- - {getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}:{' '} - {this.state.stats['tabs-opened'] || 0} -
-
+
{getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}{' '} diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx index fecbae6f..3a24b6e4 100644 --- a/src/components/modals/main/settings/sections/Weather.jsx +++ b/src/components/modals/main/settings/sections/Weather.jsx @@ -76,6 +76,7 @@ export default class TimeSettings extends PureComponent { + @@ -158,64 +159,70 @@ export default class TimeSettings extends PureComponent { )} - - - - - - - this.setState({ - windSpeed: localStorage.getItem('windspeed') !== 'true', - }) - } - /> - - - - - - + {localStorage.getItem('weatherType') == 4 && ( + + + + + + + + this.setState({ + windSpeed: localStorage.getItem('windspeed') !== 'true', + }) + } + /> + + + + + + + + )} ); } diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx index 7b14cc67..09f471c5 100644 --- a/src/components/widgets/weather/Weather.jsx +++ b/src/components/widgets/weather/Weather.jsx @@ -147,7 +147,7 @@ export default class Weather extends PureComponent { render() { const enabled = (setting) => { - return localStorage.getItem(setting) === 'true'; + return localStorage.getItem(setting) === 'true' && localStorage.getItem('weatherType') >= 3; }; if ( @@ -162,7 +162,8 @@ export default class Weather extends PureComponent { } const minmax = () => { - const mintemp = enabled('mintemp'); + { + /*const mintemp = enabled('mintemp'); const maxtemp = enabled('maxtemp'); if (!mintemp && !maxtemp) { @@ -175,34 +176,20 @@ export default class Weather extends PureComponent { return ( {this.state.weather.temp_max + this.state.temp_text} ); - } else { - return ( - <> - {this.state.weather.temp_min + this.state.temp_text}{' '} - {this.state.weather.temp_max + this.state.temp_text} - - ); + } else {*/ } + return ( + <> + {this.state.weather.temp_min + this.state.temp_text}{' '} + {this.state.weather.temp_max + this.state.temp_text} + + ); }; - return ( -
-
-
-
- - {this.state.weather.temp + this.state.temp_text} -
- {minmax()} -
-
- {/*{enabled('humidity') ? {this.state.weather.humidity}% : null}*/} - {enabled('feelsliketemp') ? ( - Feels like {this.state.weather.temp_feels_like + this.state.temp_text} - ) : null} - {enabled('showlocation') ? {this.state.location} : null} -
-
+ const expandedInfo = () => { + return ( +
+ {/*} {enabled('upcomingForecast') ? ( <> Upcoming Forecast @@ -225,54 +212,79 @@ export default class Weather extends PureComponent {
) : null} - + */} + {localStorage.getItem('weatherType') >= 3 && ( Extra Information - {enabled('cloudiness') ? ( - - - {this.state.weather.cloudiness}% - - ) : null} - {enabled('windspeed') ? ( - - - {this.state.weather.wind_speed} - m/s{' '} - {enabled('windDirection') ? ( -
- -
- ) : null} -
- ) : null} - {enabled('atmosphericpressure') ? ( - - - {this.state.weather.pressure} - hPa - - ) : null} - {enabled('weatherdescription') ? ( - + )} + {enabled('cloudiness') ? ( + + + {this.state.weather.cloudiness}% + + ) : null} + {enabled('windspeed') ? ( + + + {this.state.weather.wind_speed} + m/s{' '} + {enabled('windDirection') ? (
- +
- {this.state.weather.description} -
- ) : null} - {enabled('visibility') ? ( - - - {variables.language.getMessage(variables.languagecode, 'widgets.weather.meters', { - amount: this.state.weather.visibility, - })} - - ) : null} -
+ ) : null} + + ) : null} + {enabled('atmosphericpressure') ? ( + + + {this.state.weather.pressure} + hPa + + ) : null} + {enabled('weatherdescription') ? ( + +
+ +
+ {this.state.weather.description} +
+ ) : null} + {enabled('visibility') ? ( + + + {variables.language.getMessage(variables.languagecode, 'widgets.weather.meters', { + amount: this.state.weather.visibility, + })} + + ) : null}
+ ); + }; + + return ( +
+
+
+ {localStorage.getItem('weatherType') >= 1 && ( +
+ + {this.state.weather.temp + this.state.temp_text} +
+ )} + {localStorage.getItem('weatherType') >= 2 && {minmax()}} +
+ {localStorage.getItem('weatherType') >= 2 && ( +
+ {/*{enabled('humidity') ? {this.state.weather.humidity}% : null}*/} + Feels like {this.state.weather.temp_feels_like + this.state.temp_text} + {this.state.location} +
+ )} +
+ {expandedInfo()}
); } diff --git a/src/components/widgets/weather/weather.scss b/src/components/widgets/weather/weather.scss index fbaea26e..dbc10fc8 100644 --- a/src/components/widgets/weather/weather.scss +++ b/src/components/widgets/weather/weather.scss @@ -12,6 +12,8 @@ width: auto; display: grid; place-items: center; + justify-items: start; + padding: 25px; &:hover { height: auto;