qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-11-10 14:46:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🎨 Main alert & `downloadSvg` UI improvements

Browse Source
This commit is contained in:
pheralb 2024-01-25 23:13:30 +00:00
parent 4e10a47d46
commit 1f2a600685
2 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/downloadSvg.svelte
View File

@ -14,6 +14,7 @@
DialogDescription
} from '@/ui/dialog';
import { buttonStyles } from '@/ui/styles';
import { cn } from '@/utils/cn';
// Props:
export let svgInfo: iSVG;
@ -108,13 +109,16 @@
</DialogHeader>
<div
class="flex w-full flex-col md:flex-row items-center justify-center space-y-2 md:space-y-0 md:space-x-2 mt-5"
class={cn(
'flex flex-col space-y-2 mt-4',
'md:space-y-0 md:flex-row md:space-x-4 md:items-center md:justify-center'
)}
>
<div class={cardDownloadStyles}>
<img
src={isDarkTheme() ? svgInfo.route.dark : svgInfo.route.light}
alt={svgInfo.title}
class="h-8 my-4"
class="h-10 my-4"
/>
<button
title="Logo with light & dark variants"

34
src/components/warning.svelte
View File

@ -1,6 +1,8 @@
<script lang="ts">
import { AlertTriangleIcon, Check } from 'lucide-svelte';
import { browser } from '$app/environment';
import { buttonStyles } from '@/ui/styles';
import { cn } from '@/utils/cn';
let warning = false;
const initialValue = browser ? window.localStorage.getItem('warning') : true;
@ -8,23 +10,25 @@
{#if !warning && !initialValue}
<div
class="flex items-center md:flex-row flex-col md:space-x-2 space-x-0 space-y-2 md:space-y-0 py-2 px-3 bg-neutral-100 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300"
class="flex items-center w-full justify-between md:flex-row flex-col md:space-x-2 space-x-0 space-y-2 md:space-y-0 py-2 px-3 bg-neutral-100 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300"
>
<AlertTriangleIcon size={18} strokeWidth={2} class="mr-1" />
<p>
Each svg provides the link to the product or company that owns it, <strong
>please contact them</strong
>
if you are going to use their logo. If you are the owner of an svg and do not want it to appear
here, please
<a
target="_blank"
class="underline underline-offset-4 decoration-dotted decoration-neutral-500"
href="https://github.com/pheralb/svgl/issues/new">create an issue</a
> on Github.
</p>
<div class="flex items-center space-x-2">
<AlertTriangleIcon size={18} strokeWidth={2} class="mr-1" />
<p>
All svgs provides the link to the product or company that owns it, <strong
>please contact them</strong
>
if you are going to use their logo. If you are the owner of an svg and do not want it to appear
here, please
<a
target="_blank"
class="underline underline-offset-4 decoration-dotted decoration-neutral-500"
href="https://github.com/pheralb/svgl/issues/new">create an issue</a
> on Github.
</p>
</div>
<button
class="ml-auto transition-colors flex items-center space-x-1 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40 bg-neutral-200/50 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300"
class={cn(buttonStyles, 'h-10 text-sm')}
on:click={() => {
localStorage.setItem('warning', 'true');
warning = true;