feat: update hint message box styles

Author: Odile078

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-blue-500 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"

src/styles/globals.css

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