From 07f37ef17f8be893d3ceba8fbe4427a9ecda5c15 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Sat, 31 Aug 2024 18:22:46 +0330
Subject: [PATCH] feat: add desktop notice

---
 src/components/modals/lofi/lofi.module.css | 6 ++++++
 src/components/modals/lofi/lofi.tsx        | 1 +
 2 files changed, 7 insertions(+)

diff --git a/src/components/modals/lofi/lofi.module.css b/src/components/modals/lofi/lofi.module.css
index 4858892..9a41f2c 100644
--- a/src/components/modals/lofi/lofi.module.css
+++ b/src/components/modals/lofi/lofi.module.css
@@ -9,6 +9,12 @@
   color: var(--color-foreground-subtle);
 }
 
+.notice {
+  margin-top: 4px;
+  font-size: var(--font-sm);
+  color: var(--color-foreground-subtler);
+}
+
 .radios {
   margin-top: 28px;
 
diff --git a/src/components/modals/lofi/lofi.tsx b/src/components/modals/lofi/lofi.tsx
index 8fa3cc9..e110697 100644
--- a/src/components/modals/lofi/lofi.tsx
+++ b/src/components/modals/lofi/lofi.tsx
@@ -26,6 +26,7 @@ export function LofiModal({ onClose, show }: LofiModalProps) {
     <Modal persist show={show} onClose={onClose}>
       <h2 className={styles.title}>Lofi Radios</h2>
       <p className={styles.desc}>A curated list of Lofi radios.</p>
+      <p className={styles.notice}>Works best on desktop.</p>
 
       <div className={styles.radios}>
         {radios.map((radio, index) => (