Merge pull request #3727 from brave/design-updates

Rewards Settings Design/Text Updates
brave · Oct 31, 2019 · e6bfe60 · e6bfe60
1 parent 347ca45
commit e6bfe60
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 5 deletions.
diff --git a/.storybook/locale.ts b/.storybook/locale.ts
@@ -65,6 +65,7 @@ const locale: Record<string, string> = {
   deposit: 'Deposit',
   deposits: 'Deposits',
   description: 'Description',
+  details: 'Details',
   disabledPanelOff: 'Off',
   disabledPanelSettings: 'Settings.',
   disabledPanelPrivateText: 'Brave Rewards is not available while in a Private Window.',

diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
@@ -344,6 +344,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "deposit", IDS_BRAVE_UI_DEPOSIT },
         { "deposits", IDS_BRAVE_UI_DEPOSITS },
         { "description", IDS_BRAVE_UI_DESCRIPTION },
+        { "details", IDS_BRAVE_UI_DETAILS },
         { "disabledPanelOff", IDS_BRAVE_UI_DISABLED_PANEL_OFF },
         { "disabledPanelSettings", IDS_BRAVE_UI_DISABLED_PANEL_SETTINGS },
         { "disabledPanelText", IDS_BRAVE_UI_DISABLED_PANEL_TEXT },

diff --git a/components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts b/components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts
@@ -42,6 +42,7 @@ export const getUIMessages = (): Record<string, string> => {
     'claim',
     'contributionTips',
     'connectedText',
+    'details',
     'disabledPanelTextTwo',
     'donateMonthly',
     'donateNow',

diff --git a/components/brave_rewards/resources/ui/components/disabledContent/style.ts b/components/brave_rewards/resources/ui/components/disabledContent/style.ts
@@ -19,6 +19,7 @@ export const StyledTwoColumn = styled<{}, 'div'>('div')`
 `
 
 export const StyledIcon = styled<{}, 'div'>('div')`
-  width: 180px;
+  max-width: 50px;
   padding: 4px;
+  margin-right: 20px;
 `
diff --git a/components/brave_rewards/resources/ui/components/walletWrapper/index.tsx b/components/brave_rewards/resources/ui/components/walletWrapper/index.tsx
@@ -24,6 +24,7 @@ import {
   StyledAlertWrapper,
   StyledAlertClose,
   StyleGrantButton,
+  GrantButton,
   StyledActionText,
   StyledBAT,
   StyledNotificationIcon,
@@ -671,8 +672,8 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
                     {
                       hasGrants
                         ? <StyleGrantButton>
-                          <Button
-                            text={getLocale('grants')}
+                          <GrantButton
+                            text={getLocale('details')}
                             size={'small'}
                             type={'subtle'}
                             level={'secondary'}

diff --git a/components/brave_rewards/resources/ui/components/walletWrapper/style.ts b/components/brave_rewards/resources/ui/components/walletWrapper/style.ts
@@ -69,6 +69,15 @@ export const StyledBalance = styled<{}, 'div'>('div')`
 export const StyleGrantButton = styled<{}, 'div'>('div')`
   display: flex;
   justify-content: center;
+
+  &:focus {
+    outline: 0;
+  }
+`
+
+export const GrantButton = styled(Button as ComponentType<ButtonProps>)`
+  min-width: 100px;
+  color: rgba(255, 255, 255, 0.8);
 `
 
 export const StyledBalanceTokens = styled<{}, 'div'>('div')`

diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
@@ -226,7 +226,12 @@
       <message name="IDS_BRAVE_REWARDS_LOCAL_CONTR_NEXT_DATE" desc="">Next contribution date</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_CONTR_SITES" desc="">Sites viewed</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_TITLE" desc="">Tips</message>
-      <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_DESC" desc="">Tip content creators directly as you browse. You can also set up recurring monthly tips so you can support sites continuously.</message>
+      <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_DESC" desc="">Tip content creators directly as you browse by using the Rewards Panel, or by using the inline tip button on various sites including Twitter, Reddit and GitHub.</message>
+      <message name="IDS_BRAVE_REWARDS_LOCAL_MONTHLY_CONTRIBUTION_TITLE" desc="">Monthly Contributions</message>
+      <message name="IDS_BRAVE_REWARDS_LOCAL_MONTHLY_CONTRIBUTION_DESC" desc="">Set up recurring monthly contributions so you can support sites continuously.</message>
+      <message name="IDS_BRAVE_REWARDS_LOCAL_MONTHLY_CONTRIBUTION_EMPTY" desc="">No monthly contributions set up yet.</message>
+      <message name="IDS_BRAVE_REWARDS_LOCAL_MONTHLY_CONTRIBUTION_DISABLED_TEXT" desc="">Your monthly contributions will be sent every 30 days.</message>
+      <message name="IDS_BRAVE_REWARDS_LOCAL_ADS_DISABLED_TEXT" desc="">Coming soon.</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_ADS_DISABLED_TEXT_ONE" desc="">Earnings are paid every month.</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_ADS_DISABLED_TEXT_TWO" desc="">Set your desired frequency to increase or decrease earnings.</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_CONTR_DISABLED_TEXT1" desc="">Reward creators for the content you love.</message>
@@ -255,7 +260,7 @@
       <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_ABILITY_GH" desc="">GitHub</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_ABILITY_TW" desc="">Twitter</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_DISABLED_TEXT1" desc="">Tip on the spot as you find gems.</message>
-      <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_DISABLED_TEXT2" desc="">Support your favorite sites with recurring monthly tips.</message>
+      <message name="IDS_BRAVE_REWARDS_LOCAL_DONAT_DISABLED_TEXT2" desc="">If you like, let people know with a quick tweet.</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_WALLET_RECOVERY_SUCCESS" desc="">{{balance}} BAT was recovered. Your wallet key has been verified and loaded successfully.</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_WALLET_RESTORED" desc="">Wallet restored!</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_WALLET_RECOVERY_FAIL" desc="">Please re-enter keys or try different keys.</message>
@@ -374,6 +379,7 @@
       <message name="IDS_BRAVE_UI_DEPOSIT" desc="">Deposit</message>
       <message name="IDS_BRAVE_UI_DEPOSITS" desc="">Deposits</message>
       <message name="IDS_BRAVE_UI_DESCRIPTION" desc="">Description</message>
+      <message name="IDS_BRAVE_UI_DETAILS" desc="">Details</message>
       <message name="IDS_BRAVE_UI_DISABLED_PANEL_OFF" desc="">Off</message>
       <message name="IDS_BRAVE_UI_DISABLED_PANEL_SETTINGS" desc="">Settings.</message>
       <message name="IDS_BRAVE_UI_DISABLED_PANEL_TEXT" desc="">You are not currently accruing any Rewards benefits while browsing. Turn Rewards back on in</message>