From 51358219d5e149d99e16e8c844404caa9ea6d971 Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Fri, 19 Feb 2021 18:10:52 +0500
Subject: [PATCH] feat: dark logo

---
 apps/web/public/logo.svg                      |   1 -
 apps/web/src/assets/logo-dark.svg             | 144 ++++++++++++++++++
 apps/web/src/assets/logo.svg                  |  56 +++++++
 .../web/src/components/editor/-placeholder.js |   6 +-
 4 files changed, 205 insertions(+), 2 deletions(-)
 delete mode 100644 apps/web/public/logo.svg
 create mode 100644 apps/web/src/assets/logo-dark.svg
 create mode 100644 apps/web/src/assets/logo.svg

diff --git a/apps/web/public/logo.svg b/apps/web/public/logo.svg
deleted file mode 100644
index 9acab56b7..000000000
--- a/apps/web/public/logo.svg
+++ /dev/null
@@ -1 +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="#fff9f9" 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 d="M84 109l35 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 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>
\ No newline at end of file
diff --git a/apps/web/src/assets/logo-dark.svg b/apps/web/src/assets/logo-dark.svg
new file mode 100644
index 000000000..3f0903994
--- /dev/null
+++ b/apps/web/src/assets/logo-dark.svg
@@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 339 339"
+   version="1.1"
+   id="svg36"
+   sodipodi:docname="logo-dark.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata40">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#1f1f1f"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="980"
+     id="namedview38"
+     showgrid="false"
+     inkscape:zoom="1.3923304"
+     inkscape:cx="181.58784"
+     inkscape:cy="157.12775"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g34" />
+  <defs
+     id="defs2" />
+  <defs
+     id="defs16">
+    <linearGradient
+       id="b">
+      <stop
+         offset="0"
+         stop-color="#fff"
+         id="stop4" />
+      <stop
+         offset="1"
+         stop-opacity="0"
+         id="stop6"
+         style="stop-color:#1f1f1f;stop-opacity:0" />
+    </linearGradient>
+    <linearGradient
+       id="c"
+       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-color="#fff"
+         id="stop10" />
+      <stop
+         offset="1"
+         stop-opacity="0"
+         id="stop12"
+         style="stop-color:#1f1f1f;stop-opacity:0" />
+    </linearGradient>
+    <linearGradient
+       id="d"
+       x1="167.8"
+       x2="281.9"
+       y1="76.9"
+       y2="63.2"
+       gradientTransform="scale(1.50082) rotate(5 310 -1366)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#b" />
+  </defs>
+  <g
+     transform="translate(0 42)"
+     id="g34">
+    <path
+       fill="url(#c)"
+       d="M160 205l154 42-141 44-155-42z"
+       id="path18" />
+    <path
+       fill="url(#d)"
+       d="M160-35v240l154 42 1-253z"
+       id="path20" />
+    <g
+       fill="none"
+       stroke-width="1.2"
+       id="g24">
+      <path
+         d="M160 205V-35M160 205L18 249M160 205l154 41"
+         id="path22" />
+    </g>
+    <g
+       style="line-height:1.25;-inkscape-font-specification:'Noto Sans'"
+       id="g28">
+      <path
+         fill="#b3b3b3"
+         stroke-width=".7"
+         d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z"
+         aria-label="N"
+         font-family="Atkinson Hyperlegible"
+         font-size="136.5"
+         font-weight="700"
+         letter-spacing="0"
+         style="-inkscape-font-specification:'Atkinson Hyperlegible Bold';fill:#eeeeee;fill-opacity:1"
+         word-spacing="0"
+         id="path26" />
+    </g>
+    <rect
+       width="86.1"
+       height="12.6"
+       x="185"
+       y="97"
+       fill="#1a1a1a"
+       ry="2.3"
+       transform="skewY(15) scale(.9669 1)"
+       id="rect30" />
+    <path
+       fill="#1a1a1a"
+       d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zM181 122l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z"
+       id="path32" />
+  </g>
+</svg>
diff --git a/apps/web/src/assets/logo.svg b/apps/web/src/assets/logo.svg
new file mode 100644
index 000000000..5860b4fae
--- /dev/null
+++ b/apps/web/src/assets/logo.svg
@@ -0,0 +1,56 @@
+<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="#fff9f9" 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 d="M84 109l35 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 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>
diff --git a/apps/web/src/components/editor/-placeholder.js b/apps/web/src/components/editor/-placeholder.js
index 4a680f072..2046293e8 100644
--- a/apps/web/src/components/editor/-placeholder.js
+++ b/apps/web/src/components/editor/-placeholder.js
@@ -1,9 +1,13 @@
 import React from "react";
+import Logo from "../../assets/logo.svg";
+import LogoDark from "../../assets/logo-dark.svg";
 import { Button, Flex, Image, Text } from "rebass";
 import { hashNavigate } from "../../navigation";
 import * as Icon from "../icons";
+import { useStore as useThemeStore } from "../../stores/theme-store";
 
 function EditorPlaceholder() {
+  const theme = useThemeStore((store) => store.theme);
   return (
     <Flex
       flexDirection="column"
@@ -11,7 +15,7 @@ function EditorPlaceholder() {
       justifyContent="center"
       alignItems="center"
     >
-      <Image src="./logo.svg" width={150} />
+      <Image src={theme === "dark" ? LogoDark : Logo} width={150} />
       <Text variant="body" textAlign="center" mt={2}>
         Please create or open a note to start editing.
       </Text>