From e9796c545d379c99186faa9d40140eaa58c047ee Mon Sep 17 00:00:00 2001
From: NunoSempere <nuno.sempere@protonmail.com>
Date: Thu, 17 Nov 2022 21:58:15 +0000
Subject: [PATCH] tweak: make indicators responsive to mobile

---
 src/web/common/BoxedLink.tsx                     | 4 ++--
 src/web/questions/components/QuestionOptions.tsx | 4 ++--
 src/web/questions/components/Stars.tsx           | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/web/common/BoxedLink.tsx b/src/web/common/BoxedLink.tsx
index 57f2117..7a45e11 100644
--- a/src/web/common/BoxedLink.tsx
+++ b/src/web/common/BoxedLink.tsx
@@ -11,13 +11,13 @@ export const BoxedLink: React.FC<Props> = ({
   children,
 }) => (
   <a
-    className={`px-2 py-1 border-2 border-gray-400 rounded-lg text-black no-underline text-normal hover:bg-gray-100 inline-flex flex-nowrap space-x-1 items-center ${
+    className={`px-2 py-1 border-2 border-gray-400 rounded-lg text-black no-underline  hover:bg-gray-100 inline-flex flex-nowrap space-x-1 items-center text-xs md:text-lg  ${
       size === "small" ? "text-sm" : ""
     }`}
     href={url}
     target="_blank"
   >
     <span>{children}</span>
-    <FaExternalLinkAlt className="text-gray-400 inline" />
+    <FaExternalLinkAlt className="text-gray-400 inline " />
   </a>
 );
diff --git a/src/web/questions/components/QuestionOptions.tsx b/src/web/questions/components/QuestionOptions.tsx
index b426fa8..363dcfc 100644
--- a/src/web/questions/components/QuestionOptions.tsx
+++ b/src/web/questions/components/QuestionOptions.tsx
@@ -101,7 +101,7 @@ const OptionRow: React.FC<OptionProps> = ({ option, mode, textMode }) => {
       <div
         className={`flex-none rounded-md text-center ${
           mode === "primary"
-            ? "text-normal text-white px-2 py-0.5 font-bold"
+            ? "text-sm md:text-lg text-normal text-white px-2 py-0.5 font-bold"
             : "text-sm w-14 py-0.5"
         } ${
           mode === "primary"
@@ -113,7 +113,7 @@ const OptionRow: React.FC<OptionProps> = ({ option, mode, textMode }) => {
       </div>
       <div
         className={`leading-snug ${
-          mode === "primary" ? "text-normal" : "text-sm"
+          mode === "primary" ? "text-sm md:text-lg text-normal" : "text-sm"
         } ${
           mode === "primary" ? textColor(option.probability) : "text-gray-700"
         }`}
diff --git a/src/web/questions/components/Stars.tsx b/src/web/questions/components/Stars.tsx
index 9ec025b..d1591e5 100644
--- a/src/web/questions/components/Stars.tsx
+++ b/src/web/questions/components/Stars.tsx
@@ -54,5 +54,5 @@ function getStarsColor(numstars: number) {
 }
 
 export const Stars: React.FC<{ num: number }> = ({ num }) => {
-  return <div className={getStarsColor(num)}>{getstars(num)}</div>;
+  return <div className={getStarsColor(num) + " text-xs md:text-lg"}>{getstars(num)}</div>;
 };