refactor: move ai config to settings (#183)

open-sauced · Jun 16, 2023 · c31bd61 · c31bd61
1 parent 9f9199e
commit c31bd61
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 38 deletions.
diff --git a/src/popup/components/ToggleSwitch.tsx b/src/popup/components/ToggleSwitch.tsx
@@ -20,7 +20,7 @@ const Toggle = ({ settingName, settingLabel, enabledSetting }: { settingName: st
     };
 
     return (
-        <div className="flex items-center justify-between mt-3">
+        <div className="flex items-center justify-between mb-3">
             <span className="text-sm font-medium text-gray-400">
                 {settingLabel}
             </span>

diff --git a/src/popup/pages/aiprdescription.tsx b/src/popup/pages/aiprdescription.tsx
@@ -43,7 +43,7 @@ const AIPRDescription = () => {
         <>
             <Toaster />
 
-            <div className="p-4 bg-slate-800">
+            <div className="bg-slate-800">
                 <div className="grid grid-cols-1 divide-y divider-y-center-2 min-w-[320px]">
                     <header className="flex justify-between">
                         <div className="flex items-center gap-2">
@@ -69,9 +69,9 @@ const AIPRDescription = () => {
                             onSubmit={handleFormSubmit}
                         >
                             <fieldset>
-                                <h1 className="text-2xl text-white font-bold my-2">
-                OpenSauced AI
-                                </h1>
+                                <h3 className="text font-medium text-base leading-10">
+                AI Configuration:
+                                </h3>
 
                                 <div className="grid grid-cols-2 -mx-4 mb-4 text-gray-300 text-sm">
                                     <div className="flex flex-col items-center justify-center">
@@ -202,9 +202,9 @@ const AIPRDescription = () => {
                                 </div>
 
                                 <input
-                                    className="inline-block disabled:bg-gray-500 text-black bg-gh-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border hover:shadow-button hover:no-underline"
+                                    className="inline-block disabled:bg-gray-500 text-black bg-gh-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border hover:shadow-button hover:no-underline cursor-pointer"
                                     type="submit"
-                                    value="Save"
+                                    value="Save AI Config"
                                 />
                             </fieldset>
                         </form>

diff --git a/src/popup/pages/home.tsx b/src/popup/pages/home.tsx
@@ -13,7 +13,6 @@ import { useAuth } from "../../hooks/useAuth";
 import { useOpensaucedUserCheck } from "../../hooks/useOpensaucedUserCheck";
 import { Profile } from "./profile";
 import { goTo } from "react-chrome-extension-router";
-import AIPRDescription from "./aiprdescription";
 import PostOnHighlight from "./posthighlight";
 import { getHighlights } from "../../utils/fetchOpenSaucedApiData";
 
@@ -124,16 +123,6 @@ const Home = () => {
                             Dashboard
                         </a>
 
-                        <button
-                            className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
-                            onClick={() => {
-                                goTo(AIPRDescription);
-                            }}
-                        >
-                            <HiPencil />
-                            AI Configuration
-                        </button>
-
                         {isGithubPRPage && (
                             <button
                                 className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"

diff --git a/src/popup/pages/settings.tsx b/src/popup/pages/settings.tsx
@@ -2,13 +2,14 @@ import { FaChevronLeft } from "react-icons/fa";
 import OpenSaucedLogo from "../../assets/opensauced-logo.svg";
 import { goBack } from "react-chrome-extension-router";
 import Toggle from "../components/ToggleSwitch";
+import AIPRDescription from "./aiprdescription";
 import { useEffect, useState } from "react";
 
 export type SettingsConfig = Record<string, boolean | undefined>;
 
 const settingLabels: Record<string, string> = {
     aiPrDescription: "AI PR Description",
-    codeRefactor: "Code Refactor",
+    codeRefactor: "AI Code Review",
 };
 
 const Settings = () => {
@@ -33,28 +34,12 @@ const Settings = () => {
 
     return (
         <div className="p-4 bg-slate-800">
-            <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
-                <header className="flex justify-between">
-                    <div className="flex items-center gap-2">
-                        <button
-                            className="rounded-full p-2 bg-slate-700 hover:bg-slate-700/50"
-                            onClick={() => {
-                                goBack();
-                            }}
-                        >
-                            <FaChevronLeft className="text-osOrange text-white" />
-                        </button>
+            <AIPRDescription />
 
-                        <img
-                            alt="OpenSauced logo"
-                            className="w-[100%]"
-                            src={OpenSaucedLogo}
-                        />
-                    </div>
-                </header>
+            <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
 
                 <main className="main-content text-white">
-                    <h3 className="text font-medium text-base leading-10">Settings:</h3>
+                    <h3 className="text font-medium text-base leading-10">Extension Settings:</h3>
 
                     {
                         Object.keys(settingsConfig).map(settingName => (