style: improve the look & feel of Dashboard

Codeinwp · Oct 14, 2024 · 3d02ac0 · 3d02ac0
1 parent 363c6f4
commit 3d02ac0
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 56 deletions.
diff --git a/src/backend/parts/Home.js b/src/backend/parts/Home.js
@@ -46,50 +46,9 @@ const STATUS = [
 	}
 ];
 
-const Home = () => {
-	const hasAPI = useSelect( ( select ) => select( 'hyve' ).hasAPI() );
-
+const Dashboard = () => {
 	const { setRoute } = useDispatch( 'hyve' );
 
-	if ( ! hasAPI ) {
-		return (
-			<div className="col-span-6 xl:col-span-4">
-				<Panel
-					header={ __( 'Dashboard', 'hyve-lite' ) }
-				>
-					<PanelRow>
-						<div className="hyve-video">
-							<iframe width="560" height="315" className="py-4" src="https://www.youtube.com/embed/av2sVbWSG3c?si=E9DEEsv00-guyn1c" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
-						</div>
-
-						<p className="py-2">{ __( 'Welcome to Hyve! Designed to seamlessly integrate AI chat into your WordPress site, this plugin allows you to craft a personalized chat experience using your own posts and pages. Enjoy engaging with your website visitors through Hyve!', 'hyve-lite' ) }</p>
-
-						<p className="py-2">{ __( 'To begin using the Hyve plugin, you\'ll need an OpenAI API key. This key enables Hyve to communicate with OpenAI\'s powerful language models, ensuring you get the best possible responses.', 'hyve-lite' ) }</p>
-
-						<div className="flex gap-4">
-							<Button
-								variant="primary"
-								className="mt-2"
-								onClick={ () => setRoute( 'advanced' ) }
-							>
-								{ __( 'Setup API Key', 'hyve-lite' ) }
-							</Button>
-
-							<Button
-								variant="secondary"
-								className="mt-2"
-								href={ window?.hyve?.docs }
-								target="_blank"
-							>
-								{ __( 'Documentation', 'hyve-lite' ) }
-							</Button>
-						</div>
-					</PanelRow>
-				</Panel>
-			</div>
-		);
-	}
-
 	const ACTIONS = [
 		{
 			label: __( 'Knowledge Base', 'hyve-lite' ),
@@ -184,4 +143,47 @@ const Home = () => {
 	);
 };
 
+const Home = () => {
+	const hasAPI = useSelect( ( select ) => select( 'hyve' ).hasAPI() );
+
+	const { setRoute } = useDispatch( 'hyve' );
+
+	if ( ! hasAPI ) {
+		return (
+			<div className="col-span-6 xl:col-span-4 relative">
+				<Dashboard />
+
+				<div className="w-full h-full absolute bg-white/75 flex justify-center items-center top-0">
+					<div className="flex flex-col items-center max-w-lg gap-2 p-6 rounded-lg bg-white shadow-lg">
+						<p className="py-2">{ __( 'Welcome to Hyve! Designed to seamlessly integrate AI chat into your WordPress site, this plugin allows you to craft a personalized chat experience using your own posts and pages. Enjoy engaging with your website visitors through Hyve!', 'hyve-lite' ) }</p>
+
+						<p className="py-2">{ __( 'To begin using the Hyve plugin, you\'ll need an OpenAI API key. This key enables Hyve to communicate with OpenAI\'s powerful language models, ensuring you get the best possible responses.', 'hyve-lite' ) }</p>
+
+						<div className="flex gap-4">
+							<Button
+								variant="primary"
+								className="mt-2"
+								onClick={ () => setRoute( 'advanced' ) }
+							>
+								{ __( 'Setup API Key', 'hyve-lite' ) }
+							</Button>
+
+							<Button
+								variant="secondary"
+								className="mt-2"
+								href={ window?.hyve?.docs }
+								target="_blank"
+							>
+								{ __( 'Documentation', 'hyve-lite' ) }
+							</Button>
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	return <Dashboard />;
+};
+
 export default Home;
diff --git a/src/backend/parts/settings/Advanced.js b/src/backend/parts/settings/Advanced.js
@@ -23,6 +23,7 @@ import {
 
 const Advanced = () => {
 	const settings = useSelect( ( select ) => select( 'hyve' ).getSettings() );
+
 	const {
 		setHasAPI,
 		setSetting

diff --git a/src/backend/style.scss b/src/backend/style.scss
@@ -26,20 +26,6 @@
     display: none;
 }
 
-.hyve-video {
-    position: relative;
-    padding-bottom: 56.25%; /* 16:9 */
-    height: 0;
-
-    iframe {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-}
-
 .hyve-chat-message {
 	p {
 		font-size: 13px;