refactor(ui): add/tweak icons (#1819)

* refactor(ui): add prev/next button icons * refactor(ui): use mail icon instead of at symbol icon for email * refactor(ui): use ↻ symbol instead of ⤾ for reload button * refactor(ui): add missing icons to password reset pages * refactor(ui): add icons for save & test buttons Co-authored-by: sct <ryan@sct.dev>
2026-01-01 20:28:40 -05:00 · 2021-07-13 05:44:15 -04:00
parent 1133a34ffd
commit 8b960acf73
28 changed files with 227 additions and 106 deletions
--- a/src/components/Settings/Notifications/NotificationsDiscord.tsx
+++ b/src/components/Settings/Notifications/NotificationsDiscord.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -253,9 +254,12 @@ const NotificationsDiscord: React.FC = () => {
                      testSettings();
                    }}
                  >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -264,9 +268,12 @@ const NotificationsDiscord: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsEmail.tsx
+++ b/src/components/Settings/Notifications/NotificationsEmail.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -437,9 +438,12 @@ const NotificationsEmail: React.FC = () => {
                      testSettings();
                    }}
                  >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -448,9 +452,12 @@ const NotificationsEmail: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -232,9 +233,12 @@ const NotificationsLunaSea: React.FC = () => {
                      testSettings();
                    }}
                  >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -243,9 +247,12 @@ const NotificationsLunaSea: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -212,9 +213,12 @@ const NotificationsPushbullet: React.FC = () => {
                      testSettings();
                    }}
                  >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -223,9 +227,12 @@ const NotificationsPushbullet: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsPushover/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsPushover/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -258,9 +259,12 @@ const NotificationsPushover: React.FC = () => {
                      testSettings();
                    }}
                  >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -269,9 +273,12 @@ const NotificationsPushover: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsSlack/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsSlack/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -210,9 +211,12 @@ const NotificationsSlack: React.FC = () => {
                      testSettings();
                    }}
                  >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -221,9 +225,12 @@ const NotificationsSlack: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsTelegram.tsx
+++ b/src/components/Settings/Notifications/NotificationsTelegram.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -306,9 +307,12 @@ const NotificationsTelegram: React.FC = () => {
                      testSettings();
                    }}
                  >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -317,9 +321,12 @@ const NotificationsTelegram: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useEffect, useState } from 'react';
@@ -132,9 +133,12 @@ const NotificationsWebPush: React.FC = () => {
                        testSettings();
                      }}
                    >
