CHANGELOG.md

@@ -9,9 +9,14 @@ Web UI version numbers should always match the corresponding version of LBRY App
 ## [Unreleased]
 ### Added
   * Add setting to automatically purchase low-cost content without a confirmation dialog
+  * New custom styled scrollbar (#574)
   *
 
 ### Changed
+  * Changed the File page to make it clearer how to to open the folder for a file.
+  * Improved tabs styles with a nice animation. (#547)
+  * Display search bar on discover page instead of title and remove duplicated icon.
+  * Minor update for themes.
   * Updated the daemon from 0.16.1 to [0.16.4](https://github.com/lbryio/lbry/releases/tag/v0.16.4) to improve download performance and download issue detection.
   * There is no longer a minimum channel length (#645)
   * Changed the File page to make it clearer how to to open the folder for a file
@@ -23,6 +28,9 @@ Web UI version numbers should always match the corresponding version of LBRY App
   * While editing a publish, the URL will no longer change if you select a new file. (#601)
   * Fixed issues with opening the folder for a file (#606)
   * Be consistent with the step property on credit inputs (#604)
+  * Fixed unresponsive header (#613)
+  * Fixed dark theme issues with text content.
+  * Minor css fixes.
   * Fixed issue when file fails to download (#642)
   * Fixed issue after accessing a video without enough credits (#605)
   * Fixed channel fetching without claims (#634)

ui/dist/index.html

@@ -3,8 +3,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width">
         <title>LBRY</title>
-
-        <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
+        <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700" rel="stylesheet"> 
         <link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
         <link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
         <link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">

ui/dist/themes/dark.css

@@ -27,20 +27,30 @@
     --search-border: 1px solid rgba(0,0,0, 0.25);
 
     /* Tab */
-    --tab-color: #757575;
-    --tab-active-color: #CCC;
+    --tab-color: rgba(255,255,255, 0.5) ;
+    --tab-active-color: rgba(255,255,255, 0.75);
 
     /* Header */
     --header-color: #CCC;
     --header-active-color: #FFF;
-    --header-button-bg: transparent;
+    --header-button-hover-bg: var(--color-bg-alt);
 
     /* Table */
     --table-border: 0;
     --table-item-even: var(--color-bg-alt);
     --table-item-odd: transparent;
 
-    /* Modla */
+    /* Modal */
     --modal-overlay-bg: var(--color-dark-overlay);
     --modal-border: 1px solid rgba(0, 0, 0, 0.25);
+
+    /* Scrollbar */
+    --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
+    --scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.35);
+
+    /* Media */
+    --media-bg: #90A4AE;
+
+    /* Divider */
+    --divider: 1px solid rgba(255, 225, 225, 0.12);
 }

ui/dist/themes/light.css

@@ -1,4 +1,8 @@
 :root {
     /* Colors */
     --color-primary: #155B4A;
+
+    /* search */
+    --search-bg: var(--color-canvas);
+    --search-border: 1px solid rgba(0,0,0,0.15);
 }

ui/js/component/dateTime/view.jsx

@@ -5,6 +5,14 @@ class DateTime extends React.PureComponent {
   static SHOW_TIME = "time";
   static SHOW_BOTH = "both";
 
+  static defaultProps = {
+    formatOptions: {
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+    },
+  };
+
   componentWillMount() {
     this.refreshDate(this.props);
   }
@@ -23,16 +31,18 @@ class DateTime extends React.PureComponent {
   render() {
     const { date, formatOptions } = this.props;
     const show = this.props.show || DateTime.SHOW_BOTH;
+    const locale = app.i18n.getLocale();
 
     return (
       <span>
         {date &&
           (show == DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
-          date.toLocaleDateString()}
+          date.toLocaleDateString([locale, "en-US"], formatOptions)}
         {show == DateTime.SHOW_BOTH && " "}
         {date &&
           (show == DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) &&
           date.toLocaleTimeString()}
+        {!date && "..."}
       </span>
     );
   }

ui/js/component/file-selector.js

@@ -12,6 +12,11 @@ class FileSelector extends React.PureComponent {
     type: "file",
   };
 
+  constructor(props) {
+    super(props);
+    this._inputElem = null;
+  }
+
   componentWillMount() {
     this.setState({
       path: this.props.initPath || null,
@@ -47,16 +52,31 @@ class FileSelector extends React.PureComponent {
       <div className="file-selector">
         <button
           type="button"
-          className="file-selector__choose-button"
+          className="button-block button-alt file-selector__choose-button"
           onClick={() => this.handleButtonClick()}
         >
+          <span className="button__content">
+            <span className="button-label">
               {this.props.type == "file"
                 ? __("Choose File")
                 : __("Choose Directory")}
+            </span>
+          </span>
         </button>
         {" "}
         <span className="file-selector__path">
-          {this.state.path ? this.state.path : __("No File Chosen")}
+          <input
+            className="input-copyable"
+            type="text"
+            ref={input => {
+              this._inputElem = input;
+            }}
+            onFocus={() => {
+              this._inputElem.select();
+            }}
+            readOnly="readonly"
+            value={this.state.path || __("No File Chosen")}
+          />
         </span>
       </div>
     );

ui/js/component/fileActions/view.jsx

@@ -12,30 +12,40 @@ class FileActions extends React.PureComponent {
 
     return (
       <section className="card__actions">
-        {claimIsMine &&
-          <Link
-            button="text"
-            icon="icon-edit"
-            label={__("Edit")}
-            navigate="/publish"
-            navigateParams={{ id: claimId }}
-          />}
         <FileDownloadLink uri={uri} />
-        <Link
-          button="text"
-          icon="icon-gift"
-          label={__("Support")}
-          navigate="/show"
-          navigateParams={{ uri, tab: "tip" }}
-        />
         {showDelete &&
           <Link
             button="text"
             icon="icon-trash"
             label={__("Remove")}
-            className="card__action--right"
+            className="no-underline"
             onClick={() => openModal(modals.CONFIRM_FILE_REMOVE, { uri })}
           />}
+        {!claimIsMine &&
+          <Link
+            button="text"
+            icon="icon-flag"
+            href={`https://lbry.io/dmca?claim_id=${claimId}`}
+            className="no-underline"
+            label={__("report")}
+          />}
+        <Link
+          button="primary"
+          icon="icon-gift"
+          label={__("Support")}
+          navigate="/show"
+          className="card__action--right"
+          navigateParams={{ uri, tab: "tip" }}
+        />
+        {claimIsMine &&
+          <Link
+            button="alt"
+            icon="icon-edit"
+            label={__("Edit")}
+            navigate="/publish"
+            className="card__action--right"
+            navigateParams={{ id: claimId }}
+          />}
       </section>
     );
   }

ui/js/component/fileCard/view.jsx

@@ -105,9 +105,11 @@ class FileCard extends React.PureComponent {
                 <UriIndicator uri={uri} />
               </div>
             </div>
+            {/* Test for nizuka's design: should we remove description?
             <div className="card__content card__subtext card__subtext--two-lines">
               <TruncatedMarkdown lines={2}>{description}</TruncatedMarkdown>
             </div>
+            */}
           </Link>
         </div>
         {obscureNsfw && this.state.hovered && <NsfwOverlay />}

ui/js/component/fileDetails/view.jsx

@@ -27,7 +27,6 @@ class FileDetails extends React.PureComponent {
     }
 
     const { description, language, license } = metadata;
-    const { height } = claim;
     const mediaType = lbry.getMediaType(contentType);
 
     const downloadPath = fileInfo
@@ -36,7 +35,9 @@ class FileDetails extends React.PureComponent {
 
     return (
       <div>
+        <div className="divider__horizontal" />
         <FileActions uri={uri} />
+        <div className="divider__horizontal" />
         <div className="card__content card__subtext card__subtext--allow-newlines">
           <ReactMarkdown
             source={description || ""}
@@ -47,10 +48,6 @@ class FileDetails extends React.PureComponent {
         <div className="card__content">
           <table className="table-standard table-stretch">
             <tbody>
-              <tr>
-                <td>{__("Published on")}</td>
-                <td><DateTime block={height} /></td>
-              </tr>
               <tr>
                 <td>{__("Content-Type")}</td><td>{mediaType}</td>
               </tr>
@@ -71,12 +68,6 @@ class FileDetails extends React.PureComponent {
                 </tr>}
             </tbody>
           </table>
-          <p>
-            <Link
-              href={`https://lbry.io/dmca?claim_id=${claim.claim_id}`}
-              label={__("report")}
-            />
-          </p>
         </div>
       </div>
     );

ui/js/component/fileDownloadLink/view.jsx

@@ -80,6 +80,7 @@ class FileDownloadLink extends React.PureComponent {
             button="text"
             label={__("Download")}
             icon="icon-download"
+            className="no-underline"
             onClick={() => {
               purchaseUri(uri);
             }}
@@ -92,6 +93,7 @@ class FileDownloadLink extends React.PureComponent {
           label={__("Open")}
           button="text"
           icon="icon-external-link-square"
+          className="no-underline"
           onClick={() => openInShell(fileInfo.download_path)}
         />
       );

ui/js/component/fileTile/view.jsx

@@ -126,14 +126,14 @@ class FileTile extends React.PureComponent {
                   {" "}
                   {showLocal && fileInfo && <Icon icon={icons.LOCAL} />}
                 </span>
-                <div className="meta">{uri}</div>
                 <h3>
                   <TruncatedText lines={1}>{title}</TruncatedText>
                 </h3>
+                <span className="file-tile__uri">{uri}</span>
               </div>
               {description &&
                 <div className="card__content card__subtext">
-                  <TruncatedText lines={!showActions ? 4 : 2}>
+                  <TruncatedText lines={!showActions ? 3 : 2}>
                     {description}
                   </TruncatedText>
                 </div>}

ui/js/component/header/view.jsx

@@ -47,6 +47,7 @@ export const Header = props => {
         <Link
           onClick={() => navigate("/wallet")}
           button="text"
+          className="no-underline"
           icon="icon-bank"
           label={balance}
           title={__("Wallet")}

ui/js/component/rewardSummary/view.jsx

@@ -18,9 +18,8 @@ const RewardSummary = props => {
             unclaimed rewards.
           </p>}
       </div>
-      <div className="card__actions card__actions--bottom">
-        <Link button="text" navigate="/rewards" label={__("Rewards")} />
-        <Link button="text" navigate="/invite" label={__("Invites")} />
+      <div className="card__actions">
+        <Link button="alt" navigate="/rewards" label={__("Learn more")} />
       </div>
     </section>
   );

ui/js/component/rewardTile/view.jsx

@@ -17,7 +17,7 @@ const RewardTile = props => {
           <h3>{reward.reward_title}</h3>
         </div>
         <div className="card__content">{reward.reward_description}</div>
-        <div className="card__actions card__actions--bottom ">
+        <div className="card__actions  ">
           {reward.reward_type == rewards.TYPE_REFERRAL &&
             <Link
               button="alt"

ui/js/component/transactionList/internal/TransactionListItem.jsx

@@ -18,12 +18,22 @@ class TransactionListItem extends React.PureComponent {
       type,
     } = transaction;
 
+    const dateFormat = {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    };
+
     return (
       <tr>
         <td>
           {date
             ? <div>
-                <DateTime date={date} show={DateTime.SHOW_DATE} />
+                <DateTime
+                  date={date}
+                  show={DateTime.SHOW_DATE}
+                  formatOptions={dateFormat}
+                />
                 <div className="meta">
                   <DateTime date={date} show={DateTime.SHOW_TIME} />
                 </div>

ui/js/component/uriIndicator/view.jsx

@@ -75,7 +75,11 @@ class UriIndicator extends React.PureComponent {
     }
 
     return (
-      <Link navigate="/show" navigateParams={{ uri: channelLink }}>
+      <Link
+        navigate="/show"
+        navigateParams={{ uri: channelLink }}
+        className="no-underline"
+      >
         {inner}
       </Link>
     );

ui/js/component/video/internal/player.jsx

@@ -176,7 +176,7 @@ class VideoPlayer extends React.PureComponent {
           <LoadingScreen status={noMetadataMessage} />}
         {unplayable &&
           <LoadingScreen status={unplayableMessage} spinner={false} />}
-        <div ref="media" />
+        <div ref="media" className="media" />
       </div>
     );
   }

ui/js/component/walletBalance/view.jsx

@@ -21,19 +21,12 @@ const WalletBalance = props => {
         {(balance || balance === 0) &&
           <CreditAmount amount={balance} precision={8} />}
       </div>
-      <div className="card__actions card__actions--bottom">
+      <div className="card__actions">
         <Link
-          button="text"
-          navigate="/send"
-          disabled={balance === 0}
-          label={__("Send")}
-        />
-        <Link button="text" navigate="/receive" label={__("Receive")} />
-        <Link
-          button="text"
+          button="primary"
           disabled={balance === 0}
           navigate="/backup"
-          label={__("Backup")}
+          label={__("Backup wallet")}
         />
       </div>
     </section>

ui/js/constants/icons.js

@@ -1,2 +1,3 @@
 export const FEATURED = "rocket";
 export const LOCAL = "folder";
+export const FILE = "file";

ui/js/page/file/view.jsx

@@ -52,6 +52,7 @@ class FilePage extends React.PureComponent {
       );
     }
 
+    const { height } = claim;
     const title = metadata.title;
     const isRewardContent = rewardedContentClaimIds.includes(claim.claim_id);
     const mediaType = lbry.getMediaType(contentType);
@@ -62,15 +63,14 @@ class FilePage extends React.PureComponent {
       mediaType === "audio";
 
     return (
-      <div>
-        <section className="show-page-media">
+      <section className={"card " + (obscureNsfw ? "card--obscured " : "")}>
+        <div className="show-page-media">
           {isPlayable
             ? <Video className="video-embedded" uri={uri} />
             : metadata && metadata.thumbnail
               ? <Thumbnail src={metadata.thumbnail} />
               : <Thumbnail />}
-        </section>
-        <section className={"card " + (obscureNsfw ? "card--obscured " : "")}>
+        </div>
         <div className="card__inner">
           {(!tab || tab === "details") &&
             <div>
@@ -86,6 +86,11 @@ class FilePage extends React.PureComponent {
                 <h1>{title}</h1>
                 <div className="card__subtitle">
                   <UriIndicator uri={uri} link={true} />
+                  <span className="divider__vertical">&bull;</span>
+                  <span>
+                    Published on{" "}
+                    <DateTime block={height} show={DateTime.SHOW_DATE} />
+                  </span>
                 </div>
               </div>
               <FileDetails uri={uri} />
@@ -94,7 +99,6 @@ class FilePage extends React.PureComponent {
             <WalletSendTip claim_id={claim.claim_id} uri={uri} />}
         </div>
       </section>
-      </div>
     );
   }
 }

ui/js/selectors/navigation.js

@@ -95,10 +95,6 @@ export const selectPageTitle = createSelector(
         return __("Help");
       case "developer":
         return __("Developer");
-      case "search":
-        return params.query
-          ? __("Search results for %s", params.query)
-          : __("Search");
       case "show": {
         const parts = [lbryuri.normalize(params.uri)];
         // If the params has any keys other than "uri"
@@ -111,8 +107,11 @@ export const selectPageTitle = createSelector(
         return __("Downloads & Purchases");
       case "published":
         return __("Publishes");
+      case "search":
+        return params.query
+          ? __("Search results for %s", params.query)
+          : __("Search");
       case "discover":  
-        return __("Home");
       case false:
       case null:
       case "":

ui/js/selectors/search.js

@@ -48,8 +48,6 @@ export const selectWunderBarIcon = createSelector(
     switch (page) {
       case "auth":
         return "icon-user";
-      case "search":
-        return "icon-search";
       case "settings":
         return "icon-gear";
       case "help":
@@ -81,7 +79,8 @@ export const selectWunderBarIcon = createSelector(
       case "developer":
         return "icon-code";
       case "discover":
-        return "icon-home";
+      case "search":
+        return "icon-search";
       default:
         return "icon-file";
     }

ui/scss/_gui.scss

@@ -7,7 +7,7 @@ html
 body
 {
   color: var(--text-color);
-  font-family: 'Source Sans Pro', sans-serif;
+  font-family: 'Roboto', sans-serif;
   line-height: var(--font-line-height);
 }
 
@@ -25,7 +25,7 @@ body
 
 .credit-amount--indicator
 {
-  font-weight: bold;
+  font-weight: 500;
   color: var(--color-money);
 }
 .credit-amount--fee
@@ -36,10 +36,16 @@ body
 
 #main-content
 {
-  padding: $spacing-vertical;
-  margin-top: var(--header-height);
+  margin: auto;
   display: flex;
   flex-direction: column;
+  overflow: overlay;
+  padding: $spacing-vertical;
+  position: absolute;
+  top: var(--header-height);
+  bottom: 0;
+  left: 4px;
+  right: 4px;
   main {
     margin-left: auto;
     margin-right: auto;

ui/scss/_vars.scss

@@ -24,7 +24,6 @@ $text-color: #000;
   --color-bg: #ffffff;
   --color-bg-alt: #D9D9D9;
 
-
   /* Misc */
   --content-max-width: 1000px;
   --nsfw-blur-intensity: 20px;
@@ -36,7 +35,7 @@ $text-color: #000;
   --font-size-subtext-multiple: 0.82;
 
   /* Shadows */
-  --box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+  --box-shadow-layer: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   --box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
 
   /* Transition */
@@ -74,24 +73,27 @@ $text-color: #000;
   --button-padding: $spacing-vertical * 2/3;
   --button-height: $spacing-vertical * 1.5;
   --button-intra-margin: $spacing-vertical;
+  --button-radius: 3px;
 
   /* Header */
   --header-bg: var(--color-bg);
   --header-color: #666;
   --header-active-color: rgba(0,0,0, 0.85);
   --header-height: $spacing-vertical * 2.5;
-  --header-button-bg: var(--button-bg);
+  --header-button-bg: transparent; //var(--button-bg);
+  --header-button-hover-bg: rgba(100, 100, 100, 0.15);
 
   /* Header -> search */
   --search-bg: rgba(255, 255, 255, 0.7);
   --search-border:1px solid #ccc;
   --search-color: #666;
   --search-active-color: var(--header-active-color);
+  --search-active-shadow: 0 0 3px 0px var(--text-selection-bg);
 
   /* Tabs */
   --tab-bg: transparent;
-  --tab-color: #666;
-  --tab-active-color: var(--header-active-color);
+  --tab-color: rgba(0, 0, 0, 0.5);
+  --tab-active-color: var(--color-primary);
   --tab-border-size: 2px;
   --tab-border: var(--tab-border-size) solid var(--tab-active-color);
 
@@ -125,4 +127,22 @@ $text-color: #000;
   --tooltip-bg: var(--color-bg);
   --tooltip-color: var(--text-color);
   --tooltip-border: 1px solid #aaa;
+
+  /* Scrollbar */
+  --scrollbar-radius: 10px;
+  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.20);
+  --scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.35);
+  --scrollbar-thumb-active-bg: var(--color-primary);
+  --scrollbar-track-bg: transparent;
+
+  /* Media */
+  --media-bg: #FFF;
+
+  /* Divider */
+  --divider: 1px solid rgba(0, 0, 0, 0.12);
+
+  /* Animation :) */
+  --animation-duration: 0.3s;
+  --animation-style: cubic-bezier(.55,0,.1,1);
+
 }

ui/scss/all.scss

@@ -21,4 +21,8 @@
 @import "component/_video.scss";
 @import "component/_pagination.scss";
 @import "component/_markdown-editor.scss";
+@import "component/_scrollbar.scss";
+@import "component/_tabs.scss";
+@import "component/_media.scss";
+@import "component/_divider.scss";
 @import "page/_show.scss";

ui/scss/component/__divider.scss

@@ -0,0 +1,8 @@
+.divider__horizontal {
+  border-top: var(--divider);
+  margin: 16px 0;
+}
+
+.divider__vertical {
+  margin: 10px;
+}

ui/scss/component/_button.scss

@@ -20,7 +20,7 @@ $button-focus-shift: 12%;
   text-decoration: none;
   border: 0 none;
   text-align: center;
-  border-radius: 2px;
+  border-radius: var(--button-radius);
   text-transform: uppercase;
   .icon
   {
@@ -43,10 +43,17 @@ $button-focus-shift: 12%;
 .button-block
 {
   cursor: pointer;
+  font-weight: 500;
+  font-size: 14px;
+  transition: background var(--animation-duration) var(--animation-style);
 }
 
 .button__content {
   margin: 0 var(--button-padding);
+  display: flex;
+  .link-label {
+    text-decoration: none !important;
+  }
 }
 
 .button-primary
@@ -89,6 +96,5 @@ $button-focus-shift: 12%;
 
 .button--submit {
     font-family: inherit;
-    font-size: inherit;
     line-height: 0;
 }

ui/scss/component/_card.scss

@@ -44,8 +44,7 @@
   text-overflow: ellipsis;
 }
 .card__title-identity {
-  margin-top: $spacing-vertical * 1/3;
-  margin-bottom: $spacing-vertical * 1/3;
+  margin: 16px 0;
 }
 .card__actions {
   margin-top: var(--card-margin);
@@ -54,6 +53,7 @@
 .card__actions--bottom {
   margin-top: $spacing-vertical * 1/3;
   margin-bottom: $spacing-vertical * 1/3;
+  border-top: var(--divider);
 }
 .card__actions--form-submit {
   margin-top: $spacing-vertical;
@@ -101,7 +101,7 @@ $font-size-subtext-multiple: 0.82;
   cursor: pointer;
 }
 .card--link {
-  transition: transform 120ms ease-in-out;
+  transition: transform 0.2s  var(--animation-style);
 }
 .card--link:hover {
   position: relative;
@@ -222,7 +222,7 @@ $padding-right-card-hover-hack: 30px;
     display: inline-block;
   }
   > .card + .card {
-    margin-left: $spacing-vertical / 3;
+    margin-left: 16px;
   }
 }
 
@@ -234,7 +234,7 @@ $padding-right-card-hover-hack: 30px;
   margin-right: $spacing-vertical;
 }
 .card-row__header {
-  margin-bottom: $spacing-vertical / 3;
+  margin-bottom: 16px;
 }
 
 .card-row__scrollhouse {
@@ -260,7 +260,7 @@ $padding-right-card-hover-hack: 30px;
   top: 36%;
   z-index: 2;
   opacity: 0.8;
-  transition: transform 60ms ease-in-out;
+  transition: transform 0.2s var(--animation-style);
 
   &:hover {
     opacity: 1.0;

ui/scss/component/_file-download.scss

@@ -20,13 +20,3 @@
   top: 0px;
   left: 0px;
 }
-
-/*
-
-.file-actions
-{
-  line-height: var(--button-height);
-  min-height: var(--button-height);
-}
-
- */

ui/scss/component/_file-selector.scss

@@ -1,5 +1,12 @@
+.file-selector {
+  display: flex;
+}
+
 .file-selector__choose-button {
-  font-size: 13px;
+  font-family: inherit;
+  line-height: 0;
+  color: inherit;
+  margin-right: 16px;
 }
 
 .file-selector__path {

ui/scss/component/_file-tile.scss

@@ -1,4 +1,3 @@
-
 $height-file-tile: $spacing-vertical * 6;
 .file-tile__row {
   overflow: hidden;
@@ -16,7 +15,19 @@ $height-file-tile: $spacing-vertical * 6;
     padding-top: $spacing-vertical * 1/3;
     margin-left: $height-file-tile + $spacing-vertical / 2;
   }
+
   .card__title-primary {
     margin-top: 0;
   }
+
+  .file-tile__uri {
+    color: var(--color-primary);
+    font-size: 0.82em;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 85%;
+  }
+
 }

ui/scss/component/_form-field.scss

@@ -36,7 +36,10 @@ input[type="text"].input-copyable {
   padding-left: 5px;
   padding-right: 5px;
   width: 100%;
-  &:focus { border-color: var(--color-primary); }
+  &:focus {
+    border-color: var(--color-primary);
+    background: none !important;
+  }
 }
 
 .form-field {

ui/scss/component/_header.scss

@@ -4,6 +4,8 @@
   color: var(--header-color);
   background: var(--header-bg);
   display: flex;
+  align-items: center;
+  justify-content: space-around;
   position: fixed;
   box-shadow: var(--box-shadow-layer);
   top: 0;
@@ -14,11 +16,14 @@
   box-sizing: border-box;
 }
 .header__item {
-  flex: 0 0 content;
   padding-left: $spacing-vertical / 4;
   padding-right: $spacing-vertical / 4;
   .button-alt {
       background: var(--header-button-bg) !important;
+      font-size: 1em;
+  }
+  .button-alt:hover {
+      background: var(--header-button-hover-bg) !important;
   }
 }
 
@@ -52,42 +57,7 @@
   &:focus {
     background: var(--search-active-bg);
     color: var(--search-active-color);
-    box-shadow: var(--box-shadow-focus);
+    box-shadow: var(--search-active-shadow);
     border-color: var(--color-primary);
   }
 }
-
-nav.sub-header
-{
-  text-transform: uppercase;
-  padding: 0 0 $spacing-vertical;
-  max-width: $width-page-constrained;
-  margin-left: auto;
-  margin-right: auto;
-  > a
-  {
-    display: inline-block;
-    margin: 0 15px;
-    padding: 0 5px;
-    line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size));
-    color: var(--tab-color);
-
-    &:first-child
-    {
-      margin-left: 0;
-    }
-    &:last-child
-    {
-      margin-right: 0;
-    }
-    &.sub-header-selected
-    {
-      border-bottom: var(--tab-border);
-      color: var(--tab-active-color);
-    }
-    &:hover
-    {
-      color: var(--tab-active-color);
-    }
-  }
-}

ui/scss/component/_media.scss

@@ -0,0 +1,5 @@
+.media {
+  /* temp fix for text files
+  background: var(--media-bg);
+  */
+}

ui/scss/component/_scrollbar.scss

@@ -0,0 +1,24 @@
+::-webkit-scrollbar {
+    width: 7px;
+    overflow: auto;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-bg);
+    border-radius: var(--scrollbar-radius);
+    margin: 4px 0;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: var(--scrollbar-radius);
+    background-color: var(--scrollbar-thumb-bg);
+    transition: background-color 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover-bg);
+}
+
+::-webkit-scrollbar-thumb:active {
+    background-color: var(--scrollbar-thumb-active-bg);
+}

ui/scss/component/_table.scss

@@ -7,7 +7,7 @@ table.table-standard {
     padding: $spacing-vertical/2 8px;
   }
   th {
-    font-weight: bold;
+    font-weight: 500;
     font-size: 0.9em;
   }
   td {
@@ -15,7 +15,7 @@ table.table-standard {
   }
   thead th, > tr:first-child th {
     vertical-align: bottom;
-    font-weight: bold;
+    font-weight: 500;
     font-size: 0.9em;
     padding: $spacing-vertical/4+1 8px $spacing-vertical/4-2;
     text-align: left;

ui/scss/component/_tabs.scss

@@ -0,0 +1,57 @@
+/* Tabs */
+
+nav.sub-header
+{
+  text-transform: uppercase;
+  max-width: $width-page-constrained;
+  margin-bottom: 40px;
+  border-bottom: var(--divider);
+  > a
+  {
+    height: 38px;
+    line-height: 38px;
+    text-align: center;
+    font-weight: 500;
+    text-transform: uppercase;
+    display: inline-block;
+    vertical-align: baseline;
+    margin: 0 12px;
+    padding: 0 8px;
+    color: var(--tab-color);
+    position: relative;
+
+    &:first-child
+    {
+      margin-left: 0;
+    }
+    &:last-child
+    {
+      margin-right: 0;
+    }
+    &.sub-header-selected
+    {
+      color: var(--tab-active-color);
+      &:before {
+        width: 100%;
+        height: var(--tab-border-size);
+        background: var(--tab-active-color);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        content: '';
+        animation-name: activeTab;
+        animation-duration: var(--animation-duration);
+        animation-timing-function: var(--animation-style);
+      }
+    }
+    &:hover
+    {
+      color: var(--tab-active-color);
+    }
+  }
+}
+
+@keyframes activeTab {
+    from {width: 0;}
+    to {width: 100%;}
+}

ui/scss/component/_video.scss

@@ -31,9 +31,6 @@ video {
   &.video--hidden {
     height: $height-video-embedded;
   }
-  &.video--active {
-    /*background: none;*/
-  }
 }
 .video--obscured .video__cover
 {

ui/scss/page/_show.scss

@@ -1,6 +1,7 @@
 .show-page-media {
   text-align: center;
-  margin-bottom: $spacing-vertical;
+  margin-bottom: 16px;
+  overflow: auto;
   img {
     max-width: 100%;
   }