REVERTED - Restore corner radial controls; make dock icons full-bleed
- Bring back the corner fan-out controls; drop the in-dock settings tile. - Regenerate public/dock/*.svg so the squircle fills the whole tile with no inner margin.
This commit is contained in:
moh
@@ -0,0 +1,149 @@
|
||||
"use client";
|
||||
|
||||
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
|
||||
import { Plus, ShieldCheck } from "lucide-react";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { useState, type ReactNode } from "react";
|
||||
|
||||
import { LocaleToggle } from "@/components/layout/locale-toggle";
|
||||
import { SoundToggle } from "@/components/sound-toggle";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
import { buildAdminUrl } from "@/lib/admin-routing";
|
||||
import type { AppLocale } from "@/lib/locale";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type FloatingControlsProps = {
|
||||
locale: string;
|
||||
defaultLocale: AppLocale;
|
||||
isSuperAdmin?: boolean;
|
||||
};
|
||||
|
||||
const pill =
|
||||
"flex h-11 w-11 items-center justify-center rounded-full border border-border/60 bg-background/85 text-foreground/80 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
|
||||
|
||||
/** Radius (px) of the arc the items fan out along. */
|
||||
const RADIUS = 92;
|
||||
|
||||
export function FloatingControls({
|
||||
locale,
|
||||
defaultLocale,
|
||||
isSuperAdmin = false,
|
||||
}: FloatingControlsProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const t = useTranslations("navigation");
|
||||
const activeLocale = useLocale();
|
||||
const isRtl = activeLocale === "ar";
|
||||
const reducedMotion = useReducedMotion();
|
||||
|
||||
const controls: ReactNode[] = [
|
||||
<SoundToggle
|
||||
key="sound"
|
||||
ariaLabel={t("soundMute")}
|
||||
mutedAriaLabel={t("soundUnmute")}
|
||||
variant="ghost"
|
||||
className={cn(pill, "border-transparent bg-transparent")}
|
||||
/>,
|
||||
<ThemeToggle
|
||||
key="theme"
|
||||
ariaLabel={t("themeToggle")}
|
||||
variant="ghost"
|
||||
className={cn(pill, "border-transparent bg-transparent")}
|
||||
/>,
|
||||
<LocaleToggle
|
||||
key="locale"
|
||||
locale={locale}
|
||||
defaultLocale={defaultLocale}
|
||||
className={cn(pill, "border-transparent bg-transparent p-0")}
|
||||
/>,
|
||||
];
|
||||
|
||||
if (isSuperAdmin) {
|
||||
controls.push(
|
||||
<a key="admin" href={buildAdminUrl("/")} aria-label="Open admin dashboard" className={pill}>
|
||||
<ShieldCheck className="h-[1.125rem] w-[1.125rem]" />
|
||||
</a>,
|
||||
);
|
||||
}
|
||||
|
||||
const count = controls.length;
|
||||
// Fan across a quarter arc from "up" (90°) to "sideways" (180°), mirrored for
|
||||
// RTL so the items always spread away from the corner into the page.
|
||||
const startAngle = 94;
|
||||
const endAngle = 176;
|
||||
const positionFor = (index: number) => {
|
||||
const angle = count === 1 ? 135 : startAngle + ((endAngle - startAngle) * index) / (count - 1);
|
||||
const radians = (angle * Math.PI) / 180;
|
||||
return {
|
||||
x: (isRtl ? -1 : 1) * Math.cos(radians) * RADIUS,
|
||||
y: -Math.sin(radians) * RADIUS,
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="pointer-events-none fixed bottom-0 end-0 z-50 p-4"
|
||||
style={{ paddingBottom: "calc(1.1rem + env(safe-area-inset-bottom, 0px))" }}
|
||||
>
|
||||
<div className="pointer-events-auto relative h-12 w-12">
|
||||
<AnimatePresence>
|
||||
{open ? (
|
||||
<>
|
||||
{/* click-away scrim */}
|
||||
<motion.button
|
||||
key="scrim"
|
||||
type="button"
|
||||
aria-hidden
|
||||
tabIndex={-1}
|
||||
onClick={() => setOpen(false)}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 -z-10 cursor-default bg-transparent"
|
||||
/>
|
||||
{controls.map((control, index) => {
|
||||
const { x, y } = positionFor(index);
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="absolute bottom-0 end-0 grid h-12 w-12 place-items-center"
|
||||
initial={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
|
||||
animate={reducedMotion ? { opacity: 1 } : { opacity: 1, x, y, scale: 1 }}
|
||||
exit={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
|
||||
transition={
|
||||
reducedMotion
|
||||
? { duration: 0 }
|
||||
: { type: "spring", stiffness: 460, damping: 26, delay: index * 0.035 }
|
||||
}
|
||||
>
|
||||
{control}
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* trigger */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((value) => !value)}
|
||||
aria-expanded={open}
|
||||
aria-label={open ? t("closeMenu") : t("openMenu")}
|
||||
className={cn(
|
||||
pill,
|
||||
"relative h-12 w-12",
|
||||
open && "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
|
||||
)}
|
||||
>
|
||||
<motion.span
|
||||
animate={{ rotate: open ? 135 : 0 }}
|
||||
transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 22 }}
|
||||
className="flex items-center justify-center"
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
</motion.span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
|
||||
import { Settings, ShieldCheck } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { useState, type ReactNode } from "react";
|
||||
|
||||
import { LocaleToggle } from "@/components/layout/locale-toggle";
|
||||
import { SoundToggle } from "@/components/sound-toggle";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
import { FloatingControls } from "@/components/layout/floating-controls";
|
||||
import { Dock, DockIcon } from "@/components/ui/dock";
|
||||
import { buildAdminUrl } from "@/lib/admin-routing";
|
||||
import { getLocalizedPath, stripLocalePrefix, type AppLocale } from "@/lib/locale";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
@@ -43,18 +37,6 @@ const navItems: NavItem[] = [
|
||||
{ key: "contact", path: "/contact" },
|
||||
];
|
||||
|
||||
// Graphite squircle matching the SVG page icons, used for the settings tile.
|
||||
const controlTile =
|
||||
"group relative overflow-visible rounded-[26%] bg-gradient-to-b from-[#3f4551] to-[#191d24] shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-white/10 transition-shadow duration-200 hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]";
|
||||
// Glass pill used for each control that fans out along the arc.
|
||||
const fanPill =
|
||||
"flex h-11 w-11 items-center justify-center rounded-full border border-transparent bg-background/90 text-foreground/85 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
|
||||
|
||||
// Radius (px) and opening angles of the arc the controls fan out along.
|
||||
const ARC_RADIUS = 74;
|
||||
const ARC_START = 46;
|
||||
const ARC_END = 134;
|
||||
|
||||
function isNavItemActive(currentPath: string, itemPath: string) {
|
||||
if (itemPath === "/") {
|
||||
return currentPath === "/";
|
||||
@@ -66,52 +48,13 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
|
||||
const locale = useLocale();
|
||||
const pathname = usePathname();
|
||||
const t = useTranslations("navigation");
|
||||
const reducedMotion = useReducedMotion();
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
|
||||
const currentPath = stripLocalePrefix(pathname);
|
||||
const homeHref = getLocalizedPath(locale, "/", defaultLocale);
|
||||
|
||||
const fanItems: ReactNode[] = [
|
||||
<SoundToggle
|
||||
key="sound"
|
||||
ariaLabel={t("soundMute")}
|
||||
mutedAriaLabel={t("soundUnmute")}
|
||||
variant="ghost"
|
||||
className={fanPill}
|
||||
/>,
|
||||
<ThemeToggle key="theme" ariaLabel={t("themeToggle")} variant="ghost" className={fanPill} />,
|
||||
<LocaleToggle key="locale" locale={locale} defaultLocale={defaultLocale} className={cn(fanPill, "p-0")} />,
|
||||
];
|
||||
|
||||
if (isSuperAdmin) {
|
||||
fanItems.push(
|
||||
<a key="admin" href={buildAdminUrl("/")} aria-label="Open admin dashboard" className={fanPill}>
|
||||
<ShieldCheck className="h-[1.125rem] w-[1.125rem]" />
|
||||
</a>,
|
||||
);
|
||||
}
|
||||
|
||||
const arcPosition = (index: number) => {
|
||||
const count = fanItems.length;
|
||||
const angle = count === 1 ? 90 : ARC_START + ((ARC_END - ARC_START) * index) / (count - 1);
|
||||
const radians = (angle * Math.PI) / 180;
|
||||
return { x: Math.cos(radians) * ARC_RADIUS, y: -Math.sin(radians) * ARC_RADIUS };
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* click-away scrim (below the dock, above the page) */}
|
||||
{settingsOpen ? (
|
||||
<button
|
||||
type="button"
|
||||
aria-hidden
|
||||
tabIndex={-1}
|
||||
onClick={() => setSettingsOpen(false)}
|
||||
className="fixed inset-0 z-30 cursor-default bg-transparent"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{/* ===== Bottom dock (Magic UI) — primary navigation ===== */}
|
||||
<div
|
||||
className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4"
|
||||
style={{ paddingBottom: "calc(0.9rem + env(safe-area-inset-bottom, 0px))" }}
|
||||
@@ -143,7 +86,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
|
||||
<DockTip label="mohfarawati" />
|
||||
</DockIcon>
|
||||
|
||||
<DockSeparator />
|
||||
<div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
|
||||
|
||||
{/* ── Pages ── */}
|
||||
{navItems.map(({ key, path, disabled }) => {
|
||||
@@ -194,74 +137,15 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
|
||||
</DockIcon>
|
||||
);
|
||||
})}
|
||||
|
||||
<DockSeparator />
|
||||
|
||||
{/* ── Settings — press to fan the controls out along an arc ── */}
|
||||
<DockIcon className={controlTile}>
|
||||
<TileGloss />
|
||||
|
||||
<AnimatePresence>
|
||||
{settingsOpen
|
||||
? fanItems.map((node, index) => {
|
||||
const { x, y } = arcPosition(index);
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="absolute inset-0 z-10 flex items-center justify-center"
|
||||
initial={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
|
||||
animate={reducedMotion ? { opacity: 1 } : { opacity: 1, x, y, scale: 1 }}
|
||||
exit={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
|
||||
transition={
|
||||
reducedMotion
|
||||
? { duration: 0 }
|
||||
: { type: "spring", stiffness: 480, damping: 26, delay: index * 0.035 }
|
||||
}
|
||||
>
|
||||
{node}
|
||||
</motion.div>
|
||||
);
|
||||
})
|
||||
: null}
|
||||
</AnimatePresence>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSettingsOpen((value) => !value)}
|
||||
aria-expanded={settingsOpen}
|
||||
aria-label={settingsOpen ? t("closeMenu") : t("openMenu")}
|
||||
className="relative z-20 flex h-full w-full items-center justify-center rounded-[inherit] text-white hover:bg-white/10"
|
||||
>
|
||||
<motion.span
|
||||
animate={{ rotate: settingsOpen ? 90 : 0 }}
|
||||
transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 22 }}
|
||||
className="flex items-center justify-center"
|
||||
>
|
||||
<Settings className="h-[46%] w-[46%]" />
|
||||
</motion.span>
|
||||
</button>
|
||||
|
||||
{settingsOpen ? null : <DockTip label={t("themeToggle")} />}
|
||||
</DockIcon>
|
||||
</Dock>
|
||||
</div>
|
||||
|
||||
{/* ===== Corner controls — theme / language / sound / admin (fan out) ===== */}
|
||||
<FloatingControls locale={locale} defaultLocale={defaultLocale} isSuperAdmin={isSuperAdmin} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DockSeparator() {
|
||||
return <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />;
|
||||
}
|
||||
|
||||
function TileGloss() {
|
||||
return (
|
||||
<span
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-x-0 top-0 h-1/2 rounded-t-[26%] bg-gradient-to-b from-white/25 to-transparent"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DockTip({ label, soon }: { label: string; soon?: string }) {
|
||||
return (
|
||||
<span
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
|
||||
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="50" cy="41" r="11"/><path d="M30 72 C30 57, 70 57, 70 72"/></g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 849 B After Width: | Height: | Size: 853 B |
@@ -2,11 +2,11 @@
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
|
||||
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="50" cy="41" r="11"/><path d="M30 72 C30 57, 70 57, 70 72"/></g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 849 B After Width: | Height: | Size: 853 B |
@@ -2,11 +2,11 @@
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
|
||||
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="27" y="35" width="46" height="30" rx="6"/><path d="M30 40 L50 54 L70 40"/></g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 861 B After Width: | Height: | Size: 865 B |
@@ -2,11 +2,11 @@
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
|
||||
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="27" y="35" width="46" height="30" rx="6"/><path d="M30 40 L50 54 L70 40"/></g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 861 B After Width: | Height: | Size: 865 B |
@@ -2,11 +2,11 @@
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
|
||||
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M29 49 L50 30 L71 49"/><path d="M34 46 V70 H66 V46"/></g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 840 B After Width: | Height: | Size: 844 B |
@@ -2,11 +2,11 @@
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
|
||||
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M29 49 L50 30 L71 49"/><path d="M34 46 V70 H66 V46"/></g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 840 B After Width: | Height: | Size: 844 B |
@@ -2,11 +2,11 @@
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
|
||||
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="#fff">
|
||||
<rect x="32" y="32" width="15" height="15" rx="4"/><rect x="53" y="32" width="15" height="15" rx="4"/>
|
||||
<rect x="32" y="53" width="15" height="15" rx="4"/><rect x="53" y="53" width="15" height="15" rx="4"/></g>
|
||||
|
||||
|
Before Width: | Height: | Size: 905 B After Width: | Height: | Size: 909 B |
@@ -2,11 +2,11 @@
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
|
||||
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="#fff">
|
||||
<rect x="32" y="32" width="15" height="15" rx="4"/><rect x="53" y="32" width="15" height="15" rx="4"/>
|
||||
<rect x="32" y="53" width="15" height="15" rx="4"/><rect x="53" y="53" width="15" height="15" rx="4"/></g>
|
||||
|
||||
|
Before Width: | Height: | Size: 905 B After Width: | Height: | Size: 909 B |
@@ -2,11 +2,11 @@
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
|
||||
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M50 28 L71 40 L71 60 L50 72 L29 60 L29 40 Z"/><path d="M29 40 L50 52 L71 40"/><path d="M50 52 L50 72"/></g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 890 B After Width: | Height: | Size: 894 B |
@@ -2,11 +2,11 @@
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
|
||||
<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
|
||||
</defs>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
|
||||
<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
|
||||
<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
|
||||
<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
|
||||
<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
|
||||
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M50 28 L71 40 L71 60 L50 72 L29 60 L29 40 Z"/><path d="M29 40 L50 52 L71 40"/><path d="M50 52 L50 72"/></g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 890 B After Width: | Height: | Size: 894 B |
Reference in New Issue
Block a user