web: update app logo

This commit is contained in:
Abdullah Atta
2024-04-25 13:00:07 +05:00
parent e150e08f29
commit 0c32ebf163
24 changed files with 77 additions and 156 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 353 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 664 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
apps/web/public/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<rect width="1000" height="1000" rx="300" ry="300" />
<g transform="translate(-65.392282 -65.444691) scale(1.1042818)">
<g fill="#fff" clip-path="url(#a)">
<path
d="M724.985 682.919c-17.255 50.411-51.835 93.065-97.588 120.372-45.752 27.307-99.71 37.496-152.269 28.753-52.56-8.743-100.314-35.85-134.763-76.498-34.449-40.648-53.359-92.199-53.365-145.482v-110.25l79.121 33.053v77.152c-.007 20.779 4.434 41.318 13.024 60.237 8.59 18.92 21.131 35.781 36.78 49.451 2.97 2.587 6.053 5.107 9.236 7.459 23.357 17.388 51.402 27.352 80.494 28.597.99 0 1.946.079 2.925.101.979.023 2.25 0 3.375 0h3.375c1.125 0 1.935 0 2.925-.101 29.081-1.248 57.116-11.203 80.471-28.575 3.173-2.351 6.255-4.86 9.237-7.447 20.556-17.98 35.656-41.366 43.582-67.5zM737 414v196.065c0 2.531 0 5.074-.158 7.605l-78.963-33.019V414c-.013-37.684-14.607-73.901-40.725-101.066-26.119-27.164-61.735-43.168-99.389-44.66-37.655-1.492-74.426 11.644-102.611 36.657-28.186 25.013-45.6 59.962-48.594 97.526-.281 3.803-.439 7.662-.439 11.543v48.712L287 429.637V189h225c59.674 0 116.903 23.705 159.099 65.901C713.295 297.097 737 354.326 737 414Z" />
</g>
<defs>
<clipPath id="a">
<rect width="1024" height="1024" fill="#fff" rx="200" />
</clipPath>
</defs>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135.47 135.47"><g fill="gray"><path d="M65.63 65.86a4.48 4.48 0 1 0-.01-8.96 4.48 4.48 0 0 0 0 8.96zm0-6.33a1.85 1.85 0 1 1 0 3.7 1.85 1.85 0 0 1 0-3.7zm0 0"/><path d="M88.49 48.53H46.98c-.9 0-1.64.73-1.64 1.64V85.3c0 .9.74 1.64 1.64 1.64h41.5c.91 0 1.64-.74 1.64-1.64V50.17c0-.9-.73-1.64-1.63-1.64Zm-.99 2.62v20.77l-8.25-8.25a1.38 1.38 0 0 0-1.95 0L65.63 75.34l-7.46-7.46a1.37 1.37 0 0 0-1.95 0l-8.25 8.25V51.15ZM47.97 84.31v-4.47l9.22-9.22 7.46 7.45a1.37 1.37 0 0 0 1.95 0L78.27 66.4l9.23 9.23v8.68zm0 0"/></g></svg>

Before

Width:  |  Height:  |  Size: 571 B

View File

