cphipps/jellyseerr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
TheCatLady
2021-07-13 05:44:15 -04:00
committed by GitHub
parent 1133a34ffd
commit 8b960acf73
28 changed files with 227 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/offline.html
View File

@@ -31,7 +31,7 @@
<body> <body>
<h1>You are offline</h1> <h1>You are offline</h1>
<button type="button">⤾ Reload</button> <button type="button">↻ Reload</button>
<!-- Inline the page's JavaScript file. --> <!-- Inline the page's JavaScript file. -->
<script> <script>

13
src/components/RequestList/index.tsx
View File

@@ -1,4 +1,9 @@
import { FilterIcon, SortDescendingIcon } from '@heroicons/react/solid'; import {
ChevronLeftIcon,
ChevronRightIcon,
FilterIcon,
SortDescendingIcon,
} from '@heroicons/react/solid';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
@@ -271,13 +276,15 @@ const RequestList: React.FC = () => {
disabled={!hasPrevPage} disabled={!hasPrevPage}
onClick={() => updateQueryParams('page', (page - 1).toString())} onClick={() => updateQueryParams('page', (page - 1).toString())}
> >
{intl.formatMessage(globalMessages.previous)} <ChevronLeftIcon />
<span>{intl.formatMessage(globalMessages.previous)}</span>
</Button> </Button>
<Button <Button
disabled={!hasNextPage} disabled={!hasNextPage}
onClick={() => updateQueryParams('page', (page + 1).toString())} onClick={() => updateQueryParams('page', (page + 1).toString())}
> >
{intl.formatMessage(globalMessages.next)} <span>{intl.formatMessage(globalMessages.next)}</span>
<ChevronRightIcon />
</Button> </Button>
</div> </div>
</nav> </nav>

7
src/components/ResetPassword/RequestResetLink.tsx
View File

@@ -1,4 +1,4 @@
import { AtSymbolIcon } from '@heroicons/react/outline'; import { ArrowLeftIcon, MailIcon } from '@heroicons/react/solid';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import Link from 'next/link'; import Link from 'next/link';
@@ -68,7 +68,8 @@ const ResetPassword: React.FC = () => {
<span className="flex justify-center mt-4 rounded-md shadow-sm"> <span className="flex justify-center mt-4 rounded-md shadow-sm">
<Link href="/login" passHref> <Link href="/login" passHref>
<Button as="a" buttonType="ghost"> <Button as="a" buttonType="ghost">
{intl.formatMessage(messages.gobacklogin)} <ArrowLeftIcon />
<span>{intl.formatMessage(messages.gobacklogin)}</span>
</Button> </Button>
</Link> </Link>
</span> </span>
@@ -125,7 +126,7 @@ const ResetPassword: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
<AtSymbolIcon /> <MailIcon />
<span> <span>
{intl.formatMessage(messages.emailresetlink)} {intl.formatMessage(messages.emailresetlink)}
</span> </span>

4
src/components/ResetPassword/index.tsx
View File

@@ -1,3 +1,4 @@
import { SupportIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Form, Formik } from 'formik'; import { Form, Formik } from 'formik';
import Link from 'next/link'; import Link from 'next/link';
@@ -165,9 +166,12 @@ const ResetPassword: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
<SupportIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

7
src/components/Settings/Notifications/NotificationsDiscord.tsx
View File

@@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@@ -253,9 +254,12 @@ const NotificationsDiscord: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
<BeakerIcon />
<span>
{isTesting {isTesting
? intl.formatMessage(globalMessages.testing) ? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)} : intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -264,9 +268,12 @@ const NotificationsDiscord: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

7
src/components/Settings/Notifications/NotificationsEmail.tsx
View File

@@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@@ -437,9 +438,12 @@ const NotificationsEmail: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
<BeakerIcon />
<span>
{isTesting {isTesting
? intl.formatMessage(globalMessages.testing) ? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)} : intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -448,9 +452,12 @@ const NotificationsEmail: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

7
src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
View File

@@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@@ -232,9 +233,12 @@ const NotificationsLunaSea: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
<BeakerIcon />
<span>
{isTesting {isTesting
? intl.formatMessage(globalMessages.testing) ? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)} : intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -243,9 +247,12 @@ const NotificationsLunaSea: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

7
src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
View File

@@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@@ -212,9 +213,12 @@ const NotificationsPushbullet: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
<BeakerIcon />
<span>
{isTesting {isTesting
? intl.formatMessage(globalMessages.testing) ? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)} : intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -223,9 +227,12 @@ const NotificationsPushbullet: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

7
src/components/Settings/Notifications/NotificationsPushover/index.tsx
View File

@@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@@ -258,9 +259,12 @@ const NotificationsPushover: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
<BeakerIcon />
<span>
{isTesting {isTesting
? intl.formatMessage(globalMessages.testing) ? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)} : intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -269,9 +273,12 @@ const NotificationsPushover: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

7
src/components/Settings/Notifications/NotificationsSlack/index.tsx
View File

@@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@@ -210,9 +211,12 @@ const NotificationsSlack: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
<BeakerIcon />
<span>
{isTesting {isTesting
? intl.formatMessage(globalMessages.testing) ? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)} : intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -221,9 +225,12 @@ const NotificationsSlack: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

7
src/components/Settings/Notifications/NotificationsTelegram.tsx
View File

@@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
@@ -306,9 +307,12 @@ const NotificationsTelegram: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
<BeakerIcon />
<span>
{isTesting {isTesting
? intl.formatMessage(globalMessages.testing) ? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)} : intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -317,9 +321,12 @@ const NotificationsTelegram: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

7
src/components/Settings/Notifications/NotificationsWebPush/index.tsx
View File

@@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
@@ -132,9 +133,12 @@ const NotificationsWebPush: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
<BeakerIcon />
<span>
{isTesting {isTesting
? intl.formatMessage(globalMessages.testing) ? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)} : intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -143,9 +147,12 @@ const NotificationsWebPush: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || isTesting} disabled={isSubmitting || isTesting}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

7
src/components/Settings/Notifications/NotificationsWebhook/index.tsx
View File

@@ -1,3 +1,4 @@
import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
import { QuestionMarkCircleIcon, RefreshIcon } from '@heroicons/react/solid'; import { QuestionMarkCircleIcon, RefreshIcon } from '@heroicons/react/solid';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
@@ -327,9 +328,12 @@ const NotificationsWebhook: React.FC = () => {
testSettings(); testSettings();
}} }}
> >
<BeakerIcon />
<span>
{isTesting {isTesting
? intl.formatMessage(globalMessages.testing) ? intl.formatMessage(globalMessages.testing)
: intl.formatMessage(globalMessages.test)} : intl.formatMessage(globalMessages.test)}
</span>
</Button> </Button>
</span> </span>
<span className="inline-flex ml-3 rounded-md shadow-sm"> <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -338,9 +342,12 @@ const NotificationsWebhook: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid || isTesting} disabled={isSubmitting || !isValid || isTesting}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

