Merge pull request #1629 from lbryio/redesign-css

Redesign css changes

package.json

@@ -48,7 +48,7 @@
     "formik": "^0.10.4",
     "hast-util-sanitize": "^1.1.2",
     "keytar": "^4.2.1",
-    "lbry-redux": "lbryio/lbry-redux#1739929ecf0eb9eca9ba9cc64fd5b5f2e59c4978",
+    "lbry-redux": "lbryio/lbry-redux#be7a07302aab0c5fc40f8c76cff524c7bce327a2",
     "localforage": "^1.7.1",
     "mixpanel-browser": "^2.17.1",
     "moment": "^2.22.0",

src/renderer/modal/modalCreditIntro/view.jsx

@@ -14,7 +14,7 @@ type Props = {
 
 const ModalCreditIntro = (props: Props) => {
   const { closeModal, totalRewardValue, currentBalance, addBalance } = props;
-  const totalRewardRounded = Math.round(totalRewardValue / 10) * 10;
+  const totalRewardRounded = Math.floor(totalRewardValue / 10) * 10;
 
   return (
     <Modal type="custom" isOpen contentLabel="Welcome to LBRY">

src/renderer/scss/_vars.scss

@@ -5,7 +5,7 @@ $spacing-vertical: 24px;
 $spacing-width: 36px;
 
 $medium-breakpoint: 1280px;
-$large-breakpoint: 1760px;
+$large-breakpoint: 1921px;
 
 :root {
   /* Widths & spacings */
@@ -146,14 +146,15 @@ $large-breakpoint: 1760px;
   --card-bg: var(--color-white);
   --card-text-color: var(--color-grey-dark);
   --card-radius: 2px;
+  --card-max-width: 1000px;
   --card-wallet-color: var(--text-color-inverse);
   --success-msg-color: var(--color-green);
   --success-msg-border: var(--color-green-blue);
   --success-msg-bg: var(--color-green-light);
 
   /* File Tile Card */
-  --file-tile--media-height: 100px;
-  --file-tile--media-width: calc(100px * (1 + 9 / 16));
+  --file-tile--media-height: 125px;
+  --file-tile--media-width: calc(125px * (16 / 9));
 
   /* Modal */
   --modal-width: 440px;

src/renderer/scss/component/_button.scss

@@ -153,7 +153,7 @@ button:disabled {
 }
 
 .btn--uri-indicator {
-  transition: color var(--animation-duration) var(--animation-duration);
+  transition: color var(--animation-duration) var(--animation-style);
 
   &:hover {
     color: var(--color-light-blue);
@@ -175,13 +175,14 @@ button:disabled {
 
   .btn__label--balance {
     color: var(--text-help-color);
-    &:hover {
-      color: var(--text-color);
-    }
   }
 
   &:hover {
     background-color: transparent;
+
+    .btn__label--balance {
+      color: var(--header-primary-color);
+    }
   }
 }
 

src/renderer/scss/component/_card.scss

@@ -6,6 +6,7 @@
   display: flex;
   position: relative;
   flex-direction: column;
+  max-width: var(--card-max-width);
 }
 
 .card > h1 {
@@ -35,6 +36,11 @@
 
   .channel-name {
     font-size: 12px;
+
+    @media only screen and (min-width: $medium-breakpoint) {
+      font-size: 14px;
+      padding-top: 4px;
+    }
   }
 }
 
@@ -108,6 +114,10 @@
   font-size: 14px;
   line-height: 18px;
   padding-top: 20px;
+
+  @media only screen and (min-width: $medium-breakpoint) {
+    font-size: 16px;
+  }
 }
 
 .card__title--file {
@@ -283,11 +293,15 @@
   align-items: center;
   font-size: 18px;
   line-height: 24px;
+
+  @media only screen and (min-width: $medium-breakpoint) {
+    font-size: 20px;
+  }
 }
 
 .card-row__scroll-btns {
   display: flex;
-  padding-right: $spacing-width - 10px; // page padding - 1/2 width of arrow button
+  padding-right: $spacing-width;
 }
 
 .card-row__scrollhouse {
@@ -299,7 +313,15 @@
     vertical-align: top;
     overflow-y: visible;
     // 31 px to handle to padding between cards
-    width: calc((100% / 4) - 31px);
+    width: calc((100% / 4) - 34px);
+
+    @media only screen and (min-width: $medium-breakpoint) {
+      width: calc((100% / 6) - 29px);
+    }
+
+    @media only screen and (min-width: $large-breakpoint) {
+      width: calc((100% / 8) - 27px);
+    }
   }
 
   .card:not(:first-of-type) {
@@ -323,10 +345,29 @@
     display: inline-block;
     vertical-align: top;
     margin-bottom: 60px;
-    width: calc((100% / 4) - (60px / 4));
 
-    &:not(:nth-child(4n + 1)) {
-      margin-left: 20px;
+    @media only screen and (max-width: $medium-breakpoint) {
+      width: calc((100% / 4) - (60px / 4)); // 60px === 20px margin-right * three cards
+
+      &:not(:nth-child(4n + 1)) {
+        margin-left: 20px;
+      }
+    }
+
+    @media only screen and (min-width: $medium-breakpoint) and (max-width: $large-breakpoint) {
+      width: calc((100% / 6) - (100px / 6));
+
+      &:not(:nth-child(6n + 1)) {
+        margin-left: 20px;
+      }
+    }
+
+    @media only screen and (min-width: $large-breakpoint) {
+      width: calc((100% / 8) - (140px / 8));
+
+      &:not(:nth-child(8n + 1)) {
+        margin-left: 20px;
+      }
     }
   }
 }

yarn.lock

@@ -5564,9 +5564,9 @@ lazy-val@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc"
 
-lbry-redux@lbryio/lbry-redux#1739929ecf0eb9eca9ba9cc64fd5b5f2e59c4978:
+lbry-redux@lbryio/lbry-redux#be7a07302aab0c5fc40f8c76cff524c7bce327a2:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/1739929ecf0eb9eca9ba9cc64fd5b5f2e59c4978"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/be7a07302aab0c5fc40f8c76cff524c7bce327a2"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"