@@ -1 +0,0 @@
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="1440" height="1440" viewBox="0 0 1080.000000 1080.000000"><path d="M513.8 437.7l-.3 437.7L348 927.2c-91 28.5-168.2 52.7-171.5 53.7l-6 2h15c13.3.1 450.2 3.1 665 4.5l80 .6-25.5-7c-14-3.9-37.9-10.4-53-14.5-15.1-4-41.7-11.2-59-15.9-17.3-4.6-74.9-20.2-128-34.5-124.4-33.5-121.2-32.6-120.5-33.2.4-.5-12.9-421.4-25.5-807.6-1.1-33.7-2-64.4-2-68.3 0-5.6-.3-7-1.5-7-1.3 0-1.5 49.6-1.7 437.7z"/><path d="M400.5 456.4l-39 12.2-.5 121.6-.5 121.6L295 611.3c-36-55.3-65.8-100.7-66.2-100.9-.5-.3-20.7 5.8-92.5 28.2l-11.3 3.5v172.5c0 94.8.3 172.4.7 172.4.6 0 34-10.2 65.5-20.1l12.8-4 .2-121.7.3-121.6L269.9 720c36 55.3 65.7 100.8 66 101.2.3.3 24-6.7 52.6-15.6l52-16.2.3-172.7c.1-95-.1-172.7-.5-172.6-.5.1-18.3 5.6-39.8 12.3zM588.3 562.5c-2.2 1.6-2.3 2.1-2.3 19.1 0 19.3.7 22.2 5.7 24.2 1.5.7 48.5 13.4 104.3 28.3 55.8 14.8 140.2 37.4 187.5 50 52.5 14 86.9 22.8 88.3 22.4 3.7-.9 4.4-4.7 4-22.2l-.3-16.3-3-2.9c-2.8-2.8-14.2-6-164-46-88.5-23.7-172.7-46.1-187-50-14.3-3.8-27.1-7.2-28.5-7.6-1.5-.3-3.4 0-4.7 1zM590 646.7c-3.6 1.3-4 3.3-4 22.6v18.9l3.3 3.2c2.9 2.9 5.7 3.8 31.2 10.5 15.4 4 83.4 21.9 151 39.8C883.1 771.1 894.7 774 897 772.8c1.3-.7 2.7-2.4 3.1-3.8 1.1-3.9 1-31.1-.1-35.1-1.9-6.9-2.1-6.9-54.6-20.8-89.8-23.7-250.9-66.2-252.4-66.6-.8-.2-2.2-.1-3 .2zM587.2 739.2c-.8.8-1.2 6.6-1.2 19.4 0 17.5.1 18.4 2.3 20.9 1.8 2.2 5.7 3.5 24.7 8.6 12.4 3.3 97.6 26 189.3 50.5 110.8 29.6 167.7 44.4 169.3 44 3.7-1 4.4-4.3 4.4-20.9 0-13.3-.3-15.6-2-18.4-1-1.7-2.8-3.7-3.9-4.3-1.1-.5-46.7-13-101.3-27.6-54.6-14.5-138.7-37-186.9-49.9-48.1-12.9-88.9-23.5-90.5-23.5-1.7 0-3.5.5-4.2 1.2z"/></svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -1,20 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 339 339">
<defs />
<defs>
<linearGradient id="b" x1="193.9" x2="198.7" y1="166.8" y2="223.3" gradientTransform="rotate(5 4448 -4204) scale(2.93671)" gradientUnits="userSpaceOnUse" xlink:href="#a" />
<linearGradient id="a">
<stop offset="0" />
<stop offset="1" stop-color="#111111" stop-opacity="0" />
</linearGradient>
<linearGradient id="c" x1="167.8" x2="270.6" y1="76.9" y2="64.2" gradientTransform="rotate(5 465 -2050) scale(1.50082)" gradientUnits="userSpaceOnUse" xlink:href="#a" />
</defs>
<g transform="translate(0 42)">
<path fill="url(#b)" d="M160 205l154 42-141 44-155-42z" />
<path fill="url(#c)" d="M160-35v240l154 42 1-253z" />
<path fill="none" stroke-width="1.2" d="M160 205V-35m0 240L18 249m142-44l154 41" />
<path fill="#e1e1e1" d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z" />
<rect width="86.1" height="12.6" x="185" y="97" fill="#494949" ry="2.3" transform="skewY(15) scale(.9669 1)" />
<path fill="#494949" d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zm0-47l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -1,18 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 339 339">
<defs>
<linearGradient xlink:href="#a" id="b" x1="188.61227" x2="193.54405" y1="165.2058" y2="216.81519" gradientTransform="rotate(5 4448 -4204) scale(2.93671)" gradientUnits="userSpaceOnUse"/>
<linearGradient id="a">
<stop offset="0"/>
<stop offset="1" stop-color="#fff9f9" stop-opacity="0"/>
</linearGradient>
<linearGradient xlink:href="#a" id="c" x1="167.8" x2="270.6" y1="76.9" y2="64.2" gradientTransform="rotate(5 465 -2050) scale(1.50082)" gradientUnits="userSpaceOnUse"/>
</defs>
<g transform="translate(0 42)">
<path fill="url(#b)" d="m160 205 154 42-141 44-155-42z"/>
<path fill="url(#c)" d="M160-35v240l154 42 1-253z"/>
<path fill="none" d="M160 205V-35m0 240L18 249m142-44 154 41"/>
<path d="m84 109 35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z"/>
<rect width="86.1" height="12.6" x="185" y="97" fill="#bebebe" ry="2.3" transform="skewY(15) scale(.9669 1)"/>
<path fill="#bebebe" d="m181 169 99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zm0-47 99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@@ -19,8 +19,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import { useMemo } from "react";
import { Box, Flex, Image, Link, Text } from "@theme-ui/components";
import Logo from "../../assets/logo.svg";
import LogoDark from "../../assets/logo-dark.svg";
import { useStore as useThemeStore } from "../../stores/theme-store";
import { getRandom } from "@notesnook/common";
import Grberk from "../../assets/testimonials/grberk.jpeg";
@@ -154,11 +152,16 @@ function AuthContainer(props) {
justifyContent: "end"
}}
>
<Image
src={colorScheme === "dark" ? LogoDark : Logo}
sx={{ borderRadius: "default", width: 70, alignSelf: "start" }}
mb={4}
/>
<svg
style={{
height: 90,
width: 90,
alignSelf: "start",
marginBottom: 20
}}
>
<use href="#full-logo" />
</svg>
<Text variant={"heading"} sx={{ fontSize: 48 }}>
{title}
</Text>
@@ -171,10 +174,10 @@ function AuthContainer(props) {
{testimonial.text} {" "}
<Link
sx={{ fontStyle: "italic", color: "paragraph-secondary" }}
href={testimonial.link}
href={testimonial.link}
target="_blank"
rel="noopener noreferrer"
>
>
source
</Link>
</Text>

View File

@@ -20,14 +20,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import { PropsWithChildren } from "react";
import { ErrorText } from "../error-text";
import { BaseThemeProvider } from "../theme-provider";
import { Button, Flex, Image, Text } from "@theme-ui/components";
import { Button, Flex, Text } from "@theme-ui/components";
import {
ErrorBoundary as RErrorBoundary,
FallbackProps
} from "react-error-boundary";
import Logo from "../../assets/logo.svg";
import LogoDark from "../../assets/logo-dark.svg";
import { useStore as useThemeStore } from "../../stores/theme-store";
import { createDialect } from "../../common/sqlite";
export function ErrorBoundary(props: PropsWithChildren) {
@@ -40,7 +37,6 @@ export function ErrorBoundary(props: PropsWithChildren) {
export function ErrorComponent({ error, resetErrorBoundary }: FallbackProps) {
const help = getErrorHelp({ error, resetErrorBoundary });
const colorScheme = useThemeStore((store) => store.colorScheme);
return (
<BaseThemeProvider
@@ -67,11 +63,17 @@ export function ErrorComponent({ error, resetErrorBoundary }: FallbackProps) {
flexDirection: "column"
}}
>
<Image
src={colorScheme === "dark" ? LogoDark : Logo}
sx={{ borderRadius: "default", width: 60, alignSelf: "start" }}
mb={4}
/>
<svg
style={{
borderRadius: "default",
height: 60,
width: 40,
alignSelf: "start",
marginBottom: 20
}}
>
<use href="#full-logo" />
</svg>
<Text
variant="heading"
sx={{ borderBottom: "1px solid var(--border)", pb: 1 }}

View File

@@ -81,8 +81,8 @@ export function TitleBar() {
className="titlebarLogo"
style={{
alignSelf: "center",
height: 24,
width: 24,
height: 16,
width: 12,
marginRight: 10,
marginLeft: 10
}}

View File

@@ -87,9 +87,9 @@ function RecoveryKeyDialog(props) {
<QRCode
value={key}
logoImage={Logo}
logoWidth={25}
logoWidth={40}
logoHeight={40}
ecLevel={"M"}
logoHeight={25}
/>
</Suspense>

View File

@@ -2,12 +2,10 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<!-- <link rel="manifest" href="/site.webmanifest" /> -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="theme-color" content="#01c352" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--
manifest.json provides metadata used when your web app is installed on a
@@ -97,7 +95,7 @@
@keyframes pulse {
0% {
transform: scale(0.95);
transform: scale(0.9);
}
70% {
@@ -105,7 +103,7 @@
}
100% {
transform: scale(0.95);
transform: scale(0.9);
}
}
@@ -135,22 +133,6 @@
flex-direction: column;
}
@keyframes fadeUp {
0% {
transform: translateY(500px);
opacity: 0;
}
80% {
transform: translateY(0px);
opacity: 0.7;
}
100% {
opacity: 1;
}
}
/* svg {
width: 1.5rem;
} */
@@ -187,68 +169,30 @@
xmlns="http://www.w3.org/2000/svg"
style="height: 0; width: 0; z-index: -1; position: absolute"
>
<defs>
<linearGradient
xlink:href="#a"
id="b"
x1="188.61227"
x2="193.54405"
y1="165.2058"
y2="216.81519"
gradientTransform="rotate(5 4448 -4204) scale(2.93671)"
gradientUnits="userSpaceOnUse"
<symbol id="full-logo" viewBox="0 0 1000 1000">
<rect
width="1000"
height="1000"
rx="30%"
ry="30%"
style="fill: var(--paragraph)"
/>
<linearGradient id="a">
<stop offset="0" />
<stop
offset="1"
stop-color="var(--background-secondary)"
stop-opacity="0"
/>
</linearGradient>
<linearGradient
id="c"
x1="167.8"
x2="270.6"
y1="76.9"
y2="64.2"
gradientTransform="rotate(5 465 -2050) scale(1.50082)"
gradientUnits="userSpaceOnUse"
xlink:href="#a"
/>
</defs>
<symbol id="themed-logo" viewBox="0 0 339 339">
<g transform="translate(0 42)">
<path fill="url(#b)" d="M160 205l154 42-141 44-155-42z" />
<path fill="url(#c)" d="M160-35v240l154 42 1-253z" />
<g transform="translate(275,176.95254)">
<path
fill="none"
stroke-width="1.2"
d="M160 205V-35m0 240L18 249m142-44l154 41"
/>
<path
fill="var(--paragraph)"
d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z"
/>
<rect
width="86.1"
height="12.6"
x="185"
y="97"
fill="var(--paragraph-secondary)"
ry="2.3"
transform="skewY(15) scale(.9669 1)"
/>
<path
fill="var(--paragraph-secondary)"
d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zm0-47l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z"
style="fill: var(--background)"
d="M437.985 493.919c-17.255 50.411-51.835 93.065-97.588 120.372-45.752 27.307-99.71 37.496-152.269 28.753-52.56-8.743-100.313999-35.85-134.763-76.498C18.916 525.898.006 474.347 0 421.064v-110.25l79.121001 33.053v77.152c-.007 20.779 4.434 41.318 13.024 60.237C100.735 500.176 113.276 517.037 128.925 530.707c2.97 2.587 6.053 5.107 9.236 7.459 23.357 17.388 51.402 27.352 80.494 28.597.99 0 1.946.079 2.925.101.979.023 2.25 0 3.375 0h3.375c1.125 0 1.935 0 2.925-.101 29.081-1.248 57.116-11.203 80.471-28.575 3.173-2.351 6.255-4.86 9.237-7.447 20.556-17.98 35.656-41.366 43.582-67.5zM450 225v196.065c0 2.531 0 5.074-.158 7.605l-78.963-33.019V225c-.013-37.684-14.607-73.901-40.725-101.066-26.119-27.164003-61.735-43.168003-99.389-44.660003-37.655-1.492-74.426 11.644-102.611 36.657003-28.185999 25.013-45.599999 59.962-48.593999 97.526-.281 3.803-.439 7.662-.439 11.543v48.712L0 240.637V0h225c59.674 0 116.903 23.705 159.099 65.901C426.295 108.097 450 165.326 450 225Z"
/>
</g>
</symbol>
<symbol id="themed-logo" viewBox="0 0 450 646.09491">
<path
style="fill: var(--paragraph)"
d="M437.985 493.919c-17.255 50.411-51.835 93.065-97.588 120.372-45.752 27.307-99.71 37.496-152.269 28.753-52.56-8.743-100.313999-35.85-134.763-76.498C18.916 525.898.006 474.347 0 421.064v-110.25l79.121001 33.053v77.152c-.007 20.779 4.434 41.318 13.024 60.237C100.735 500.176 113.276 517.037 128.925 530.707c2.97 2.587 6.053 5.107 9.236 7.459 23.357 17.388 51.402 27.352 80.494 28.597.99 0 1.946.079 2.925.101.979.023 2.25 0 3.375 0h3.375c1.125 0 1.935 0 2.925-.101 29.081-1.248 57.116-11.203 80.471-28.575 3.173-2.351 6.255-4.86 9.237-7.447 20.556-17.98 35.656-41.366 43.582-67.5zM450 225v196.065c0 2.531 0 5.074-.158 7.605l-78.963-33.019V225c-.013-37.684-14.607-73.901-40.725-101.066-26.119-27.164003-61.735-43.168003-99.389-44.660003-37.655-1.492-74.426 11.644-102.611 36.657003-28.185999 25.013-45.599999 59.962-48.593999 97.526-.281 3.803-.439 7.662-.439 11.543v48.712L0 240.637V0h225c59.674 0 116.903 23.705 159.099 65.901C426.295 108.097 450 165.326 450 225Z"
/>
</symbol>
</svg>
<div id="splash" class="hidden">
<svg>
<svg style="height: 120px">
<use href="#themed-logo" />
</svg>
</div>

View File

@@ -51,21 +51,6 @@ export const WEB_MANIFEST: Partial<ManifestOptions> = {
}
],
icons: [
{
src: "favicon-16x16.png",
sizes: "16x16",
type: "image/png"
},
{
src: "favicon-32x32.png",
sizes: "32x32",
type: "image/png"
},
{
src: "favicon-72x72.png",
sizes: "72x72",
type: "image/png"
},
{
src: "/android-chrome-192x192.png",
sizes: "192x192",
@@ -75,6 +60,18 @@ export const WEB_MANIFEST: Partial<ManifestOptions> = {
src: "/android-chrome-512x512.png",
sizes: "512x512",
type: "image/png"
},
{
src: "/android-chrome-maskable-192x192.png",
sizes: "192x192",
type: "image/png",
purpose: "maskable"
},
{
src: "/android-chrome-maskable-512x512.png",
sizes: "512x512",
type: "image/png",
purpose: "maskable"
}
],
screenshots: [