From 4f76a524d3290597bdd13164e793baa2caedaad7 Mon Sep 17 00:00:00 2001
From: Vianpyro <vianney@veremme.org>
Date: Thu, 16 Jan 2025 10:57:16 -0500
Subject: [PATCH] Remove unused SVG logo and update references to new logo;
 refactor styles and layout for consistency

---
 src/assets/ets.svg           | 61 ------------------------------------
 src/assets/logo-original.svg |  6 ++++
 src/components/Post.astro    |  4 ---
 src/layouts/MainLayout.astro |  3 --
 src/layouts/MenuLayout.astro |  1 -
 src/pages/feed.astro         | 10 +-----
 src/pages/index.astro        |  6 ++--
 src/pages/login.astro        |  6 ++--
 src/pages/matches.astro      |  8 +++++
 src/pages/post.astro         |  8 +++++
 src/pages/profile.astro      |  8 +++++
 src/pages/search.astro       |  8 +++++
 src/styles/global.css        | 37 +++++++++++++++++++---
 13 files changed, 77 insertions(+), 89 deletions(-)
 delete mode 100644 src/assets/ets.svg
 create mode 100644 src/assets/logo-original.svg
 create mode 100644 src/pages/matches.astro
 create mode 100644 src/pages/post.astro
 create mode 100644 src/pages/profile.astro
 create mode 100644 src/pages/search.astro

