New UI Improvements (#66)

* chore: fix borders + selection

* chore: fix tooltip

* chore: fix some colors

* chore: fix color of faq component

* chore: fix color of detail component

* chore: font size

Author: nermalcat69

apps/docs/src/components/Detail/index.tsx

@@ -21,7 +21,7 @@ export function Detail({ title, children }: DetailProps) {
 
   return (
     <div className="py-0.5">
-      <div className="card bg-medusa-bg-subtle dark:bg-medusa-bg-base shadow-card-rest dark:shadow-card-rest-dark w-full py-1 px-0.5 rounded-md">
+      <div className="card bg-[#F2F5F7] dark:bg-medusa-bg-base shadow-card-rest dark:shadow-card-rest-dark w-full py-1 px-0.5 rounded-md">
         <button
           className="flex w-full justify-between items-center text-left bg-transparent border-none cursor-pointer"
           onClick={() => setIsOpen(!isOpen)}

apps/docs/src/components/Faq/index.tsx

@@ -21,7 +21,7 @@ export function FAQItem({ question, children }: FAQItemProps) {
 
   return (
     <div className="py-0.5">
-      <div className="card bg-medusa-bg-subtle dark:bg-medusa-bg-base shadow-card-rest dark:shadow-card-rest-dark w-full py-1 px-0.5 rounded-md">
+      <div className="card bg-[#F2F5F7] dark:bg-medusa-bg-base shadow-card-rest dark:shadow-card-rest-dark w-full py-1 px-0.5 rounded-md">
         <button
           className="flex w-full justify-between items-center text-left bg-transparent border-none cursor-pointer"
           onClick={() => setIsOpen(!isOpen)}

apps/docs/src/css/_docusaurus.css

@@ -221,7 +221,7 @@ details > div {
 }
 
 .navbar {
-  @apply z-[399] p-0 border-0 border-b border-solid border-[#DADCE0];
+  @apply z-[399] p-0 border-0 border-b border-solid border-[#DADCE0] dark:border-[#323237];
 }
 
 html:not(.plugin-redoc) .navbar:not(.navbar-sidebar--show) {
@@ -285,10 +285,14 @@ h6 {
 }
 
 *::selection {
-  @apply bg-medusa-bg-highlight;
+  @apply bg-[#F6EBC2] dark:bg-[#5F5323];
 }
 
 .prism-code *::selection,
 .code-header *::selection {
   @apply bg-medusa-code-text-highlight;
 }
+
+p {
+  font-size: 14.75px;
+}

apps/docs/src/css/components/sidebar.css

@@ -181,7 +181,7 @@
 }
 
 .menu__list-item-collapsible .menu__link--sublist:hover {
-  @apply !bg-medusa-bg-base-hover dark:!bg-medusa-bg-subtle-hover;
+  @apply bg-[#000] dark:!bg-medusa-bg-subtle-hover;
 }
 
 .menu__list:not(.theme-doc-sidebar-menu)
@@ -213,7 +213,7 @@
 
 /** General sidebar styles **/
 .theme-doc-sidebar-container {
-  @apply z-[398] border-0 border-r border-solid border-[#DEE1E4];
+  @apply z-[398] border-0 border-r border-solid border-[#DEE1E4] dark:border-[#323237];
 }
 
 /** Mobile Sidebar **/

apps/docs/src/theme/DocCard/index.tsx

@@ -66,7 +66,7 @@ function CardLayout({
       className={clsx(
         containerClassName,
         !isSoon &&
-          'hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-base-hover',
+          'bg-[#F2F5F7] hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-base-hover',
         isSoon && 'pointer-events-none',
         isHighlighted &&
           "md:before:content-[''] md:before:absolute md:before:top-0 before:right-0 md:before:w-1/2 md:before:h-full md:before:bg-no-repeat md:before:bg-cover md:before:bg-card-highlighted dark:md:before:bg-card-highlighted-dark",

packages/docs-ui/src/components/Tooltip/index.tsx

@@ -40,7 +40,7 @@ export const Tooltip = ({
         anchorId={elementId}
         // anchorSelect={elementId ? `#${elementId}` : undefined}
         className={clsx(
-          '!border-medusa-border-base !border !border-solid',
+          'border-[#DEE1E4] dark:border-[#323237] !border !border-solid',
           '!text-compact-x-small-plus !shadow-tooltip dark:!shadow-tooltip-dark !rounded-docs_DEFAULT',
           '!py-docs_0.4 !z-[399] hidden !px-docs_1 lg:block',
           '!bg-medusa-bg-base',

packages/tailwind/theme-presets.js

@@ -3,7 +3,7 @@ const light = {
   '--docs-bg-base-hover': 'rgba(249, 250, 251, 1)',
   '--docs-bg-base-pressed': 'rgba(243, 244, 246, 1)',
   '--docs-bg-subtle': 'rgba(249, 250, 251, 1)',
-  '--docs-bg-subtle-hover': 'rgba(243, 244, 246, 1)',
+  '--docs-bg-subtle-hover': 'rgba(242, 245, 247, 1)',
   '--docs-bg-subtle-pressed': 'rgba(229, 231, 235, 1)',
   '--docs-bg-component': 'rgba(241, 243, 245, 1)',
   '--docs-bg-switch-off': 'rgba(229, 231, 235, 1)',