shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
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>
This commit is contained in:
TheCatLady
2021-06-23 03:38:07 -04:00
committed by GitHub
parent 25b5c6ebb5
commit 4eab2fea73
4 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -139,13 +139,13 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
}}
role="button"
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(
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>
</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 flex-1 h-0">
<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}
>
<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(
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
View File

@@ -46,6 +46,7 @@ const Layout: React.FC = ({ children }) => {
return (
<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="relative inset-0 w-full h-full from-gray-900 to-transparent bg-gradient-to-t" />
</div>