UI updates

src/components/Course/CourseView.tsx

@@ -52,7 +52,7 @@ export function CourseView(props: CourseViewProps) {
                   <h3 className="text-4xl font-semibold mt-10">
                     {lesson.frontmatter.title}
                   </h3>
-                  <div className="course-content prose prose-lg mt-8 text-black prose-headings:mb-3 prose-headings:mt-8 prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800">
+                  <div className="course-content prose prose-pre:text-lg prose-pre:rounded-2xl prose-lg mt-8 text-black prose-headings:mb-3 prose-headings:mt-8 prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800">
                     {children}
                   </div>
                 </div>

src/components/SqlCodeEditor/SqlCodeEditor.tsx

@@ -154,6 +154,7 @@ export function SqlCodeEditor(props: SqlCodeEditorProps) {
           <div className="flex items-center gap-1">
             <DatabaseActionButton
               icon={WandSparkles}
+              label="Format"
               onClick={async () => {
                 const query = editor?.state?.doc.toString();
                 if (!query) {
@@ -173,6 +174,7 @@ export function SqlCodeEditor(props: SqlCodeEditorProps) {
 
             <DatabaseActionButton
               icon={Play}
+              label="Run"
               onClick={() => {
                 const query = editor?.state?.doc.toString();
                 if (!query) {
@@ -221,7 +223,7 @@ function DatabaseActionButton(props: DatabaseActionButtonProps) {
   return (
     <button
       className={cn(
-        'flex h-[30px] min-w-[30px] items-center justify-center gap-1.5 rounded-md p-1 text-sm text-zinc-200 outline-none hover:bg-zinc-800 hover:text-white focus:outline-none',
+        'flex h-[30px] min-w-[30px] items-center justify-center gap-1.5 rounded-md pl-2 pr-2.5 text-sm text-black outline-none hover:bg-zinc-800 hover:text-white focus:outline-none border border-black',
         className,
       )}
       onClick={onClick}

src/styles/global.css

@@ -75,6 +75,7 @@ a > code:before {
   color: #f4f4f5 !important;
   padding: 2px 4px;
   border-radius: 5px;
+  font-size: 17px !important;
 }
 
 .course-content.prose ul li > code:before,