Remove t8d

src/components/Card.tsx

@@ -6,7 +6,6 @@ import { colors, fontSizes, ns, radii, spaces } from 'src/lib/theme'
 import { H3 } from 'src/components/ContentTags'
 import { CardAction } from 'src/components/CardWrapper'
 import CardContent, { CardContentProps } from 'src/components/CardContent'
-import locale from 'src/lib/locale'
 
 interface CardColorContextProps {
   color: CardProps['color']
@@ -43,7 +42,6 @@ export interface CardProps {
     content: React.ReactNode
     color?: CardProps['color']
   }
-  t8d?: boolean
   inCardWrapper?: boolean
 }
 
@@ -90,7 +88,6 @@ const Card = ({
   isLast,
   footer,
   header,
-  t8d,
   inCardWrapper
 }: CardProps) => (
   <CardColorContext.Provider value={{ color }}>
@@ -172,12 +169,7 @@ const Card = ({
                   text-align: center;
                   margin-left: ${spaces('-0.25')};
                   margin-right: ${spaces('-0.25')};
-                `,
-                !t8d &&
-                  locale === 'en' &&
-                  css`
-                    opacity: 0.1;
-                  `
+                `
               ]}
             >
               {title}

src/components/CardWrapper.tsx

@@ -15,7 +15,6 @@ interface CardWrapperProps {
   title?: React.ReactNode
   footer?: CardProps['footer']
   setLastVisibleCardIndex: () => void
-  t8d?: boolean
 }
 
 export type CardAction = 'default' | 'yesSelected' | 'noSelected'
@@ -50,8 +49,7 @@ const CardWrapper = ({
   type,
   setLastVisibleCardIndex,
   title,
-  footer,
-  t8d
+  footer
 }: CardWrapperProps) => {
   const [cardActionTaken, setCardActionTaken] = useState<CardAction>('default')
   const [cardActionResult, setCardActionResult] = useState<CardActionResult>(
@@ -82,8 +80,7 @@ const CardWrapper = ({
             children,
             cardActionTaken,
             title,
-            footer,
-            t8d
+            footer
           }}
           color={cardActionToColor(cardActionResult) || typeToColor(type)}
         />

src/components/ContentTags/List.tsx

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import { spaces } from 'src/lib/theme'
-import locale from 'src/lib/locale'
 
 const commonListCss = css`
   padding: 0;
@@ -27,22 +26,16 @@ const commonListItemCss = css`
 type DefaultUlProps = JSX.IntrinsicElements['ul']
 interface UlProps extends DefaultUlProps {
   size?: 'md' | 'lg'
-  t8d?: boolean
 }
 
-export const Ul = ({ t8d, size = 'md', ...props }: UlProps) => (
+export const Ul = ({ size = 'md', ...props }: UlProps) => (
   <ul
     {...props}
     css={[
       commonListCss,
       size === 'lg' &&
         css`
           margin: ${spaces(1.75)} 0;
-        `,
-      !t8d &&
-        locale === 'en' &&
-        css`
-          opacity: 0.1;
         `
     ]}
   />
@@ -51,10 +44,9 @@ export const Ul = ({ t8d, size = 'md', ...props }: UlProps) => (
 type DefaultOlProps = JSX.IntrinsicElements['ol']
 interface OlProps extends DefaultOlProps {
   size?: 'md' | 'lg'
-  t8d?: boolean
 }
 
-export const Ol = ({ t8d, size, ...props }: OlProps) => (
+export const Ol = ({ size, ...props }: OlProps) => (
   <ol
     {...props}
     css={[
@@ -65,12 +57,7 @@ export const Ol = ({ t8d, size, ...props }: OlProps) => (
         `,
       css`
         counter-reset: text;
-      `,
-      !t8d &&
-        locale === 'en' &&
-        css`
-          opacity: 0.1;
-        `
+      `
     ]}
   />
 )

src/components/ContentTags/P.tsx

@@ -1,25 +1,14 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import { spaces } from 'src/lib/theme'
-import locale from 'src/lib/locale'
 
-type DefaultPProps = JSX.IntrinsicElements['p']
-interface PProps extends DefaultPProps {
-  t8d?: boolean
-}
-
-export const P = ({ t8d, ...props }: PProps) => (
+export const P = (props: JSX.IntrinsicElements['p']) => (
   <p
     {...props}
     css={[
       css`
         margin: 0 0 ${spaces(1)};
-      `,
-      !t8d &&
-        locale === 'en' &&
-        css`
-          opacity: 0.1;
-        `
+      `
     ]}
   />
 )

src/components/EmojiSeparator.tsx

@@ -5,7 +5,6 @@ import Emoji from 'src/components/Emoji'
 import { colors, fontSizes, ns, spaces, maxWidths } from 'src/lib/theme'
 import { VariableNames } from 'src/types/VariableNames'
 import letterEmojiMapping from 'src/lib/letterEmojiMapping'
-import locale from 'src/lib/locale'
 
 interface EmojiSeparatorProps {
   emojis: string[]
@@ -18,7 +17,6 @@ interface EmojiSeparatorProps {
   description?: React.ReactNode
   noBottomMargin: boolean
   noTopMargin: boolean
-  t8d?: boolean
 }
 
 const fontSize = (size: EmojiSeparatorProps['size']) =>
@@ -58,8 +56,7 @@ const EmojiSeparator = ({
   cssOverrides,
   description,
   noBottomMargin,
-  noTopMargin,
-  t8d
+  noTopMargin
 }: EmojiSeparatorProps) => (
   <Component
     css={[
@@ -116,12 +113,7 @@ const EmojiSeparator = ({
               padding-bottom: ${spaces(0.5)};
               max-width: ${maxWidths('xs')};
               margin: 0 auto;
-            `,
-            !t8d &&
-              locale === 'en' &&
-              css`
-                opacity: 0.1;
-              `
+            `
           ]}
         >
           {description}

src/components/EpisodeCardList.tsx

@@ -25,7 +25,6 @@ export interface EpisodeCardType {
   preview?: CardProps['preview']
   content?: React.ReactNode
   footer?: CardProps['footer']
-  t8d?: boolean
 }
 
 export type EpisodeCardListType = readonly EpisodeCardType[]
@@ -53,21 +52,20 @@ const EpisodeCardList = ({
         {underConstruction && (
           <CardWrapper
             type="summary"
-            t8d
             isLast={cards.length === 0}
             title={
               <>
                 <H args={{ name: 'pageUnderConstructionTitle' }} />
               </>
             }
           >
-            <P t8d>
+            <P>
               <H args={{ name: 'pageUnderConstruction' }} />
             </P>
             <EmojiSeparator emojis={['⚠️', '⚠️', '⚠️']} />
           </CardWrapper>
         )}
-        {cards.map(({ title, type, content, preview, footer, t8d }, index) =>
+        {cards.map(({ title, type, content, preview, footer }, index) =>
           index <= lastVisibleCardIndex ? (
             <CardWrapper
               slideNumber={index + 1}
@@ -84,7 +82,6 @@ const EpisodeCardList = ({
                       content: (
                         <>
                           <P
-                            t8d
                             css={css`
                               text-align: center;
                             `}
@@ -112,7 +109,6 @@ const EpisodeCardList = ({
                     }
                   : footer
               }
-              t8d={t8d}
             >
               {content}
             </CardWrapper>

src/components/ExpressionRunnerCaptionOnly.tsx

@@ -1,26 +1,15 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import { colors, spaces } from 'src/lib/theme'
-import locale from 'src/lib/locale'
 
-const ExpressionRunnerCaptionOnly = ({
-  t8d,
-  ...props
-}: JSX.IntrinsicElements['div'] & {
-  t8d?: boolean
-}) => (
+const ExpressionRunnerCaptionOnly = (props: JSX.IntrinsicElements['div']) => (
   <div
     css={[
       css`
         text-align: center;
         color: ${colors('indigo500')};
         margin: ${spaces(2.25)} 0 ${spaces(2.5)};
-      `,
-      !t8d &&
-        locale === 'en' &&
-        css`
-          opacity: 0.1;
-        `
+      `
     ]}
     {...props}
   />

src/components/ExpressionRunnerCaptionWrapper.tsx

@@ -1,25 +1,18 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import { colors, fontSizes, spaces } from 'src/lib/theme'
-import locale from 'src/lib/locale'
 
-const ExpressionRunnerCaptionWrapper = ({
-  t8d,
-  ...props
-}: JSX.IntrinsicElements['div'] & { t8d?: boolean }) => (
+const ExpressionRunnerCaptionWrapper = (
+  props: JSX.IntrinsicElements['div']
+) => (
   <div
     css={[
       css`
         text-align: center;
         font-size: ${fontSizes(0.85)};
         color: ${colors('indigo500')};
         margin: ${spaces('-0.75')} -2px ${spaces(0.5)} -2px;
-      `,
-      !t8d &&
-        locale === 'en' &&
-        css`
-          opacity: 0.1;
-        `
+      `
     ]}
     {...props}
   />

src/components/ExpressionRunnerPrecomputed.tsx

@@ -186,7 +186,7 @@ const ExpressionRunnerPrecomputed = ({
           horizontalPadding={0}
         >
           {explanationsVisible && (
-            <ExpressionRunnerCaptionWrapper t8d>
+            <ExpressionRunnerCaptionWrapper>
               <ExpressionRunnerExplanation
                 isPlaying={isPlaying}
                 expressionContainer={expressionContainers[currentIndex]}
@@ -198,7 +198,7 @@ const ExpressionRunnerPrecomputed = ({
             </ExpressionRunnerCaptionWrapper>
           )}
           {children && !explanationsVisible && !isPlaying && (
-            <ExpressionRunnerCaptionWrapper t8d>
+            <ExpressionRunnerCaptionWrapper>
               {children}
             </ExpressionRunnerCaptionWrapper>
           )}

src/components/H.tsx

@@ -224,7 +224,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   if (args.name === 'newUser') {
     if (locale === 'en') {
       return (
-        <P t8d>
+        <P>
           <InlineHeader>Hello!</InlineHeader> This is{' '}
           <Em>page {episodeNumber + 1}</Em> of a course called “
           <InternalLink href={'/'}>{lessonTitle}</InternalLink>

src/components/NotFoundCardList.tsx

@@ -11,7 +11,6 @@ const NotFoundCardList = () => (
     cards={[
       {
         type: 'meta',
-        t8d: true,
         title: (
           <>
             <H args={{ name: 'pageNotFound' }} />
@@ -20,7 +19,6 @@ const NotFoundCardList = () => (
         content: (
           <>
             <P
-              t8d
               css={css`
                 text-align: center;
               `}

src/components/TocModal.tsx

@@ -77,7 +77,6 @@ const TocModal = ({ hideModal }: { hideModal: () => void }) => {
   return (
     <Modal onClickBackground={hideModal}>
       <Card
-        t8d
         color="indigo"
         title={<H args={{ name: 'indexPageLink' }} />}
         header={

src/contents/1.en.tsx

@@ -22,17 +22,15 @@ export default () => (
     underConstruction
     cards={[
       {
-        t8d: true,
         title: <>Welcome!</>,
         content: (
           <>
-            <P t8d>
+            <P>
               In this course, we’ll learn about Y Combinator through a short
               story. Let’s first talk about <Strong>“mathboxes”</Strong>, one of
               the key items of this story.
             </P>
             <EmojiSeparator
-              t8d
               nodes={[
                 <CustomEmoji type="mathBox" />,
                 <CustomEmoji type="mathBox" />,
@@ -44,17 +42,15 @@ export default () => (
         )
       },
       {
-        t8d: true,
         title: <>Once upon a time…</>,
         content: (
           <>
-            <P t8d>
+            <P>
               Once upon a time, there was a small rural village called{' '}
               <Strong>“Lambda Village”</Strong>. The villagers worked to earn
               just enough for a modest lifestyle.
             </P>
             <EmojiSeparator
-              t8d
               emojis={['🌲', '🙂', '🙂', '🌲']}
               description={<>Lambda Village and the villagers</>}
             />