refactor: height and width of pdf (#833)

equinor · Nov 30, 2023 · 52de800 · 52de800
1 parent 2319df0
commit 52de800
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 29 deletions.
diff --git a/packages/dm-core-plugins/src/header/HeaderPlugin.tsx b/packages/dm-core-plugins/src/header/HeaderPlugin.tsx
@@ -28,10 +28,9 @@ const Icons = styled.div`
   }
 `
 const Logo = styled.span`
-  paddinginline: 10;
   color: #007079;
   font-weight: 500;
-  margin-right: 3rem;
+  margin-right: 1rem;
   margin-left: 0.5rem;
   font-size: 18px;
 `

diff --git a/packages/dm-core-plugins/src/header/components/AppSelector.tsx b/packages/dm-core-plugins/src/header/components/AppSelector.tsx
@@ -1,6 +1,6 @@
 import { Icon, Popover, Typography } from '@equinor/eds-core-react'
 import { chevron_down, chevron_up } from '@equinor/eds-icons'
-import React, { useState, useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import styled from 'styled-components'
 
 export const MenuButton = styled.button<{ $active: boolean }>`
@@ -56,7 +56,7 @@ export const AppSelector = ({
         onClick={() => setAppSelectorOpen(!appSelectorOpen)}
         aria-label="AppSelector"
       >
-        <span className="text-xs font-bold self-center">{currentItem}</span>
+        <span className="text-base font-bold self-center">{currentItem}</span>
         <Icon
           className="mt-0.5"
           data={appSelectorOpen ? chevron_up : chevron_down}

diff --git a/packages/dm-core/src/components/MediaContent.tsx b/packages/dm-core/src/components/MediaContent.tsx
@@ -33,16 +33,6 @@ const MetaPopoverButton = styled(Button)`
   color: #595959;
 `
 
-const MetaWrapper = styled.div`
-  width: 100%;
-  display: grid;
-  grid-template-columns: 0.6fr 1fr;
-
-  .meta-label {
-    font-weight: bold;
-  }
-`
-
 export const MediaContent = (props: MediaContentProps): ReactElement => {
   const { blobUrl, meta, height, width } = props
   const [showMeta, setShowMeta] = useState(false)
@@ -70,7 +60,8 @@ export const MediaContent = (props: MediaContentProps): ReactElement => {
       return (
         <iframe
           src={blobUrl}
-          style={{ width: '100%', height: 'auto' }}
+          height={height ?? 500}
+          width={width ?? 600}
           role="document"
         />
       )
@@ -103,27 +94,21 @@ export const MediaContent = (props: MediaContentProps): ReactElement => {
           <Popover.Title>Meta</Popover.Title>
         </Popover.Header>
         <Popover.Content>
-          <MetaWrapper>
-            <label className="meta-label">File name:</label>
+          <div className="w-full grid grid-cols-2">
+            <label className="font-bold">File name:</label>
             <span> {meta.title}</span>
-            <label className="meta-label">Author:</label>
+            <label className="font-bold">Author:</label>
             <span> {meta.author}</span>
-            <label className="meta-label">Date:</label>
+            <label className="font-bold">Date:</label>
             <span> {new Date(meta.date).toLocaleDateString()} </span>
-            <label className="meta-label">Filetype:</label>
+            <label className="font-bold">Filetype:</label>
             <span> {meta.filetype}</span>
-            <label className="meta-label">Filesize:</label>
+            <label className="font-bold">Filesize:</label>
             <span> {formatBytes(meta.fileSize)}</span>
-          </MetaWrapper>
+          </div>
         </Popover.Content>
         <Popover.Actions>
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'flex-start',
-              width: '100%',
-            }}
-          >
+          <div className="flex justify-start w-full">
             <Button
               variant="ghost"
               as="a"