feat: weather sizing, achievements

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;
+  }
+}

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 {
           />
         </SettingsItem>
         <div className="statsGrid">
-          <div>
-            <span>
-              {getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}:{' '}
-              {this.state.stats['tabs-opened'] || 0}
-            </span>
+          <div className="statSection">
+            <span className="title">Achievements</span>
+            <div className="achievements">
+              {this.state.stats['tabs-opened'] > 10 && (
+                <div className="achievement">
+                  <FaTrophy />
+                  <div className="achievementContent">
+                    <span>10/10 IGN</span>
+                    <span className="subtitle">Opened 10 tabs</span>
+                  </div>
+                </div>
+              )}
+              {this.state.stats['tabs-opened'] > 100 && (
+                <div className="achievement">
+                  <FaTrophy />
+                  <div className="achievementContent">
+                    <span>Seasoning</span>
+                    <span className="subtitle">Opened 100 tabs</span>
+                  </div>
+                </div>
+              )}
           </div>
-          <div>
-            <span>
-              {getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}:{' '}
-              {this.state.stats['tabs-opened'] || 0}
-            </span>
           </div>
-          <div>
+          <div className="statSection rightPanel">
             <MdShowChart />
             <span className="subtitle">
               {getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}{' '}

src/components/modals/main/settings/sections/Weather.jsx

@@ -76,6 +76,7 @@ export default class TimeSettings extends PureComponent {
             <option value="1">Basic</option>
             <option value="2">Standard</option>
             <option value="3">Expanded</option>
+            <option value="4">Custom</option>
           </Dropdown>
         </SettingsItem>
         <SettingsItem title={getMessage('modals.main.settings.sections.weather.location')}>
@@ -158,64 +159,70 @@ export default class TimeSettings extends PureComponent {
             </Dropdown>
           </SettingsItem>
         )}
-        <Checkbox
-          name="showlocation"
-          text={getMessage('modals.main.settings.sections.weather.extra_info.show_location')}
-          category="weather"
-        />
-        <Checkbox
-          name="weatherdescription"
-          text={getMessage('modals.main.settings.sections.weather.extra_info.show_description')}
-          category="weather"
-        />
-        <Checkbox
-          name="cloudiness"
-          text={getMessage('modals.main.settings.sections.weather.extra_info.cloudiness')}
-          category="weather"
-        />
-        <Checkbox
-          name="humidity"
-          text={getMessage('modals.main.settings.sections.weather.extra_info.humidity')}
-          category="weather"
-        />
-        <Checkbox
-          name="visibility"
-          text={getMessage('modals.main.settings.sections.weather.extra_info.visibility')}
-          category="weather"
-        />
-        <Checkbox
-          name="windspeed"
-          text={getMessage('modals.main.settings.sections.weather.extra_info.wind_speed')}
-          category="weather"
-          onChange={() =>
-            this.setState({
-              windSpeed: localStorage.getItem('windspeed') !== 'true',
-            })
-          }
-        />
-        <Checkbox
-          name="windDirection"
-          text={getMessage('modals.main.settings.sections.weather.extra_info.wind_direction')}
-          category="weather"
-          disabled={this.state.windSpeed}
-        />
-        <Checkbox
-          name="mintemp"
-          text={getMessage('modals.main.settings.sections.weather.extra_info.min_temp')}
-          category="weather"
-        />
-        <Checkbox
-          name="maxtemp"
-          text={getMessage('modals.main.settings.sections.weather.extra_info.max_temp')}
-          category="weather"
-        />
-        <Checkbox name="feelsliketemp" text={'Feels like temperature'} category="weather" />
-        <Checkbox
-          name="atmosphericpressure"
-          text={getMessage('modals.main.settings.sections.weather.extra_info.atmospheric_pressure')}
-          category="weather"
-        />
-        <Checkbox name="upcomingForecast" text="Upcoming Forecast" category="weather" />
+        {localStorage.getItem('weatherType') == 4 && (
+          <SettingsItem title="Custom Settings">
+            <Checkbox
+              name="showlocation"
+              text={getMessage('modals.main.settings.sections.weather.extra_info.show_location')}
+              category="weather"
+            />
+            <Checkbox
+              name="weatherdescription"
+              text={getMessage('modals.main.settings.sections.weather.extra_info.show_description')}
+              category="weather"
+            />
+            <Checkbox
+              name="cloudiness"
+              text={getMessage('modals.main.settings.sections.weather.extra_info.cloudiness')}
+              category="weather"
+            />
+            <Checkbox
+              name="humidity"
+              text={getMessage('modals.main.settings.sections.weather.extra_info.humidity')}
+              category="weather"
+            />
+            <Checkbox
+              name="visibility"
+              text={getMessage('modals.main.settings.sections.weather.extra_info.visibility')}
+              category="weather"
+            />
+            <Checkbox
+              name="windspeed"
+              text={getMessage('modals.main.settings.sections.weather.extra_info.wind_speed')}
+              category="weather"
+              onChange={() =>
+                this.setState({
+                  windSpeed: localStorage.getItem('windspeed') !== 'true',
+                })
+              }
+            />
+            <Checkbox
+              name="windDirection"
+              text={getMessage('modals.main.settings.sections.weather.extra_info.wind_direction')}
+              category="weather"
+              disabled={this.state.windSpeed}
+            />
+            <Checkbox
+              name="mintemp"
+              text={getMessage('modals.main.settings.sections.weather.extra_info.min_temp')}
+              category="weather"
+            />
+            <Checkbox
+              name="maxtemp"
+              text={getMessage('modals.main.settings.sections.weather.extra_info.max_temp')}
+              category="weather"
+            />
+            <Checkbox name="feelsliketemp" text={'Feels like temperature'} category="weather" />
+            <Checkbox
+              name="atmosphericpressure"
+              text={getMessage(
+                'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
+              )}
+              category="weather"
+            />
+            <Checkbox name="upcomingForecast" text="Upcoming Forecast" category="weather" />
+          </SettingsItem>
+        )}
       </>
     );
   }

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 (
           <span className="subtitle">{this.state.weather.temp_max + this.state.temp_text}</span>
         );
