Merge pull request #1210 from dacadeorg/fix/hint-message-box

feat: update hint message box styles

Author: musayann

src/components/ui/Hint.tsx

@@ -6,7 +6,7 @@ type HintProps = {
 };
 
 function Hint({ children, className }: HintProps): ReactElement {
-  return <div className={`bg-yellow-50 text-yellow-900 py-5 px-8 border border-solid border-yellow-100 text-base hint-container ${className}`}>{children}</div>;
+  return <div className={`bg-blue-50 text-primary p-3 border border-blue-200 rounded text-base hint-container ${className}`}>{children}</div>;
 }
 
 export default Hint;

src/pages/communities/[slug]/challenges/[challenge_id]/index.tsx

@@ -144,7 +144,6 @@ export default function ChallengePage() {
                   <div className="grid mt-8 space-y-8">
                     <Hint>
                       <p
-                        className="text-lg py-4"
                         dangerouslySetInnerHTML={{
                           __html: t(
                             challenge?.multipleSubmissions ? "communities.challenge.submission.multiple-submissions" : "communities.challenge.submission.no-multiple-submissions"
@@ -170,11 +169,13 @@ export default function ChallengePage() {
               </div>
             ) : (
               <div>
-                <Hint className="mt-6 flex flex-col md:flex-row">
-                  <p>To be able to submit</p>&nbsp;
-                  <Link className="underline" href="/login">
-                    Login.
-                  </Link>
+                <Hint className="mt-6">
+                  <p>
+                    To be able to submit
+                    <Link className="underline pl-1" href="/login">
+                      Login.
+                    </Link>
+                  </p>
                 </Hint>
               </div>
             )}

src/styles/globals.css

@@ -337,7 +337,7 @@ div {
 }
 
 .hint-container a {
-  font-weight: 400;
+  font-weight: 500;
   text-decoration: underline;
 }