Are we there yet? Hopefully last release fixes (#2192)

* tweak: more noticeable active states for subscriptions layouts

* fix: error modal styling when expanded

* fix: reward claim modal

src/renderer/component/button/view.jsx

@@ -25,6 +25,7 @@ type Props = {
   iconColor?: string,
   iconSize?: number,
   constrict: ?boolean, // to shorten the button and ellipsis, only use for links
+  selected: ?boolean,
 };
 
 class Button extends React.PureComponent<Props> {
@@ -54,6 +55,7 @@ class Button extends React.PureComponent<Props> {
       iconColor,
       iconSize,
       constrict,
+      selected,
       ...otherProps
     } = this.props;
 
@@ -74,6 +76,7 @@ class Button extends React.PureComponent<Props> {
             'btn--external-link': button === 'link' && href,
             'btn--uppercase': uppercase,
             'btn--constrict': constrict,
+            'btn--selected': selected,
           }
         : 'btn--no-style',
       className

src/renderer/component/rewardLink/view.jsx

@@ -34,13 +34,15 @@ const RewardLink = (props: Props) => {
         // TODO: This should be moved to redux
         <Modal
           isOpen
+          title={__('Error Claiming Reward')}
           contentLabel="Reward Claim Error"
-          className="error-modal"
           onConfirmed={() => {
             clearError(reward);
           }}
         >
-          {errorMessage}
+          <section className="card__content">
+            <div className="error-modal__error-list">{errorMessage}</div>
+          </section>
         </Modal>
       ) : (
         ''

src/renderer/modal/modal.jsx

@@ -123,18 +123,18 @@ export class ExpandableModal extends React.PureComponent<ModalProps, State> {
     return (
       <Modal type="custom" {...this.props}>
         {this.props.children}
-        {this.state.expanded ? this.props.extraContent : null}
-        <div className="modal__buttons">
+        {this.state.expanded ? (
+          <div className="card__content">{this.props.extraContent}</div>
+        ) : null}
+        <div className="card__actions">
           <Button
             button="primary"
             label={this.props.confirmButtonLabel}
-            className="modal__button"
             onClick={this.props.onConfirmed}
           />
           <Button
             button="link"
             label={!this.state.expanded ? this.props.expandButtonLabel : this.props.hideButtonLabel}
-            className="modal__button"
             onClick={() => {
               this.toggleExpanded();
             }}

src/renderer/page/subscriptions/internal/user-subscriptions.jsx

@@ -42,6 +42,7 @@ export default (props: Props) => {
             <div className="card__actions card__actions--no-margin">
               <Button
                 disabled={viewMode === VIEW_ALL}
+                selected={viewMode === VIEW_ALL}
                 button="link"
                 label="All Subscriptions"
                 onClick={() => doSetViewMode(VIEW_ALL)}
@@ -49,6 +50,7 @@ export default (props: Props) => {
               <Button
                 button="link"
                 disabled={viewMode === VIEW_LATEST_FIRST}
+                selected={viewMode === VIEW_LATEST_FIRST}
                 label={__('Latest Only')}
                 onClick={() => doSetViewMode(VIEW_LATEST_FIRST)}
               />

src/renderer/scss/component/_button.scss

@@ -167,3 +167,16 @@
 .btn--uppercase {
   text-transform: uppercase;
 }
+
+.btn--selected {
+  font-weight: 800;
+  color: $lbry-teal-5;
+
+  &:disabled {
+    opacity: 1;
+  }
+
+  html[data-theme='dark'] & {
+    color: $lbry-teal-3;
+  }
+}