From 034f6383683e1eec330e8622157c9b88ed3b04b9 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Mon, 3 Feb 2025 10:40:44 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20Rewrite=20to=20tailwind=20and=20?=
 =?UTF-8?q?cleanup=20#2786?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/objects/stockValuesApi.tsx   | 10 +--
 web/pageComponents/topicPages/StockValues.tsx | 69 +++++--------------
 .../topicPages/TwitterEmbed.tsx               | 18 ++---
 3 files changed, 29 insertions(+), 68 deletions(-)

diff --git a/sanityv3/schemas/objects/stockValuesApi.tsx b/sanityv3/schemas/objects/stockValuesApi.tsx
index 06c8c966e..df3a10140 100644
--- a/sanityv3/schemas/objects/stockValuesApi.tsx
+++ b/sanityv3/schemas/objects/stockValuesApi.tsx
@@ -8,10 +8,12 @@ const ApiDescription = () => {
   return (
     <Box>
       <Heading size={2}>How to use</Heading>
-      <Text style={{ margin: '4px 0' }}>
-        This component will automatically display up to date Equinor stock values from the OSE and NYSE. No
-        configuration is required.
-      </Text>
+      <span style={{ display: 'block', marginTop: '25px' }}>
+        <Text>
+          This component will automatically display up to date Equinor stock values from the OSE and NYSE. No
+          configuration is required.
+        </Text>
+      </span>
     </Box>
   )
 }
diff --git a/web/pageComponents/topicPages/StockValues.tsx b/web/pageComponents/topicPages/StockValues.tsx
index 6b3e0efda..c8809ad94 100644
--- a/web/pageComponents/topicPages/StockValues.tsx
+++ b/web/pageComponents/topicPages/StockValues.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import useSWR from 'swr'
 import * as xml2js from 'xml2js'
-import styled from 'styled-components'
 import { BackgroundContainer, FormattedDate } from '@components'
 import { FormattedMessage } from 'react-intl'
 import type { StockValuesData } from '../../types/index'
@@ -39,42 +38,6 @@ const fetchData = async (url: string) => {
   }
 }
 
-const Container = styled.div`
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: var(--space-large);
-
-  @media (min-width: 750px) {
-    grid-template-columns: 1fr 1fr;
-  }
-`
-
-const Item = styled.div`
-  text-align: center;
-`
-
-const Price = styled.span`
-  font-size: var(--typeScale-4);
-  font-weight: var(--fontWeight-medium);
-  color: var(--moss-green-100);
-  margin: 0 var(--space-xSmall);
-`
-
-const Subtitle = styled.p`
-  font-weight: var(--fontWeight-bolder);
-  margin: 0 0 var(--space-xSmall);
-  padding: 0;
-`
-
-const MarketTitle = styled(Subtitle)`
-  text-transform: uppercase;
-`
-
-const TimeDelay = styled.span`
-  font-style: italic;
-  font-weight: var(--fontWeight-medium);
-`
-
 const ENDPOINT = `https://tools.eurolandir.com/tools/pricefeed/xmlirmultiiso5.aspx?companyid=9053`
 
 // @TODO: use correct datetime & formatting
@@ -101,33 +64,33 @@ const StockValues = ({
 
   return (
     <BackgroundContainer background={background} {...rest} id={anchor}>
-      <Container className={twMerge(`pb-page-content px-layout-lg max-w-viewport mx-auto`, className)}>
-        <Item>
+      <div className={twMerge(`pb-page-content px-layout-lg max-w-viewport mx-auto grid grid-cols-[1fr] gap-8 sm:grid-cols-[1fr,1fr]`, className)}>
+        <div className="text-center">
           <p>
             EQNR
-            <Price>{data.OSE?.Quote}</Price>
+            <span className="text-xl my-0 mx-1 text-moss-green-100 font-medium">{data.OSE?.Quote}</span>
             {data.OSE?.currency}
           </p>
-          <MarketTitle>{data.OSE?.title}</MarketTitle>
-          <Subtitle>
+          <p className="font-semibold uppercase mb-1 mx-0 mt-0 p-0">{data.OSE?.title}</p>
+          <p className="font-semibold mb-1 mx-0 mt-0 p-0">
             <FormattedDate datetime={data.OSE?.Date} /> CET
-          </Subtitle>
-        </Item>
-        <Item>
+          </p>
+        </div>
+        <div className="text-center">
           <p>
             EQNR
-            <Price>{data.NYSE?.Quote}</Price>
+            <span className="text-xl my-0 mx-1 text-moss-green-100 font-medium">{data.NYSE?.Quote}</span>
             {data.NYSE?.currency}
           </p>
-          <MarketTitle>{data.NYSE?.title}</MarketTitle>
-          <Subtitle>
+          <p className="font-semibold uppercase mb-1 mx-0 mt-0 p-0">{data.NYSE?.title}</p>
+          <p className="font-semibold mb-1 mx-0 mt-0 p-0">
             <FormattedDate datetime={data.NYSE?.Date} /> CET{' '}
-            <TimeDelay>
+            <span className="font-medium italic">
               <FormattedMessage id="stock_nyse_time_delay_message" defaultMessage="at least 20 minutes delayed" />
-            </TimeDelay>
-          </Subtitle>
-        </Item>
-      </Container>
+            </span>
+          </p>
+        </div>
+      </div>
     </BackgroundContainer>
   )
 }
diff --git a/web/pageComponents/topicPages/TwitterEmbed.tsx b/web/pageComponents/topicPages/TwitterEmbed.tsx
index 04da5c020..c4c6b4bc0 100644
--- a/web/pageComponents/topicPages/TwitterEmbed.tsx
+++ b/web/pageComponents/topicPages/TwitterEmbed.tsx
@@ -2,7 +2,6 @@ import { TwitterEmbedData } from '../../types/index'
 import RequestConsentContainer from '../../pageComponents/shared/iframe/RequestConsentContainer'
 import { TwitterTimelineEmbed, TwitterTweetEmbed } from 'react-twitter-embed'
 import { BackgroundContainer } from '@components'
-import styled from 'styled-components'
 import IngressText from '../../pageComponents/shared/portableText/IngressText'
 import TitleText from '../../pageComponents/shared/portableText/TitleText'
 import { twMerge } from 'tailwind-merge'
@@ -13,13 +12,6 @@ type TwitterEmbedProps = {
   className?: string
 }
 
-const StyledIngress = styled.div`
-  padding: 0 0 var(--space-medium);
-`
-const StyledTitle = styled(TitleText)`
-  margin-bottom: var(--space-xLarge);
-`
-
 const TwitterEmbed = ({ data, anchor, className }: TwitterEmbedProps) => {
   const { embedType, embedValue, designOptions, title, ingress } = data
 
@@ -46,11 +38,15 @@ const TwitterEmbed = ({ data, anchor, className }: TwitterEmbedProps) => {
     <>
       <BackgroundContainer {...designOptions} id={anchor} renderFragmentWhenPossible>
         <div className={twMerge(`pb-page-content px-layout-lg max-w-viewport mx-auto`, className)}>
-          {title && <StyledTitle value={title} />}
+          {title && (
+            <div className="mb-11">
+              <TitleText value={title} />
+            </div>
+          )}
           {ingress && (
-            <StyledIngress>
+            <div className="pt-0 px-0 pb-4">
               <IngressText value={ingress} />
-            </StyledIngress>
+            </div>
           )}
 
           <div className="cookieconsent-optin-marketing">