-                      {isTesting
-                        ? intl.formatMessage(globalMessages.testing)
-                        : intl.formatMessage(globalMessages.test)}
+                      <BeakerIcon />
+                      <span>
+                        {isTesting
+                          ? intl.formatMessage(globalMessages.testing)
+                          : intl.formatMessage(globalMessages.test)}
+                      </span>
                    </Button>
                  </span>
                  <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -143,9 +147,12 @@ const NotificationsWebPush: React.FC = () => {
                      type="submit"
                      disabled={isSubmitting || isTesting}
                    >
-                      {isSubmitting
-                        ? intl.formatMessage(globalMessages.saving)
-                        : intl.formatMessage(globalMessages.save)}
+                      <SaveIcon />
+                      <span>
+                        {isSubmitting
+                          ? intl.formatMessage(globalMessages.saving)
+                          : intl.formatMessage(globalMessages.save)}
+                      </span>
                    </Button>
                  </span>
                </div>
--- a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import { QuestionMarkCircleIcon, RefreshIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
@@ -327,9 +328,12 @@ const NotificationsWebhook: React.FC = () => {
                      testSettings();
                    }}
                  >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                  </Button>
                </span>
                <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -338,9 +342,12 @@ const NotificationsWebhook: React.FC = () => {
                    type="submit"
                    disabled={isSubmitting || !isValid || isTesting}
                  >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                  </Button>
                </span>
              </div>
--- a/src/components/Settings/SettingsLogs/index.tsx
+++ b/src/components/Settings/SettingsLogs/index.tsx
@@ -1,4 +1,6 @@
 import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
  ClipboardCopyIcon,
  DocumentSearchIcon,
  FilterIcon,
@@ -421,7 +423,8 @@ const SettingsLogs: React.FC = () => {
                        updateQueryParams('page', (page - 1).toString())
                      }
                    >
-                      {intl.formatMessage(globalMessages.previous)}
+                      <ChevronLeftIcon />
+                      <span>{intl.formatMessage(globalMessages.previous)}</span>
                    </Button>
                    <Button
                      disabled={!hasNextPage}
@@ -429,7 +432,8 @@ const SettingsLogs: React.FC = () => {
                        updateQueryParams('page', (page + 1).toString())
                      }
                    >
-                      {intl.formatMessage(globalMessages.next)}
+                      <span>{intl.formatMessage(globalMessages.next)}</span>
+                      <ChevronRightIcon />
                    </Button>
                  </div>
                </nav>
--- a/src/components/Settings/SettingsMain.tsx
+++ b/src/components/Settings/SettingsMain.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import { RefreshIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
@@ -406,9 +407,12 @@ const SettingsMain: React.FC = () => {
                        type="submit"
                        disabled={isSubmitting || !isValid}
                      >
-                        {isSubmitting
-                          ? intl.formatMessage(globalMessages.saving)
-                          : intl.formatMessage(globalMessages.save)}
+                        <SaveIcon />
+                        <span>
+                          {isSubmitting
+                            ? intl.formatMessage(globalMessages.saving)
+                            : intl.formatMessage(globalMessages.save)}
+                        </span>
                      </Button>
                    </span>
                  </div>
--- a/src/components/Settings/SettingsNotifications.tsx
+++ b/src/components/Settings/SettingsNotifications.tsx
@@ -1,5 +1,4 @@
-import { AtSymbolIcon } from '@heroicons/react/outline';
-import { CloudIcon, LightningBoltIcon } from '@heroicons/react/solid';
+import { CloudIcon, LightningBoltIcon, MailIcon } from '@heroicons/react/solid';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import DiscordLogo from '../../assets/extlogos/discord.svg';
@@ -30,7 +29,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
      text: intl.formatMessage(messages.email),
      content: (
        <span className="flex items-center">
-          <AtSymbolIcon className="h-4 mr-2" />
+          <MailIcon className="h-4 mr-2" />
          {intl.formatMessage(messages.email)}
        </span>
      ),
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/src/components/Settings/SettingsPlex.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import { RefreshIcon, SearchIcon, XIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Formik } from 'formik';
@@ -520,9 +521,12 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                      type="submit"
                      disabled={isSubmitting || !isValid}
                    >
-                      {isSubmitting
-                        ? intl.formatMessage(globalMessages.saving)
-                        : intl.formatMessage(globalMessages.save)}
+                      <SaveIcon />
+                      <span>
+                        {isSubmitting
+                          ? intl.formatMessage(globalMessages.saving)
+                          : intl.formatMessage(globalMessages.save)}
+                      </span>
                    </Button>
                  </span>
                </div>
--- a/src/components/Settings/SettingsUsers/index.tsx
+++ b/src/components/Settings/SettingsUsers/index.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React from 'react';
@@ -200,9 +201,12 @@ const SettingsUsers: React.FC = () => {
                        type="submit"
                        disabled={isSubmitting}
                      >
-                        {isSubmitting
-                          ? intl.formatMessage(globalMessages.saving)
-                          : intl.formatMessage(globalMessages.save)}
+                        <SaveIcon />
+                        <span>
+                          {isSubmitting
+                            ? intl.formatMessage(globalMessages.saving)
+                            : intl.formatMessage(globalMessages.save)}
+                        </span>
                      </Button>
                    </span>
                  </div>