Design patch 2022-04-25 (#1392)

ui/page/settingsStripeAccount/view.jsx

@@ -225,7 +225,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
                     </div>
                     <div className="section__actions">
                       <a href={stripeConnectionUrl}>
-                        <Button button="secondary" label={__('Connect your bank account')} icon={ICONS.FINANCE} />
+                        <Button button="primary" label={__('Connect your bank account')} icon={ICONS.FINANCE} />
                       </a>
                     </div>
                   </div>
@@ -272,7 +272,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
                       </div>
                       <div className="section__actions">
                         <a href={stripeConnectionUrl}>
-                          <Button button="secondary" label={__('Connect your bank account')} icon={ICONS.FINANCE} />
+                          <Button button="primary" label={__('Connect your bank account')} icon={ICONS.FINANCE} />
                         </a>
                       </div>
                     </div>
@@ -282,26 +282,28 @@ class StripeAccountConnection extends React.Component<Props, State> {
             </div>
           }
           // only show additional buttons if its for additional verification or to show transaction page
-          actions={(stillRequiringVerification || accountConfirmed) &&
-            <>
-              {stillRequiringVerification && (
-                <Button
-                  button="primary"
-                  label={__('Complete Verification')}
-                  icon={ICONS.SETTINGS}
-                  navigate={stripeConnectionUrl}
-                  className="stripe__complete-verification-button"
-                />
-              )}
-              {accountConfirmed && (
-                <Button
-                  button="secondary"
-                  label={__('View Transactions')}
-                  icon={ICONS.SETTINGS}
-                  navigate={`/$/${PAGES.WALLET}?fiatType=incoming&tab=fiat-payment-history&currency=fiat`}
-                />
-              )}
-            </>
+          actions={
+            (stillRequiringVerification || accountConfirmed) && (
+              <>
+                {stillRequiringVerification && (
+                  <Button
+                    button="primary"
+                    label={__('Complete Verification')}
+                    icon={ICONS.SETTINGS}
+                    navigate={stripeConnectionUrl}
+                    className="stripe__complete-verification-button"
+                  />
+                )}
+                {accountConfirmed && (
+                  <Button
+                    button="secondary"
+                    label={__('View Transactions')}
+                    icon={ICONS.SETTINGS}
+                    navigate={`/$/${PAGES.WALLET}?fiatType=incoming&tab=fiat-payment-history&currency=fiat`}
+                  />
+                )}
+              </>
+            )
           }
         />
         <br />

ui/scss/component/_button.scss

@@ -699,10 +699,6 @@ svg + .button__label {
   -ms-user-select: none;
   user-select: none;
 
-  .icon {
-    // margin-bottom:-4px;
-  }
-
   &:hover:not(.button-toggle--active) {
     background-color: var(--color-button-toggle-bg-hover) !important;
     .button__label {

ui/scss/component/_claim-list.scss

@@ -1482,13 +1482,8 @@ $claim-preview-progress-bar-height: 5px;
   position: relative;
 
   .tag {
-    background-color: var(--color-primary);
-    color: var(--color-primary-contrast);
-    /*
-    @media (max-width: $breakpoint-xsmall) {
-      display: none;
-    }
-    */
+    background-color: var(--color-header-background);
+    color: var(--color-text);
     font-size: var(--font-xsmall);
 
     @media (max-width: $breakpoint-small) {
@@ -1503,8 +1498,8 @@ $claim-preview-progress-bar-height: 5px;
     }
 
     &:hover {
-      background-color: var(--color-secondary);
-      color: var(--color-secondary-contrast);
+      background-color: var(--color-primary);
+      color: var(--color-primary-contrast);
     }
   }
 

ui/scss/component/_comments.scss

@@ -424,6 +424,27 @@ $thumbnailWidthSmall: 2rem;
   .button__label {
     margin-left: var(--spacing-xs);
   }
+
+  .comment__action:not(.comment__action--active):not(.comment__action--creator-like) {
+    color: rgba(var(--color-text-base), 0.7);
+    &:hover {
+      color: rgba(var(--color-text-base), 1);
+    }
+  }
+  .comment__action--creator-like {
+    span {
+      .icon {
+        stroke: rgba(var(--color-text-base), 0.7);
+      }
+    }
+    &:hover {
+      span {
+        .icon {
+          stroke: rgba(var(--color-text-base), 1);
+        }
+      }
+    }
+  }
 }
 
 .comment__actions--nested {

ui/scss/component/_main.scss

@@ -698,6 +698,10 @@ body {
   margin-top: var(--spacing-m);
   padding: 0 var(--spacing-m);
 
+  .section__actions {
+    margin-left: var(--spacing-s);
+  }
+
   @media (max-width: $breakpoint-small) {
     .section__header--actions {
       .section__actions--inline:last-of-type {

ui/scss/component/_tags.scss

@@ -8,8 +8,6 @@
     margin-left: 0;
     margin-bottom: var(--spacing-s);
     margin-right: var(--spacing-s);
-    //color:var(--color-primary-contrast);
-    //background-color:var(--color-primary);
     color: var(--color-text);
     background-color: var(--color-header-background);
 
@@ -49,7 +47,7 @@
   // Nested style needed for more specificity
   .tag__input {
     @extend .tag--remove;
-    height: var(--tag-height);
+    height: var(--input-height);
     padding: calc(var(--spacing-xxs) + 1px) var(--spacing-s);
     background-color: var(--color-input-bg);
     margin-bottom: var(--spacing-m);
@@ -59,6 +57,7 @@
 .tag {
   @extend .badge;
   @extend .badge--tag;
+  font-size: var(--font-xsmall);
 }
 
 .tag--remove {

ui/scss/themes/dark.scss

@@ -61,9 +61,9 @@
   --color-button-alt-bg-hover: rgba(var(--color-header-background-base), 0.5);
   --color-button-alt-text-hover: var(--color-text);
 
-  --color-button-toggle-bg: rgba(var(--color-header-background-base), 0.4);
-  --color-button-toggle-text: rgba(var(--color-text-base), 0.8);
-  --color-button-toggle-bg-hover: rgba(var(--color-header-background-base), 0.7);
+  --color-button-toggle-bg: rgba(var(--color-header-background-base), 0.5);
+  --color-button-toggle-text: rgba(var(--color-text-base), 1);
+  --color-button-toggle-bg-hover: rgba(var(--color-header-background-base), 0.9);
   --color-button-toggle-text-hover: var(--color-text);
   --color-button-toggle-bg-active: rgba(var(--color-header-background-base), 1);
   --color-button-toggle-text-active: var(--color-text);

ui/scss/themes/light.scss

@@ -69,8 +69,8 @@
   --color-button-alt-bg-hover: rgba(var(--color-header-background-base), 0.5);
   --color-button-alt-text-hover: var(--color-text);
 
-  --color-button-toggle-bg: rgba(var(--color-header-background-base), 0.4);
-  --color-button-toggle-text: rgba(var(--color-text-base), 0.8);
+  --color-button-toggle-bg: rgba(var(--color-header-background-base), 0.5);
+  --color-button-toggle-text: rgba(var(--color-text-base), 1);
   --color-button-toggle-bg-hover: rgba(var(--color-header-background-base), 0.9);
   --color-button-toggle-text-hover: var(--color-text);
   --color-button-toggle-bg-active: rgba(var(--color-header-background-base), 1);