chore: more visual tweaks, use consistent prism theme

styled-components · May 29, 2023 · bf8950a · bf8950a
1 parent 09d50b1
commit bf8950a
Show file tree

Hide file tree

Showing 15 changed files with 33,762 additions and 33,360 deletions.
diff --git a/components/Code.tsx b/components/Code.tsx
@@ -3,7 +3,7 @@ import { monospace } from '../utils/fonts';
 
 const Code = styled.code`
   border-radius: 3px;
-  background: rgba(10, 10, 10, 0.1);
+  background: rgba(50, 50, 150, 0.1);
   display: inline-block;
   font-family: ${monospace};
   font-size: 90%;

diff --git a/components/CodeBlock.tsx b/components/CodeBlock.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { Language, CodeBlock as RLR, CodeBlockProps as RLRProps } from 'react-live-runner';
 import styled from 'styled-components';
-import { darkGrey } from '../utils/colors';
 import { monospace } from '../utils/fonts';
 import rem from '../utils/rem';
 import { Note } from './Note';
+import theme from './prismTheme';
 
 export interface CodeBlockProps extends RLRProps {
   code: string;
@@ -14,18 +13,18 @@ const CodeBlock = styled(({ code, ...rest }: CodeBlockProps) => {
   const language = (rest.language || 'clike').toLowerCase().trim() as Language;
 
   return (
-    <RLR {...rest} language={language}>
+    <RLR {...rest} language={language} theme={theme}>
       {code}
     </RLR>
   );
 })`
-  background: ${darkGrey};
   border-radius: ${rem(3)};
   box-shadow: 1px 1px 20px rgba(20, 20, 20, 0.27);
   font-family: ${monospace};
   font-size: 0.8rem;
   font-weight: 300;
   margin: ${rem(35)} 0;
+  padding: 1.5em !important;
   overflow-x: hidden;
   white-space: pre-wrap;
   width: 100%;

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -30,7 +30,7 @@ export const Content = styled.div<{ $hero?: boolean; $moveRight?: boolean }>`
 
   ${p =>
     mobile(css`
-      padding: ${rem(100)} ${rem(20)} ${rem(30)} ${rem(20)};
+      padding: ${rem(100)} ${rem(36)} ${rem(30)} ${rem(36)};
       transform: translateX(${p.$moveRight ? rem(sidebarWidth) : 0});
     `)};
 
@@ -48,24 +48,36 @@ export const Title = styled.h1`
   font-size: ${rem(42)};
   font-weight: bold;
   font-family: ${headerFont};
+
+  + h2 {
+    margin-top: -0.5em;
+  }
 `;
 
 export const Header = styled.h2`
   font-size: ${rem(32)};
   font-weight: 600;
   font-family: ${headerFont};
-  margin: 1.5em 0 0.5em;
+  margin: 2em 0 1em;
+
+  + h3 {
+    margin-top: -0.5em;
+  }
 `;
 
 export const SubHeader = styled.h3`
-  margin: 1.5em 0 0.5em;
+  margin: 2em 0 1em;
   font-size: ${rem(24)};
   font-weight: 600;
   font-family: ${headerFont};
+
+  + h4 {
+    margin-top: -0.5em;
+  }
 `;
 
 export const TertiaryHeader = styled.h4`
-  margin: 1.5em 0 0.5em;
+  margin: 2em 0 1em;
   font-size: ${rem(18)};
   font-weight: 600;
   font-family: ${headerFont};

diff --git a/components/LiveEdit.tsx b/components/LiveEdit.tsx
@@ -1,21 +1,31 @@
-import { LiveEditor, LiveError, LivePreview, LiveProvider, LiveProviderProps } from 'react-live-runner';
+import {
+  LiveEditor,
+  LiveEditorProps,
+  LiveError,
+  LivePreview,
+  LiveProvider,
+  LiveProviderProps,
+} from 'react-live-runner';
 import styled, { css } from 'styled-components';
