refactor(ui): better font weight, icon hover states, etc

components/http/PreRequestScript.vue

@@ -13,7 +13,7 @@
         justify-between
       "
     >
-      <label class="font-semibold">
+      <label>
         {{ $t("javascript_code") }}
       </label>
       <ButtonSecondary
@@ -24,18 +24,44 @@
         icon="help_outline"
       />
     </div>
-    <SmartJsEditor
-      v-model="preRequestScript"
-      :options="{
-        maxLines: Infinity,
-        minLines: 16,
-        fontSize: '12px',
-        autoScrollEditorIntoView: true,
-        showPrintMargin: false,
-        useWorker: false,
-      }"
-      complete-mode="pre"
-    />
+    <div class="flex">
+      <div class="border-r border-dividerLight w-2/3">
+        <SmartJsEditor
+          v-model="preRequestScript"
+          :options="{
+            maxLines: Infinity,
+            minLines: 16,
+            fontSize: '12px',
+            autoScrollEditorIntoView: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+          complete-mode="pre"
+        />
+      </div>
+      <div
+        class="
+          h-full
+          max-w-1/3
+          top-upperTertiaryStickyFold
+          min-w-46
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
+      >
+        <div class="text-secondaryLight pb-2">
+          {{ $t("helpers.pre_request_script") }}
+        </div>
+        <SmartAnchor
+          class="link"
+          :label="$t('action.learn_more')"
+          to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
+          blank
+        />
+      </div>
+    </div>
   </AppSection>
 </template>