8
src/components/Settings/SettingsLogs/index.tsx
View File

@@ -1,4 +1,6 @@
import { import {
ChevronLeftIcon,
ChevronRightIcon,
ClipboardCopyIcon, ClipboardCopyIcon,
DocumentSearchIcon, DocumentSearchIcon,
FilterIcon, FilterIcon,
@@ -421,7 +423,8 @@ const SettingsLogs: React.FC = () => {
updateQueryParams('page', (page - 1).toString()) updateQueryParams('page', (page - 1).toString())
} }
> >
{intl.formatMessage(globalMessages.previous)} <ChevronLeftIcon />
<span>{intl.formatMessage(globalMessages.previous)}</span>
</Button> </Button>
<Button <Button
disabled={!hasNextPage} disabled={!hasNextPage}
@@ -429,7 +432,8 @@ const SettingsLogs: React.FC = () => {
updateQueryParams('page', (page + 1).toString()) updateQueryParams('page', (page + 1).toString())
} }
> >
{intl.formatMessage(globalMessages.next)} <span>{intl.formatMessage(globalMessages.next)}</span>
<ChevronRightIcon />
</Button> </Button>
</div> </div>
</nav> </nav>

4
src/components/Settings/SettingsMain.tsx
View File

@@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import { RefreshIcon } from '@heroicons/react/solid'; import { RefreshIcon } from '@heroicons/react/solid';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
@@ -406,9 +407,12 @@ const SettingsMain: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

5
src/components/Settings/SettingsNotifications.tsx
View File

@@ -1,5 +1,4 @@
import { AtSymbolIcon } from '@heroicons/react/outline'; import { CloudIcon, LightningBoltIcon, MailIcon } from '@heroicons/react/solid';
import { CloudIcon, LightningBoltIcon } from '@heroicons/react/solid';
import React from 'react'; import React from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import DiscordLogo from '../../assets/extlogos/discord.svg'; import DiscordLogo from '../../assets/extlogos/discord.svg';
@@ -30,7 +29,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
text: intl.formatMessage(messages.email), text: intl.formatMessage(messages.email),
content: ( content: (
<span className="flex items-center"> <span className="flex items-center">
<AtSymbolIcon className="h-4 mr-2" /> <MailIcon className="h-4 mr-2" />
{intl.formatMessage(messages.email)} {intl.formatMessage(messages.email)}
</span> </span>
), ),

4
src/components/Settings/SettingsPlex.tsx
View File

