From 0ae8a9b75118f442b714c8ae0724854ff81209c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0?=
 =?UTF-8?q?=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0?=
 =?UTF-8?q?=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0?=
 =?UTF-8?q?=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0?=
 =?UTF-8?q?=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0?=
 =?UTF-8?q?=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0?=
 =?UTF-8?q?=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0?=
 =?UTF-8?q?=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0=E1=85=A0?=
 =?UTF-8?q?=E1=85=A0=E1=85=A0=E1=85=A0?=
 <29128703+milksense@users.noreply.github.com>
Date: Sat, 22 Jul 2023 22:05:38 +0000
Subject: [PATCH] feat: improve expand icons and footer (#141)

---
 src/layout/Footer/FooterHost.svelte               | 15 +++++++++++++--
 src/layout/Footer/FooterSection.svelte            | 11 +++++++++--
 src/routes/contributors/ContributorSection.svelte |  2 +-
 static/icons/expand_less.svg                      |  1 +
 static/icons/expand_more.svg                      |  1 +
 5 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 static/icons/expand_less.svg
 create mode 100644 static/icons/expand_more.svg

diff --git a/src/layout/Footer/FooterHost.svelte b/src/layout/Footer/FooterHost.svelte
index 9e60cd2..9118dbd 100644
--- a/src/layout/Footer/FooterHost.svelte
+++ b/src/layout/Footer/FooterHost.svelte
@@ -106,6 +106,13 @@
 		align-items: center;
 	}
 
+	@media screen and (max-width: 768px) {
+		.footer-bottom {
+			flex-wrap: wrap;
+			gap: 1rem;
+		}
+	}
+
 	#logo-name {
 		font-size: 1.4rem;
 		color: var(--white);
@@ -119,7 +126,7 @@
 	.footer-bottom a {
 		text-decoration: none;
 		color: var(--grey-five);
-		font-weight: 500;
+		font-weight: 600;
 	}
 
 	li {
@@ -131,7 +138,7 @@
 
 	li a {
 		color: var(--accent-color);
-		font-weight: 500;
+		font-weight: 600;
 		font-size: 0.95rem;
 	}
 
@@ -193,4 +200,8 @@
 		}
 	}
 
+	svg {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
 </style>
diff --git a/src/layout/Footer/FooterSection.svelte b/src/layout/Footer/FooterSection.svelte
index 363e499..8c66643 100644
--- a/src/layout/Footer/FooterSection.svelte
+++ b/src/layout/Footer/FooterSection.svelte
@@ -19,7 +19,10 @@
 		<span>
 			{title}
 		</span>
-		<span>{expanded ? '-' : '+'}</span>
+		<img
+			src="/icons/{expanded ? 'expand_less' : 'expand_more'}.svg"
+			alt={expanded ? 'Close' : 'Expand'}
+		/>
 	</button>
 	{#if expanded}
 		<ul transition:slide|local={{ easing: quintOut, duration: 500 }}>
@@ -33,7 +36,7 @@
 		list-style: none;
 		color: var(--grey-five);
 		font-size: 0.9rem;
-		font-weight: 500;
+		font-weight: 600;
 	}
 
 	ul {
@@ -70,4 +73,8 @@
 			display: none;
 		}
 	}
+
+	img {
+		height: 24px;
+	}
 </style>
diff --git a/src/routes/contributors/ContributorSection.svelte b/src/routes/contributors/ContributorSection.svelte
index f915f7a..7768fbb 100644
--- a/src/routes/contributors/ContributorSection.svelte
+++ b/src/routes/contributors/ContributorSection.svelte
@@ -27,7 +27,7 @@
 		<img
 			id="arrow"
 			style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}
-			src="/icons/arrow.svg"
+			src="/icons/expand_less.svg"
 			alt="dropdown"
 		/>
 	</div>
diff --git a/static/icons/expand_less.svg b/static/icons/expand_less.svg
new file mode 100644
index 0000000..26a144a
--- /dev/null
+++ b/static/icons/expand_less.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#ACC1D2"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11.29 8.71L6.7 13.3c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 10.83l3.88 3.88c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L12.7 8.71c-.38-.39-1.02-.39-1.41 0z"/></svg>
\ No newline at end of file
diff --git a/static/icons/expand_more.svg b/static/icons/expand_more.svg
new file mode 100644
index 0000000..742ac69
--- /dev/null
+++ b/static/icons/expand_more.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#ACC1D2"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"/></svg>
\ No newline at end of file