add upload and download icons to buttons on the settings page

package.json

@@ -22,6 +22,7 @@
     "react-chartjs-2": "^4.3.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.4",
+    "react-icons": "^4.11.0",
     "react-onesignal": "^2.0.4",
     "react-router-dom": "^5.3.4",
     "react-scripts": "5.0.1",

src/pages/SettingsPage/CurrentSettings.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useLocalStorage } from 'react-use';
 import { JsonViewer } from '@textea/json-viewer';
+import { MdFileDownload } from 'react-icons/md';
 import { DEFAULT_SETTINGS } from '../../consts/DefaultSettings';
 
 export const CurrentSettings: React.FC = () => {
@@ -22,19 +23,22 @@ export const CurrentSettings: React.FC = () => {
 
   return (
     <div className="w-full max-w-full overflow-hidden">
-      <h3 className="mb-2 font-bold">
-        Current Settings
-        {settings ? (
+      <div className="flex items-center mb-4">
+        <h3 className="font-bold">Current Settings</h3>
+
+        {settings && (
           <button
-            className="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
+            className="flex items-center ml-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
             onClick={async () => {
+              // we don't need to await this, right?
               await downloadJSON();
             }}
           >
-            Download
+            <MdFileDownload className="mr-1" />
+            <span>Download</span>
           </button>
-        ) : null}
-      </h3>
+        )}
+      </div>
 
       {settings ? <JsonViewer value={JSON.parse(settings)} /> : null}
     </div>

src/pages/SettingsPage/SettingJsonUri.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import { useLocalStorage } from 'react-use';
 import { toast, ToastPosition } from 'react-toastify';
+import { MdUploadFile } from 'react-icons/md';
 import { DEFAULT_SETTINGS } from '../../consts/DefaultSettings';
 import { config } from '../../config';
 
@@ -120,10 +121,11 @@ export const SettingsJsonUri: React.FC<Props> = ({ onUpdate }) => {
           />
 
           <button
-            className="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            className="flex items-center ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
             type="submit"
           >
-            {uri ? 'Update' : 'Save'}
+            <MdUploadFile className="mr-1" />
+            <span className="block">{uri ? 'Update' : 'Save'}</span>
           </button>
         </div>
       </form>

src/pages/SingleTokenPage/SingleTokenPage.tsx

@@ -57,7 +57,7 @@ export const SingleTokenPage = () => {
       {/* Display the results and graph */}
       <div
         data-testid="data-container"
-        className="min-w-0 flex-1 p-2 bg-sky-100 border-solid border-1 border-sky-200"
+        className="min-w-0 flex-1 p-2 bg-sky-100 border-solid border-1 border-sky-200 rounded-lg"
       >
         <TokenContent status={fetchStatus} {...getDisplayData(data)} />
       </div>

tailwind.config.js

@@ -9,7 +9,7 @@ module.exports = {
         18: '72px',
       },
       gridTemplateColumns: {
-        'settings-upload': '1fr 80px',
+        'settings-upload': '1fr 100px',
       },
       fontFamily: {
         sans: ['Roboto', ...defaultTheme.fontFamily.sans],