Font sizes updated

src/client/components/EducationHistoryTile.js

@@ -13,8 +13,16 @@ const EducationHistoryTile = ({
 }) => (
   <SingleEducationItem>
     <div>
-      <Text.Block size="large">{educationHistoryData.organization}</Text.Block>
-      <Text.Block size="normal">
+      <Text.Block
+        size="large"
+        css={`
+          line-height: 1.8;
+          font-weight: bold;
+        `}
+      >
+        {educationHistoryData.organization}
+      </Text.Block>
+      <Text.Block size="normal" css="line-height: 1.8">
         {educationHistoryData.degree}
         {educationHistoryData.fieldOfStudy
           ? ', ' + educationHistoryData.fieldOfStudy
@@ -56,7 +64,7 @@ const Button = styled(AragonButton).attrs({ mode: 'text' })`
     margin-bottom: 4px;
   }
 `
-const Dates = styled(Text.Block).attrs({ size: 'small' })`
+const Dates = styled(Text.Block).attrs({ size: 'xsmall' })`
   color: ${theme.textTertiary};
   margin-top: 2px;
 `

src/client/components/EducationPanel.js

@@ -4,8 +4,9 @@ import { useProfile } from '../hooks'
 import { ModalContext } from '../wrappers/modal'
 import EducationHistoryTile from './EducationHistoryTile'
 import { open, removeItem } from '../stateManagers/modal'
-import { Text, theme } from '@aragon/ui'
+import { Text } from '@aragon/ui'
 import styled from 'styled-components'
+import { Link } from './styled-components'
 
 const EducationPanel = () => {
   const { educationHistory, viewMode } = useProfile()
@@ -35,18 +36,14 @@ const EducationPanel = () => {
         ))
       ) : (
         <Center>
-          <Text size="xlarge">You have no education</Text>
+          <Text size="normal">You have no education</Text>
           {!viewMode && (
-            <Text
-              css={`
-                cursor: pointer;
-              `}
-              size="small"
-              color={theme.accent}
+            <Link.Button
               onClick={() => dispatchModal(open('educationHistory'))}
+              size="small"
             >
               Add educaction
-            </Text>
+            </Link.Button>
           )}
         </Center>
       )}

src/client/components/WorkHistoryPanel.js

@@ -4,8 +4,9 @@ import { useProfile } from '../hooks'
 import { ModalContext } from '../wrappers/modal'
 import WorkHistoryTile from './WorkHistoryTile'
 import { open, removeItem } from '../stateManagers/modal'
-import { Text, theme } from '@aragon/ui'
+import { Text } from '@aragon/ui'
 import styled from 'styled-components'
+import { Link } from './styled-components'
 
 const WorkHistoryPanel = () => {
   const { workHistory, viewMode } = useProfile()
@@ -33,18 +34,14 @@ const WorkHistoryPanel = () => {
         ))
       ) : (
         <Center>
-          <Text size="xlarge">You have no work history</Text>
+          <Text size="normal">You have no work history</Text>
           {!viewMode && (
-            <Text
-              css={`
-                cursor: pointer;
-              `}
-              size="small"
-              color={theme.accent}
+            <Link.Button
               onClick={() => dispatchModal(open('workHistory'))}
+              size="small"
             >
               Add work
-            </Text>
+            </Link.Button>
           )}
         </Center>
       )}

src/client/components/WorkHistoryTile.js

@@ -12,29 +12,19 @@ const WorkHistoryTile = ({ workHistoryData, openModal, removeItem }) => (
       <Text.Block
         size="large"
         css={`
-          font-weight: 700;
+          line-height: 1.8;
+          font-weight: bold;
         `}
       >
         {workHistoryData.workPlace}
       </Text.Block>
-      <Text.Block
-        size="normal"
-        css={`
-          font-weight: 600;
-        `}
-      >
+      <Text.Block size="large">
         {workHistoryData.jobTitle}
-        <Text
-          size="xsmall"
-          color={theme.textTertiary}
-          css={`
-            margin-left: 13px;
-          `}
-        >
+        <Text color={theme.textTertiary} size="xsmall" css="margin-left: 13px">
           {displayStartEndDates(workHistoryData)}
         </Text>
       </Text.Block>
-      <Text.Block size="normal">{workHistoryData.description}</Text.Block>
+      <Text.Block size="small">{workHistoryData.description}</Text.Block>
     </Details>
     <Icons>
       <IconPencil color={theme.accent} width="16px" onClick={openModal} />

src/client/components/informationPanel/InformationCard.js

@@ -91,6 +91,7 @@ const StyledCard = styled(Card).attrs({ width: '100%', height: 'auto' })`
 const EthAddr = styled(Text).attrs({ size: 'small' })`
   color: ${theme.textTertiary};
   word-break: break-all;
+  font-size: 12px;
 `
 const Icons = styled.div`
   position: absolute;

src/client/wrappers/styleWrappers/CardWrapper.js

@@ -1,36 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Card, Text, theme } from '@aragon/ui'
+import { Card, Text } from '@aragon/ui'
 import styled from 'styled-components'
+import { Link } from '../../components/styled-components'
 
 const CardWrapper = ({ children, title, addMore, addSeparators, viewMode }) => (
-  <div
-    css={`
-      width: 100%;
-    `}
-  >
+  <div css="width: 100%">
     {title && (
-      <Text
-        css={`
-          padding: 7px 0;
-        `}
-        size="xlarge"
-      >
+      <Text css="padding: 7px 0" size="xlarge">
         {title}
       </Text>
     )}
     {addMore && !viewMode && (
-      <Text
-        css={`
-          padding-left: 13px;
-          cursor: pointer;
-        `}
-        size="small"
-        color={theme.accent}
-        onClick={() => addMore()}
-      >
+      <Link.Button size="tiny" onClick={addMore} css="padding-left: 13px">
         Add more
-      </Text>
+      </Link.Button>
     )}
     {children && (
       <StyledCard addSeparators={addSeparators}>{children}</StyledCard>