FE-1039 FE-1048 Fixes on images (#130)

* [WIP] First batch of icon naming fixes * Final batch of icon naming fixes * Fixes * Fix image sizes in Reward Claiming & How to join Arbitrum * Escape $ char due to a styling error
WeatherXM · Jul 30, 2024 · 686b3aa · 686b3aa
1 parent 408245e
commit 686b3aa
Show file tree

Hide file tree

Showing 244 changed files with 259 additions and 1,781 deletions.
diff --git a/cspell.json b/cspell.json
@@ -26,7 +26,6 @@
     "MSVC",
     "wifi",
     "rewardable",
-    "inapp",
     "Hotspotty"
   ]
 }
diff --git a/docs/account/change-password.mdx b/docs/account/change-password.mdx
@@ -22,13 +22,13 @@ Please, do not forget to  also check your **spam** folder.
 ### Logged in
 - Go to My profile, then choose "Preferences & Settings" and press "Change Password" button, enter your account's email. You will receive an email with a link to change your password.
 
-<img src={useBaseUrl("/img/project/My-profile_inapp.png")}  width="200" /> <img src={useBaseUrl("/img/project/change_password.png")} width="200" /> <img src={useBaseUrl("/img/project/enter-email.png")} width="200" />
+<img src={useBaseUrl("/img/mobile-app/my-profile-in-app.png")}  width="200" /> <img src={useBaseUrl("/img/mobile-app/change-password.png")} width="200" /> <img src={useBaseUrl("/img/mobile-app/enter-email.png")} width="200" />
 
 ### Logged out
 
 - Open the App and the login page must appear, press "Forgot password" button, enter your account's email. You will receive an email with a link to change your password.
 
-<img src={useBaseUrl("/img/project/login.png")}  width="200" /> <img src={useBaseUrl("/img/project/forgot_password.png")} width="200" /> <img src={useBaseUrl("/img/project/enter-email.png")} width="200" />
+<img src={useBaseUrl("/img/mobile-app/login.png")}  width="200" /> <img src={useBaseUrl("/img/mobile-app/forgot-password.png")} width="200" /> <img src={useBaseUrl("/img/mobile-app/enter-email.png")} width="200" />
 
 :::note
 - **The instructions above are for both versions of the App (Android and iOS).**

diff --git a/docs/account/delete-account.mdx b/docs/account/delete-account.mdx
@@ -28,7 +28,7 @@ If you have any questions regarding your data and the deletion of your account,
 
 
 <section class="explanation small-big">
-  <img src={useBaseUrl("img/wxm-devices/helium-bundle/delete-account.jpg")} />
+  <img src={useBaseUrl("img/mobile-app/delete-account.jpg")} />
   <span>
 
 Go to the settings screen and press "Delete Account" button, read carefully the instructions. **This procedure is irreversible**

diff --git a/docs/home.mdx b/docs/home.mdx
@@ -18,7 +18,7 @@ WeatherXM weather stations are the world’s first to natively support Web3 tech
  <section class="product-container">
   <div class="device">
     <Link to="/wxm-devices/wifi-m5-bundle/wxm-ws1000-introduction">
-      <img src={useBaseUrl("img/home/m5.png")} />
+      <img src={useBaseUrl("img/home/m5-bundle.png")} />
       <div class="device-info">
         <h4>WeatherXM M5 bundle (WB1000)</h4>
         <p>This is our developer friendly, local weather data miner bundled with an easy to set up all-in-one weather station.</p>
@@ -39,7 +39,7 @@ WeatherXM weather stations are the world’s first to natively support Web3 tech
  <section class="product-container">
   <div class="device" >
     <Link to="wxm-devices/D1-bundle/D1-bundle-introduction">
-      <img src={useBaseUrl("/img/home/D1-bundle.png")} />
+      <img src={useBaseUrl("/img/home/d1-bundle.png")} />
       <div class="device-info" >
         <h4>WeatherXM D1 bundle (WB1200)</h4>
         <p>The WB1200 is a bundle product that combines the WS1001 weather station with our open source WeatherXM WG1200 Gateway.</p>
