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

Update styling

Browse Source
This commit is contained in:
Aj - Thomas
2022-04-26 00:14:42 +02:00
parent ce17ebdb4b
commit 27687647ee
3 changed files with 16 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/AppShelf/AddAppShelfItem.tsx
View File

@@ -35,8 +35,7 @@ export default function AddItemShelfItem(props: any) {
});
return (
<>
<Modal size={'xl'} opened={opened} onClose={() => setOpened(false)} title="Add a service">
<Paper radius="md" p="xl" withBorder {...props}>
<Modal size={'xl'} radius="lg" opened={props.opened || opened} onClose={() => setOpened(false)} title="Add a service">
<Center>
<Image
height={120}
@@ -96,7 +95,6 @@ export default function AddItemShelfItem(props: any) {
<Button type="submit">Add service</Button>
</Group>
</form>
</Paper>
</Modal>
<Grid.Col span={4} lg={2} sm={3}>
<AspectRatio ratio={4 / 3}>

9
components/AppShelf/AppShelf.story.tsx Normal file
View File

@@ -0,0 +1,9 @@
import AppShelf from './AppShelf';
export default {
title: 'Item Shelf',
};
export const Default = (args: any) => (
<AppShelf {...args} />
);

76
components/AppShelf/AppShelf.tsx
View File

@@ -7,13 +7,13 @@ import AddItemShelfItem from './AddAppShelfItem';
const useStyles = createStyles((theme) => ({
main: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
textAlign: 'center',
padding: theme.spacing.xl,
borderRadius: theme.radius.md,
'&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
},
},
}));
@@ -35,9 +35,9 @@ const AppShelf = () => {
localStorage.setItem('services', JSON.stringify([...services, item]));
}
function removeItem(item: serviceItem) {
setServices(services.filter((s) => s.url !== item.url));
localStorage.setItem('services', JSON.stringify(services.filter((s) => s.url !== item.url)));
function removeItem(name: string) {
setServices(services.filter((s) => s.name !== name));
localStorage.setItem('services', JSON.stringify(services.filter((s) => s.name !== name)));
}
return (
@@ -76,69 +76,3 @@ const AppShelf = () => {
};
export default AppShelf;
const MockServices = [
{
name: 'Radarr',
type: 'Radarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Radarr/icon.png',
url: 'http://server:7878/',
},
{
name: 'Sonarr',
type: 'Sonarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
url: 'http://server:8989/',
},
{
name: 'Sonarr',
type: 'Sonarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
url: 'http://server:8989/',
},
{
name: 'Sonarr',
type: 'Sonarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
url: 'http://server:8989/',
},
{
name: 'Sonarr',
type: 'Sonarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
url: 'http://server:8989/',
},
{
name: 'Sonarr',
type: 'Sonarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
url: 'http://server:8989/',
},
{
name: 'Sonarr',
type: 'Sonarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
url: 'http://server:8989/',
},
];
function saveLocal(arg0: any) {
// localStorage.setItem('services', JSON.stringify(arg0));
console.log(`saving ${arg0}`);
}
function loadLocal(arg0: string) {
const local = localStorage.getItem(arg0);
if (local) {
return JSON.parse(local);
}
return [
...MockServices,
{
name: 'Radarr',
type: 'Radarr',
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Radarr/icon.png',
url: 'http://server:7878/',
},
];
}