qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-11-13 08:46:56 +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 DialogDescription
} from '@/ui/dialog'; } from '@/ui/dialog';
import { buttonStyles } from '@/ui/styles'; import { buttonStyles } from '@/ui/styles';
import { cn } from '@/utils/cn';
// Props: // Props:
export let svgInfo: iSVG; export let svgInfo: iSVG;
@ -108,13 +109,16 @@
</DialogHeader> </DialogHeader>
<div <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}> <div class={cardDownloadStyles}>
<img <img
src={isDarkTheme() ? svgInfo.route.dark : svgInfo.route.light} src={isDarkTheme() ? svgInfo.route.dark : svgInfo.route.light}
alt={svgInfo.title} alt={svgInfo.title}
class="h-8 my-4" class="h-10 my-4"
/> />
<button <button
title="Logo with light & dark variants" title="Logo with light & dark variants"

34
src/components/warning.svelte
View File

@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import { AlertTriangleIcon, Check } from 'lucide-svelte'; import { AlertTriangleIcon, Check } from 'lucide-svelte';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { buttonStyles } from '@/ui/styles';
import { cn } from '@/utils/cn';
let warning = false; let warning = false;
const initialValue = browser ? window.localStorage.getItem('warning') : true; const initialValue = browser ? window.localStorage.getItem('warning') : true;
@ -8,23 +10,25 @@
{#if !warning && !initialValue} {#if !warning && !initialValue}
<div <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" /> <div class="flex items-center space-x-2">
<p> <AlertTriangleIcon size={18} strokeWidth={2} class="mr-1" />
Each svg provides the link to the product or company that owns it, <strong <p>
>please contact them</strong 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 if you are going to use their logo. If you are the owner of an svg and do not want it to appear
<a here, please
target="_blank" <a
class="underline underline-offset-4 decoration-dotted decoration-neutral-500" target="_blank"
href="https://github.com/pheralb/svgl/issues/new">create an issue</a class="underline underline-offset-4 decoration-dotted decoration-neutral-500"
> on Github. href="https://github.com/pheralb/svgl/issues/new">create an issue</a
</p> > on Github.
</p>
</div>
<button <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={() => { on:click={() => {
localStorage.setItem('warning', 'true'); localStorage.setItem('warning', 'true');
warning = true; warning = true;