fix avatar text without an image (#198)

* fix avatar text

* fix font-size on channel view

src/shared/components/Avatar/Avatar.style.tsx

@@ -74,15 +74,7 @@ export const Container = styled.div<ContainerProps>`
   display: flex;
   justify-content: center;
   align-items: center;
-
   position: relative;
-
-  > span {
-    position: absolute;
-    text-transform: uppercase;
-    font-size: 0.875rem;
-    line-height: 1.43;
-  }
 `
 
 export const StyledPlaceholder = styled(Placeholder)`
@@ -92,6 +84,13 @@ export const StyledPlaceholder = styled(Placeholder)`
 
 export const StyledTransitionGroup = styled(TransitionGroup)`
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  span {
+    text-transform: uppercase;
+    line-height: 1.43;
+  }
 `
 
 export const StyledImage = styled.img`

src/shared/components/ChannelPreview/ChannelPreview.tsx

@@ -39,7 +39,7 @@ const NameHeader = styled(Text)`
 export const StyledAvatar = styled(Avatar)`
   width: 100%;
   height: 100%;
-  > span {
+  span {
     font-size: ${typography.sizes.h2};
   }
 `

src/views/ChannelView/ChannelView.style.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled'
 import { fluidRange } from 'polished'
 import { Placeholder, Text } from '@/shared/components'
 import ChannelLink from '@/components/ChannelLink'
-import { breakpoints, colors, sizes, transitions, zIndex } from '@/shared/theme'
+import { breakpoints, colors, sizes, transitions, typography, zIndex } from '@/shared/theme'
 import { ReactComponent as BgPattern } from '@/assets/bg-pattern.svg'
 import { css } from '@emotion/core'
 
@@ -198,6 +198,10 @@ export const VideoSection = styled.section`
 export const StyledChannelLink = styled(ChannelLink)`
   margin-bottom: ${sizes(3)};
 
+  span {
+    font-size: ${typography.sizes.h2};
+  }
+
   @media (min-width: ${breakpoints.small}) {
     margin: 0 ${sizes(6)} 0 0;
   }