qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-11 09:40:31 +08:00
Code Issues Actions 2 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"

10
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,11 +10,12 @@
{#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"
> >
<div class="flex items-center space-x-2">
<AlertTriangleIcon size={18} strokeWidth={2} class="mr-1" /> <AlertTriangleIcon size={18} strokeWidth={2} class="mr-1" />
<p> <p>
Each svg provides the link to the product or company that owns it, <strong All svgs provides the link to the product or company that owns it, <strong
>please contact them</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 if you are going to use their logo. If you are the owner of an svg and do not want it to appear
@ -23,8 +26,9 @@
href="https://github.com/pheralb/svgl/issues/new">create an issue</a href="https://github.com/pheralb/svgl/issues/new">create an issue</a
> on Github. > on Github.
</p> </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;