Merge pull request #4472 from brave-intl/fix/channel-card

fix channel card styles
brave-intl · Jul 10, 2024 · 5d16aa1 · 5d16aa1
2 parents 4c74b74 + 8b0e245
commit 5d16aa1
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 16 deletions.
diff --git a/nextjs/src/app/[locale]/publishers/home/channels/ChannelCard.tsx b/nextjs/src/app/[locale]/publishers/home/channels/ChannelCard.tsx
@@ -9,6 +9,7 @@ import { useContext,useEffect,useState } from 'react';
 import { apiRequest } from '@/lib/api';
 
 import Card from '@/components/Card';
+import styles from '@/styles/ChannelCard.module.css';
 
 import ChannelCryptoEditor from './ChannelCryptoEditor';
 
@@ -36,11 +37,11 @@ export default function ChannelCard({ channel, publisherPayable, onChannelDelete
 
   function channelIconType() {
     if (channelType() === 'site') {
-      return <Icon className='color-interactive' name='globe' />;
+      return <Icon className={`color-interactive ${styles['channel-card-icon']}`} name='globe' />;
     } else if (channelType() === 'twitter') {
-      return <Icon name='social-x' />;
+      return <Icon className={`color-interactive ${styles['channel-card-icon']}`} name='social-x' forceColor='true' />;
     } else {
-      return <Icon name={`social-${channelType()}`} />;
+      return <Icon className={`color-interactive ${styles['channel-card-icon']}`} name={`social-${channelType()}`} forceColor='true' />;
     }
   }
 
@@ -49,12 +50,12 @@ export default function ChannelCard({ channel, publisherPayable, onChannelDelete
   }
 
   function displayVerified() {
-    if (channel.verified && publisherPayable) {
+    if (channel.verified) {
       return (
         <div className='flex items-center'>
-          <span className='pr-1 small-regular'>{t('Home.channels.verified')}</span>
+          <span className='pr-0.5 small-regular'>{t('Home.channels.verified')}</span>
           <span className='inline-block'>
-            <Icon name='verification-filled-color' />
+            <Icon className={`${styles['channel-verification-icon']}`} name='verification-filled-color' />
           </span>
         </div>
       );
@@ -65,7 +66,7 @@ export default function ChannelCard({ channel, publisherPayable, onChannelDelete
         <div className='flex items-center'>
           <span className='pr-0.5 small-regular'>{t('Home.channels.not_verified')}</span>
           <span className='inline-block'>
-            <Icon className='color-tertiary' name='verification-filled-off' />
+            <Icon className={`color-tertiary ${styles['channel-verification-icon']}`} name='verification-filled-off' />
           </span>
         </div>
       );
@@ -93,7 +94,7 @@ export default function ChannelCard({ channel, publisherPayable, onChannelDelete
         )}
       </section>
       <Hr />
-      <section className='pt-2 text-right '>
+      <section className='pt-2 text-right self-end'>
         <Button className='color-secondary mr-0.5' kind='plain-faint' onClick={removeChannel}>
           {t('shared.remove')}
         </Button>

diff --git a/nextjs/src/app/[locale]/publishers/home/channels/CryptoWalletOption.jsx b/nextjs/src/app/[locale]/publishers/home/channels/CryptoWalletOption.jsx
@@ -40,7 +40,7 @@ export default function CryptoWalletOption({
         <span>
           <span>{formatCryptoAddress(value.address)}</span>
         </span>
-        <span onClick={handleDelete}>
+        <span className={styles['trash-icon']} onClick={handleDelete}>
           <Icon name='trash' />
         </span>
       </div>

diff --git a/nextjs/src/lib/api.ts b/nextjs/src/lib/api.ts
@@ -16,11 +16,12 @@ export async function apiRequest(
     const response = await axios({ method, url, data });
     return response.data;
   } catch (err) {
-    console.log(err)
     // all response codes that aren't 200s or 300s get sent here
     // Imperatively navigate to Unauthorized page on 403
-    if (err.response.status === 403 || err.response.status === 422) {
+    if (err.response && err.response.status === 403 || err.response.status === 422) {
       window.location.replace('/log-in');
+    } else {
+      console.log(err);
     }
 
     return { errors: [err] };

diff --git a/nextjs/src/messages/en.json b/nextjs/src/messages/en.json
@@ -50,7 +50,8 @@
       "reddit": "Reddit",
       "vimeo": "Vimeo",
       "youtube": "Youtube",
-      "twitch": "Twitch"
+      "twitch": "Twitch",
+      "github": "Github"
     }
   },
   "activerecord": {
@@ -124,7 +125,7 @@
       "add_channel_title": "What are channels?"
     },
     "addCryptoWidget": {
-      "addWallet": "Add new crypto address",
+      "addWallet": "Add new address",
       "clearWallet": "Clear address",
       "solanaConnectError": "Connect a Solana wallet to add an address",
       "ethereumConnectError": "Connect an Ethereum wallet to add an address",

diff --git a/nextjs/src/styles/ChannelCard.module.css b/nextjs/src/styles/ChannelCard.module.css
@@ -8,11 +8,12 @@
 
   .crypto-wallet-dropdown {
     border: 1px solid rgba(199 199 204 100%);
+    padding: 3px;
     padding-left: 30px;
     border-radius: 8px;
     background-repeat: no-repeat;
-    background-position: bottom 10px left 10px;
-    background-size: 6.5%;
+    background-position: bottom 10px left 6px;
+    background-size: 5.5%;
   }
 
   .crypto-wallet-dropdown-eth {
@@ -44,7 +45,7 @@
     text-align: center;
     padding: 10px;
     padding-top: 15px;
-    color: #423EEE;
+    color: var(--leo-color-text-tertiary);
     font-weight: bold;
     font-size: 0.9em;
     cursor: pointer;
@@ -58,6 +59,14 @@
   }
 }
 
+.channel-card-icon {
+  --leo-icon-width: 18px;
+}
+
+.channel-verification-icon {
+  --leo-icon-width: 20px;
+}
+
 .privacy-header {
   font-family: var(--font-poppins);
   font-size: 28px;