-      } else {
-        return (
-          <>
-            <span className="subtitle">{this.state.weather.temp_min + this.state.temp_text}</span>{' '}
-            <span className="subtitle"> {this.state.weather.temp_max + this.state.temp_text}</span>
-          </>
-        );
+      } else {*/
       }
+      return (
+        <>
+          <span className="subtitle">{this.state.weather.temp_min + this.state.temp_text}</span>{' '}
+          <span className="subtitle"> {this.state.weather.temp_max + this.state.temp_text}</span>
+        </>
+      );
     };
 
-    return (
-      <div className="weather">
-        <div>
-          <div className="top-weather">
-            <div>
-              <WeatherIcon name={this.state.icon} />
-              <span>{this.state.weather.temp + this.state.temp_text}</span>
-            </div>
-            <span className="minmax">{minmax()}</span>
-          </div>
-          <div className="extra-info">
-            {/*{enabled('humidity') ? <span><WiHumidity/>{this.state.weather.humidity}%</span> : null}*/}
-            {enabled('feelsliketemp') ? (
-              <span>Feels like {this.state.weather.temp_feels_like + this.state.temp_text}</span>
-            ) : null}
-            {enabled('showlocation') ? <span className="loc">{this.state.location}</span> : null}
-          </div>
-          <div className="expanded-info">
+    const expandedInfo = () => {
+      return (
+        <div className="expanded-info">
+          {/*}
             {enabled('upcomingForecast') ? (
               <>
                 <span className="subtitle">Upcoming Forecast</span>
@@ -225,54 +212,79 @@ export default class Weather extends PureComponent {
                 </div>
               </>
             ) : null}
-
+            */}
+          {localStorage.getItem('weatherType') >= 3 && (
             <span className="subtitle">Extra Information</span>
-            {enabled('cloudiness') ? (
-              <span>
-                <WiCloud className="weatherIcon" />
-                {this.state.weather.cloudiness}%
-              </span>
-            ) : null}
-            {enabled('windspeed') ? (
-              <span>
-                <WiWindy className="weatherIcon" />
-                {this.state.weather.wind_speed}
-                <span className="minmax"> m/s</span>{' '}
-                {enabled('windDirection') ? (
-                  <div className="weatherIcon">
-                    <WindDirectionIcon
-                      className="weatherIcon"
-                      degrees={this.state.weather.wind_degrees}
-                    />
-                  </div>
-                ) : null}
-              </span>
-            ) : null}
-            {enabled('atmosphericpressure') ? (
-              <span>
-                <WiBarometer className="weatherIcon" />
-                {this.state.weather.pressure}
-                <span className="minmax"> hPa</span>
-              </span>
-            ) : null}
-            {enabled('weatherdescription') ? (
-              <span>
+          )}
+          {enabled('cloudiness') ? (
+            <span>
+              <WiCloud className="weatherIcon" />
+              {this.state.weather.cloudiness}%
+            </span>
+          ) : null}
+          {enabled('windspeed') ? (
+            <span>
+              <WiWindy className="weatherIcon" />
+              {this.state.weather.wind_speed}
+              <span className="minmax"> m/s</span>{' '}
+              {enabled('windDirection') ? (
                 <div className="weatherIcon">
-                  <WeatherIcon name={this.state.icon} />
+                  <WindDirectionIcon
+                    className="weatherIcon"
+                    degrees={this.state.weather.wind_degrees}
+                  />
                 </div>
-                {this.state.weather.description}
-              </span>
-            ) : null}
-            {enabled('visibility') ? (
-              <span>
-                <MdDisabledVisible style={{ padding: '3px' }} />
-                {variables.language.getMessage(variables.languagecode, 'widgets.weather.meters', {
-                  amount: this.state.weather.visibility,
-                })}
-              </span>
-            ) : null}
-          </div>
+              ) : null}
+            </span>
+          ) : null}
+          {enabled('atmosphericpressure') ? (
+            <span>
+              <WiBarometer className="weatherIcon" />
+              {this.state.weather.pressure}
+              <span className="minmax"> hPa</span>
+            </span>
+          ) : null}
+          {enabled('weatherdescription') ? (
+            <span>
+              <div className="weatherIcon">
+                <WeatherIcon name={this.state.icon} />
+              </div>
+              {this.state.weather.description}
+            </span>
+          ) : null}
+          {enabled('visibility') ? (
+            <span>
+              <MdDisabledVisible style={{ padding: '3px' }} />
+              {variables.language.getMessage(variables.languagecode, 'widgets.weather.meters', {
+                amount: this.state.weather.visibility,
+              })}
+            </span>
+          ) : null}
         </div>
+      );
+    };
+
+    return (
+      <div className="weather">
+        <div>
+          <div className="top-weather">
+            {localStorage.getItem('weatherType') >= 1 && (
+              <div>
+                <WeatherIcon name={this.state.icon} />
+                <span>{this.state.weather.temp + this.state.temp_text}</span>
+              </div>
+            )}
+            {localStorage.getItem('weatherType') >= 2 && <span className="minmax">{minmax()}</span>}
+          </div>
+          {localStorage.getItem('weatherType') >= 2 && (
+            <div className="extra-info">
+              {/*{enabled('humidity') ? <span><WiHumidity/>{this.state.weather.humidity}%</span> : null}*/}
+              <span>Feels like {this.state.weather.temp_feels_like + this.state.temp_text}</span>
+              <span className="loc">{this.state.location}</span>
+            </div>
+          )}
+        </div>
+        {expandedInfo()}
       </div>
     );
   }

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;