@@ -48,7 +48,7 @@ WeatherXM weather stations are the world’s first to natively support Web3 tech
   </div>
   <div class="device">
     <Link to="/wxm-devices/pulse-bundle/introduction">
-      <img src={useBaseUrl("/img/wxm-devices/pulse-bundle/pulse_bundle.png")} />
+      <img src={useBaseUrl("/img/home/pulse-bundle.png")} />
       <div class="device-info">
         <h4>WeatherXM Pulse bundle (WB3000)</h4>
         <p>The WB3000 is a bundle product, that combines the WS1001 weather station with our WG3000 Gateway which uses 4G - LTE.</p>

diff --git a/docs/introduction.mdx b/docs/introduction.mdx
@@ -17,7 +17,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 </div>
 
 <div class="control">
-  <img src={useBaseUrl("/img/project/introduction/wxm-network-banner.svg")} />
+  <img src={useBaseUrl("/img/introduction/wxm-network-banner.svg")} />
 </div>
 
 ## Introduction
@@ -52,7 +52,7 @@ Currently we use 4 main types of devices:
 - [WeatherXM M5 Bundle (WB1000)](/wxm-devices/wifi-m5-bundle/wxm-ws1000-introduction) which is the WiFi version
 - [WeatherXM Helium Version (WS2000) ](/wxm-devices/helium-bundle/wxm-ws2000-introduction) which is the Helium version
 - [WeatherXM D1 bundle (WB1200)](/wxm-devices/D1-bundle/D1-bundle-introduction) which is the upgraded WiFi version
--  WeatherXM-WB3000 which is the 4G/LTE version
+- [WeatherXM Pulse bundle (WB3000)](/wxm-devices/pulse-bundle/introduction) which is the 4G/LTE version
 
 
 

