Fix styles

2019-06-29 08:19:31 +01:00 · 2019-06-29 08:19:31 +01:00 · 4a00bf85bf
parent 433c864922
commit 4a00bf85bf
7 changed files with 149 additions and 106 deletions
--- a/src/common/components/DappListItem/DappListItem.module.scss
+++ b/src/common/components/DappListItem/DappListItem.module.scss
@ -3,6 +3,7 @@
 .dappListItem {
  transition-property: opacity;
  transition-duration: 1s;
+  width: calculateRem(330);
 }

 .dappListItem.transparent {
@ -13,8 +14,7 @@
  font-family: $font;
  background: $background;
  display: flex;
-  height: calculateRem(145);
-  margin: 0 calculateRem(16) calculateRem(11) calculateRem(16);
+  margin: 0 calculateRem(16) 0 calculateRem(16);
  position: relative;
 }

@ -22,8 +22,7 @@
  font-family: $font;
  background: $background;
  display: flex;
-  margin: 0 0 calculateRem(11) 0.5rem;
-  height: calculateRem(145);
+  margin: 0 0 0 0.5rem;
  position: relative;
 }

@ -77,7 +76,7 @@

 .position {
  flex: 0 0 auto;
-  margin-top: calculateRem(20);
+  margin-top: calculateRem(30);
  margin-right: calculateRem(16);
  font-size: calculateRem(13);
 }
@ -105,6 +104,8 @@
  color: $link-color;
  font-weight: 600;
  text-decoration: none;
+  letter-spacing: 0.3;
+  font-family: $font;
  // width: calculateRem(80);
  display: inline-block;
  cursor: pointer;