@@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import { RefreshIcon, SearchIcon, XIcon } from '@heroicons/react/solid'; import { RefreshIcon, SearchIcon, XIcon } from '@heroicons/react/solid';
import axios from 'axios'; import axios from 'axios';
import { Field, Formik } from 'formik'; import { Field, Formik } from 'formik';
@@ -520,9 +521,12 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

4
src/components/Settings/SettingsUsers/index.tsx
View File

@@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import React from 'react'; import React from 'react';
@@ -200,9 +201,12 @@ const SettingsUsers: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

8
src/components/UserList/index.tsx
View File

@@ -1,5 +1,7 @@
import { TrashIcon } from '@heroicons/react/outline'; import { TrashIcon } from '@heroicons/react/outline';
import { import {
ChevronLeftIcon,
ChevronRightIcon,
InboxInIcon, InboxInIcon,
PencilIcon, PencilIcon,
SortDescendingIcon, SortDescendingIcon,
@@ -740,7 +742,8 @@ const UserList: React.FC = () => {
updateQueryParams('page', (page - 1).toString()) updateQueryParams('page', (page - 1).toString())
} }
> >
{intl.formatMessage(globalMessages.previous)} <ChevronLeftIcon />
<span>{intl.formatMessage(globalMessages.previous)}</span>
</Button> </Button>
<Button <Button
disabled={!hasNextPage} disabled={!hasNextPage}
@@ -748,7 +751,8 @@ const UserList: React.FC = () => {
updateQueryParams('page', (page + 1).toString()) updateQueryParams('page', (page + 1).toString())
} }
> >
{intl.formatMessage(globalMessages.next)} <span>{intl.formatMessage(globalMessages.next)}</span>
<ChevronRightIcon />
</Button> </Button>
</div> </div>
</nav> </nav>

4
src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
View File

@@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@@ -357,9 +358,12 @@ const UserGeneralSettings: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

4
src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
View File

@@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@@ -146,9 +147,12 @@ const UserNotificationsDiscord: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

4
src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
View File

@@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Form, Formik } from 'formik'; import { Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@@ -144,9 +145,12 @@ const UserEmailSettings: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

4
src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
View File

@@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@@ -182,9 +183,12 @@ const UserTelegramSettings: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

4
src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx
View File

@@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Form, Formik } from 'formik'; import { Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@@ -96,9 +97,12 @@ const UserWebPushSettings: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

5
src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
View File

@@ -1,5 +1,4 @@
import { AtSymbolIcon } from '@heroicons/react/outline'; import { CloudIcon, MailIcon } from '@heroicons/react/solid';
import { CloudIcon } from '@heroicons/react/solid';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
@@ -34,7 +33,7 @@ const UserNotificationSettings: React.FC = ({ children }) => {
text: intl.formatMessage(messages.email), text: intl.formatMessage(messages.email),
content: ( content: (
<span className="flex items-center"> <span className="flex items-center">
<AtSymbolIcon className="h-4 mr-2" /> <MailIcon className="h-4 mr-2" />
{intl.formatMessage(messages.email)} {intl.formatMessage(messages.email)}
</span> </span>
), ),

4
src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
View File

@@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Form, Formik } from 'formik'; import { Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@@ -223,9 +224,12 @@ const UserPasswordChange: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting || !isValid} disabled={isSubmitting || !isValid}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

4
src/components/UserProfile/UserSettings/UserPermissions/index.tsx
View File

@@ -1,3 +1,4 @@
import { SaveIcon } from '@heroicons/react/outline';
import axios from 'axios'; import axios from 'axios';
import { Form, Formik } from 'formik'; import { Form, Formik } from 'formik';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@@ -114,9 +115,12 @@ const UserPermissions: React.FC = () => {
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
> >
<SaveIcon />
<span>
{isSubmitting {isSubmitting
? intl.formatMessage(globalMessages.saving) ? intl.formatMessage(globalMessages.saving)
: intl.formatMessage(globalMessages.save)} : intl.formatMessage(globalMessages.save)}
</span>
</Button> </Button>
</span> </span>
</div> </div>

4
src/styles/globals.css
View File

@@ -303,11 +303,11 @@ button.input-action {
.button-md svg, .button-md svg,
button.input-action svg, button.input-action svg,
.plex-button svg { .plex-button svg {
@apply w-5 h-5 mr-2 last:mr-0; @apply w-5 h-5 ml-2 mr-2 first:ml-0 last:mr-0;
} }
.button-sm svg { .button-sm svg {
@apply w-4 h-4 mr-1.5 last:mr-0; @apply w-4 h-4 ml-1.5 mr-1.5 first:ml-0 last:mr-0;
} }
.modal-icon { .modal-icon {