fix:minor style changes (#37208)

* fix: minor style changes

client/src/components/Donation/Donation.css

@@ -30,17 +30,6 @@
   }
 }
 
-.donation-modal .btn-link {
-  border: none;
-  text-decoration: underline;
-  background: transparent;
-}
-.donation-modal .btn-link:hover {
-  background: var(--tertiary-background);
-  text-decoration: none;
-  color: inherit;
-}
-
 .donation-elements {
   display: flex;
   flex-direction: column;
@@ -103,8 +92,13 @@
 
 .wallet {
   overflow-wrap: break-word;
+  white-space: normal;
 }
 
 .alert p {
   color: inherit;
 }
+
+.donate-other .btn-cta {
+  margin: 7px 0px;
+}

client/src/components/Donation/components/DonateOther.js

@@ -88,7 +88,7 @@ class DonateOther extends Component {
     return (
       <Fragment>
         <Spacer />
-        <Grid>
+        <Grid className='donate-other'>
           <Row>
             <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
               <h2 className='text-center'>
@@ -110,9 +110,21 @@ class DonateOther extends Component {
                 one of the links below and following the instructions on PayPal.
                 You can easily stop your donations at any time in the future.
               </p>
-              {paypalMonthlyDonations.map(item => {
-                return this.renderForm(item);
-              })}
+              <Row>
+                <Col
+                  lg={6}
+                  lgOffset={3}
+                  md={6}
+                  mdOffset={3}
+                  sm={8}
+                  smOffset={2}
+                  xs={12}
+                >
+                  {paypalMonthlyDonations.map(item => {
+                    return this.renderForm(item);
+                  })}
+                </Col>
+              </Row>
               <hr />
               <h3>Make a one-time donation using PayPal</h3>
               <p>
@@ -120,7 +132,20 @@ class DonateOther extends Component {
                 amount of money by clicking one of the links below and following
                 the instructions on PayPal:
               </p>
-              {this.renderForm(paypalOneTimeDonation)}
+              <Row>
+                <Col
+                  lg={6}
+                  lgOffset={3}
+                  md={6}
+                  mdOffset={3}
+                  sm={8}
+                  smOffset={2}
+                  xs={12}
+                >
+                  {this.renderForm(paypalOneTimeDonation)}
+                </Col>
+              </Row>
+
               <hr />
               <h3>Get your employer to match your donation</h3>
               <p>
@@ -155,28 +180,28 @@ class DonateOther extends Component {
                 donations.
               </p>
               <h4>Make a one-time Bitcoin donation</h4>
-              <p className='negative-15'>
+              <p>
                 Our Bitcoin wallet is{' '}
                 <code className='wallet'>
                   12skYi7aMCjDUdrVdoB3JjZ77ug8gxJfbL
                 </code>
               </p>
               <h4>Make a one-time Ethereum donation</h4>
-              <p className='negative-15'>
+              <p>
                 Our Ethereum wallet is{' '}
                 <code className='wallet'>
                   0x0ADbEf2471416BD8732cf0f3944294eE393CcAF5
                 </code>
               </p>
               <h4>Make a one-time Litecoin donation</h4>
-              <p className='negative-15'>
+              <p>
                 Our Litecoin wallet is{' '}
                 <code className='wallet'>
                   LKu8UG8Z1nbTxnq9Do96PsC3FwbNtycf3X
                 </code>
               </p>
               <h4>Make a one-time Bitcoin Cash donation</h4>
-              <p className='negative-15'>
+              <p>
                 Our Bitcoin Cash wallet is{' '}
                 <code className='wallet'>
                   1EBxPEJWrGZWxe2UayyAsnd5VsRg5H9xfu

client/src/components/Header/components/universalNav.css

@@ -48,6 +48,9 @@
   text-decoration: none;
   background-color: var(--theme-color);
 }
+#universal-nav-logo:focus {
+  background-color: inherit;
+}
 
 #universal-nav-logo svg {
   display: block;
@@ -76,7 +79,7 @@
 .nav-list li a {
   display: block;
   margin: 0;
-  padding: 8px 15px;
+  padding: 6px 15px;
   color: var(--gray-00);
   opacity: 1;
   white-space: nowrap;

client/src/components/layouts/global.css

@@ -99,11 +99,6 @@ p {
   color: var(--secondary-color);
 }
 
-a:not(.fcc_suggestion_item):hover {
-  color: var(--tertiary-color);
-  background-color: var(--tertiary-background);
-}
-
 a {
   color: inherit;
   text-decoration: underline;
@@ -112,6 +107,8 @@ a {
 a:hover,
 a:focus {
   text-decoration: none;
+  color: var(--tertiary-color);
+  background-color: var(--tertiary-background);
 }
 /* modal */
 
@@ -138,17 +135,8 @@ a:focus {
   border-color: var(--secondary-color);
 }
 
-/* button */
 button,
-input[type='submit'] {
-  background-color: var(--quaternary-background);
-  color: var(--secondary-color);
-  border-width: 2px;
-  border-style: outset;
-  border-color: buttonface;
-  border-image: initial;
-}
-
+input[type='submit'],
 .btn {
   background-color: var(--quaternary-background);
   border-width: 3px;
@@ -156,9 +144,10 @@ input[type='submit'] {
   color: var(--secondary-color);
   border-radius: 0px;
   text-decoration: none;
-  /* outline: none; */
 }
 
+button:hover,
+input[type='submit']:hover,
 .btn:hover,
 .btn-primary:hover {
   border-color: var(--secondary-color);
@@ -233,6 +222,17 @@ fieldset[disabled] .btn-primary.focus {
   background-image: none;
   box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
 }
+.btn-link {
+  color: inherit;
+  border: none;
+  text-decoration: underline;
+  background: transparent;
+}
+.btn-link:hover {
+  background: var(--tertiary-background);
+  text-decoration: none;
+  color: inherit;
+}
 
 strong {
   color: var(--secondary-color);
@@ -370,6 +370,19 @@ pre {
   color: var(--highlight-color);
 }
 
+.has-error .help-block,
+.has-error .control-label,
+.has-error .radio,
+.has-error .checkbox,
+.has-error .radio-inline,
+.has-error .checkbox-inline,
+.has-error.radio label,
+.has-error.checkbox label,
+.has-error.radio-inline label,
+.has-error.checkbox-inline label {
+  color: var(--danger-color);
+}
+
 .panel-primary {
   border-color: var(--primary-color);
 }
@@ -394,26 +407,7 @@ blockquote .small {
   border-radius: 0px;
 }
 
-/* gatsby 404 page */
-.default-layout > div > :nth-child(3) > button,
-input[type='submit'] {
-  background-color: var(--quaternary-background);
-}
-
-.default-layout > div > :nth-child(3) > button:hover,
-input[type='submit']:hover {
-  background-color: var(--secundary-background);
-}
-
-.default-layout > div > :nth-child(3) > button:active,
-input[type='submit']:active {
-  background: var(--primary-color);
-  color: var(--secondary-background);
-  outline: 0;
-  outline-color: none;
-  outline-color: var(--secundary-background);
-  border: none;
-}
+/* gatsby 404 */
 #search {
   background-color: var(--quaternary-background);
   color: var(--primary-color);

client/src/components/search/searchBar/searchbar.css

@@ -72,6 +72,7 @@
 
 .fcc_suggestion_item:hover {
   cursor: pointer;
+  background-color: var(--blue-dark);
 }
 
 .fcc_sr_only {

client/src/pages/donate.js

@@ -112,10 +112,8 @@ export class DonatePage extends Component {
               <div className='text-center'>
                 <PoweredByStripe />
                 <Spacer />
-                <Button onClick={this.toggleOtherOptions}>
-                  {`${
-                    showOtherOptions ? 'Hide' : 'Show'
-                  } other ways to donate.`}
+                <Button bsStyle='link' onClick={this.toggleOtherOptions}>
+                  {`${showOtherOptions ? 'Hide' : 'Show'} other ways to donate`}
                 </Button>
               </div>
               <Spacer />