mirror of
https://github.com/streetwriters/notesnook.git
synced 2026-02-24 04:00:59 +01:00
web: improve content loader animation colors
This commit is contained in:
Abdullah Atta
@@ -1,47 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<!-- https://electronjs.org/docs/tutorial
|
||||
/security#csp-meta-tag -->
|
||||
<meta
|
||||
http-equiv="Content-Security-Policy"
|
||||
content="script-src 'self' https://checkout.paddle.com https://analytics.streetwriters.co https://cdn.paddle.com https://cdnjs.cloudflare.com https://esm.sh 'unsafe-inline' 'unsafe-eval';"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="%PUBLIC_URL%/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAHUUExURUxpcf////////////////////////////////////////////////////////////////////////////////////39/f39/f////////////////////////////////z8/O3s7P7+/vTz8wAAAPz7++/v7/Py8u/u7vDv7+7t7dfX1/79/ezr66Kiovv6+vf29vX09OTj4w0NDfv7++Ti4vr6+vT09Ovq6vn5+f39/fb19dnX1/b29tvb29/f3xMTE/j4+Pn4+O7s7MnJyerq6uno6M/Pz8jIyN3d3dnZ2d7e3kZGRvj39/38/Pf39+zs7PDw8OPi4ubl5cvLy+rp6czMzPLy8vPz887Ozujo6MrKyuDf3+fn59PT0+bm5uXl5c3NzfX19evr6wsLC+/t7ePj4/Ty8u3r6/Lx8eXk5OPh4dDQ0Nza2tjX19vZ2fHw8Nva2tLR0djW1tbW1tra2tLS0uHh4evp6eLi4tXV1djY2L+/vysrK7q6utHR0aGhoa6urrm5uQICAigoKCEhIZCQkFxcXBgYGFRUVBISEm1tbQ4ODklJSbu7uyAgID09PZqamkVFRXh4eLGxsTg4OOTk5FFRUQEBAQoKCnx8fBcXF7/+rP8AAAAfdFJOUwBOqO2h6KT9Mtyr5+w3Str+6TTZOjXb31M24O8BOd0PapSsAAABxElEQVQ4y2NgYOBgYWWXxwLYBdmEGICAjx9Z1NJJVQfB42QE6hdG0RaoaaCqhKSCl4EF1VxNVAXyTAzcaArUUBXwMLBjKDBBViDAII+uwBZFgTy6AjU1awIKNKz1aa0g1VBfB58CDS08CuIb40AKzLAqsJKXN2tXacChwKS+rTtB3tJHRU9ewxmbFZ6tKiqTrSAKdIO1LDEUaPeoqMzsUwAp0NIt8Uj0ijJXQFVgnDJVZcK0XrACXcXY0sjoHM8AfyUkBbOn9KvMmgRSYFEW4hUVqJagHeaShqTAwX7ijJQusAkW5VXRHu6eruFqaigKkqarqAAVKFbYxWiYq1XGedijuMHBWz6xo7m2Rl7RwtvdJaw6NjzCFl2BVVNdshJQgbqBsqtdpIu7nasjXIFXS2cyRL2CW6i6JTCgFCLitUPs4QrM7cDmKZi7FRYVm6o5QeLbDGICLNEqJAVk59rk2djY5Me4FThawQOKFSzrrxmaZWpqBAamQUGmwRaakNTNzMAm7+ekrKmlqOjsrIgAGcAA1ci0NVPiYhAV8zVURgbp6nBg7isuwsDAKKfkp4AEVOHASklKApS9JZmY5bECaS5ZGQYA3vqpy6NoYh0AAABXelRYdFJhdyBwcm9maWxlIHR5cGUgaXB0YwAAeJzj8gwIcVYoKMpPy8xJ5VIAAyMLLmMLEyMTS5MUAxMgRIA0w2QDI7NUIMvY1MjEzMQcxAfLgEigSi4A6hcRdPJCNZUAAAAASUVORK5CYII="
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="%PUBLIC_URL%/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<!-- <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" /> -->
|
||||
<link
|
||||
rel="mask-icon"
|
||||
href="%PUBLIC_URL%/safari-pinned-tab.svg"
|
||||
color="#01c352"
|
||||
/>
|
||||
<meta name="msapplication-TileColor" content="#01c352" />
|
||||
<meta name="theme-color" content="#01c352" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="Content-Security-Policy"
|
||||
content="script-src 'self' 'nonce-7WIq8hRwApoXhctoGZZthMLYQLRNiprTwcPi6Azdf' 'unsafe-eval';" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32"
|
||||
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAHUUExURUxpcf////////////////////////////////////////////////////////////////////////////////////39/f39/f////////////////////////////////z8/O3s7P7+/vTz8wAAAPz7++/v7/Py8u/u7vDv7+7t7dfX1/79/ezr66Kiovv6+vf29vX09OTj4w0NDfv7++Ti4vr6+vT09Ovq6vn5+f39/fb19dnX1/b29tvb29/f3xMTE/j4+Pn4+O7s7MnJyerq6uno6M/Pz8jIyN3d3dnZ2d7e3kZGRvj39/38/Pf39+zs7PDw8OPi4ubl5cvLy+rp6czMzPLy8vPz887Ozujo6MrKyuDf3+fn59PT0+bm5uXl5c3NzfX19evr6wsLC+/t7ePj4/Ty8u3r6/Lx8eXk5OPh4dDQ0Nza2tjX19vZ2fHw8Nva2tLR0djW1tbW1tra2tLS0uHh4evp6eLi4tXV1djY2L+/vysrK7q6utHR0aGhoa6urrm5uQICAigoKCEhIZCQkFxcXBgYGFRUVBISEm1tbQ4ODklJSbu7uyAgID09PZqamkVFRXh4eLGxsTg4OOTk5FFRUQEBAQoKCnx8fBcXF7/+rP8AAAAfdFJOUwBOqO2h6KT9Mtyr5+w3Str+6TTZOjXb31M24O8BOd0PapSsAAABxElEQVQ4y2NgYOBgYWWXxwLYBdmEGICAjx9Z1NJJVQfB42QE6hdG0RaoaaCqhKSCl4EF1VxNVAXyTAzcaArUUBXwMLBjKDBBViDAII+uwBZFgTy6AjU1awIKNKz1aa0g1VBfB58CDS08CuIb40AKzLAqsJKXN2tXacChwKS+rTtB3tJHRU9ewxmbFZ6tKiqTrSAKdIO1LDEUaPeoqMzsUwAp0NIt8Uj0ijJXQFVgnDJVZcK0XrACXcXY0sjoHM8AfyUkBbOn9KvMmgRSYFEW4hUVqJagHeaShqTAwX7ijJQusAkW5VXRHu6eruFqaigKkqarqAAVKFbYxWiYq1XGedijuMHBWz6xo7m2Rl7RwtvdJaw6NjzCFl2BVVNdshJQgbqBsqtdpIu7nasjXIFXS2cyRL2CW6i6JTCgFCLitUPs4QrM7cDmKZi7FRYVm6o5QeLbDGICLNEqJAVk59rk2djY5Me4FThawQOKFSzrrxmaZWpqBAamQUGmwRaakNTNzMAm7+ekrKmlqOjsrIgAGcAA1ci0NVPiYhAV8zVURgbp6nBg7isuwsDAKKfkp4AEVOHASklKApS9JZmY5bECaS5ZGQYA3vqpy6NoYh0AAABXelRYdFJhdyBwcm9maWxlIHR5cGUgaXB0YwAAeJzj8gwIcVYoKMpPy8xJ5VIAAyMLLmMLEyMTS5MUAxMgRIA0w2QDI7NUIMvY1MjEzMQcxAfLgEigSi4A6hcRdPJCNZUAAAAASUVORK5CYII=" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<!-- <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" /> -->
|
||||
<link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#01c352" />
|
||||
<meta name="msapplication-TileColor" content="#01c352" />
|
||||
<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
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
|
||||
<!--
|
||||
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
@@ -50,142 +30,147 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<meta name="description" content="Your private note taking space" />
|
||||
<meta
|
||||
property="og:title"
|
||||
content="Notesnook - Your private note taking space"
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Notesnook is a simple and private note taking app that keeps your notes organized and synced on your phone, tablet and computer."
|
||||
/>
|
||||
<meta property="og:image" content="https://notesnook.com/social.jpg" />
|
||||
<meta
|
||||
property="og:image:alt"
|
||||
content="Notesnook is a simple and private note taking app that keeps your notes organized and synced on your phone, tablet and computer."
|
||||
/>
|
||||
<meta property="og:url" content="https://notesnook.com/" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="Notesnook by Streetwriters LLC" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<title>Notesnook - Your private note taking space</title>
|
||||
<meta name="description" content="Your private note taking space" />
|
||||
<meta property="og:title" content="Notesnook - Your private note taking space" />
|
||||
<meta property="og:description"
|
||||
content="Notesnook is a simple and private note taking app that keeps your notes organized and synced on your phone, tablet and computer." />
|
||||
<meta property="og:image" content="https://notesnook.com/social.jpg" />
|
||||
<meta property="og:image:alt"
|
||||
content="Notesnook is a simple and private note taking app that keeps your notes organized and synced on your phone, tablet and computer." />
|
||||
<meta property="og:url" content="https://notesnook.com/" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="Notesnook by Streetwriters LLC" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<title>Notesnook - Your private note taking space</title>
|
||||
|
||||
<script>
|
||||
const theme = JSON.parse(
|
||||
window.localStorage.getItem("theme") || '"light"'
|
||||
);
|
||||
const root = document.querySelector("html");
|
||||
root.setAttribute("data-theme", theme);
|
||||
</script>
|
||||
<style>
|
||||
html[data-theme="dark"] {
|
||||
--bg: #1b1b1b;
|
||||
--fg: #fff;
|
||||
--three-bars-bg: #494949;
|
||||
--gradient-stop-color: #111111;
|
||||
--n-letter-color: #e1e1e1;
|
||||
<script nonce="7WIq8hRwApoXhctoGZZthMLYQLRNiprTwcPi6Azdf">
|
||||
const theme = JSON.parse(
|
||||
window.localStorage.getItem("theme") || '"light"'
|
||||
);
|
||||
const root = document.querySelector("html");
|
||||
if (root) root.setAttribute("data-theme", theme);
|
||||
</script>
|
||||
<style>
|
||||
html[data-theme="dark"] {
|
||||
--bg: #1b1b1b;
|
||||
--fg: #fff;
|
||||
--three-bars-bg: #494949;
|
||||
--gradient-stop-color: #111111;
|
||||
--n-letter-color: #e1e1e1;
|
||||
}
|
||||
|
||||
html[data-theme="light"] {
|
||||
--bg: #fff;
|
||||
--three-bars-bg: #bebebe;
|
||||
--gradient-stop-color: #fff9f9;
|
||||
--n-letter-color: #000;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .react-loading-skeleton {
|
||||
--base-color: #e5e5e5;
|
||||
--highlight-color: #dbdbdb;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .react-loading-skeleton {
|
||||
--base-color: #2b2b2b;
|
||||
--highlight-color: #353535;
|
||||
}
|
||||
|
||||
#splash svg {
|
||||
transform: scale(1);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
html[data-theme="light"] {
|
||||
--bg: #fff;
|
||||
--three-bars-bg: #bebebe;
|
||||
--gradient-stop-color: #fff9f9;
|
||||
--n-letter-color: #000;
|
||||
}
|
||||
|
||||
#splash svg {
|
||||
70% {
|
||||
transform: scale(1);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
html,
|
||||
body {
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
background-color: var(--background);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
html,
|
||||
body {
|
||||
font-size: 18px;
|
||||
background-color: var(--background);
|
||||
}
|
||||
}
|
||||
:root,
|
||||
body,
|
||||
#root {
|
||||
margin: 0 !important;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:root,
|
||||
body,
|
||||
#root {
|
||||
margin: 0 !important;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
* {
|
||||
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
0% {
|
||||
transform: translateY(500px);
|
||||
opacity: 0;
|
||||
}
|
||||
80% {
|
||||
transform: translateY(0px);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* svg {
|
||||
width: 1.5rem;
|
||||
} */
|
||||
.ReactModal__Overlay {
|
||||
@keyframes fadeUp {
|
||||
0% {
|
||||
transform: translateY(500px);
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.ReactModal__Overlay--after-open {
|
||||
80% {
|
||||
transform: translateY(0px);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ReactModal__Overlay--before-close {
|
||||
opacity: 0;
|
||||
}
|
||||
/* svg {
|
||||
width: 1.5rem;
|
||||
} */
|
||||
.ReactModal__Overlay {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.slide {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.ReactModal__Overlay--after-open {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.carousel.carousel-slider {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
|
||||
.ReactModal__Overlay--before-close {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.carousel.carousel-slider {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
|
||||
-->
|
||||
<div id="root"></div>
|
||||
<div
|
||||
id="splash"
|
||||
style="
|
||||
<div id="root"></div>
|
||||
<div id="splash" style="
|
||||
background-color: var(--bg);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -196,71 +181,34 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<svg viewBox="0 0 339 339" style="width: 150px">
|
||||
<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="var(--gradient-stop-color)"
|
||||
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="var(--n-letter-color)"
|
||||
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(--three-bars-bg)"
|
||||
ry="2.3"
|
||||
transform="skewY(15) scale(.9669 1)"
|
||||
/>
|
||||
<path
|
||||
fill="var(--three-bars-bg)"
|
||||
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>
|
||||
</div>
|
||||
<div id="dialogContainer"></div>
|
||||
<div id="floatingViewContainer"></div>
|
||||
<!--
|
||||
">
|
||||
<svg viewBox="0 0 339 339" style="width: 150px">
|
||||
<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="var(--gradient-stop-color)" 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="var(--n-letter-color)" 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(--three-bars-bg)" ry="2.3"
|
||||
transform="skewY(15) scale(.9669 1)" />
|
||||
<path fill="var(--three-bars-bg)"
|
||||
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>
|
||||
</div>
|
||||
<div id="dialogContainer"></div>
|
||||
<div id="floatingViewContainer"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
@@ -270,22 +218,6 @@
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
<!-- for calculating 1 em size -->
|
||||
<p
|
||||
id="p"
|
||||
style="
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
position: absolute;
|
||||
top: -1000px;
|
||||
left: -1000px;
|
||||
box-sizing: content-box;
|
||||
"
|
||||
>
|
||||
Hello World
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -30,8 +30,8 @@ import Config from "./utils/config";
|
||||
import { useStore } from "./stores/app-store";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
import { ViewLoader } from "./components/loaders/view-loader";
|
||||
import { NavigationLoader } from "./components/loaders/navigation-loader";
|
||||
import { StatusBarLoader } from "./components/loaders/status-bar-loader";
|
||||
import NavigationMenu from "./components/navigation-menu";
|
||||
import StatusBar from "./components/status-bar";
|
||||
import { EditorLoader } from "./components/loaders/editor-loader";
|
||||
|
||||
const GlobalMenuWrapper = React.lazy(() =>
|
||||
@@ -41,8 +41,6 @@ const AppEffects = React.lazy(() => import("./app-effects"));
|
||||
const MobileAppEffects = React.lazy(() => import("./app-effects.mobile"));
|
||||
const CachedRouter = React.lazy(() => import("./components/cached-router"));
|
||||
const HashRouter = React.lazy(() => import("./components/hash-router"));
|
||||
const NavigationMenu = React.lazy(() => import("./components/navigation-menu"));
|
||||
const StatusBar = React.lazy(() => import("./components/status-bar"));
|
||||
|
||||
function App() {
|
||||
const isMobile = useMobile();
|
||||
@@ -142,16 +140,11 @@ function DesktopAppContents({ isAppLoaded, show, setShow }) {
|
||||
priority={LayoutPriority.Low}
|
||||
>
|
||||
<Flex sx={{ overflow: "hidden", flex: 1 }}>
|
||||
<SuspenseLoader
|
||||
condition={isAppLoaded}
|
||||
component={NavigationMenu}
|
||||
props={{
|
||||
toggleNavigationContainer: (state) => {
|
||||
setShow(state || !show);
|
||||
},
|
||||
isTablet: isNarrow
|
||||
<NavigationMenu
|
||||
toggleNavigationContainer={(state) => {
|
||||
setShow(state || !show);
|
||||
}}
|
||||
fallback={<NavigationLoader />}
|
||||
isTablet={isNarrow}
|
||||
/>
|
||||
</Flex>
|
||||
</Allotment.Pane>
|
||||
@@ -191,11 +184,7 @@ function DesktopAppContents({ isAppLoaded, show, setShow }) {
|
||||
</Allotment>
|
||||
</Flex>
|
||||
|
||||
<SuspenseLoader
|
||||
fallback={<StatusBarLoader />}
|
||||
component={StatusBar}
|
||||
condition={isAppLoaded}
|
||||
/>
|
||||
<StatusBar />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -223,14 +212,7 @@ function MobileAppContents({ isAppLoaded }) {
|
||||
flexShrink: 0
|
||||
}}
|
||||
>
|
||||
<SuspenseLoader
|
||||
condition={isAppLoaded}
|
||||
component={NavigationMenu}
|
||||
props={{
|
||||
toggleNavigationContainer: () => {}
|
||||
}}
|
||||
fallback={<NavigationLoader />}
|
||||
/>
|
||||
<NavigationMenu toggleNavigationContainer={() => {}} isTablet={false} />
|
||||
</Flex>
|
||||
<Flex
|
||||
className="listMenu"
|
||||
|
||||
@@ -26,27 +26,13 @@ export const EditorLoader = memo(function EditorLoader() {
|
||||
return (
|
||||
<Flex sx={{ flexDirection: "column", p: 2, py: 1 }}>
|
||||
<Flex sx={{ alignItems: "end", justifyContent: "end" }}>
|
||||
<Skeleton
|
||||
width={45}
|
||||
height={30}
|
||||
style={{ marginRight: 5 }}
|
||||
baseColor="var(--border)"
|
||||
/>
|
||||
<Skeleton width={45} height={30} baseColor="var(--border)" />
|
||||
<Skeleton width={45} height={30} style={{ marginRight: 5 }} />
|
||||
<Skeleton width={45} height={30} />
|
||||
</Flex>
|
||||
<Skeleton
|
||||
height={39}
|
||||
style={{ marginTop: 20 }}
|
||||
baseColor="var(--border)"
|
||||
/>
|
||||
<Skeleton height={39} style={{ marginTop: 20 }} />
|
||||
<Box sx={{ mt: 4, mx: "5%" }}>
|
||||
<Skeleton height={56} width={300} baseColor="var(--border)" />
|
||||
<Skeleton
|
||||
height={22}
|
||||
style={{ marginTop: 15 }}
|
||||
count={3}
|
||||
baseColor="var(--border)"
|
||||
/>
|
||||
<Skeleton height={56} width={300} />
|
||||
<Skeleton height={22} style={{ marginTop: 15 }} count={3} />
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@@ -28,10 +28,10 @@ export const ListLoader = memo(function ListLoader() {
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
sx={{ py: 1, mx: 1, alignItems: "center", justifyContent: "center" }}
|
||||
sx={{ py: 1, alignItems: "center", justifyContent: "center", px: 1 }}
|
||||
>
|
||||
<Box sx={{ height: 38 }}>
|
||||
<Skeleton width={38} height={38} circle baseColor="var(--border)" />
|
||||
<Skeleton width={38} height={38} circle />
|
||||
</Box>
|
||||
<Flex
|
||||
sx={{
|
||||
@@ -42,10 +42,10 @@ export const ListLoader = memo(function ListLoader() {
|
||||
}}
|
||||
>
|
||||
<Box sx={{ height: 14 }}>
|
||||
<Skeleton inline height={14} baseColor="var(--border)" />
|
||||
<Skeleton inline height={14} />
|
||||
</Box>
|
||||
<Box sx={{ mt: 1, height: 10 }}>
|
||||
<Skeleton inline height={10} baseColor="var(--border)" />
|
||||
<Skeleton inline height={10} />
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
@@ -53,18 +53,16 @@ export const ListLoader = memo(function ListLoader() {
|
||||
<Box key={width} sx={{ py: 2, px: 1 }}>
|
||||
<Skeleton
|
||||
height={16}
|
||||
baseColor="var(--border)"
|
||||
width={`${width}%`}
|
||||
style={{ marginBottom: 5 }}
|
||||
/>
|
||||
<Skeleton height={12} count={2} baseColor="var(--hover)" />
|
||||
<Skeleton height={12} count={2} />
|
||||
<Flex>
|
||||
<Skeleton height={10} inline width={50} baseColor="var(--hover)" />
|
||||
<Skeleton height={10} inline width={50} />
|
||||
<Skeleton
|
||||
height={10}
|
||||
inline
|
||||
width={10}
|
||||
baseColor="var(--shade)"
|
||||
circle
|
||||
style={{ marginLeft: 5 }}
|
||||
/>
|
||||
@@ -72,7 +70,6 @@ export const ListLoader = memo(function ListLoader() {
|
||||
height={10}
|
||||
inline
|
||||
width={10}
|
||||
baseColor="var(--hover)"
|
||||
circle
|
||||
style={{ marginLeft: 5 }}
|
||||
/>
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
/*
|
||||
This file is part of the Notesnook project (https://notesnook.com/)
|
||||
|
||||
Copyright (C) 2022 Streetwriters (Private) Limited
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { memo } from "react";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import { Box, Flex } from "@theme-ui/components";
|
||||
import "react-loading-skeleton/dist/skeleton.css";
|
||||
|
||||
export const NavigationLoader = memo(function NavigationLoader() {
|
||||
return (
|
||||
<Flex
|
||||
id="navigation-menu"
|
||||
sx={{
|
||||
height: "100%",
|
||||
zIndex: 1,
|
||||
position: "relative",
|
||||
flex: 1,
|
||||
flexDirection: "column"
|
||||
}}
|
||||
bg={"bgSecondary"}
|
||||
>
|
||||
{[0, 1, 2, 3, 4, 5].map((i) => (
|
||||
<Flex
|
||||
key={i}
|
||||
px={2}
|
||||
py={"9px"}
|
||||
mx={1}
|
||||
mt={"3px"}
|
||||
sx={{
|
||||
position: "relative",
|
||||
":first-of-type": { mt: 1 },
|
||||
":last-of-type": { mb: 1 }
|
||||
}}
|
||||
>
|
||||
<Skeleton
|
||||
height={20}
|
||||
width={20}
|
||||
inline
|
||||
circle
|
||||
baseColor="var(--border)"
|
||||
/>
|
||||
<Box sx={{ flex: 1, ml: 1 }}>
|
||||
<Skeleton
|
||||
height={18}
|
||||
inline
|
||||
baseColor="var(--border)"
|
||||
borderRadius={5}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
);
|
||||
});
|
||||
@@ -1,46 +0,0 @@
|
||||
/*
|
||||
This file is part of the Notesnook project (https://notesnook.com/)
|
||||
|
||||
Copyright (C) 2022 Streetwriters (Private) Limited
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { memo } from "react";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import { Box } from "@theme-ui/components";
|
||||
import "react-loading-skeleton/dist/skeleton.css";
|
||||
|
||||
export const StatusBarLoader = memo(function StatusBarLoader() {
|
||||
return (
|
||||
<Box
|
||||
bg="bgSecondary"
|
||||
sx={{
|
||||
borderTop: "1px solid",
|
||||
borderTopColor: "border",
|
||||
justifyContent: "space-between",
|
||||
height: 27,
|
||||
display: ["none", "flex"]
|
||||
}}
|
||||
px={2}
|
||||
>
|
||||
<Skeleton
|
||||
width={80}
|
||||
height={16}
|
||||
baseColor="var(--border)"
|
||||
borderRadius={5}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
@@ -25,23 +25,12 @@ import { ListLoader } from "./list-loader";
|
||||
|
||||
export const ViewLoader = memo(function ViewLoader() {
|
||||
return (
|
||||
<Box sx={{ m: 1 }}>
|
||||
<Flex sx={{ justifyContent: "space-between", py: 0 }}>
|
||||
<Skeleton
|
||||
height={35}
|
||||
width={100}
|
||||
borderRadius={5}
|
||||
baseColor="var(--border)"
|
||||
/>
|
||||
<Box sx={{ my: 1 }}>
|
||||
<Flex sx={{ justifyContent: "space-between", py: 0, px: 1 }}>
|
||||
<Skeleton height={35} width={100} borderRadius={5} />
|
||||
<Flex>
|
||||
<Skeleton
|
||||
height={35}
|
||||
width={35}
|
||||
circle
|
||||
style={{ marginRight: 5 }}
|
||||
baseColor="var(--border)"
|
||||
/>
|
||||
<Skeleton height={35} width={35} circle baseColor="var(--border)" />
|
||||
<Skeleton height={35} width={35} circle style={{ marginRight: 5 }} />
|
||||
<Skeleton height={35} width={35} circle />
|
||||
</Flex>
|
||||
</Flex>
|
||||
<ListLoader />
|
||||
|
||||
@@ -20,12 +20,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
import { useStore } from "../../stores/theme-store";
|
||||
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
|
||||
import { useTheme } from "@notesnook/theme";
|
||||
import { useEffect } from "react";
|
||||
|
||||
function ThemeProviderWrapper(props) {
|
||||
const theme = useStore((store) => store.theme);
|
||||
const accent = useStore((store) => store.accent);
|
||||
const themeProperties = useTheme({ accent, theme });
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.querySelector("html");
|
||||
if (root) root.setAttribute("data-theme", theme);
|
||||
}, [theme]);
|
||||
|
||||
return (
|
||||
<EmotionThemeProvider theme={themeProperties}>
|
||||
{props.children instanceof Function
|
||||
|
||||
Reference in New Issue
Block a user