Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-11 07:55:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Improve UI by changing dark mode colors

Browse Source
This commit is contained in:
ajnart
2022-09-04 09:25:09 +02:00
parent bf1e057cc2
commit 19b08b2742
2 changed files with 11 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/AppShelf/AppShelf.tsx
View File

@@ -157,9 +157,9 @@ const AppShelf = (props: any) => {
{categoryList.map((category, idx) => ( {categoryList.map((category, idx) => (
<Accordion.Item <Accordion.Item
style={{ style={{
background: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '255, 255, 255,'} \ background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
${(config.settings.appOpacity || 100) / 100}`, ${(config.settings.appOpacity || 100) / 100}`,
borderColor: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '233, 236, 239,'} \ borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
${(config.settings.appOpacity || 100) / 100}`, ${(config.settings.appOpacity || 100) / 100}`,
}} }}
key={category} key={category}
@@ -173,9 +173,9 @@ const AppShelf = (props: any) => {
{noCategory && noCategory.length > 0 ? ( {noCategory && noCategory.length > 0 ? (
<Accordion.Item <Accordion.Item
style={{ style={{
background: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '255, 255, 255,'} \ background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
${(config.settings.appOpacity || 100) / 100}`, ${(config.settings.appOpacity || 100) / 100}`,
borderColor: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '233, 236, 239,'} \ borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
${(config.settings.appOpacity || 100) / 100}`, ${(config.settings.appOpacity || 100) / 100}`,
}} }}
key="Other" key="Other"
@@ -188,9 +188,11 @@ const AppShelf = (props: any) => {
{downloadEnabled ? ( {downloadEnabled ? (
<Accordion.Item <Accordion.Item
style={{ style={{
background: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '255, 255, 255,'} \ color: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
${(config.settings.appOpacity || 100) / 100}`, ${(config.settings.appOpacity || 100) / 100}`,
borderColor: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '233, 236, 239,'} \ background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
${(config.settings.appOpacity || 100) / 100}`,
borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
${(config.settings.appOpacity || 100) / 100}`, ${(config.settings.appOpacity || 100) / 100}`,
}} }}
key="Downloads" key="Downloads"
@@ -198,20 +200,9 @@ const AppShelf = (props: any) => {
> >
<Accordion.Control>{t('accordions.downloads.text')}</Accordion.Control> <Accordion.Control>{t('accordions.downloads.text')}</Accordion.Control>
<Accordion.Panel> <Accordion.Panel>
<Paper <Paper radius="lg">
radius="lg"
style={{
background: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '255, 255, 255,'} \
${(config.settings.appOpacity || 100) / 100}`,
borderColor: `rgba(${
colorScheme === 'dark' ? '26, 27, 30,' : '233, 236, 239,'
} \
${(config.settings.appOpacity || 100) / 100}`,
}}
>
{torrentEnabled && ( {torrentEnabled && (
<> <>
<Title size="h2">Torrents</Title>
<ModuleMenu module={TorrentsModule} /> <ModuleMenu module={TorrentsModule} />
<TorrentsComponent /> <TorrentsComponent />
</> </>
@@ -219,9 +210,6 @@ const AppShelf = (props: any) => {
{usenetEnabled && ( {usenetEnabled && (
<> <>
{torrentEnabled && <Divider my="sm" />} {torrentEnabled && <Divider my="sm" />}
<Title size="h2" mt={0}>
Usenet
</Title>
<ModuleMenu module={UsenetModule} /> <ModuleMenu module={UsenetModule} />
<UsenetComponent /> <UsenetComponent />
</> </>

4
src/modules/torrents/TorrentsModule.tsx
View File

@@ -193,9 +193,9 @@ export default function TorrentsComponent() {
}); });
return ( return (
<ScrollArea mt="xl" sx={{ height: 300, width: '100%' }}> <ScrollArea sx={{ height: 300, width: '100%' }}>
{rows.length > 0 ? ( {rows.length > 0 ? (
<Table highlightOnHover> <Table highlightOnHover p="sm">
<thead>{ths}</thead> <thead>{ths}</thead>
<tbody>{rows}</tbody> <tbody>{rows}</tbody>
</Table> </Table>