From 311f7e542399a86143e3905dee796d702a6d678e Mon Sep 17 00:00:00 2001
From: Barbara Gomes <sugarpusher@users.noreply.github.com>
Date: Tue, 14 Mar 2023 17:01:30 -0400
Subject: [PATCH] style: divider component (#255)

---
 packages/ui/src/lib/components/divider.svelte | 29 +++++++++++++++++++
 .../ui/src/lib/components/grid-card.svelte    |  9 ++----
 .../src/lib/components/section-title.svelte   | 11 ++-----
 packages/ui/src/routes/(home)/+layout.svelte  |  3 +-
 .../routes/persona/draft/[id]/+page.svelte    |  3 +-
 packages/ui/src/routes/styles.css             | 11 -------
 6 files changed, 38 insertions(+), 28 deletions(-)
 create mode 100644 packages/ui/src/lib/components/divider.svelte

diff --git a/packages/ui/src/lib/components/divider.svelte b/packages/ui/src/lib/components/divider.svelte
new file mode 100644
index 0000000..6c962e4
--- /dev/null
+++ b/packages/ui/src/lib/components/divider.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	export let visible: 'always' | 'desktop' | 'mobile' = 'always'
+</script>
+
+<hr class={visible} />
+
+<style lang="scss">
+	hr {
+		border: none;
+		width: 100%;
+		height: 1px;
+		background-color: var(--grey-200);
+
+		&.desktop {
+			@media (max-width: 687.98px) {
+				display: none;
+			}
+		}
+		&.mobile {
+			@media (min-width: 688px) {
+				display: none;
+			}
+		}
+
+		// @media (prefers-color-scheme: dark) {
+		// 	background-color: var(--grey-500);
+		// }
+	}
+</style>
diff --git a/packages/ui/src/lib/components/grid-card.svelte b/packages/ui/src/lib/components/grid-card.svelte
index e0dac6a..8bd416c 100644
--- a/packages/ui/src/lib/components/grid-card.svelte
+++ b/packages/ui/src/lib/components/grid-card.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Divider from '$lib/components/divider.svelte'
 	let cls: string | undefined = undefined
 	export { cls as class }
 </script>
@@ -8,7 +9,7 @@
 	<div class="card">
 		<slot />
 	</div>
-	<hr />
+	<Divider visible="mobile" />
 </div>
 
 <style lang="scss">
@@ -20,12 +21,6 @@
 		align-items: flex-end;
 		justify-content: flex-end;
 
-		hr {
-			@media (min-width: 688px) {
-				display: none;
-			}
-		}
-
 		&:hover {
 			background-color: var(--grey-150);
 		}
diff --git a/packages/ui/src/lib/components/section-title.svelte b/packages/ui/src/lib/components/section-title.svelte
index e24406b..dfd34b6 100644
--- a/packages/ui/src/lib/components/section-title.svelte
+++ b/packages/ui/src/lib/components/section-title.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	export let title: string
+	import Divider from '$lib/components/divider.svelte'
 </script>
 
 <div class="root">
-	<hr />
+	<Divider visible="desktop" />
 	<div class="wrapper">
 		<div class="row">
 			<div class="title">{title}</div>
@@ -14,16 +15,10 @@
 
 		<slot />
 	</div>
-	<hr />
+	<Divider visible="mobile" />
 </div>
 
 <style lang="scss">
-	hr:last-child {
-		@media (min-width: 688px) {
-			display: none;
-		}
-	}
-
 	.wrapper {
 		padding: var(--spacing-24);
 		transition: padding 0.2s;
diff --git a/packages/ui/src/routes/(home)/+layout.svelte b/packages/ui/src/routes/(home)/+layout.svelte
index 44a95bf..d209a96 100644
--- a/packages/ui/src/routes/(home)/+layout.svelte
+++ b/packages/ui/src/routes/(home)/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import HeaderTop from '$lib/components/header-top.svelte'
+	import Divider from '$lib/components/divider.svelte'
 
 	import { profile } from '$lib/stores/profile'
 	import { chats } from '$lib/stores/chat'
@@ -13,7 +14,6 @@
 
 <div>
 	<HeaderTop address={$profile.address} />
-
 	<div class="wrapper">
 		{#if $profile.signer !== undefined}
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -29,6 +29,7 @@
 				</nav>
 			</div>
 		{/if}
+		<Divider visible="mobile" />
 
 		<slot />
 	</div>
diff --git a/packages/ui/src/routes/persona/draft/[id]/+page.svelte b/packages/ui/src/routes/persona/draft/[id]/+page.svelte
index f72fc8a..dc5b991 100644
--- a/packages/ui/src/routes/persona/draft/[id]/+page.svelte
+++ b/packages/ui/src/routes/persona/draft/[id]/+page.svelte
@@ -19,6 +19,7 @@
 	import Grid from '$lib/components/grid.svelte'
 	import Container from '$lib/components/container.svelte'
 	import InfoBox from '$lib/components/info-box.svelte'
+	import Divider from '$lib/components/divider.svelte'
 
 	import { personas } from '$lib/stores/persona'
 	import { tokens } from '$lib/stores/tokens'
@@ -106,7 +107,7 @@
 			icon={EditPersona}
 			on:click={() => (state = 'text')}
 		/>
-		<hr />
+		<Divider />
 		<Container>
 			<InfoBox>
 				{#if persona.posts.length < PERSONA_LIMIT}
diff --git a/packages/ui/src/routes/styles.css b/packages/ui/src/routes/styles.css
index 09a9d3e..6fad42b 100644
--- a/packages/ui/src/routes/styles.css
+++ b/packages/ui/src/routes/styles.css
@@ -129,13 +129,6 @@ video {
 	border-style: none;
 }
 
-hr {
-	border: none;
-	width: 100%;
-	height: 1px;
-	background-color: var(--grey-200);
-}
-
 a {
 	color: var(--color-black);
 	text-decoration: underline;
@@ -166,8 +159,4 @@ a {
 		background-color: var(--color-body-bg);
 		color: var(--color-body-text);
 	}
-
-	hr {
-		background-color: var(--grey-500);
-	}
 } */