Design Patch 8 (#1316)

* Design patch 8 - Fixing issues & updating menus

ui/scss/component/_button.scss

@@ -29,10 +29,10 @@
     // height:1em;
     margin-top: 1px;
     padding-top: 2px;
-  }
 
-  @media (max-width: $breakpoint-small) {
-    font-size: var(--font-small);
+    @media (max-width: $breakpoint-small) {
+      // font-size: var(--font-small) !important;
+    }
   }
 }
 
@@ -123,7 +123,8 @@ a.button--alt {
   @media (max-width: $breakpoint-small) {
     .button__label {
       div:first-of-type {
-        top: 23% !important;
+        //top: 23% !important;
+        top: 0%;
       }
     }
   }

ui/scss/component/_card.scss

@@ -11,7 +11,7 @@
   margin-bottom: var(--spacing-m);
 
   @media (max-width: $breakpoint-small) {
-    overflow-y: scroll;
+    // overflow-y: scroll;
     height: 100%;
     border-top: 1px solid var(--color-border);
     // background-color:var(--color-background);

ui/scss/component/_channel.scss

@@ -127,6 +127,16 @@ $actions-z-index: 2;
   .media__info-text:first-of-type {
     opacity: 1;
   }
+
+  .MuiAutocomplete-root {
+  }
+  .MuiOutlinedInput-root {
+    background-color: var(--color-input-bg);
+
+    .MuiOutlinedInput-notchedOutline {
+      border: unset !important;
+    }
+  }
 }
 .channel-cover {
   position: relative;
@@ -749,7 +759,6 @@ $actions-z-index: 2;
     }
 
     .claim__menu-button {
-      right: calc(var(--spacing-m) - 8px) !important;
       margin-top: var(--spacing-xxs);
 
       .icon {
@@ -757,6 +766,9 @@ $actions-z-index: 2;
       }
 
       &:hover {
+        background-color: rgba(var(--color-header-button-base), 0.9);
+        border-radius: 50%;
+        outline: 2px solid var(--color-header-background);
         .icon {
           stroke: var(--color-primary);
         }
@@ -780,11 +792,6 @@ $actions-z-index: 2;
 
     @media (max-width: $breakpoint-small) {
       .claim-preview--channel {
-        a:first-of-type {
-          .button__content {
-            align-items: unset;
-          }
-        }
         .claim-preview__actions {
           flex-flow: row;
           .section__actions {

ui/scss/component/_claim-list.scss

@@ -5,7 +5,8 @@
     background-color: rgba(var(--color-header-background-base), 0.6);
 
     .claim__menu-button {
-      margin-right: var(--spacing-m);
+      // margin-right: var(--spacing-m);
+      right: 9px;
     }
 
     .media__thumb {
@@ -24,13 +25,23 @@
   }
 }
 
+.claim__menu-button {
+  .icon {
+    transition: transform 0.2s;
+  }
+}
+
 [aria-expanded='true'].claim__menu-button {
   opacity: 1;
-  background-color: var(--color-header-background);
-  border-radius: var(--border-radius);
+  // background-color: var(--color-header-background);
+  background-color: rgba(var(--color-header-button-base), 0.9);
+  //border-radius: var(--border-radius);
+  border-radius: 50%;
+  outline: 2px solid var(--color-header-background);
 
   .icon {
-    stroke: var(--color-primary);
+    stroke: var(--color-primary) !important;
+    transform: rotate(90deg);
   }
 }
 
@@ -308,7 +319,7 @@
   }
 
   .claim__menu-button {
-    right: -8px !important;
+    // right: -8px !important;
     margin-top: 6px;
 
     &:hover {
@@ -619,6 +630,13 @@
   .claim-preview__actions {
     margin-top: 0px;
   }
+  @media (max-width: $breakpoint-small) {
+    a.button--no-style:first-of-type {
+      .button__content {
+        align-items: unset;
+      }
+    }
+  }
 }
 
 .claim-preview__text {

ui/scss/component/_comments.scss

@@ -89,7 +89,7 @@ $thumbnailWidthSmall: 2rem;
 
 .comment__thumbnail-wrapper {
   flex: 0;
-  margin-top: var(--spacing-xxs);
+  // margin-top: var(--spacing-xxs);
 }
 
 .comment__content {
@@ -189,12 +189,22 @@ $thumbnailWidthSmall: 2rem;
     }
   }
 
+  .menu__button {
+    .icon {
+      transition: transform 0.2s;
+    }
+  }
+
   [aria-expanded='true'].menu__button {
     opacity: 1;
-    background: var(--color-header-background);
-    border-radius: var(--border-radius);
+    // background: var(--color-header-background);
+    background-color: rgba(var(--color-header-button-base), 0.9);
+    // border-radius: var(--border-radius);
+    border-radius: 50%;
+    outline: 2px solid var(--color-header-background);
     .icon {
       stroke: var(--color-primary);
+      transform: rotate(90deg);
     }
   }
 }
@@ -342,7 +352,7 @@ $thumbnailWidthSmall: 2rem;
 .comment__menu-option {
   display: flex;
   align-items: center;
-  padding: var(--spacing-s);
+  padding: var(--spacing-xs) var(--spacing-s) var(--spacing-xs) var(--spacing-s);
   font-size: var(--font-xsmall);
 
   .menu__link {

ui/scss/component/_main.scss

@@ -189,11 +189,6 @@ body {
       margin-top: var(--spacing-xs) !important;
       .claim-preview__wrapper {
         padding: 0 !important;
-        a {
-          .button__content {
-            align-items: unset;
-          }
-        }
         .claim-preview-info {
           margin-top: 2px;
           margin-bottom: -2px;

ui/scss/component/_search.scss

@@ -193,6 +193,12 @@
         top: calc(var(--spacing-m) * -1) !important;
         left: calc(var(--spacing-m) * -1) !important;
       }
+      .claim__menu-button {
+        right: calc(var(--spacing-m) - 8px) !important;
+      }
+      &:hover {
+        background-color: rgba(var(--color-header-background-base), 0.9);
+      }
     }
     .claim-preview__wrapper {
       .claim-preview__repost-author {
@@ -240,7 +246,7 @@
     padding: var(--spacing-m) !important;
 
     .claim__menu-button {
-      right: calc(var(--spacing-m) - 8px) !important;
+      // right: calc(var(--spacing-m) - 8px) !important;
       margin-top: var(--spacing-xxs);
 
       .icon {

ui/scss/component/_textarea-suggestions.scss

@@ -86,7 +86,7 @@
 }
 
 .card__main-actions .commentCreate .MuiOutlinedInput-notchedOutline {
-  border: 1px solid var(--color-border) !important;
+  // border: 1px solid var(--color-border) !important;
   border-radius: var(--border-radius) !important;
 }
 

ui/scss/component/menu-button.scss

@@ -158,8 +158,9 @@ reach-portal {
 .menu__link {
   display: flex;
   align-items: center;
-  padding: var(--spacing-s);
-  padding-right: var(--spacing-l);
+  // padding: var(--spacing-s);
+  // padding-right: var(--spacing-l);
+  padding: var(--spacing-xs) var(--spacing-s) var(--spacing-xs) var(--spacing-s);
   height: var(--button-height);
 
   .icon {

ui/scss/component/section.scss

@@ -197,15 +197,12 @@
     }
 
     button {
-      height: 2rem;
+      // height: 2rem;
+      height: var(--height-button);
       padding: 0px var(--spacing-s);
 
       .button__content {
-        height: unset;
-
-        span {
-          font-size: var(--font-xxsmall);
-        }
+        // height: unset;
       }
     }
 

ui/scss/init/_gui.scss

@@ -116,7 +116,8 @@ ol {
     padding-bottom: var(--spacing-m);
 
     .claim__menu-button {
-      right: -8px;
+      // right: -8px;
+      right: 2px;
     }
   }
 }
@@ -1136,16 +1137,6 @@ img {
   @media (max-width: $breakpoint-small) {
     padding: var(--spacing-s);
     padding-top: 0;
-
-    .card__main-actions {
-      .claim-preview__wrapper {
-        a {
-          .button__content {
-            align-items: unset;
-          }
-        }
-      }
-    }
   }
 }
 
@@ -1223,6 +1214,9 @@ img {
     .claim-link {
       width: 40%;
       margin-top: var(--spacing-xs);
+      @media (max-width: $breakpoint-small) {
+        width: 100%;
+      }
     }
   }
 }

ui/scss/init/_vars.scss

@@ -117,7 +117,7 @@
 
 @media (max-width: $breakpoint-small) {
   :root {
-    --font-body: 0.8rem;
+    // --font-body: 0.8rem;
     --body-scrollbar-width: 0px;
   }
 }