From b33f14cca477983a4a4cd10ac404c6f329a0fd81 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 29 Oct 2020 23:47:18 -0400
Subject: [PATCH] make file details smaller

---
 static/app-strings.json           |   1 +
 ui/component/fileDetails/view.jsx | 104 ++++++++++++++++--------------
 ui/scss/component/_media.scss     |  12 ++++
 3 files changed, 68 insertions(+), 49 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 071b3d5b9..570ee0d25 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1480,5 +1480,6 @@
   "Español": "Español",
   "Türkçe": "Türkçe",
   "Česky": "Česky",
+  "LBRY LATAM": "LBRY LATAM",
   "--end--": "--end--"
 }
diff --git a/ui/component/fileDetails/view.jsx b/ui/component/fileDetails/view.jsx
index 92a269a65..2b773259b 100644
--- a/ui/component/fileDetails/view.jsx
+++ b/ui/component/fileDetails/view.jsx
@@ -1,4 +1,5 @@
 // @flow
+import { SIMPLE_SITE } from 'config';
 import React, { PureComponent } from 'react';
 import Button from 'component/button';
 import path from 'path';
@@ -38,58 +39,63 @@ class FileDetails extends PureComponent<Props> {
     }
 
     return (
-      <table className="table table--condensed table--fixed table--file-details">
-        <tbody>
-          <tr>
-            <td> {__('Content Type')}</td>
-            <td>{mediaType}</td>
-          </tr>
-          {fileSize && (
-            <tr>
-              <td> {__('File Size')}</td>
-              <td>{fileSize}</td>
-            </tr>
-          )}
+      <>
+        <div className="media__details">
+          <span>{__('LBRY URL')}</span>
+          <span>{claim.canonical_url}</span>
+        </div>
+        <div className="media__details">
+          <span>{__('Claim ID')}</span>
+          <span>{claim.claim_id}</span>
+        </div>
 
-          <tr>
-            <td> {__('URL')}</td>
-            <td>{claim.canonical_url}</td>
-          </tr>
+        {!SIMPLE_SITE && (
+          <>
+            {languages && (
+              <div className="media__details">
+                <span>{__('Languages')}</span>
+                <span>{languages.join(' ')}</span>
+              </div>
+            )}
 
-          <tr>
-            <td> {__('Claim ID')}</td>
-            <td>{claim.claim_id}</td>
-          </tr>
+            {languages && (
+              <div className="media__details">
+                <span>{__('Media Type')}</span>
+                <span>{mediaType}</span>
+              </div>
+            )}
 
-          {languages && (
-            <tr>
-              <td>{__('Languages')}</td>
-              <td>{languages.join(' ')}</td>
-            </tr>
-          )}
-          <tr>
-            <td>{__('License')}</td>
-            <td>{license}</td>
-          </tr>
-          {downloadPath && (
-            <tr>
-              <td>{__('Downloaded to')}</td>
-              <td>
-                <Button
-                  button="link"
-                  className="button--download-link"
-                  onClick={() => {
-                    if (downloadPath) {
-                      openFolder(downloadPath);
-                    }
-                  }}
-                  label={downloadNote || downloadPath.replace(/(.{10})/g, '$1\u200b')}
-                />
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </table>
+            <div className="media__details">
+              <span>{__('License')}</span>
+              <span>{license}</span>
+            </div>
+
+            {downloadPath && (
+              <div className="media__details">
+                <span>{__('Downloaded to')}</span>
+                <span>
+                  <Button
+                    button="link"
+                    className="button--download-link"
+                    onClick={() => {
+                      if (downloadPath) {
+                        openFolder(downloadPath);
+                      }
+                    }}
+                    label={downloadNote || downloadPath.replace(/(.{10})/g, '$1\u200b')}
+                  />
+                </span>
+              </div>
+            )}
+          </>
+        )}
+
+        {fileSize && (
+          <div className="media__details">
+            <span>{fileSize}</span>
+          </div>
+        )}
+      </>
     );
   }
 }
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index c8afa98ab..a13a9f31a 100644
--- a/ui/scss/component/_media.scss
+++ b/ui/scss/component/_media.scss
@@ -153,3 +153,15 @@
     }
   }
 }
+
+.media__details {
+  @extend .help;
+  font-size: var(--font-xxsmall);
+  display: flex;
+  flex-direction: column;
+  //   margin-top: 0;
+
+  &:first-of-type {
+    // margin-top: var(--spacing-m);
+  }
+}