Clean up Linaria conversion, drop lots of *.styles & *.types files

Author: pimterry

src/app/(pricing)/pricing/data.ts

@@ -1,5 +1,5 @@
-import type { PricingComparisonProps } from '@/components/sections/pricing/comparison/comparison.types';
-import type { TextWithAccordionProps } from '@/components/sections/text-with-accordion/text-with-accordion.types';
+import type { PricingComparisonProps } from '@/components/sections/pricing/comparison';
+import type { TextWithAccordionProps } from '@/components/sections/text-with-accordion';
 
 export const comparisonPlans: PricingComparisonProps['plans'] = [
   {

src/app/(thank-you-pages)/app-purchase-thank-you/page.tsx

@@ -5,7 +5,7 @@ import {
   StyledTextContent,
   StyledThankYouSection,
   StyledSectionCTAWrapper,
-} from '../web-purchase-thank-you/thank-you.styles';
+} from '../web-purchase-thank-you/page';
 
 import { Container } from '@/components/elements/container';
 import { Heading } from '@/components/elements/heading';

src/app/(thank-you-pages)/web-purchase-thank-you/page.tsx

@@ -1,17 +1,12 @@
 import { Suspense } from 'react';
 
-import {
-  StyledThankYouSection,
-  StyledThankYouColumns,
-  StyledThankYouColumnContent,
-  StyledGradientBottom,
-  StyledSectionCTAWrapper,
-  StyledTextContent,
-} from './thank-you.styles';
+import { styled } from '@linaria/react';
+
 import { CapturePurchaseEvent } from './capture-purchase-event';
 import { Container } from '@/components/elements/container';
 import { Heading } from '@/components/elements/heading';
 import { StyledHideElementOn } from '@/components/elements/hide-on/hide-on';
+import { Section } from '@/components/elements/section';
 import Stack from '@/components/elements/stack';
 import { Text } from '@/components/elements/text';
 import { ThemedImage } from '@/components/elements/themed-image';
@@ -20,6 +15,99 @@ import { ContentCard } from '@/components/modules/content-card';
 import { DownloadButton } from '@/components/modules/download-button';
 import { NEWSLETTER_URLS } from '@/components/modules/newsletter/newsletter.values';
 import { CTA } from '@/components/sections/cta';
+import { screens } from '@/styles/tokens';
+
+export const StyledThankYouSection = styled(Section)`
+  padding-top: 16px;
+  padding-bottom: calc(64px + 32px);
+
+  @media (min-width: ${screens['2xl']}) {
+    padding-top: 96px;
+    padding-bottom: 96px;
+  }
+`;
+
+export const StyledThankYouColumns = styled.div`
+  display: flex;
+  gap: 64px;
+
+  @media (min-width: ${screens['lg']}) {
+    gap: 96px;
+  }
+`;
+
+export const StyledThankYouColumnContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  @media (min-width: ${screens['lg']}) {
+    max-width: 586px;
+    width: 100%;
+    flex-shrink: 0;
+  }
+`;
+
+export const StyledGradientBottom = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  overflow: hidden;
+  z-index: -1;
+  transform: rotate(180deg);
+  pointer-events: none;
+  user-select: none;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: calc(-100vh);
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: auto;
+    background: radial-gradient(circle at left, var(--circle-gradient) 0%, transparent 30%),
+      radial-gradient(ellipse 70% 45% at left, var(--ellipse-gradient) 0%, transparent 70%);
+    background-size: contain;
+    opacity: 0.22;
+  }
+
+  display: none;
+  visibility: hidden;
+
+  & > div {
+    opacity: 0.2;
+  }
+
+  @media (min-width: ${screens['lg']}) {
+    display: block;
+    visibility: visible;
+  }
+`;
+
+export const StyledSectionCTAWrapper = styled.div`
+  & section[data-cta='true'] {
+    padding-bottom: 0 !important;
+
+    h1 {
+      margin-bottom: 19px;
+    }
+  }
+`;
+
+export const StyledTextContent = styled.div`
+  text-align: center;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  gap: 8px;
+
+  @media (min-width: ${screens['lg']}) {
+    text-align: left;
+  }
+`;
 
 export default function WebPurchaseThankYouPage() {
   return (

src/app/(thank-you-pages)/web-purchase-thank-you/thank-you.styles.ts

@@ -1,12 +1,12 @@
 import type { Metadata } from 'next/types';
 
 import {
-  StyledColumnContent,
   StyledDownloadSection,
   StyledDownloadaColumns,
+  StyledColumnContent,
+  StyledImageWrapper,
   StyledGradientBottom,
   StyledGradientMobile,
-  StyledImageWrapper,
 } from './page.styles';
 import { SelfDownload } from './self-download';
 import { Container } from '@/components/elements/container';

src/app/download/[slug]/page.tsx

@@ -1,13 +1,13 @@
 import type { Metadata } from 'next/types';
 
 import {
-  StyledButtonsWrapper,
-  StyledFridaColumnContent,
-  StyledFridaColumns,
   StyledFridaSection,
+  StyledFridaColumns,
+  StyledFridaColumnContent,
+  StyledButtonsWrapper,
   StyledGradientBottom,
-  StyledMobileText,
   StyledSectionCTAWrapper,
+  StyledMobileText,
   StyledTextContent,
 } from './page.styles';
 import { Button } from '@/components/elements/button';

src/app/frida-scripts/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 
-import { StyledWillItCorsContainer, StyledWillItCorsWrapper } from './page.styles';
+import { StyledWillItCorsWrapper, StyledWillItCorsContainer } from './page.styles';
 import { Breadcrumbs } from '../components/breadcrumbs';
 import { Steps } from '../components/steps';
 import type { WillItCorsSteps } from '../data';

src/app/will-it-cors/[step]/page.tsx

@@ -1,5 +1,5 @@
-import type { BreadcrumState } from './breadcrumbs-types';
-import { StyledBreadcrumbItemWrapper } from './breadcrumbs.styles';
+import type { BreadcrumState } from '.';
+import { StyledBreadcrumbItemWrapper } from '.';
 
 import { CheckCircle, XCircle } from '@/components/elements/icon';