From 0423713f741e8f92ac60e1554a9f7c2b9f04418a Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Mon, 21 Feb 2022 15:21:44 +0100
Subject: [PATCH] feat: add svg logo

---
 app/ExplitLogo.tsx   | 32 ++++++++++++++++++++++++++++++++
 app/routes/index.tsx | 11 ++++-------
 public/explit.svg    |  8 ++++++++
 3 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 app/ExplitLogo.tsx
 create mode 100644 public/explit.svg

diff --git a/app/ExplitLogo.tsx b/app/ExplitLogo.tsx
new file mode 100644
index 0000000..32cb17a
--- /dev/null
+++ b/app/ExplitLogo.tsx
@@ -0,0 +1,32 @@
+const ExplitLogo = ({ className }: { className: string }) => (
+  <svg
+    viewBox="0 0 100 100"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <rect width="100" height="100" rx="20" fill="#6667AB" />
+    <path
+      d="M68.55 49.375H60C58.975 49.375 58.125 48.525 58.125 47.5V30.025C58.125 28.175 58.85 26.45 60.15 25.15C61.45 23.85 63.175 23.125 65.025 23.125H65.05C68.175 23.15 71.125 24.375 73.375 26.6C75.625 28.875 76.85 31.875 76.85 35V41.05C76.875 46.025 73.525 49.375 68.55 49.375ZM61.875 45.625H68.55C71.45 45.625 73.125 43.95 73.125 41.05V35C73.125 32.85 72.275 30.8 70.75 29.25C69.225 27.75 67.175 26.9 65.05 26.875C65.05 26.875 65.05 26.875 65.025 26.875C64.2 26.875 63.4 27.2 62.8 27.8C62.2 28.4 61.875 29.175 61.875 30.025V45.625Z"
+      fill="white"
+    />
+    <path
+      d="M42.4945 78.325C41.3195 78.325 40.2195 77.875 39.3945 77.025L35.2445 72.85C35.0195 72.625 34.6695 72.6 34.4195 72.8L30.1446 76C28.8196 77 27.0695 77.175 25.5695 76.425C24.0695 75.675 23.1445 74.175 23.1445 72.5V35C23.1445 27.45 27.4695 23.125 35.0195 23.125H65.0195C66.0445 23.125 66.8945 23.975 66.8945 25C66.8945 26.025 66.0445 26.875 65.0195 26.875C63.2945 26.875 61.8945 28.275 61.8945 30V72.5C61.8945 74.175 60.9695 75.675 59.4695 76.425C57.9695 77.175 56.2195 77.025 54.8945 76.025L50.6195 72.825C50.3695 72.625 50.0195 72.675 49.8195 72.875L45.6195 77.075C44.7695 77.875 43.6695 78.325 42.4945 78.325ZM34.7695 68.925C35.9195 68.925 37.0445 69.35 37.8945 70.225L42.0445 74.4C42.1945 74.55 42.3945 74.575 42.4945 74.575C42.5945 74.575 42.7945 74.55 42.9445 74.4L47.1445 70.2C48.6945 68.65 51.1445 68.5 52.8695 69.825L57.1195 73C57.3945 73.2 57.6445 73.125 57.7695 73.05C57.8945 72.975 58.1195 72.825 58.1195 72.5V30C58.1195 28.875 58.3945 27.8 58.8695 26.875H34.9945C29.4445 26.875 26.8695 29.45 26.8695 35V72.5C26.8695 72.85 27.0945 73 27.2195 73.075C27.3695 73.15 27.6196 73.2 27.8696 73L32.1445 69.8C32.9195 69.225 33.8445 68.925 34.7695 68.925Z"
+      fill="white"
+    />
+    <path
+      d="M48.5742 55.1952C47.1742 55.1952 46.0742 54.0702 46.0742 52.6952C46.0742 51.3203 47.1992 50.1953 48.5742 50.1953C49.9492 50.1953 51.0742 51.3203 51.0742 52.6952C51.0742 54.0702 49.9492 55.1952 48.5742 55.1952Z"
+      fill="white"
+    />
+    <path
+      d="M36.4258 45.078C35.0258 45.078 33.9258 43.9531 33.9258 42.5781C33.9258 41.2031 35.0508 40.0781 36.4258 40.0781C37.8008 40.0781 38.9258 41.2031 38.9258 42.5781C38.9258 43.9531 37.8008 45.078 36.4258 45.078Z"
+      fill="white"
+    />
+    <path
+      d="M35.6773 56.2022C35.2023 56.2022 34.7273 56.0272 34.3523 55.6522C33.6273 54.9272 33.6273 53.7272 34.3523 53.0022L48.0022 39.3523C48.7272 38.6273 49.9272 38.6273 50.6522 39.3523C51.3772 40.0773 51.3772 41.2773 50.6522 42.0023L37.0023 55.6522C36.6523 56.0022 36.1523 56.2022 35.6773 56.2022Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default ExplitLogo;
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
index 2863ddf..9892611 100644
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -2,6 +2,7 @@ import type { User } from "@prisma/client";
 import { LinksFunction, MetaFunction, LoaderFunction, redirect } from "remix";
 import { Link, useLoaderData } from "remix";
 import Header from "~/components/Header";
+import ExplitLogo from "~/ExplitLogo";
 import { getUser } from "~/utils/session.server";
 
 type LoaderData = { user: User | null };
@@ -44,13 +45,9 @@ export default function Index() {
         <div className="hero-overlay bg-opacity-60"></div>
         <div className="text-center hero-content glass rounded-box w-[80%] py-16 text-neutral-content">
           <div className="max-w-md">
-            <picture className="max-w-xs max-h-xs flex mx-auto justify-center items-center mb-6">
-              <img
-                className="w-[70%] h-auto max-h-20 md:max-h-none object-contain"
-                src="/icons/android-chrome-512x512.png"
-                alt=""
-              />
-            </picture>
+            <figure className="max-w-xs max-h-xs flex mx-auto justify-center items-center mb-6">
+              <ExplitLogo className="w-[70%] h-auto max-h-20 md:max-h-none object-contain" />
+            </figure>
             <h1 className="mb-5 text-5xl font-bold">Explit</h1>
             <p className="mb-5">
               Track and split shared expenses with friends and family.
diff --git a/public/explit.svg b/public/explit.svg
new file mode 100644
index 0000000..2f21861
--- /dev/null
+++ b/public/explit.svg
@@ -0,0 +1,8 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="20" fill="#6667AB"/>
+<path d="M68.55 49.375H60C58.975 49.375 58.125 48.525 58.125 47.5V30.025C58.125 28.175 58.85 26.45 60.15 25.15C61.45 23.85 63.175 23.125 65.025 23.125H65.05C68.175 23.15 71.125 24.375 73.375 26.6C75.625 28.875 76.85 31.875 76.85 35V41.05C76.875 46.025 73.525 49.375 68.55 49.375ZM61.875 45.625H68.55C71.45 45.625 73.125 43.95 73.125 41.05V35C73.125 32.85 72.275 30.8 70.75 29.25C69.225 27.75 67.175 26.9 65.05 26.875C65.05 26.875 65.05 26.875 65.025 26.875C64.2 26.875 63.4 27.2 62.8 27.8C62.2 28.4 61.875 29.175 61.875 30.025V45.625Z" fill="white"/>
+<path d="M42.4945 78.325C41.3195 78.325 40.2195 77.875 39.3945 77.025L35.2445 72.85C35.0195 72.625 34.6695 72.6 34.4195 72.8L30.1446 76C28.8196 77 27.0695 77.175 25.5695 76.425C24.0695 75.675 23.1445 74.175 23.1445 72.5V35C23.1445 27.45 27.4695 23.125 35.0195 23.125H65.0195C66.0445 23.125 66.8945 23.975 66.8945 25C66.8945 26.025 66.0445 26.875 65.0195 26.875C63.2945 26.875 61.8945 28.275 61.8945 30V72.5C61.8945 74.175 60.9695 75.675 59.4695 76.425C57.9695 77.175 56.2195 77.025 54.8945 76.025L50.6195 72.825C50.3695 72.625 50.0195 72.675 49.8195 72.875L45.6195 77.075C44.7695 77.875 43.6695 78.325 42.4945 78.325ZM34.7695 68.925C35.9195 68.925 37.0445 69.35 37.8945 70.225L42.0445 74.4C42.1945 74.55 42.3945 74.575 42.4945 74.575C42.5945 74.575 42.7945 74.55 42.9445 74.4L47.1445 70.2C48.6945 68.65 51.1445 68.5 52.8695 69.825L57.1195 73C57.3945 73.2 57.6445 73.125 57.7695 73.05C57.8945 72.975 58.1195 72.825 58.1195 72.5V30C58.1195 28.875 58.3945 27.8 58.8695 26.875H34.9945C29.4445 26.875 26.8695 29.45 26.8695 35V72.5C26.8695 72.85 27.0945 73 27.2195 73.075C27.3695 73.15 27.6196 73.2 27.8696 73L32.1445 69.8C32.9195 69.225 33.8445 68.925 34.7695 68.925Z" fill="white"/>
+<path d="M48.5742 55.1952C47.1742 55.1952 46.0742 54.0702 46.0742 52.6952C46.0742 51.3203 47.1992 50.1953 48.5742 50.1953C49.9492 50.1953 51.0742 51.3203 51.0742 52.6952C51.0742 54.0702 49.9492 55.1952 48.5742 55.1952Z" fill="white"/>
+<path d="M36.4258 45.078C35.0258 45.078 33.9258 43.9531 33.9258 42.5781C33.9258 41.2031 35.0508 40.0781 36.4258 40.0781C37.8008 40.0781 38.9258 41.2031 38.9258 42.5781C38.9258 43.9531 37.8008 45.078 36.4258 45.078Z" fill="white"/>
+<path d="M35.6773 56.2022C35.2023 56.2022 34.7273 56.0272 34.3523 55.6522C33.6273 54.9272 33.6273 53.7272 34.3523 53.0022L48.0022 39.3523C48.7272 38.6273 49.9272 38.6273 50.6522 39.3523C51.3772 40.0773 51.3772 41.2773 50.6522 42.0023L37.0023 55.6522C36.6523 56.0022 36.1523 56.2022 35.6773 56.2022Z" fill="white"/>
+</svg>