From 70dadca01c905a00595eacb482a2a77a96748b06 Mon Sep 17 00:00:00 2001
From: Ryan Korsak <rkorsak@gmail.com>
Date: Fri, 9 Oct 2020 10:31:03 -0400
Subject: [PATCH] Fix Card rendering on Safari, small lint issues

---
 src/components/LargeCard.tsx | 28 +++++++++++++++-------------
 src/mocks/MockDataAccess.ts  |  2 +-
 src/pages/ElectionPage.tsx   |  2 +-
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/LargeCard.tsx b/src/components/LargeCard.tsx
index 9acd15d..acdbe91 100644
--- 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
index f37676a..8ef3620 100644
--- 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
index 34ac653..e6cd948 100644
--- 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';