@ -125,7 +126,7 @@
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
-  margin-top: auto;
+  margin-top: calculateRem(6);

  .voteTriggers {
    display: inherit;
--- a/src/modules/HighestRanked/HighestRanked.module.scss
+++ b/src/modules/HighestRanked/HighestRanked.module.scss
@ -9,16 +9,17 @@

 .grid {
  display: grid;
-  grid-auto-flow: row;
-  grid-auto-columns: calc(90%);
-  grid-template-rows: 1fr;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(3, 1fr);
+  grid-gap: calculateRem(20);
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  @media (min-width: $desktop) {
    // grid-auto-flow: row;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: unset;
    overflow-x: hidden;
  }

--- a/src/modules/Profile/Profile.jsx
+++ b/src/modules/Profile/Profile.jsx
@ -32,14 +32,20 @@ const ProfileContent = ({
        </div>
        <div className={styles.information}>
          <h4 className={styles.header}>{name}</h4>
-          <span className={styles.category}>{category}</span>
+          <span className={styles.category}>
+            {category.charAt(0).toUpperCase() +
+              category
+                .slice(1)
+                .toLowerCase()
+                .replace('_', ' ')}
+          </span>
          <a href={url} target="_blank" className={styles.button}>
            Open
          </a>
        </div>
        <div className={styles.description}>
          <span className={styles.heading}>Description</span>
-          <p>{desc}</p>
+          <span className="wrapper">{desc || 'None available'}</span>
        </div>
        <div className={styles.chat}>
          <ReactImageFallback
@ -55,12 +61,12 @@ const ProfileContent = ({
        </div>
        <div className={styles.url}>
          <span className={styles.heading}>URL</span>
-          <p>
+          <span className="wrapper">
            <a href={url}>
              {url}
              &nbsp;&rarr;
            </a>
-          </p>
+          </span>
        </div>
        <div className={styles.ranking}>
          <span className={styles.heading}>Ranking</span>
@ -87,7 +93,7 @@ const ProfileContent = ({
            </span>
          </div>
        </div>
-        {editable  &&  (
+        {editable && (
          <div className={styles.actions}>
            <div className={styles.button} onClick={onClickUpdateMetadata}>
              Edit metadata
--- a/src/modules/Profile/Profile.module.scss
+++ b/src/modules/Profile/Profile.module.scss
@ -21,7 +21,6 @@ a {

 .banner {
  height: calculateRem(140);
-  background-color: $blue-bg;
  display: flex;
  justify-content: center;
 }
@ -38,7 +37,7 @@ a {

 .header {
  color: $headline-color;
-  font-size: calculateRem(15);
+  font-size: calculateRem(22);
  line-height: calculateRem(22);
  margin-bottom: calculateRem(4);
  margin-top: calculateRem(12);
@ -72,13 +71,20 @@ a {
  border-radius: 20px;
  background-color: #4360df;
  color: #ffffff;
-  padding: calculateRem(12) calculateRem(20);
+  margin: calculateRem(16) 0 calculateRem(24) 0;
+  padding: calculateRem(12) calculateRem(32);
 }

 .description {
  border-bottom: 1px solid #eef2f5;
  box-shadow: inset 0px 1px 0px #eef2f5;
  padding: calculateRem(10) calculateRem(20);
+  display: flex;
+  flex-direction: column;
+}
+
+.wrapper {
+  margin-top: calculateRem(8);
 }

 .chat {
@ -97,8 +103,7 @@ a {
 }

 .chat_link {
-  margin: calculateRem(10);
-  margin-top: calculateRem(25);
+  margin: calculateRem(25) calculateRem(10) 0;
 }

 .chat_icon {
@ -110,6 +115,8 @@ a {
  border-bottom: 1px solid #eef2f5;
  box-shadow: inset 0px 1px 0px #eef2f5;
  padding: calculateRem(10) calculateRem(20);
+  display: flex;
+  flex-direction: column;
 }

 .ranking {
--- a/src/modules/RecentlyAdded/RecentlyAdded.module.scss
+++ b/src/modules/RecentlyAdded/RecentlyAdded.module.scss
@ -9,16 +9,17 @@

 .grid {
  display: grid;
-  grid-auto-flow: row;
-  grid-auto-columns: calc(90%);
-  grid-template-rows: 1fr;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(2, 1fr);
+  grid-gap: calculateRem(20);
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  @media (min-width: $desktop) {
    // grid-auto-flow: row;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: unset;
    overflow-x: hidden;
  }

--- a/src/modules/Vote/Vote.jsx
+++ b/src/modules/Vote/Vote.jsx
@ -122,80 +122,85 @@ class Vote extends Component {
                ↓ DOWNVOTE
              </button>
            </div>
-            <div className={styles.dapp}>
-              <ReactImageFallback
-                className={styles.image}
-                src={dapp.image}
-                fallbackImage={icon}
-                alt="App icon"
-                width={24}
-                height={24}
-              />
-              {dapp.name}
-            </div>
-            <div className={styles.items}>
-              <div className={styles.itemRow}>
-                <span className={styles.item}>
-                  <img src={sntIcon} alt="SNT" width="24" height="24" />
-                  {currentSNTamount.toLocaleString()}
-                </span>
-                {isUpvote && afterVoteRating !== null && afterVoteRating > 0 && (
-                  <span className={styles.greenBadge}>
-                    {`${(afterVoteRating).toLocaleString()} ↑`}
-                  </span>
-                )}
-                {!isUpvote && afterVoteRating !== null && afterVoteRating > 0 && (
-                  <span className={styles.redBadge}>
-                    {`${(afterVoteRating).toLocaleString()} ↓`}
-                  </span>
-                )}
-              </div>
-              <div className={styles.itemRow}>
-                <span className={styles.item}>
-                  <img
-                    src={CategoriesUtils(dapp.category)}
-                    alt={getCategoryName(dapp.category)}
-                    width="24"
-                    height="24"
-                  />
-                  {`${getCategoryName(dapp.category)} №${catPosition}`}
-                </span>
-                {isUpvote &&
-                  afterVoteCategoryPosition !== null &&
-                  afterVoteCategoryPosition !== catPosition && (
-                    <span className={styles.greenBadge}>
-                      {`№${afterVoteCategoryPosition} ↑`}
-                    </span>
-                  )}
-                {!isUpvote &&
-                  afterVoteCategoryPosition !== null &&
-                  afterVoteCategoryPosition !== catPosition && (
-                    <span className={styles.redBadge}>
-                      {`№${afterVoteCategoryPosition} ↓`}
-                    </span>
-                  )}
-              </div>
-            </div>
-            {!isUpvote && (
-              <div
-                className={styles.inputArea}
-                // style={{ opacity: sntValue !== '0' ? 1 : 0 }}
-              >
-                <span>{sntValue}</span>
-              </div>
-            )}
-            {isUpvote && (
-              <div className={`${styles.inputArea} ${styles.inputAreaBorder}`}>
-                <input
-                  type="text"
-                  value={sntValue}
-                  onChange={this.handleChange}
-                  style={{ width: `${21 * Math.max(1, sntValue.length)}px` }}
+            <div className={styles.content}>
+              <div className={styles.dapp}>
+                <ReactImageFallback
+                  className={styles.image}
+                  src={dapp.image}
+                  fallbackImage={icon}
+                  alt="App icon"
+                  width={24}
+                  height={24}
                />
+                {dapp.name}
              </div>
-            )}
-
-            <div className={styles.footer}>
+              <div className={styles.items}>
+                <div className={styles.itemRow}>
+                  <span className={styles.item}>
+                    <img src={sntIcon} alt="SNT" width="24" height="24" />
+                    {currentSNTamount.toLocaleString()}
+                  </span>
+                  {isUpvote &&
+                    afterVoteRating !== null &&
+                    afterVoteRating > 0 && (
+                      <span className={styles.greenBadge}>
+                        {`${afterVoteRating.toLocaleString()} ↑`}
+                      </span>
+                    )}
+                  {!isUpvote &&
+                    afterVoteRating !== null &&
+                    afterVoteRating > 0 && (
+                      <span className={styles.redBadge}>
+                        {`${afterVoteRating.toLocaleString()} ↓`}
+                      </span>
+                    )}
+                </div>
+                <div className={styles.itemRow}>
+                  <span className={styles.item}>
+                    <img
+                      src={CategoriesUtils(dapp.category)}
+                      alt={getCategoryName(dapp.category)}
+                      width="24"
+                      height="24"
+                    />
+                    {`${getCategoryName(dapp.category)} №${catPosition}`}
+                  </span>
+                  {isUpvote &&
+                    afterVoteCategoryPosition !== null &&
+                    afterVoteCategoryPosition !== catPosition && (
+                      <span className={styles.greenBadge}>
+                        {`№${afterVoteCategoryPosition} ↑`}
+                      </span>
+                    )}
+                  {!isUpvote &&
+                    afterVoteCategoryPosition !== null &&
+                    afterVoteCategoryPosition !== catPosition && (
+                      <span className={styles.redBadge}>
+                        {`№${afterVoteCategoryPosition} ↓`}
+                      </span>
+                    )}
+                </div>
+              </div>
+              {!isUpvote && (
+                <div
+                  className={styles.inputArea}
+                  // style={{ opacity: sntValue !== '0' ? 1 : 0 }}
+                >
+                  <span>{sntValue}</span>
+                </div>
+              )}
+              {isUpvote && (
+                <div
+                  className={`${styles.inputArea} ${styles.inputAreaBorder}`}
+                >
+                  <input
+                    type="text"
+                    value={sntValue}
+                    onChange={this.handleChange}
+                    style={{ width: `${21 * Math.max(1, sntValue.length)}px` }}
+                  />
+                </div>
+              )}
              {isUpvote && (
                <p className={styles.disclaimer}>
                  SNT you spend to upvote is locked in the contract and
@ -211,6 +216,9 @@ class Vote extends Component {
                  <a onClick={onClickLearnMoreDownVote}>Learn more↗</a>
                </p>
              )}
+            </div>
+
+            <div className={styles.footer}>
              <button
                type="submit"
                disabled={(!sntValue || sntValue === '0') && isUpvote}
--- a/src/modules/Vote/Vote.module.scss
+++ b/src/modules/Vote/Vote.module.scss
@ -28,6 +28,7 @@
  width: 100%;
  border-bottom: 1px solid #eef2f5;
  text-align: center;
+  flex: 0;
 }

 .tabs button {
@ -37,7 +38,8 @@
  border: none;
  text-transform: uppercase;
  font-family: $font;
-  font-size: 13px;
+  font-size: calculateRem(13);
+  font-weight: 500;
  height: calculateRem(40);
  letter-spacing: calculateRem(0.2);
  display: inline-flex;
@ -51,6 +53,11 @@

 .tabs button:first-child {
  margin-right: 32px;
+  color: #44d058;
+}
+
+.tabs button:last-child {
+  color: #ff2d55;
 }

 .tabs button:after {
@ -77,12 +84,17 @@
  border-bottom-color: $link-color;
 }

+.content {
+  flex: 1;
+}
+
 .dapp {
  height: 48px;
  display: flex;
  align-items: center;
  font-family: $font;
-  font-weight: 500;
+  font-size: calculateRem(17);
+  font-weight: 600;
  padding: 0 calculateRem(12);
 }

@ -109,6 +121,8 @@
 .items .item {
  display: flex;
  align-items: center;
+  font-size: calculateRem(15);
+  font-weight: 500;
 }

 .items .item img {
@ -142,7 +156,8 @@
  align-items: center;
  justify-content: center;
  text-align: center;
-  margin: auto;
+  margin-top: calculateRem(24);
+  margin-bottom: calculateRem(26);
 }

 .inputArea.inputAreaBorder {
@ -156,6 +171,7 @@
  font-size: calculateRem(32);
  line-height: calculateRem(28);
  font-family: $font;
+  caret-color: $link-color;
  margin-right: calculateRem(6);
 }

@ -166,7 +182,7 @@
 .inputArea::after {
  transition: all 0.05s ease-in-out;
  content: 'SNT';
-  color: #939ba1;
+  color: #878e94;
  font-size: calculateRem(32);
  line-height: calculateRem(28);
  font-family: $font;
@ -181,16 +197,20 @@

 .footer {
  text-align: center;
+  flex: 0;
+  border-top: 1px solid #eef2f5;
+  height: calculateRem(64);
 }

 .footer button {
  background: $link-color;
-  border-radius: 8px;
+  height: calculateRem(44);
+  border-radius: calculateRem(48);
  color: #fff;
-  margin: calculateRem(10) auto;
  border: none;
  font-family: $font;
-  padding: calculateRem(11) calculateRem(38);
+  padding: calculateRem(1) calculateRem(48);
+  margin: calculateRem(10) calculateRem(120);
  font-size: calculateRem(15);
  cursor: pointer;
 }
@ -200,17 +220,16 @@
  background: $text-color;
 }

-.footer .disclaimer {
+.disclaimer {
  font-size: calculateRem(15);
  color: $text-color;
  line-height: 22px;
  font-family: $font;
  padding: calculateRem(16);
-  border-bottom: 1px solid #eef2f5;
  margin: 0;
 }

-.footer .disclaimer a {
+.disclaimer a {
  text-decoration: none;
  color: $link-color;
  cursor: pointer;