open-source-mirrors
/
overseerr
mirror of https://github.com/sct/overseerr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): tweak styling of sidebar & user profile quota display (#1823)

Browse Source 
* refactor(ui): tweak styling of sidebar & user profile quota display

* refactor(ui): adjust sidebar gradient to match theme color

Co-authored-by: sct <ryan@sct.dev>
pull/1833/head
TheCatLady 4 years ago committed by GitHub
parent 25b5c6ebb5
commit 4eab2fea73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File

14
src/components/Layout/Sidebar/index.tsx
Unescape View File

@ -139,13 +139,13 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
}} }}
role="button" role="button"
tabIndex={0} tabIndex={0}
className={`flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150 className={`flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white focus:outline-none transition ease-in-out duration-150
${ ${
router.pathname.match( router.pathname.match(
sidebarLink.activeRegExp sidebarLink.activeRegExp
) )
? 'bg-gradient-to-br from-indigo-600 to-purple-600' ? 'bg-gradient-to-br from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500'
: '' : 'hover:bg-gray-700 focus:bg-gray-700'
} }
`} `}
> >
@ -174,7 +174,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
</Transition> </Transition>
</div> </div>
<div className="fixed top-0 bottom-0 left-0 hidden md:flex md:flex-shrink-0"> <div className="fixed top-0 bottom-0 left-0 z-30 hidden md:flex md:flex-shrink-0">
<div className="flex flex-col w-64 sidebar"> <div className="flex flex-col w-64 sidebar">
<div className="flex flex-col flex-1 h-0"> <div className="flex flex-col flex-1 h-0">
<div className="flex flex-col flex-1 pt-8 pb-4 overflow-y-auto"> <div className="flex flex-col flex-1 pt-8 pb-4 overflow-y-auto">
@ -198,13 +198,13 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
as={sidebarLink.as} as={sidebarLink.as}
> >
<a <a
className={`flex group items-center px-2 py-2 text-lg leading-6 rounded-md text-white hover:text-white focus:outline-none transition ease-in-out duration-150 className={`flex group items-center px-2 py-2 text-lg leading-6 font-medium rounded-md text-white focus:outline-none transition ease-in-out duration-150
${ ${
router.pathname.match( router.pathname.match(
sidebarLink.activeRegExp sidebarLink.activeRegExp
) )
? 'bg-gradient-to-br from-indigo-600 to-purple-600' ? 'bg-gradient-to-br from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500'
: '' : 'hover:bg-gray-700 focus:bg-gray-700'
} }
`} `}
> >

1
src/components/Layout/index.tsx
Unescape View File

@ -46,6 +46,7 @@ const Layout: React.FC = ({ children }) => {
return ( return (
<div className="flex h-full min-w-0 min-h-full bg-gray-900"> <div className="flex h-full min-w-0 min-h-full bg-gray-900">
<div className="fixed inset-0 z-20 w-full h-1 border-t border-gray-700 pwa-only" />
<div className="absolute top-0 w-full h-64 from-gray-800 to-gray-900 bg-gradient-to-bl"> <div className="absolute top-0 w-full h-64 from-gray-800 to-gray-900 bg-gradient-to-bl">
<div className="relative inset-0 w-full h-full from-gray-900 to-transparent bg-gradient-to-t" /> <div className="relative inset-0 w-full h-full from-gray-900 to-transparent bg-gradient-to-t" />
</div> </div>

12
src/components/UserProfile/index.tsx
Unescape View File

@ -99,7 +99,7 @@ const UserProfile: React.FC = () => {
<div className="relative z-40"> <div className="relative z-40">
<dl className="grid grid-cols-1 gap-5 mt-5 lg:grid-cols-3"> <dl className="grid grid-cols-1 gap-5 mt-5 lg:grid-cols-3">
<div className="px-4 py-5 overflow-hidden bg-gray-800 bg-opacity-50 rounded-lg shadow ring-1 ring-gray-700 sm:p-6"> <div className="px-4 py-5 overflow-hidden bg-gray-800 bg-opacity-50 rounded-lg shadow ring-1 ring-gray-700 sm:p-6">
<dt className="text-sm font-medium text-gray-300 truncate"> <dt className="text-sm font-bold text-gray-300 truncate">
{intl.formatMessage(messages.totalrequests)} {intl.formatMessage(messages.totalrequests)}
</dt> </dt>
<dd className="mt-1 text-3xl font-semibold text-white"> <dd className="mt-1 text-3xl font-semibold text-white">
@ -115,11 +115,11 @@ const UserProfile: React.FC = () => {
} sm:p-6`} } sm:p-6`}
> >
<dt <dt
className={`text-sm font-medium truncate ${ className={`text-sm font-bold truncate ${
quota.movie.restricted ? 'text-red-500' : 'text-gray-300' quota.movie.restricted ? 'text-red-500' : 'text-gray-300'
}`} }`}
> >
{quota.tv.limit {quota.movie.limit
? intl.formatMessage(messages.pastdays, { ? intl.formatMessage(messages.pastdays, {
type: intl.formatMessage(messages.movierequests), type: intl.formatMessage(messages.movierequests),
days: quota?.movie.days, days: quota?.movie.days,
@ -159,7 +159,7 @@ const UserProfile: React.FC = () => {
</div> </div>
</> </>
) : ( ) : (
<span className="text-3xl"> <span className="text-3xl font-semibold">
{intl.formatMessage(messages.unlimited)} {intl.formatMessage(messages.unlimited)}
</span> </span>
)} )}
@ -174,7 +174,7 @@ const UserProfile: React.FC = () => {
} sm:p-6`} } sm:p-6`}
> >
<dt <dt
className={`text-sm font-medium truncate ${ className={`text-sm font-bold truncate ${
quota.tv.restricted ? 'text-red-500' : 'text-gray-300' quota.tv.restricted ? 'text-red-500' : 'text-gray-300'
}`} }`}
> >
@ -218,7 +218,7 @@ const UserProfile: React.FC = () => {
</div> </div>
</> </>
) : ( ) : (
<span className="text-3xl"> <span className="text-3xl font-semibold">
{intl.formatMessage(messages.unlimited)} {intl.formatMessage(messages.unlimited)}
</span> </span>
)} )}

2
src/styles/globals.css
Unescape View File

@ -22,7 +22,7 @@ body {
@apply border-r border-gray-700; @apply border-r border-gray-700;
padding-top: env(safe-area-inset-top); padding-top: env(safe-area-inset-top);
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
background: linear-gradient(180deg, #232a36 0%, #131928 100%); background: linear-gradient(180deg, rgba(31, 41, 55, 1) 0%, #131928 100%);
} }
.slideover { .slideover {

Write Preview
Loading…
Cancel
Save