-import { darkGrey, red } from '../utils/colors';
+import { red } from '../utils/colors';
 import { headerFont, monospace } from '../utils/fonts';
 import { phone } from '../utils/media';
 import rem from '../utils/rem';
 import baseScope from '../utils/scope';
+import theme from './prismTheme';
 
 export interface LiveEditProps extends Pick<LiveProviderProps, 'code' | 'scope'> {}
 
 export default function LiveEdit({ code, scope = {} }: LiveEditProps) {
   return (
     <StyledProvider
       code={code}
+      language="tsx"
       scope={{
         ...baseScope,
         ...scope,
       }}
+      theme={theme}
     >
       <Row>
         <Code>
@@ -65,7 +75,7 @@ const Code = styled.code`
 `;
 
 export const editorMixin = `
-  background: ${darkGrey};
+  border-radius: 3px;
   color: white;
   cursor: text;
   font-family: ${monospace};
@@ -78,8 +88,20 @@ export const editorMixin = `
   white-space: pre-wrap;
 `;
 
-const StyledEditor = styled(LiveEditor)`
+const StyledEditor = styled((props: Partial<LiveEditorProps>) => (
+  <LiveEditor
+    {...props}
+    // @ts-expect-error clashing types
+    theme={theme}
+  />
+))`
   ${editorMixin};
+
+  pre,
+  textarea {
+    font-family: ${monospace} !important;
+    padding: 1.5em 1.5em !important;
+  }
 `;
 
 const StyledPreview = styled(LivePreview)`

diff --git a/components/Nav/MobileNavbar.tsx b/components/Nav/MobileNavbar.tsx
@@ -60,6 +60,11 @@ const Wrapper = styled.div`
     flex-grow: 1;
     height: ${rem(navbarHeight)};
     justify-content: space-between;
+    margin-left: 16px;
+
+    > ${NavButton} {
+      margin-left: -8px;
+    }
   `)};
 `;
 
@@ -76,20 +81,20 @@ const SecondaryMenu = styled.div<{ $isOpen?: boolean }>`
         `
       : css`
           height: 0;
-        `} display: flex;
-  flex-wrap: nowrap;
+        `};
+  -webkit-overflow-scrolling: touch;
   align-items: center;
-  justify-content: space-between;
+  background: rgba(33, 33, 33, 0.9);
+  backdrop-filter: blur(5px);
+  color: #fff;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  overflow-x: overlay;
+  overflow-y: hidden;
   padding: 0 ${rem(20)};
   transition: height 0.1s;
-
   user-select: none;
-  -webkit-overflow-scrolling: touch;
-  overflow-x: scroll;
-  overflow-y: hidden;
-
-  background: ${blmGrey};
-  color: #fff;
 `;
 
 const LogoLink = styled(Link).attrs((/* props */) => ({

diff --git a/components/prismTheme.ts b/components/prismTheme.ts
@@ -0,0 +1,89 @@
+import { Theme } from 'react-live-runner';
+
+export default {
+  plain: {
+    backgroundColor: '#27212e',
+    color: '#ffffff',
+    padding: '0.25em',
+  },
+  styles: [
+    {
+      types: ['prolog', 'comment', 'cdata'],
+      style: {
+        color: '#91889b',
+      },
+    },
+    {
+      types: ['punctuation'],
+      style: {
+        color: '#7b6995',
+      },
+    },
+    {
+      types: ['builtin', 'constant', 'boolean'],
+      style: {
+        color: '#7b6995',
+      },
+    },
+    {
+      types: ['number'],
+      style: {
+        color: '#b381c5',
+      },
+    },
+    {
+      types: ['important', 'atrule', 'property', 'keyword'],
+      style: {
+        color: '#40b4c4',
+      },
+    },
+    {
+      types: ['doctype', 'operator', 'inserted', 'tag', 'class-name', 'symbol'],
+      style: {
+        color: '#74dfc4',
+      },
+    },
+    {
+      types: ['attr-name', 'function', 'deleted', 'selector'],
+      style: {
+        color: '#eb64b9',
+      },
+    },
+    {
+      types: ['attr-value', 'regex', 'char', 'string'],
+      style: {
+        color: '#b4dce7',
+      },
+    },
+    {
+      types: ['entity', 'url', 'variable'],
+      style: {
+        color: '#ffffff',
+      },
+    },
+    {
+      types: ['bold'],
+      style: {
+        fontWeight: 'bold',
+      },
+    },
+    {
+      types: ['italic'],
+      style: {
+        fontStyle: 'italic',
+      },
+    },
+    {
+      types: ['entity'],
+      style: {
+        cursor: 'help',
+      },
+    },
+    {
+      types: ['namespace'],
+      style: {
+        opacity: 0.7,
+      },
+    },
+  ],
+} as Theme;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -15,6 +15,7 @@ import { blmBlack, blmGrey } from '../utils/colors';
 import { headerFont } from '../utils/fonts';
 import rem from '../utils/rem';
 import baseScope from '../utils/scope';
+import theme from '../components/prismTheme';
 
 export default function Index() {
   const [isMobileNavFolded, setIsMobileNavFolded] = React.useState(true);
@@ -33,7 +34,13 @@ export default function Index() {
 
       <Wrapper>
         <Content $hero>
-          <LiveProvider code={headerCode} transformCode={transformHeaderCode} scope={{ ...baseScope, rem, Link }}>
+          <LiveProvider
+            code={headerCode}
+            language="tsx"
+            transformCode={transformHeaderCode}
+            scope={{ ...baseScope, rem, Link }}
+            theme={theme}
+          >
             <Title>
               <Tagline>
                 CSS for the <code>&lt;Component&gt;</code> Age
@@ -46,7 +53,7 @@ export default function Index() {
             </Links>
 
             <EditorContainer>
-              <Editor />
+              <Editor theme={theme} />
               <StyledError />
             </EditorContainer>
           </LiveProvider>

diff --git a/test/components/NavBar/__snapshots__/MobileNavbar.spec.tsx.snap b/test/components/NavBar/__snapshots__/MobileNavbar.spec.tsx.snap
@@ -93,18 +93,19 @@ exports[`MobileNavbar renders correctly 1`] = `
   left: 0;
   right: 0;
   height: 3.3333333333333335rem;
+  -webkit-overflow-scrolling: touch;
+  align-items: center;
+  background: rgba(33, 33, 33, 0.9);
+  backdrop-filter: blur(5px);
+  color: #fff;
   display: flex;
   flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
+  justify-content: center;
+  overflow-x: overlay;
+  overflow-y: hidden;
   padding: 0 1.1111111111111112rem;
   transition: height 0.1s;
   user-select: none;
-  -webkit-overflow-scrolling: touch;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  background: rgb(33, 33, 33);
-  color: #fff;
 }
 
 .c4 {
@@ -130,6 +131,11 @@ exports[`MobileNavbar renders correctly 1`] = `
     flex-grow: 1;
     height: 3.3333333333333335rem;
     justify-content: space-between;
+    margin-left: 16px;
+  }
+
+  .c0 >.c1 {
+    margin-left: -8px;
   }
 }
 

diff --git a/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap b/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap
@@ -93,18 +93,19 @@ exports[`Navbar renders correctly 1`] = `
   left: 0;
   right: 0;
   height: 3.3333333333333335rem;
+  -webkit-overflow-scrolling: touch;
+  align-items: center;
+  background: rgba(33, 33, 33, 0.9);
+  backdrop-filter: blur(5px);
+  color: #fff;
   display: flex;
   flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
+  justify-content: center;
+  overflow-x: overlay;
+  overflow-y: hidden;
   padding: 0 1.1111111111111112rem;
   transition: height 0.1s;
   user-select: none;
-  -webkit-overflow-scrolling: touch;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  background: rgb(33, 33, 33);
-  color: #fff;
 }
 
 .c5 {
@@ -213,6 +214,11 @@ exports[`Navbar renders correctly 1`] = `
     flex-grow: 1;
     height: 3.3333333333333335rem;
     justify-content: space-between;
+    margin-left: 16px;
+  }
+
+  .c1 >.c2 {
+    margin-left: -8px;
   }
 }