Improve tablet mode Skeleton (#115)

packages/DApp/src/components/Card.tsx

@@ -52,6 +52,7 @@ export const CardVoteBlock = styled.div`
   justify-content: space-between;
   width: 100%;
   background-color: ${Colors.GrayLight};
+  position: relative;
 
   @media (max-width: 768px) {
     background-color: unset;

packages/DApp/src/components/skeleton/CommunitySkeleton.tsx

@@ -6,9 +6,13 @@ import { Skeleton } from '../skeleton/Skeleton'
 import { TagsSkeletonList } from '../skeleton/TagSkeleton'
 import { TextBlock } from '../skeleton/TextSkeleton'
 
-export const CommunitySkeleton = () => {
+interface CommunitySkeletonProps {
+  customStyle?: boolean
+}
+
+export const CommunitySkeleton = ({ customStyle }: CommunitySkeletonProps) => {
   return (
-    <CardCommunityBlock>
+    <CardCommunityBlock className={customStyle ? 'notModal' : ''}>
       {' '}
       <CardRow>
         <AvatarSkeleton />
@@ -18,7 +22,7 @@ export const CommunitySkeleton = () => {
           <TagsSkeleton />
         </CardContent>
       </CardRow>
-      <CardLinks>
+      <CardLinks className={customStyle ? 'notModal' : ''}>
         <StyledExternalLink>Visit community</StyledExternalLink>
         <StyledExternalLink>Etherscan</StyledExternalLink>
         <StyledInternalink>Voting history </StyledInternalink>
@@ -31,6 +35,10 @@ const CardRow = styled.div`
   display: flex;
   width: 100%;
   margin-bottom: 48px;
+
+  @media (max-width: 768px) {
+    margin-bottom: 32px;
+  }
 `
 
 const CardContent = styled.div`

packages/DApp/src/components/votes/VotingCardSkeleton.tsx

@@ -8,7 +8,7 @@ export const VotingCardSkeleton = () => {
   return (
     <Card>
       <CardCommunityWrap>
-        <CommunitySkeleton />
+        <CommunitySkeleton customStyle={true} />
       </CardCommunityWrap>
 
       <CardVoteWrap>
@@ -22,7 +22,7 @@ export const VotingCardSkeleton = () => {
               <Skeleton width="90px" height="16px" />
             </div>
             <div>
-              <Skeleton width="43px" height="8px" />
+              <RowCenter width="43px" height="8px" />
             </div>
             <div>
               <span>❓</span>
@@ -45,15 +45,31 @@ const CardHeader = styled.div`
   justify-content: center;
   width: 100%;
   margin-bottom: 54px;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 `
 
 const ProgressSkeleton = styled(Skeleton)`
   height: 16px;
   margin: 12px 0 32px;
+
+  @media (max-width: 768px) {
+    width: 400px;
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 `
 
 const ButtonsRow = styled.div`
   display: flex;
+
+  @media (max-width: 768px) {
+    margin-top: 32px;
+  }
 `
 
 const SkeletonButton = styled(Skeleton)`
@@ -85,3 +101,11 @@ const Row = styled.div`
     }
   }
 `
+const RowCenter = styled(Skeleton)`
+  @media (max-width: 768px) {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+`