diff --git a/src/assets/ets.svg b/src/assets/ets.svg
deleted file mode 100644
index 81cb303..0000000
--- a/src/assets/ets.svg
+++ /dev/null
@@ -1,61 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg enable-background="new 0 0 144.2 144.2" version="1.1" viewBox="0 0 144.2 144.2" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<style type="text/css">
-	.st0{fill:hsla(349, 98%, 45%, 1);}
-	.st1{fill:#FEFEFE;}
-	.st2{clip-path:url(#SVGID_00000126307005173185535850000015026723739192629944_);}
-	.st3{fill:url(#_x3C_Path_x3E__00000139292893659640491320000008553742753740994721_);}
-	.st4{clip-path:url(#SVGID_00000023271387173890866350000008588737650348539326_);}
-	.st5{fill:url(#_x3C_Path_x3E__00000155834924379683815790000011293570085757970339_);}
-</style>
-<path class="st0" d="M0,144.2h144.2V0H0L0,144.2z"/>
-
-	
-		<path class="st1" d="m126.6 66.4c0-3.1-5.8-5.2-17-6.4-5.4-0.6-11.7-0.9-18.8-0.9-6.2 0-12.7 0.2-19.6 0.7-11.8 0.8-24 2.4-34.2 4.5-0.8 0.2-1.7 0.4-2.4 0.6-0.5 0.1-0.9 0.2-1.3 0.3-7.3 1.8-16.3 4.3-15.7 8.4l0.8-0.3c-0.2-2.3 5.6-5 15.1-7.3 0.8-0.2 1.5-0.3 2.3-0.5l1.5-0.3c9-1.9 20.8-3.4 34.1-4.2 6.1-0.4 12.2-0.6 18-0.6 7.5 0 14.2 0.3 20 1 11.1 1.2 15.1 3.4 15.2 5h2z"/>
-	
-	<path class="st1" d="m59.1 52.2h-25.5l-11.4 45.6h25.7l1.8-7.1h-17.2l3.3-13.1h14.6l1.8-7h-14.7l2.8-11.3h16.9l1.9-7.1z"/>
-	
-		<path class="st1" d="m56.5 40.9c-1 0-2 0.6-3.8 1.6l-0.2 0.1-9 5.4-1.3 0.8 1.5 0.2 2 0.2h0.1l0.1-0.1 10.3-3.2c1.2-0.3 2.4-0.7 2.7-2 0.2-0.6 0.1-1.2-0.3-1.7-0.3-0.6-0.8-0.9-1.4-1.1-0.2-0.1-0.4-0.2-0.7-0.2z"/>
-		<path class="st1" d="m72.5 81.5c-0.9 0.1-2.5 0.2-4.4 0.3-0.4 0-0.9 0.1-1.3 0.1l-2.7 10.7h8.5l2.8-11.4c-0.9 0.2-1.9 0.3-2.9 0.3z"/>
-		<path class="st1" d="m62.7 47-1.8 7.1h12.8l-0.3 1.2-5.8 23.4c0.5 0 0.9-0.1 1.3-0.1 1.5-0.1 2.7-0.2 3.4-0.3 1.3-0.1 2.7-0.2 4-0.3l5.9-23.9h12l1.5-5.9 0.3-1.2h-33.3z"/>
-		<path class="st1" d="m122.1 46.9c-4.2-2.5-8.2-3.1-10.8-3.1-4.4 0-8.2 1.5-10.9 4.2-2.4 2.5-3.8 5.8-3.8 9.3 0 4 1.8 6.9 3.9 9.2 1.1 1.2 2.2 2.1 3.2 3.1 1 0.9 1.9 1.8 2.7 2.9l0.6 0.9h0.2c0.9-0.2 1.8-0.5 2.7-0.7 2-0.5 3.9-1 5.5-1.6-0.5-0.9-1-1.6-1.5-2.3-0.8-1-1.7-1.9-2.5-2.7l-1.4-1.3c-0.7-0.6-1.5-1.3-2.2-2-1.5-1.6-2.7-3.4-2.7-5.6 0-3.1 2.4-6.4 6.7-6.4 1.6 0 4.8 0.5 8.1 3.6l0.6 0.6 0.2-0.8 1.6-6.5 0.1-0.2 0.1-0.4-0.4-0.2z"/>
-		<path class="st1" d="m116.5 74.1c-1.8 0.6-3.7 1.1-5.8 1.7-0.6 0.2-1.3 0.3-1.9 0.5-0.2 0.1-0.5 0.1-0.7 0.2 0.1 0.3 0.1 0.6 0.1 0.9 0 3.7-2.4 7.4-7.6 7.4-3.5 0-6.8-1.5-9.9-4.4l-0.6-0.6-0.2 0.8-1.8 7.1v0.3l0.3 0.2c0.3 0.2 0.5 0.3 0.8 0.5 3.5 2 7.6 3.1 11.8 3.1 10.4 0 15.8-7.3 15.8-14.5 0.1-1.2-0.1-2.3-0.3-3.2z"/>
-	
-	
-		<defs>
-			<path id="c" d="m124.7 66.4c0.1 1-2.9 3.7-14.7 6.7-10 2.5-23.4 4.6-37.7 5.7-3 0.2-16.1 1.1-19.2 1.2h-0.2l-0.1 0.7v1.7h0.1c3.1-0.1 16.3-1.1 19.6-1.3 10.1-0.8 20-2 28.4-3.6 3.5-0.7 6.7-1.4 9.7-2.1 10.8-2.8 16.1-5.7 16-8.9l-1.9-0.1z"/>
-		</defs>
-		<clipPath id="e">
-			<use xlink:href="#c"/>
-		</clipPath>
-		
-			<g clip-path="url(#e)">
-			
-				<linearGradient id="b" x1="-161.31" x2="-161.06" y1="494.53" y2="494.53" gradientTransform="matrix(297.11 0 0 64.202 47979 -31676)" gradientUnits="userSpaceOnUse">
-				<stop stop-color="#E4022C" offset="0"/>
-				<stop stop-color="#FEFEFE" offset="1"/>
-			</linearGradient>
-			
-				<path d="m52.8 66.4h73.9v16h-73.9v-16z" fill="url(#b)"/>
-		</g>
-	
-	
-		<defs>
-			<path id="d" d="m17.6 73.3v0.4c0.7 2.9 6.6 5.5 15.4 6.7 2.2 0.3 3.8 0.4 6.3 0.6 1.1 0.1 4.4 0.2 4.4 0.2v-0.7s-3.8-0.2-5-0.2c-1.6-0.1-2.7-0.1-4.6-0.4-10.1-1.2-15.5-4.2-15.8-6.5l-0.7-0.1z"/>
-		</defs>
-		<clipPath id="f">
-			<use xlink:href="#d"/>
-		</clipPath>
-		
-			<g clip-path="url(#f)">
-			
-				<linearGradient id="a" x1="-161.91" x2="-161.66" y1="487.96" y2="487.96" gradientTransform="matrix(-46.344 -14.08 7.766 -25.562 -11252 10274)" gradientUnits="userSpaceOnUse">
-				<stop stop-color="#E4022C" offset="0"/>
-				<stop stop-color="#FEFEFE" offset="1"/>
-			</linearGradient>
-			
-				<path d="m41.6 88.4-26.1-7.9 4.3-14.5 26.2 8-4.4 14.4z" fill="url(#a)"/>
-		</g>
-	
-
-</svg>
diff --git a/src/assets/logo-original.svg b/src/assets/logo-original.svg
new file mode 100644
index 0000000..b8af673
--- /dev/null
+++ b/src/assets/logo-original.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+	<circle cx="21" cy="26" r="2" fill="#888" />
+	<circle cx="21" cy="6" r="2" fill="#888" />
+	<circle cx="4" cy="16" r="2" fill="#888" />
+	<path fill="#888" d="M28 12a3.996 3.996 0 0 0-3.858 3h-4.284a3.966 3.966 0 0 0-5.491-2.643l-3.177-3.97A3.96 3.96 0 0 0 12 6a4 4 0 1 0-4 4a4 4 0 0 0 1.634-.357l3.176 3.97a3.924 3.924 0 0 0 0 4.774l-3.176 3.97A4 4 0 0 0 8 22a4 4 0 1 0 4 4a3.96 3.96 0 0 0-.81-2.387l3.176-3.97A3.966 3.966 0 0 0 19.858 17h4.284A3.993 3.993 0 1 0 28 12M6 6a2 2 0 1 1 2 2a2 2 0 0 1-2-2m2 22a2 2 0 1 1 2-2a2 2 0 0 1-2 2m8-10a2 2 0 1 1 2-2a2 2 0 0 1-2 2m12 0a2 2 0 1 1 2-2a2 2 0 0 1-2 2" />
+</svg>
\ No newline at end of file
diff --git a/src/components/Post.astro b/src/components/Post.astro
index f00b0ff..c05de75 100644
--- a/src/components/Post.astro
+++ b/src/components/Post.astro
@@ -43,10 +43,6 @@ const formattedDate = now.toLocaleString();
 </Fragment>
 
 <style>
-    * {
-        color: black;
-    }
-
     article {
         display: flex;
         gap: 1rem;
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 5792a45..966f2f1 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -10,7 +10,6 @@ const { title } = Astro.props;
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width" />
-        <link rel="icon" type="image/svg+xml" href="/ets.svg" />
         <meta name="generator" content={Astro.generator} />
         <title>{title}</title>
     </head>
@@ -52,7 +51,6 @@ const { title } = Astro.props;
 
 <style>
     main {
-        background-color: var(--font-color);
         flex: 1;
         overflow-y: auto;
         width: 100%;
@@ -63,7 +61,6 @@ const { title } = Astro.props;
     }
 
     nav > ul {
-        background-color: var(--font-color);
         display: flex;
         justify-content: space-around;
     }
diff --git a/src/layouts/MenuLayout.astro b/src/layouts/MenuLayout.astro
index 30b02f9..ba09180 100644
--- a/src/layouts/MenuLayout.astro
+++ b/src/layouts/MenuLayout.astro
@@ -9,7 +9,6 @@ const { title } = Astro.props;
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width" />
-        <link rel="icon" type="image/svg+xml" href="/ets.svg" />
         <meta name="generator" content={Astro.generator} />
         <title>{title}</title>
     </head>
diff --git a/src/pages/feed.astro b/src/pages/feed.astro
index 6235e4d..ca2c6a2 100644
--- a/src/pages/feed.astro
+++ b/src/pages/feed.astro
@@ -11,12 +11,10 @@ const components = [
     {
         title: "This is another post",
         description: "The feed will be like LinkedIn's feed.",
-        date: "2021-10-02",
     },
     {
         title: "This is a third post",
         description: "Users will share their projects, thoughts, and more.",
-        date: "2021-10-03",
     },
     {
         title: "This is a fourth post",
@@ -27,7 +25,7 @@ const components = [
 
 <MainLayout title="Feed">
     <nav>
-        <span><Icon icon="ets" /></span>
+        <span><Icon icon="logo-original" /></span>
         <div>
             <span><Icon icon="bell" /></span>
             <span><Icon icon="message" /></span>
@@ -39,7 +37,6 @@ const components = [
                 <Post
                     title={component.title}
                     description={component.description}
-                    date={component.date}
                 />
             ))
         }
@@ -56,10 +53,6 @@ const components = [
         overflow-y: auto;
     }
 
-    * {
-        color: black;
-    }
-
     #feed {
         flex: 1;
     }
@@ -70,7 +63,6 @@ const components = [
         height: 2rem;
         position: sticky;
         top: 0;
-        background-color: white;
     }
 
     nav > span:first-child {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 69aa400..b493282 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,8 +6,8 @@ import LoadingSpinner from "../components/LoadingSpinner.astro";
 
 <MenuLayout title="Welcome to TindÉTS">
     <div id="loading-screen">
-        <div id="logo-ets">
-            <Icon icon="ets" />
+        <div id="logo">
+            <Icon icon="logo-original" />
         </div>
         <LoadingSpinner size="10vw" />
     </div>
@@ -28,7 +28,7 @@ import LoadingSpinner from "../components/LoadingSpinner.astro";
         flex: 1;
     }
 
-    #logo-ets {
+    #logo {
         width: 100vw;
         height: 100vw;
     }
diff --git a/src/pages/login.astro b/src/pages/login.astro
index c8243c1..0d8274d 100644
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@@ -5,8 +5,8 @@ import MenuLayout from "../layouts/MenuLayout.astro";
 
 <MenuLayout title="Login">
     <div id="login-page">
-        <div id="logo-ets">
-            <Icon icon="ets" />
+        <div id="logo">
+            <Icon icon="logo-original" />
         </div>
         <form id="login-form">
             <input type="text" placeholder="Universal Code" />
@@ -61,7 +61,7 @@ import MenuLayout from "../layouts/MenuLayout.astro";
         gap: 1rem;
     }
 
-    #logo-ets {
+    #logo {
         display: flex;
         justify-content: center;
         width: 50vw;
diff --git a/src/pages/matches.astro b/src/pages/matches.astro
new file mode 100644
index 0000000..66ba7d7
--- /dev/null
+++ b/src/pages/matches.astro
@@ -0,0 +1,8 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+---
+
+<MainLayout title="Feed">
+    <h1>Matches</h1>
+    <h2>Find new friends here</h2>
+</MainLayout>
diff --git a/src/pages/post.astro b/src/pages/post.astro
new file mode 100644
index 0000000..27bf5dd
--- /dev/null
+++ b/src/pages/post.astro
@@ -0,0 +1,8 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+---
+
+<MainLayout title="Feed">
+    <h1>Post</h1>
+    <h2>Share your thoughts here</h2>
+</MainLayout>
diff --git a/src/pages/profile.astro b/src/pages/profile.astro
new file mode 100644
index 0000000..ecb9b34
--- /dev/null
+++ b/src/pages/profile.astro
@@ -0,0 +1,8 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+---
+
+<MainLayout title="Feed">
+    <h1>Profile</h1>
+    <h2>Manage your personal information here</h2>
+</MainLayout>
diff --git a/src/pages/search.astro b/src/pages/search.astro
new file mode 100644
index 0000000..af1bed5
--- /dev/null
+++ b/src/pages/search.astro
@@ -0,0 +1,8 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+---
+
+<MainLayout title="Feed">
+    <h1>Search</h1>
+    <h2>Know what you're looking for? Find it here!</h2>
+</MainLayout>
diff --git a/src/styles/global.css b/src/styles/global.css
index 0177233..6344ed2 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,11 +1,39 @@
 :root {
-    --background-color: #e3022c;
-    --font-color: #fefefe;
+    color-scheme: light dark;
+
+    /* Colors */
+    --color-primary: light-dark(#67F498, #2D8C4E);
+    --color-secondary: light-dark(#BCD2FF, #4A66B8);
+    --color-tertiary: light-dark(#B894ED, #6A4BA5);
+    --color-quaternary: light-dark(#F25F6C, #A13A43);
+    --color-quinary: light-dark(#FC8FBE, #A54A73);
+    --color-senary: light-dark(#FFC196, #A56442);
+    --color-septenary: light-dark(#FEF198, #A39E40);
+    --color-error: red;
+    --color-success: green;
+
+    /* Typography */
+    --font-family: 'Roboto', sans-serif;
+    --font-size-heading: 2rem;
+    --font-size-title: 1.6rem;
+    --font-size-body: 1.1rem;
+
+    /* Spacing */
+    --spacing-small: 0.4rem;
+    --spacing-medium: 1.6rem;
+    --spacing-large: 3.2rem;
+
+    /* Curvature */
+    --border-radius-small: 0.4rem;
+    --border-radius-medium: 1.6rem;
+    --border-radius-large: 3.2rem;
+
+    /* Personalized elements */
+    --icon-size: 2rem;
 }
 
 * {
-    color: var(--font-color);
-    font-family: sans-serif;
+    font-family: var(--font-family);
     margin: 0;
     padding: 0;
     transition-duration: .5s;
@@ -18,7 +46,6 @@ a {
 
 body {
     align-items: center;
-    background-color: var(--background-color);
     display: flex;
     flex-direction: column;
     height: 100svh;