diff --git a/docs/rewards/how-to-join-arbitrum-and-see-your-tokens.mdx b/docs/rewards/how-to-join-arbitrum-and-see-your-tokens.mdx
@@ -32,13 +32,11 @@ Please follow the steps to add Arbitrum One Mainnet:
 
 - Navigate to [Arbiscan.io](https://arbiscan.io/)
 - Scroll down to the bottom of the page and click on the button `Add Arbitrum One Network`
-
-<img class="marginBottomNormal" src={useBaseUrl("/img/wallet/Arbitrum-One.png")} alt="Arbitrum One" />
+  <img class="marginBottomNormal" src={useBaseUrl("/img/rewards/arbitrum-one.png")} alt="Arbitrum One" />
 
 - Once you click the button you will see a MetaMask notification, now click on **Approve**.
 You will be directed to Arbitrum's Mainnet in the network dropdown list. You can now close the dialog.
-
-<img class="marginBottomNormal" src={useBaseUrl("/img/wallet/approve_on_metamask.png")} />
+  <img style={{ maxHeight: "500px" }} class="marginBottomNormal" src={useBaseUrl("/img/rewards/approve-on-metamask.png")} />
 
 <hr/>
 

diff --git a/docs/rewards/rewards-claiming.mdx b/docs/rewards/rewards-claiming.mdx
@@ -32,11 +32,11 @@ To claim your rewards:
 
 1. Open the WeatherXM app. 
 2. Navigate to "My Profile"
-<img class="marginTopBottomNormal" src={useBaseUrl("/img/project/my-profile.png")} alt="My Profile" />
+<img style={{ maxHeight: "600px" }} class="marginTopBottomNormal" src={useBaseUrl("/img/rewards/my-profile.png")} alt="My Profile" />
 
 3. Then press the "Claim" button. 
 4. Follow the instructions and "connect your wallet".
-<img class="marginTopBottomNormal" src={useBaseUrl("/img/project/connect-wallet-arbitrum.jpg")} alt="connect_wallet" />
+<img style={{ maxHeight: "600px" }} class="marginTopBottomNormal" src={useBaseUrl("/img/rewards/connect-wallet-arbitrum.jpg")} alt="connect_wallet" />
 
 5. Enter the amount you want to claim and press "Next".
 6. Then, follow the instructions on your wallet to confirm the transaction.
@@ -50,69 +50,53 @@ To claim your rewards:
 <TabItem value="Web">
 
 1. Navigate to the [Claim dApp](https://claim.weatherxm.com/).
-<img class="marginTopBottomNormal" src={useBaseUrl("/img/project/web-claim-arbitrum.png")} alt="My Profile" />
+<img style={{ maxWidth: "650px" }} class="marginTopBottomNormal" src={useBaseUrl("/img/rewards/web-claim-arbitrum.png")} alt="My Profile" />
 
 2. Connect you Wallet.
 3. Enter the amount you want to claim and press "Claim".
-<img class="marginTopBottomNormal" src={useBaseUrl("/img/project/add-amount.png")} />
+<img style={{ maxHeight: "400px" }} class="marginTopBottomNormal" src={useBaseUrl("/img/rewards/add-amount.png")} />
 
 4. confirm the transaction on your wallet.
-<img class="marginTopBottomNormal" src={useBaseUrl("/img/project/sign-transaction-arbitrum.png")} />
+<img style={{ maxHeight: "400px" }} class="marginTopBottomNormal" src={useBaseUrl("/img/rewards/sign-transaction-arbitrum.png")} />
 
 5. You have successfully claimed your rewards!
 
-<img class="marginTopBottomNormal" src={useBaseUrl("/img/project/Claim-success.png")} />
+<img style={{ maxHeight: "400px" }} class="marginTopBottomNormal" src={useBaseUrl("/img/rewards/claim-success.png")} />
 
 
 </TabItem>
 
 </Tabs>
 
 ### Alternative Method to Claim Rewards
+1. Navigate to the [Claim dApp](https://claim.weatherxm.com/).
+   <img style={{ maxWidth: "650px" }} class="marginBottomSmall" src={useBaseUrl("/img/rewards/web-claim-arbitrum.png")} alt="My Profile" />
+
+2. Connect your Wallet with the WalletConnect option.
+   <img style={{ maxHeight: "400px" }} class="marginBottomSmall" src={useBaseUrl("/img/rewards/wallet-connect.png")} alt="Wallet Connect" />
+
+3. Open your mobile wallet and scan the QR code with that wallet in order to connect with it.
+
+   For example: Rainbow Wallet
+   <img style={{ maxHeight: "400px" }} class="marginBottomSmall" src={useBaseUrl("/img/rewards/rainbow-qr.jpeg")} alt="Rainbow Wallet Scan QR" />
+
+4. Enter the amount you want to claim and press "Next".
+   <img style={{ maxHeight: "400px" }} class="marginBottomSmall" src={useBaseUrl("/img/rewards/add-amount.png")} alt="Enter Amount" />
+
+5. Confirm the transaction on your mobile wallet.
+   <img style={{ maxHeight: "400px" }} class="marginBottomSmall" src={useBaseUrl("/img/rewards/rainbow-confirm.jpg")} alt="Confirm Transaction" />
 
-<ol className="claim-steps">
-  <li>
-    Navigate to the [Claim dApp](https://claim.weatherxm.com/).
-    <img style={{ maxWidth: '650px', height: 'auto', margin: '10px 0' }} src={useBaseUrl("/img/project/web-claim-arbitrum.png")} alt="My Profile" />
-  </li>
-
-  <li>
-    Connect your Wallet with the WalletConnect option.
-    <img style={{ maxWidth: '250px', height: 'auto', margin: '10px 0' }} src={useBaseUrl("/img/wallet/Wallet-connect.png")} alt="Wallet Connect" />
-  </li>
-
-  <li>
-Open your mobile wallet and scan the QR code with that wallet in order to connect with it.
-
-
-    - For example: Rainbow Wallet
-    <img style={{ maxWidth: '250px', height: 'auto', margin: '10px 0' }} src={useBaseUrl("/img/wallet/Rainbow-QR.jpeg")} alt="Scan QR" />
-  </li>
-
-  <li>
-    Enter the amount you want to claim and press "Next".
-    <img style={{ maxWidth: '250px', height: 'auto', margin: '10px 0' }} src={useBaseUrl("/img/project/add-amount.png")} alt="Enter Amount" />
-  </li>
-
-  <li>
-    Confirm the transaction on your mobile wallet.
-    <img style={{ maxWidth: '250px', height: 'auto', margin: '10px 0' }} src={useBaseUrl("/img/wallet/rainbow-confirm.jpg")} alt="Confirm Transaction" />
-  </li>
-
-  <li>
-    You have successfully claimed your rewards!
-    <img style={{ maxWidth: '250px', height: 'auto', margin: '10px 0' }} src={useBaseUrl("/img/project/Claim-success.png")} alt="Claim Success" />
-  </li>
-</ol>
+6. You have successfully claimed your rewards!
+   <img style={{ maxHeight: "400px" }} class="marginBottomSmall" src={useBaseUrl("/img/rewards/claim-success.png")} alt="Claim Success" />
 
 <hr/>
 
 ## Bridging Your Assets from Ethereum to Arbitrum
- 1. Go to https://bridge.arbitrum.io/.
- 2. Then, simply enter the amount of ETH you wish to use on Arbitrum and click “Deposit”. 
- 3. Next, you will need to confirm the transaction in your wallet. Please note that this transaction is on Layer 1 and standard gas fees will apply. 
- However, once on Arbitrum you can enjoy lower gas fees. Once the amount is correct, click “Confirm”.
- 4. Once confirmed, you will see the transaction appear and process at the bottom of your screen. This can take a few minutes.
- 5. If you require additional support to bridge your assets, you can refer to Arbitrum’s tutorial [here](https://docs.arbitrum.io/getting-started-users).
+1. Go to https://bridge.arbitrum.io/.
+2. Then, simply enter the amount of ETH you wish to use on Arbitrum and click “Deposit”.
+3. Next, you will need to confirm the transaction in your wallet. Please note that this transaction is on Layer 1 and standard gas fees will apply.
+However, once on Arbitrum you can enjoy lower gas fees. Once the amount is correct, click “Confirm”.
+4. Once confirmed, you will see the transaction appear and process at the bottom of your screen. This can take a few minutes.
+5. If you require additional support to bridge your assets, you can refer to Arbitrum’s tutorial [here](https://docs.arbitrum.io/getting-started-users).
 
  **This Guide is applicable only on desktop with the MetaMask browser extension already installed.**
diff --git a/docs/rewards/rewards-troubleshooting.mdx b/docs/rewards/rewards-troubleshooting.mdx
@@ -29,7 +29,7 @@ Here's what you need to do:
 ### For the WG1000 WiFi gateway
 
 <div class="explanation">
-   <img src={useBaseUrl("/img/project/m5-ui-new_numbered.jpg")} />
+   <img src={useBaseUrl("/img/rewards/m5-ui-new-numbered.jpg")} />
   <div>
     <h4>WG1000 Gateway icons explanation <br/> 
     Red=Problem, Green= Good</h4>
@@ -47,8 +47,8 @@ Here's what you need to do:
 - Check if the station's battery level is low through mobile app settings.
 If the battery is low, the connection between your station and the WG1000 gateway will be unstable resulting in data loss.
 <div class="explanation small-big">
-  <img src={useBaseUrl("/img/project/settings_through_the_app.png")} />
-  <img src={useBaseUrl("/img/project/battery_level.png")} />
+  <img src={useBaseUrl("/img/rewards/settings-through-the-app.png")} />
+  <img src={useBaseUrl("/img/rewards/battery-level.png")} />
 </div>
 - Check your GPS by following the guide [here](/wifi-m5-bundle/m5-troubleshooting#no-location-gps-data-arrow-icon-is-red).
 - Follow the Troubleshooting guide regarding [No WiFi connection](/wifi-m5-bundle/m5-troubleshooting#no-wifi--connection).
@@ -118,7 +118,7 @@ Here's what you need to do:
 ### For the WG1000 WiFi gateway
 
 <div class="explanation">
-   <img src={useBaseUrl("/img/project/m5-ui-new_numbered.jpg")} />
+   <img src={useBaseUrl("/img/rewards/m5-ui-new-numbered.jpg")} />
   <div>
     <h4>WG1000 Gateway icons explanation <br/> 
     Red=Problem, Green= Good</h4>
@@ -136,8 +136,8 @@ Here's what you need to do:
 - Check if the station's battery level is low through mobile app settings.
 If the battery is low, the connection between your station and the WG1000 gateway will be unstable resulting in data loss.
 <div class="explanation small-big">
-  <img src={useBaseUrl("/img/project/settings_through_the_app.png")} />
-  <img src={useBaseUrl("/img/project/battery_level.png")} />
+  <img src={useBaseUrl("/img/rewards/settings-through-the-app.png")} />
+  <img src={useBaseUrl("/img/rewards/battery-level.png")} />
 </div>
 - Check your GPS by following the guide [here](/wifi-m5-bundle/m5-troubleshooting#no-location-gps-data-arrow-icon-is-red).
 - Follow the Troubleshooting guide regarding [No WiFi connection](/wifi-m5-bundle/m5-troubleshooting#no-wifi--connection).
@@ -150,7 +150,7 @@ If the battery is low, the connection between your station and the WG1000 gatewa
 ### For the WG1200 WiFi Gateway
 
 <div class="explanation">
-   <img src={useBaseUrl("/img/home/D1-icons.png")} />
+  <img src={useBaseUrl("/img/rewards/d1-icons.png")} />
   <div>
     <h4>WG1200 Gateway icons explanation <br/> 
     Red=Problem, Green= Good</h4>
@@ -198,9 +198,9 @@ Your weather station was suspended from rewards because it did not report GPS da
 It appears that the location of your weather station is different from the one you had originally set while claiming it. 
 Please verify your location through the mobile app.
 <div class="explanation small-big">
- <img src={useBaseUrl("/img/project/settings.png")} />
- <img src={useBaseUrl("/img/project/edit_location.png")} />
- <img src={useBaseUrl("/img/project/edit_location2.png")} />
+ <img src={useBaseUrl("/img/rewards/settings.png")} />
+ <img src={useBaseUrl("/img/rewards/edit-location.png")} />
+ <img src={useBaseUrl("/img/rewards/edit-location-2.png")} />
 </div>
 
 In detail, the [Proof of Location (PoL) mechanism](/project/proof-of-location) flagged your weather station because the location reported by its GPS receiver(s) is different than the location you declared during the setup and claiming of the station.

diff --git a/docs/the-$WXM-token.mdx b/docs/the-$WXM-token.mdx
@@ -38,7 +38,7 @@ To implement this logic, we introduce a smart contract that distributes a fixed
 
 **Total supply of the $WXM token is 100M (100,000,000) tokens.**
 
-<img class="marginTopBottomNormal" src={useBaseUrl("img/home/wxm_tokenomics_distribution.webp")}/>
+<img class="marginTopBottomNormal" src={useBaseUrl("img/tokenomics/wxm-tokenomics-distribution.webp")}/>
 
 #### 55% - Station Rewards:
 Tokens will be used for station owners rewards. 3M of this amount will be used to gradually reward beta users.

diff --git a/docs/wallet/add-edit-wallet-address.mdx b/docs/wallet/add-edit-wallet-address.mdx
@@ -23,16 +23,16 @@ To add your wallet address, go to settings screen and tap "My wallet", then fill
     <ThemedImage
         alt="new-wallet-address-empty"
         sources={{
-            light: useBaseUrl("img/wallet/new-wallet-address-empty-light.jpg"),
-            dark: useBaseUrl("img/wallet/new-wallet-address-empty-dark.jpg")
+            light: useBaseUrl("img/mobile-app/wallet/new-wallet-address-empty-light.jpg"),
+            dark: useBaseUrl("img/mobile-app/wallet/new-wallet-address-empty-dark.jpg")
         }}
     />
-    <img src={useBaseUrl("img/wallet/new-wallet-address-screen-scan-QR.png")} />
+    <img src={useBaseUrl("img/mobile-app/wallet/new-wallet-address-screen-scan-qr.png")} />
     <ThemedImage
         alt="new-wallet-address-empty"
         sources={{
-            light: useBaseUrl("img/wallet/new-wallet-address-screen-confirm-wallet-addition-light.jpg"),
-            dark: useBaseUrl("img/wallet/new-wallet-address-screen-confirm-wallet-addition-dark.jpg")
+            light: useBaseUrl("img/mobile-app/wallet/new-wallet-address-screen-confirm-wallet-addition-light.jpg"),
+            dark: useBaseUrl("img/mobile-app/wallet/new-wallet-address-screen-confirm-wallet-addition-dark.jpg")
         }}
     />
 </div>
@@ -47,22 +47,22 @@ To edit or change your wallet address, go to settings screen and tap "My wallet"
     <ThemedImage
         alt="new-wallet-address-empty"
         sources={{
-            light: useBaseUrl("img/wallet/new-wallet-address-screen-filled-and-saved-light.jpg"),
-            dark: useBaseUrl("img/wallet/new-wallet-address-screen-filled-and-saved-dark.jpg")
+            light: useBaseUrl("img/mobile-app/wallet/new-wallet-address-screen-filled-and-saved-light.jpg"),
+            dark: useBaseUrl("img/mobile-app/wallet/new-wallet-address-screen-filled-and-saved-dark.jpg")
         }}
     />
     <ThemedImage
         alt="new-wallet-address-empty"
         sources={{
-            light: useBaseUrl("img/wallet/new-wallet-address-screen-confirm-and-save-light.jpg"),
-            dark: useBaseUrl("img/wallet/new-wallet-address-screen-confirm-and-save-dark.jpg")
+            light: useBaseUrl("img/mobile-app/wallet/new-wallet-address-screen-confirm-and-save-light.jpg"),
+            dark: useBaseUrl("img/mobile-app/wallet/new-wallet-address-screen-confirm-and-save-dark.jpg")
         }}
     />
     <ThemedImage
         alt="new-wallet-address-empty"
         sources={{
-            light: useBaseUrl("img/wallet/new-wallet-address-screen-confirm-wallet-addition-light.jpg"),
-            dark: useBaseUrl("img/wallet/new-wallet-address-screen-confirm-wallet-addition-dark.jpg")
+            light: useBaseUrl("img/mobile-app/wallet/new-wallet-address-screen-confirm-wallet-addition-light.jpg"),
+            dark: useBaseUrl("img/mobile-app/wallet/new-wallet-address-screen-confirm-wallet-addition-dark.jpg")
         }}
     />
 </div>
@@ -73,8 +73,8 @@ To edit or change your wallet address, go to settings screen and tap "My wallet"
 
 ## How to create wallet on Metamask
 
-$WXM is deployed on Arbitrum One Network. We suggest you use a **MetaMask** wallet with WeatherXM, as we have extensively tested on it. As we evolve, we will official support several wallets.
-By following our guide, it's fairly simple to set up a MetaMask wallet and add a custom token (in our case, the $WXM token) on Arbitrum One Network.
+\$WXM is deployed on Arbitrum One Network. We suggest you use a **MetaMask** wallet with WeatherXM, as we have extensively tested on it. As we evolve, we will official support several wallets.
+By following our guide, it's fairly simple to set up a MetaMask wallet and add a custom token (in our case, the \$WXM token) on Arbitrum One Network.
 
 :::note
 The following guide has been written with the **MetaMask browser extension** in mind.