Block to div

apps/frontend/src/AppRoutes.tsx

@@ -109,12 +109,12 @@ const AppRoutes = (): JSX.Element => (
 )
 
 const NotFound = () => (
-  <Block display="flex" justifyContent="center" alignContent="center" marginTop={theme.sizing.scale4800}>
+  <div className="flex justify-center content-center just mt-48">
     <ParagraphLarge>
       Oida 404! Fant ikke den siden der nei  - {useLocation().pathname}
     </ParagraphLarge>
     <img src={notFound} alt="404 Finner ikke den siden" style={{ maxWidth: '65%' }} />
-  </Block>
+  </div>
 )
 
 const processUrl = async (id: string) => {

apps/frontend/src/components/AaregAvtale/AAregHjemmelDataText.tsx

@@ -14,7 +14,7 @@ export const AAregHjemmelDataText = (props: AAregHjemmelDataTextProps) => {
   const processorList = rawData.filter((d) => d.match('Behandlingsgrunnlag:')).map((a) => a.replace('Behandlingsgrunnlag:', ''))
 
   return (
-    <Block>
+    <div>
       <Table
         emptyText='Ikke angitt'
         headers={
@@ -28,18 +28,18 @@ export const AAregHjemmelDataText = (props: AAregHjemmelDataTextProps) => {
         {purposeList.map((a, i) => (
           <Row key={a + '_' + i}>
             <Cell>
-              <Block>{a}</Block>
+              <div>{a}</div>
             </Cell>
             <Cell>
-              <Block>{authoryList[i]}</Block>
+              <div>{authoryList[i]}</div>
             </Cell>
             <Cell>
-              <Block>{processorList[i]}</Block>
+              <div>{processorList[i]}</div>
             </Cell>
           </Row>
         ))}
       </Table>
-    </Block>
+    </div>
   )
 }
 export default AAregHjemmelDataText

apps/frontend/src/components/AaregAvtale/AaregAvtaleTable.tsx

@@ -18,14 +18,13 @@ type AaregAvtaleTableProps = {
   aaregAvtaler: AaregAvtale[]
 }
 
-const marginBottom = '1rem'
 const marginTop = '2rem'
 
 const CustomPanelLabel = ({ text }: { text: any }) => {
   return (
-    <Block width="100%" marginBottom={marginBottom} $style={{ boderBottomWidth: '1px', borderBottomStyle: 'solid', borderBottomColor: '#AFAFAF' }}>
+    <div className="w-full mb-4 border-b border-solid border-[#AFAFAF]">
       <LabelLarge marginTop={marginTop}>{text}</LabelLarge>
-    </Block>
+    </div>
   )
 }
 
@@ -77,15 +76,15 @@ export const AaregAvtaleTable = (props: AaregAvtaleTableProps) => {
               <Panel
                 key={a.avtalenummer}
                 title={
-                  <Block width="100%">
+                  <div className="w-full">
                     <LabelLarge color={theme.colors.primary}>
                       {expanded ? <FontAwesomeIcon icon={faChevronDown} /> : <FontAwesomeIcon icon={faChevronRight} />}
                       <span> </span>
                       <span>
                         {a.virksomhet} - (Avtalenummer-{a.avtalenummer.replace('AVT-', '')})
                       </span>
                     </LabelLarge>
-                  </Block>
+                  </div>
                 }
                 overrides={{
                   ToggleIcon: {
@@ -103,12 +102,9 @@ export const AaregAvtaleTable = (props: AaregAvtaleTableProps) => {
                   },
                 }}
               >
-                <Block
-                  $style={{
-                    outline: `4px ${theme.colors.primary200} solid`,
-                  }}
+                <div className="outline-4 outline-[#99c2e8] outline"
                 >
-                  <Block paddingBottom={theme.sizing.scale800} paddingLeft={theme.sizing.scale800} paddingRight={theme.sizing.scale800} paddingTop={theme.sizing.scale800}>
+                  <div className="p-1">
                     <CustomPanelLabel text='Konsument' />
                     <DataText label='Navn' text={a.virksomhet || 'Ikke angitt'} />
                     <DataText label='Organisasjonsnummer' text={a.organisasjonsnummer || 'Ikke angitt'} />
@@ -130,14 +126,14 @@ export const AaregAvtaleTable = (props: AaregAvtaleTableProps) => {
                     <CustomPanelLabel text='Databehandler' />
                     <DataText label='Organisasjonsnummer' text={a.databehandler_organisasjonsnummer || 'Ikke angitt'} />
                     <DataText label='Navn' text={a.databehandler_navn || 'Ikke angitt'} />
-                  </Block>
-                </Block>
+                  </div>
+                </div>
               </Panel>
             )
           })}
       </StatelessAccordion>
 
-      <Block display="flex" justifyContent="space-between" marginTop="1rem">
+      <div className="flex justify-between mt-1">
         <StatefulPopover
           placement={PLACEMENT.bottom}
           content={({ close }) => (
@@ -165,7 +161,7 @@ export const AaregAvtaleTable = (props: AaregAvtaleTableProps) => {
           onPageChange={(a) => setPage(a.nextPage)}
           labels={{ nextButton: 'Neste', preposition: 'av', prevButton: 'Forrige' }}
         />
-      </Block>
+      </div>
     </>
   )
 }

apps/frontend/src/components/Charts/Chart.tsx

@@ -108,13 +108,13 @@ export const Chart = (props: ChartProps) => {
   return (
     <>
       {headerTitle && (
-        <Block marginLeft={(size - 1) * 2 + 'px'}>
+        <div className={`ml-[${(size - 1) * 2 + 'px'}]`}>
           <LabelLarge marginLeft={theme.sizing.scale700}>{headerTitle}</LabelLarge>
-        </Block>
+        </div>
       )}
-      <Block>
+      <div>
         <Visualization data={expData} size={size} chartTitle={chartTitle} leftLegend={!!leftLegend} hidePercent={!!hidePercent} type={props.type || 'pie'} />
-      </Block>
+      </div>
     </>
   )
 }
@@ -135,7 +135,7 @@ const Visualization = (props: VisualizationProps) => {
 
   let noChartData = !data.length || !data.reduce((p, c) => p + c.size, 0)
   return (
-    <Block position="relative">
+    <div className="relative">
       <Card
         overrides={{
           Root: {
@@ -148,46 +148,46 @@ const Visualization = (props: VisualizationProps) => {
         }}
       >
         <div onMouseLeave={() => setHover(-1)}>
-          <Block display="flex" alignItems="center" flexDirection={leftLegend ? 'row-reverse' : 'row'} maxWidth={'fit-content'} flexWrap>
+          <div className={`flex items-center ${leftLegend ? 'flex-row-reverse' : 'flex-row'} max-w-fit flex-wrap`}>
             {!noChartData && (
-              <Block>
+              <div>
                 {type === 'pie' && <PieChart data={data} radius={size} hover={hover} setHover={setHover} />}
                 {type === 'bar' && <BarChart data={data} size={size} hover={hover} setHover={setHover} />}
-              </Block>
+              </div>
             )}
-            <Block marginLeft={theme.sizing.scale200} marginRight={theme.sizing.scale200} marginTop={noChartData ? theme.sizing.scale400 : undefined}>
+            <div className={`mx-1.5 ${noChartData ? 'mt-2.5': ''}`}>
               <LabelLarge marginBottom={theme.sizing.scale300}>{chartTitle}</LabelLarge>
               {!noChartData &&
                 data.map((d, idx) => (
                   <div key={idx} onMouseOver={() => setHover(idx)} onClick={d.onClick}>
-                    <Block backgroundColor={idx === hover ? theme.colors.accent50 : theme.colors.white} $style={cursor} display="flex" alignItems="center">
+                    <div className={`${idx===hover ? 'bg-[#EFF3FE]' :'bg-white'} cursor-pointer flex items-center`}>
                       <FontAwesomeIcon icon={faCircle} color={d.color} />
-                      <Block minWidth={theme.sizing.scale1000} display="flex" justifyContent="flex-end">
+                      <div className="min-w-10 flex justify-end">
                         {d.size}
-                      </Block>
+                      </div>
                       {!hidePercent && (
-                        <Block minWidth={theme.sizing.scale1000} display="flex" justifyContent="flex-end">
+                        <div className="min-w-10 flex justify-end">
                           {(d.fraction * 100).toFixed(0)}%
-                        </Block>
+                        </div>
                       )}
-                      <Block marginLeft={theme.sizing.scale400}>{d.label}</Block>
-                    </Block>
+                      <div className="ml-2.5">{d.label}</div>
+                    </div>
                   </div>
                 ))}
-              {noChartData && <Block $style={{ ...marginAll(theme.sizing.scale100) }}>Ingen</Block>}
-            </Block>
-          </Block>
+              {noChartData && <div className="m-1">Ingen</div>}
+            </div>
+          </div>
         </div>
       </Card>
 
       <div onClick={toggle} style={{ position: 'absolute', top: '5px', left: '5px' }}>
         <CustomizedStatefulTooltip content={type === 'bar' ? 'Kakediagram' : 'Søylediagram'}>
-          <Block $style={{ cursor: 'pointer' }}>
+          <div className="cursor-pointer">
             <FontAwesomeIcon icon={type === 'bar' ? faChartPie : faChartBar} />
-          </Block>
+          </div>
         </CustomizedStatefulTooltip>
       </div>
-    </Block>
+    </div>
   )
 }
 

apps/frontend/src/components/Charts/Charts.tsx

@@ -1,16 +1,14 @@
-import * as React from 'react'
+import { Card } from 'baseui/card'
+import { ParagraphLarge, ParagraphMedium } from 'baseui/typography'
 import { useNavigate } from 'react-router-dom'
-import { Block } from 'baseui/block'
-import { cardShadow, chartCardProps } from '../common/Style'
 import { AllDashCount, DepartmentDashCount, ProcessField, ProcessState, ProcessStatusFilter, ProductAreaDashCount } from '../../constants'
-import TriChart from './TriChart'
-import { Chart } from './Chart'
+import { Section } from '../../pages/ProcessPage'
 import { clickOnPieChartSlice } from '../../util/dashboard'
 import { chartColor } from '../../util/theme'
-import { ParagraphLarge, ParagraphMedium } from 'baseui/typography'
 import RouteLink from '../common/RouteLink'
-import { Section } from '../../pages/ProcessPage'
-import { Card } from 'baseui/card'
+import { cardShadow } from '../common/Style'
+import { Chart } from './Chart'
+import TriChart from './TriChart'
 
 const chartSize = 80
 
@@ -39,39 +37,40 @@ const Charts = (props: ChartsProps) => {
   }
 
   const all = chartData as AllDashCount
+  const chartCardStyle = 'mt-4 w-[95%] sm:w-[45%] md:w-[30%] lg:w-[30%] bg-white p-4 shadow-[0px_0px_6px_3px_rgba(0,0,0,0.08)]'
 
   return (
-    <Block display="flex" flexWrap={true} width={'100%'} justifyContent={'space-between'}>
-      <Block {...chartCardProps}>
-        <TriChart counter={chartData.dpia} title='Behov for PVK' processStatus={processStatus} processField={ProcessField.DPIA} onClickPieChartSlice={handleClickPieChartSlice} />
+    <div className="flex flex-wrap w-full justify-between">
+      <div className={chartCardStyle}>
+        <TriChart counter={chartData.dpia} title="Behov for PVK" processStatus={processStatus} processField={ProcessField.DPIA} onClickPieChartSlice={handleClickPieChartSlice} />
         <ParagraphMedium>
           Ref. til PVK ikke angitt: <RouteLink href={link(ProcessField.DPIA_REFERENCE_MISSING, ProcessState.YES)}>{chartData.dpiaReferenceMissing}</RouteLink>
         </ParagraphMedium>
-      </Block>
+      </div>
 
-      <Block {...chartCardProps}>
+      <div className={chartCardStyle}>
         <TriChart
           counter={chartData.profiling}
-          title='Profilering'
+          title="Profilering"
           processStatus={processStatus}
           processField={ProcessField.PROFILING}
           onClickPieChartSlice={handleClickPieChartSlice}
         />
-      </Block>
+      </div>
 
-      <Block {...chartCardProps}>
+      <div className={chartCardStyle}>
         <TriChart
           counter={chartData.automation}
-          title='Helautomatisk behandling'
+          title="Helautomatisk behandling"
           processStatus={processStatus}
           processField={ProcessField.AUTOMATION}
           onClickPieChartSlice={handleClickPieChartSlice}
         />
-      </Block>
+      </div>
 
-      <Block {...chartCardProps}>
+      <div className={chartCardStyle}>
         <Chart
-          chartTitle='Ufullstendig behandlingsgrunnlag'
+          chartTitle="Ufullstendig behandlingsgrunnlag"
           size={chartSize}
           hidePercent
           type="bar"
@@ -96,35 +95,35 @@ const Charts = (props: ChartsProps) => {
             },
           ]}
         />
-      </Block>
+      </div>
 
-      <Block {...chartCardProps}>
+      <div className={chartCardStyle}>
         <TriChart
           counter={chartData.retention}
           processStatus={processStatus}
-          title='Omfattes av NAVs bevarings- og kassasjonsvedtak'
+          title="Omfattes av NAVs bevarings- og kassasjonsvedtak"
           processField={ProcessField.RETENTION}
           onClickPieChartSlice={handleClickPieChartSlice}
         />
         <ParagraphLarge>
           Behandlinger med ufullstendig lagringstid: <RouteLink href={link(ProcessField.RETENTION_DATA)}>{chartData.retentionDataIncomplete}</RouteLink>
         </ParagraphLarge>
-      </Block>
+      </div>
 
-      <Block {...chartCardProps}>
+      <div className={chartCardStyle}>
         <TriChart
           counter={chartData.dataProcessor}
           processStatus={processStatus}
-          title='Benyttes databehandler(e)?'
+          title="Benyttes databehandler(e)?"
           processField={ProcessField.DATA_PROCESSOR}
           onClickPieChartSlice={handleClickPieChartSlice}
         />
-      </Block>
+      </div>
 
       {all.disclosures !== undefined && (
-        <Block {...chartCardProps}>
+        <div className={chartCardStyle}>
           <Chart
-            chartTitle='Utleveringer behandlingsgrunnlag'
+            chartTitle="Utleveringer behandlingsgrunnlag"
             data={[
               {
                 label: 'Utfylt',
@@ -144,22 +143,23 @@ const Charts = (props: ChartsProps) => {
           <ParagraphMedium>
             Utleveringer: <RouteLink href={'/disclosure'}>{all.disclosures}</RouteLink>
           </ParagraphMedium>
-        </Block>
+        </div>
       )}
 
-      <Block marginTop="2.5rem" width={'100%'}>
+      <div className="mt-10 w-full">
         <Card overrides={cardShadow}>
-          <Block>
+          <div>
             <ParagraphMedium>
-              Behandlinger hvor NAV er felles behandlingsansvarlig med ekstern part: <RouteLink href={link(ProcessField.COMMON_EXTERNAL_PROCESSOR, ProcessState.YES)}>{chartData.commonExternalProcessResponsible}</RouteLink>
+              Behandlinger hvor NAV er felles behandlingsansvarlig med ekstern part:{' '}
+              <RouteLink href={link(ProcessField.COMMON_EXTERNAL_PROCESSOR, ProcessState.YES)}>{chartData.commonExternalProcessResponsible}</RouteLink>
             </ParagraphMedium>
             <ParagraphMedium>
               Behandlinger hvor NAV er databehandler: <RouteLink href={'/dpprocess'}>{chartData.dpProcesses}</RouteLink>
             </ParagraphMedium>
-          </Block>
+          </div>
         </Card>
-      </Block>
-    </Block>
+      </div>
+    </div>
   )
 }
 

apps/frontend/src/components/CodeList/CodeListStyledTable.tsx

@@ -86,7 +86,7 @@ const CodeListTable = ({ tableData, refresh }: TableCodelistProps) => {
             <Cell small>{row.shortName}</Cell>
             <Cell $style={{ width: '55%' }}>{row.description}</Cell>
             <Cell small>
-              <Block display="flex" justifyContent="flex-end" width="100%">
+              <div className="flex justify-end w-full">
                 <Button
                   tooltip='Vis bruk'
                   size={ButtonSize.compact}
@@ -121,7 +121,7 @@ const CodeListTable = ({ tableData, refresh }: TableCodelistProps) => {
                 >
                   <FontAwesomeIcon icon={faTrash} />
                 </Button>
-              </Block>
+              </div>
             </Cell>
           </Row>
         ))}