Merge pull request #2 from TechInnovatorAI/new

New

Author: TechInnovatorAI

packages/guider/src/client/partials/header/header.tsx

@@ -46,22 +46,22 @@ export function HeaderInternal() {
       <header
         className={classNames(
           'gd-max-w-[1480px] gd-mx-auto',
-          'gd-p-6 gd-pb-0 gd-border-b gd-border-line',
+          'gd-py-3 gd-px-8 gd-border-b gd-border-line',
           isScrolledFromTop ? 'gd-bg-opacity-100' : 'gd-bg-opacity-0'
         )}
       >
         <div className="gd-fixed neato-guider-overlay gd-transition-opacity gd-duration-150 gd-opacity-0 gd-inset-0 gd-bg-gradient-to-b gd-from-black/80 gd-to-transparent gd-z-[60] gd-pointer-events-none" />
-        <div className="gd-flex gd-justify-between gd-mb-6 gd-items-center">
+        <div className="gd-flex gd-justify-between gd-items-center">
           <div>
             <GuiderLogo />
           </div>
           <HeaderSearch />
           <div className='gd-flex gd-items-center gd-space-x-6'>
-           <h4 className='gd-text-sm'>Email Support</h4>
-              <button className='gd-text-sm dark:gd-bg-transparent dark:gd-border dark:gd-border-[#2E5CFF] dark:gd-bg-[#0E1226] dark:gd-text-[#2E5CFF] gd-bg-[#2E5CFF] gd-text-white gd-py-1 gd-px-4 gd-rounded-full'>Polymarket</button>
+           <h4 className='gd-text-sm gd-text-gray-600 gd-font-normal hover:gd-text-gray-900 gd-cursor-pointer'>Email Support</h4>
+              <a href="https://polymarket.com" target={'_blank'} className='hover:gd-bg-[#426CFF] gd-flex gd-gap-2 gd-items-center gd-text-sm dark:gd-bg-transparent dark:gd-border dark:gd-border-[#2E5CFF] dark:gd-bg-[#0E1226] dark:gd-text-[#2E5CFF] gd-bg-[#2E5CFF] gd-text-white gd-py-1 gd-px-4 gd-rounded-full'>Polymarket <svg width="3" height="24" viewBox="0 -9 3 24" class="h-5 rotate-0 overflow-visible text-white/90 dark:text-primary-light"><path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></a>
             {isDark ?
-              <Moon onClick={() => setIsDark(false)} /> :
-              <Sun onClick={() => setIsDark(true)} />
+              <Moon onClick={() => setIsDark(false)} className='gd-cursor-pointer gd-w-5 gd-opacity-50 hover:gd-opacity-100'/> :
+              <Sun onClick={() => setIsDark(true)} className='gd-cursor-pointer gd-w-5 gd-opacity-50 hover:gd-opacity-100'/>
             }
           </div>
           <div className="gd-flex md:gd-hidden gd-items-center">

packages/guider/src/client/partials/header/search/button.tsx

@@ -5,7 +5,7 @@ export function SearchButton(props: { onClick?: () => void }) {
     <button
       type="button"
       onClick={props.onClick}
-      className="header-search-btn !gd-bg-bgDark gd-gap-2 gd-py-1.5 gd-px-2 gd-text-left md:gd-w-48 hover:!gd-bg-bgLight active:gd-scale-95 hover:gd-text-textHeading gd-transition-[color,transform] gd-border gd-border-bgLightest gd-rounded-md gd-flex gd-items-center"
+      className="header-search-btn !gd-bg-bgDark gd-gap-2 gd-py-1.5 gd-px-2 gd-text-left md:gd-w-48 active:gd-scale-95 hover:gd-text-textHeading gd-transition-[color,transform] gd-border gd-border-bgLightest gd-rounded-md gd-flex gd-items-center"
     >
       <Icon
         icon="mingcute:search-2-fill"

packages/guider/src/client/partials/header/search/screen.tsx

@@ -114,10 +114,10 @@ export function SearchScreen(props: {
 
   return (
     <Combobox value={null} onChange={onChange}>
-      <div className="gd-bg-bg gd-border gd-border-bgLightest gd-rounded-lg">
+      <div className="dark:gd-bg-bg gd-bg-white gd-border gd-border-bgLightest gd-rounded-2xl gd-p-2">
         <div className="gd-w-full gd-h-14 gd-relative">
           <Combobox.Input
-            className="gd-w-full gd-pl-16 gd-h-full gd-text-textHeading gd-bg-transparent focus:gd-outline-none placeholder:gd-text-text placeholder:gd-text-opacity-75"
+            className="gd-border gd-rounded-xl gd-border-black gd-w-full gd-pl-16 gd-h-full gd-text-textHeading gd-bg-transparent focus:gd-outline-none placeholder:gd-text-text placeholder:gd-text-opacity-75"
             placeholder="Search for anything you wish to know..."
             value={query}
             onChange={(e) => {

packages/guider/src/client/partials/sidebar/sidebar.tsx

@@ -15,7 +15,7 @@ export function SidebarInternal() {
 
   return (
     <div className="gd-flex gd-flex-col">
-      <div className="gd-space-y-1 neato-guider-sidebar -gd-mx-4">
+      <div className="gd-space-y-1 neato-guider-sidebar -gd-mx-4 sidebar-top">
         {directory.sidebar.map((link, i) => {
           const key = makeKey(i, link);
           if (link.type === 'link' && link.style === 'star')

packages/guider/src/client/partials/sidebar/star-link.tsx

@@ -7,24 +7,24 @@ export function SidebarStarLink(props: { link: LinkComponent }) {
   const link = props.link;
   return (
     <ActiveLink
-      className="gd-flex gd-w-full gd-items-center gd-gap-3 gd-py-1.5 gd-text-sm gd-px-4 !gd-my-0 gd-group"
+      className="gd-flex gd-w-full gd-items-center gd-gap-3 gd-py-1.5 gd-text-sm gd-px-4 !gd-my-0 gd-group top-left-icon"
       activeClassName="gd-text-primary"
       exact={props.link.exact ?? true}
-      inactiveClassName="hover:gd-text-textLight"
+      inactiveClassName=""
       href={link.to}
       target={link.newTab ? '_blank' : undefined}
     >
       {({ isActive }) => (
         <>
           <span
             className={classNames({
-              'gd-size-7 gd-flex gd-text-sm gd-border-t-2 gd-justify-center gd-items-center gd-rounded-md gd-transition-[background-color,color,border-color] gd-duration-100':
+              'gd-size-7 gd-flex gd-text-sm icons-left-sidebar gd-justify-center gd-items-center gd-rounded-md gd-transition-[background-color,color,border-color] gd-duration-100':
                 true,
-              'group-hover:gd-bg-bgLightest group-hover:gd-text-textHeading':
+              '':
                 true,
-              '!gd-border-primary !gd-bg-primaryDark !gd-text-textHeading':
+              '':
                 isActive,
-              'gd-border-bgLightest gd-bg-bgLight': !isActive,
+              '': !isActive,
             })}
           >
             {link.icon ? <Icon icon={link.icon} /> : null}

packages/guider/src/styles/global.css

@@ -60,6 +60,10 @@ a.neato-guider-active-link.gd-flex.gd-items-center.gd-w-full.gd-py-1\.5.gd-text-
   font-weight: 500 !important;
 }
 
+a.gd-flex.gd-items-center.gd-w-full.gd-py-1\.5.gd-text-sm.gd-px-4.gd-rounded-lg.hover\:gd-text-textLight.hover\:gd-bg-bgLight:hover{
+  background-color: var(--menu-bg-color) !important;
+}
+
 a.hover\:gd-text-textLight.gd-transition-colors.gd-duration-100.gd-text-primary {
   color: #2E5CFF;
 }
@@ -146,13 +150,36 @@ header span.gd-flex-1.gd-hidden.md\:gd-inline-block{
   color: #99A1B1;
 }
 
+.icons-left-sidebar{
+  border: 1px solid var(--box-border-color) !important;
+}
+
+header{
+  background-color: var(--background-color) !important;
+}
+
+.gd-text-textHeading{
+  color: var(--heading-text-color) !important;
+
+}
+
+.icons-left-sidebar:hover {
+  background: linear-gradient(45deg, rgb(45, 156, 219), rgb(187, 107, 217));
+  color: white;
+}
+
+.top-left-icon:hover .icons-left-sidebar {
+  background: linear-gradient(45deg, rgb(45, 156, 219), rgb(187, 107, 217)) !important;
+  color: white !important;
+}
+
 
 /* Light theme */
 :root {
   --background-color: #ffffff;
   --text-color: #374256;
   --heading-text-color: #121A2E;
-  --menu-bg-color: #EAEEFF;
+  --menu-bg-color: #F6F6F7;
   --box-border-color: #DFE3EC;
 }
 
@@ -171,7 +198,3 @@ body {
   color: var(--text-color);
 }
 
-.gd-text-textHeading{
-  color: var(--heading-text-color) !important;
-
-}