fix(docs): mobile view styles issues (#545)

devrsi0n · Nov 18, 2022 · e86b9fb · e86b9fb
1 parent c706aa7
commit e86b9fb
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 20 deletions.
diff --git a/README-zh.md b/README-zh.md
@@ -1,8 +1,8 @@
 # Chirpy
 
-[![Vercel](https://img.shields.io/github/deployments/devrsi0n/chirpy/production?color=black&logo=vercel)](https://github.com/devrsi0n/chirpy/deployments)
-[![Cypress](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/2p3w5f&logo=cypress&color=black)](https://dashboard.cypress.io/projects/2p3w5f/runs)
-[![Twitter Chirpy](https://img.shields.io/twitter/url?color=black&logoColor=black&url=https%3A%2F%2Ftwitter.com%2FChirpyHQ)](https://twitter.com/ChirpyHQ)
+[![Vercel](https://img.shields.io/github/deployments/devrsi0n/chirpy/production?logo=vercel)](https://github.com/devrsi0n/chirpy/deployments)
+[![Cypress](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/2p3w5f&logo=cypress)](https://dashboard.cypress.io/projects/2p3w5f/runs)
+[![Twitter Chirpy](https://img.shields.io/twitter/url?logoColor=black&url=https%3A%2F%2Ftwitter.com%2FChirpyHQ)](https://twitter.com/ChirpyHQ)
 
 <img src="https://raw.githubusercontent.com/devrsi0n/chirpy/main/apps/main/public/images/marketing/github.png" width="800" alt="Comment widget" >
 

diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 # Chirpy | [简体中文](./README-zh.md)
 
-[![Vercel](https://img.shields.io/github/deployments/devrsi0n/chirpy/production?color=black&logo=vercel)](https://github.com/devrsi0n/chirpy/deployments)
-[![Cypress](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/2p3w5f&logo=cypress&color=black)](https://dashboard.cypress.io/projects/2p3w5f/runs)
-[![Twitter Chirpy](https://img.shields.io/twitter/url?color=black&logoColor=black&url=https%3A%2F%2Ftwitter.com%2FChirpyHQ)](https://twitter.com/ChirpyHQ)
+[![Vercel](https://img.shields.io/github/deployments/devrsi0n/chirpy/production?logo=vercel)](https://github.com/devrsi0n/chirpy/deployments)
+[![Cypress](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/2p3w5f&logo=cypress)](https://dashboard.cypress.io/projects/2p3w5f/runs)
+[![Twitter Chirpy](https://img.shields.io/twitter/url?logoColor=black&url=https%3A%2F%2Ftwitter.com%2FChirpyHQ)](https://twitter.com/ChirpyHQ)
 
 <img src="https://raw.githubusercontent.com/devrsi0n/chirpy/main/apps/main/public/images/marketing/github.png" width="800" alt="Comment widget" >
 

diff --git a/packages/ui/src/blocks/mdx-components/mdx-components.tsx b/packages/ui/src/blocks/mdx-components/mdx-components.tsx
@@ -14,7 +14,7 @@ type MDXLinkProps = {
 };
 function MDXLink(props: MDXLinkProps): JSX.Element {
   return (
-    <Link href={props.href || ''} variant="solid">
+    <Link href={props.href || ''} variant="primary">
       {props.children}
     </Link>
   );

diff --git a/packages/ui/src/blocks/side-menu/side-menu.tsx b/packages/ui/src/blocks/side-menu/side-menu.tsx
@@ -48,7 +48,7 @@ export function SideMenu({
 }: SideMenuProps): JSX.Element {
   const [isOpen, toggleOpen] = useCycle(false, true);
   const containerRef = useClickOutside(() => isOpen && toggleOpen(0));
-  const [containerStyles, buttonStyles] = posStyles[position];
+  const [containerStyles, buttonStyles] = POS_STYLES[position];
   const backgroundVariant = React.useMemo(() => {
     const pos = circlePosStyle[position];
     return {
@@ -108,7 +108,7 @@ export function SideMenu({
       <IconButton
         aria-expanded={isOpen}
         onClick={() => toggleOpen()}
-        className={clsx('bg-gray-100', buttonStyles)}
+        className={clsx('bg-gray-400 p-1', buttonStyles)}
       >
         <span className="sr-only">Open navigation menu</span>
         <IconMenu className={clsx(isOpen && `hidden`)} />
@@ -120,7 +120,7 @@ export function SideMenu({
 
 SideMenu.Item = SideMenuItem;
 
-const posStyles = {
+const POS_STYLES = {
   tl: [`left-0`, `!absolute top-[18px] left-[18px]`],
   br: [`right-0`, `!fixed bottom-[18px] right-[18px]`],
 };

diff --git a/packages/ui/src/components/link/link.tsx b/packages/ui/src/components/link/link.tsx
@@ -7,7 +7,10 @@ import * as React from 'react';
 import { useHasMounted } from '../../hooks/use-has-mounted';
 
 type Size = 'xs' | 'sm' | 'md' | 'lg';
-type Variant = 'primary' | 'secondary' | 'plain' | 'solid';
+/**
+ * 'nav' means header/footer nav links
+ */
+type Variant = 'nav' | 'primary' | 'secondary' | 'plain';
 
 export type LinkProps = React.PropsWithChildren<
   NextLinkProps &
@@ -31,10 +34,10 @@ const sizeStyles: Record<Size, string> = {
 };
 
 const variantStyles: Record<Variant, string> = {
-  primary: `text-gray-1200 whitespace-nowrap`,
+  nav: `text-gray-1200 whitespace-nowrap`,
+  primary: `text-primary-1000 hover:text-primary-1200`,
   secondary: `text-gray-1100`,
   plain: ``,
-  solid: `text-blue-1100 hover:text-blue-1200`,
 };
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
@@ -50,7 +53,7 @@ export const Link = React.forwardRef(function Link(
     prefetch,
     highlightPattern,
     hideUnderline,
-    variant = 'primary',
+    variant = 'nav',
     className,
     children,
     disabled,
@@ -125,7 +128,7 @@ export const Link = React.forwardRef(function Link(
           )}
         >
           {children}
-          {!hideUnderline && ['primary', 'secondary'].includes(variant) && (
+          {!hideUnderline && ['nav', 'secondary'].includes(variant) && (
             <span className="absolute bottom-0 left-0 -mb-1 hidden  h-0.5 w-full overflow-hidden sm:inline-block">
               <m.span
                 className="absolute inset-0 inline-block bg-current"

diff --git a/packages/ui/src/pages/docs/index.tsx b/packages/ui/src/pages/docs/index.tsx
@@ -62,7 +62,7 @@ export function Docs({
                     variant="plain"
                     href={nearNav.prev.link}
                     className={clsx(
-                      'flex -translate-x-5 flex-row items-center px-3 py-2 text-gray-1200',
+                      'flex flex-row items-center px-3 py-2 text-gray-1200 sm:-translate-x-5',
                       listHoverable,
                     )}
                   >
@@ -79,7 +79,7 @@ export function Docs({
                     variant="plain"
                     href={nearNav.next.link}
                     className={clsx(
-                      'flex translate-x-5 flex-row items-center px-3 py-2 text-gray-1200',
+                      'flex flex-row items-center px-3 py-2 text-gray-1200 sm:translate-x-5',
                       listHoverable,
                     )}
                   >

diff --git a/packages/ui/src/pages/profile/index.tsx b/packages/ui/src/pages/profile/index.tsx
@@ -222,7 +222,7 @@ export function Profile(): JSX.Element {
           ) : (
             website && (
               <Link
-                variant="solid"
+                variant="primary"
                 href={website}
                 className="flex w-fit flex-row space-x-2"
               >
@@ -240,7 +240,7 @@ export function Profile(): JSX.Element {
           ) : (
             twitterUserName && (
               <Link
-                variant="solid"
+                variant="primary"
                 href={`https://twitter.com/${twitterUserName}`}
                 className="flex w-fit flex-row items-center space-x-2"
               >

diff --git a/packages/ui/src/styles/global-styles.scss b/packages/ui/src/styles/global-styles.scss
@@ -21,11 +21,12 @@ body,
   text-rendering: optimizeLegibility;
   -webkit-tap-highlight-color: transparent;
   -webkit-appearance: none;
+  appearance: none;
   outline: none;
 }
 
 ::selection {
-  @apply bg-green-800 text-white;
+  @apply bg-primary-900 text-primary-100;
 }
 
 :focus-visible {