Merge pull request #34 from microsoft/bug/cards-collapsed-on-safari

Fix Card rendering on Safari, small lint issues
Election-Tech-Initiative · Oct 9, 2020 · 8d9f3e1 · 8d9f3e1
2 parents f6ae393 + 70dadca
commit 8d9f3e1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/src/components/LargeCard.tsx b/src/components/LargeCard.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { useTheme } from '@fluentui/react-theme-provider';
-import { Card, CardSection } from '@uifabric/react-cards';
 
 export interface LargeCardProps {
     alignToStart?: boolean;
@@ -9,20 +8,23 @@ export interface LargeCardProps {
 const LargeCard: React.FunctionComponent<LargeCardProps> = ({ alignToStart, children }) => {
     const theme = useTheme();
     return (
-        <Card
-            styles={{
-                root: {
-                    padding: theme.spacing.l1,
-                    backgroundColor: theme.palette.white,
-                    marginBottom: theme.spacing.l1,
-                    alignItems: alignToStart ? 'flex-start' : 'stretch',
-                    height: 'auto',
-                    maxWidth: 'auto',
-                },
+        <div
+            style={{
+                padding: theme.spacing.l1,
+                backgroundColor: theme.palette.white,
+                marginBottom: theme.spacing.l1,
+                alignItems: alignToStart ? 'flex-start' : 'stretch',
+                height: 'auto',
+                maxWidth: 'auto',
+                borderTopLeftRadius: 2,
+                borderTopRightRadius: 2,
+                borderBottomRightRadius: 2,
+                borderBottomLeftRadius: 2,
+                boxShadow: 'rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px',
             }}
         >
-            <CardSection styles={{ root: { width: '100%' } }}>{children || null}</CardSection>
-        </Card>
+            {children || null}
+        </div>
     );
 };
 

diff --git a/src/mocks/MockDataAccess.ts b/src/mocks/MockDataAccess.ts
@@ -20,7 +20,7 @@ export class MockDataAccess implements DataAccess {
     async getElections(): Promise<Election[]> {
         const mockElection: Election = {
             id: mockDescription.election_scope_id,
-            election_description: mockDescription,
+            election_description: mockDescription as any,
             state: 'Published',
         };
         return [mockElection];

diff --git a/src/pages/ElectionPage.tsx b/src/pages/ElectionPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Stack, Text } from '@fluentui/react';
+import { Stack } from '@fluentui/react';
 
 import AsyncContent from '../components/AsyncContent';
 import ElectionTitle from '../components/ElectionTitle';