From 30818c91912e9ba6ca26f9c60de98d66139bb6c8 Mon Sep 17 00:00:00 2001
From: lynn <41491154+lynnshaoyu@users.noreply.github.com>
Date: Fri, 7 Oct 2022 12:36:53 -0400
Subject: [PATCH] fix: [Widget] change the "reload" button (#242)

* fix reload button and styling

* jordan nit
---
 src/components/Error/ErrorDialog.tsx |  4 +++-
 src/components/Expando.tsx           | 17 +++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/Error/ErrorDialog.tsx b/src/components/Error/ErrorDialog.tsx
index 7eb8f14a6..e5cacea59 100644
--- a/src/components/Error/ErrorDialog.tsx
+++ b/src/components/Error/ErrorDialog.tsx
@@ -74,7 +74,9 @@ export default function ErrorDialog({ header, error, action, onClick }: ErrorDia
             {error.message ? `: ${error.message}` : ''}
           </ThemedText.Code>
         </Expando>
-        <ActionButton onClick={onClick}>{action}</ActionButton>
+        <ActionButton color="interactive" onClick={onClick}>
+          {action}
+        </ActionButton>
       </Column>
     </Column>
   )
diff --git a/src/components/Expando.tsx b/src/components/Expando.tsx
index ec076e8dd..5cc8aab8f 100644
--- a/src/components/Expando.tsx
+++ b/src/components/Expando.tsx
@@ -3,7 +3,7 @@ import Column, { ColumnProps } from 'components/Column'
 import Row from 'components/Row'
 import Rule from 'components/Rule'
 import useScrollbar from 'hooks/useScrollbar'
-import { Expando as ExpandoIcon } from 'icons'
+import { Expando as ExpandoIcon, Info as InfoIcon } from 'icons'
 import { PropsWithChildren, ReactNode, useState } from 'react'
 import styled from 'styled-components/macro'
 
@@ -13,7 +13,17 @@ const HeaderColumn = styled(Column)`
 `
 
 const TitleRow = styled(Row)`
+  color: ${({ theme }) => theme.secondary};
   cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+`
+
+const TitleHeader = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
 `
 
 const ExpandoColumn = styled(Column)<{ height: number; open: boolean }>`
@@ -55,7 +65,10 @@ export default function Expando({ title, open, onExpand, height, children, ...re
       <HeaderColumn gap={open ? 0.5 : 0.75} onClick={onExpand}>
         <Rule />
         <TitleRow>
-          {title}
+          <TitleHeader>
+            <InfoIcon style={{ marginRight: '5px' }} color="secondary" />
+            {title}
+          </TitleHeader>
           <IconButton color="secondary" icon={ExpandoIcon} iconProps={{ open }} />
         </TitleRow>
         {open && <Rule />}