refactor: revert hint style changes

Author: Samantha-KY

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 text-base hint-container ${className}`}>{children}</div>;
+  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>;
 }
 
 export default Hint;

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

@@ -133,12 +133,14 @@ export default function ChallengePage(props: {
               )}
             </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>
+            <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>
+            </div>
           )}
         </div>
       </Wrapper>