Desktop theme Card (#4140)

votingworks · Oct 30, 2023 · 07f52cd · 07f52cd
1 parent 530112f
commit 07f52cd
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 27 deletions.
diff --git a/apps/design/frontend/src/geography_screen.tsx b/apps/design/frontend/src/geography_screen.tsx
@@ -1,5 +1,14 @@
 import React, { useState } from 'react';
-import { Button, Table, TH, TD, H1, LinkButton, P } from '@votingworks/ui';
+import {
+  Button,
+  Table,
+  TH,
+  TD,
+  H1,
+  LinkButton,
+  P,
+  Card,
+} from '@votingworks/ui';
 import {
   Switch,
   Route,
@@ -20,7 +29,6 @@ import { ElectionNavScreen } from './nav_screen';
 import { ElectionIdParams, electionParamRoutes, routes } from './routes';
 import { TabPanel, TabBar } from './tabs';
 import {
-  Card,
   Form,
   FormField,
   Input,

diff --git a/apps/design/frontend/src/layout.tsx b/apps/design/frontend/src/layout.tsx
@@ -96,10 +96,3 @@ export function Breadcrumbs({ routes }: { routes: Route[] }): JSX.Element {
     </Row>
   );
 }
-
-export const Card = styled.div`
-  padding: 1rem;
-  border: ${(p) => p.theme.sizes.bordersRem.hairline}rem solid
-    ${(p) => p.theme.colors.foregroundDisabled};
-  border-radius: 0.2rem;
-`;
diff --git a/apps/design/frontend/src/tabulation_screen.tsx b/apps/design/frontend/src/tabulation_screen.tsx
@@ -1,16 +1,8 @@
 import { useState } from 'react';
-import { H1, H2, Button } from '@votingworks/ui';
+import { H1, H2, Button, Card } from '@votingworks/ui';
 import { useParams } from 'react-router-dom';
 import { AdjudicationReason, Id, SystemSettings } from '@votingworks/types';
-import {
-  Form,
-  FormField,
-  Input,
-  Card,
-  Column,
-  Row,
-  FormActionsRow,
-} from './layout';
+import { Form, FormField, Input, Column, Row, FormActionsRow } from './layout';
 import { ElectionNavScreen } from './nav_screen';
 import { ElectionIdParams } from './routes';
 import { MultiSelect } from './multiselect';

diff --git a/libs/ui/src/card.tsx b/libs/ui/src/card.tsx
@@ -1,4 +1,3 @@
-import { rgba } from 'polished';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -8,16 +7,13 @@ export interface CardProps {
   children?: React.ReactNode;
   footer?: React.ReactNode;
   footerAlign?: CardFooterAlign;
+  style?: React.CSSProperties;
 }
 
 const StyledContainer = styled.div`
   border: ${(p) => p.theme.sizes.bordersRem.hairline}rem solid
-    ${(p) => rgba(p.theme.colors.foregroundDisabled, 0.75)};
+    ${(p) => p.theme.colors.outline};
   border-radius: 0.2rem;
-  box-shadow:
-    0.1rem 0.2rem 0.1rem -0.1rem ${(p) => rgba(p.theme.colors.foreground, 0.25)},
-    0 0.1rem 0.2rem 0 ${(p) => rgba(p.theme.colors.foreground, 0.15)},
-    0 0.1rem 0.3rem 0 ${(p) => rgba(p.theme.colors.foreground, 0.125)};
   overflow: hidden;
 
   &:not(:last-child) {
@@ -51,10 +47,10 @@ const StyledFooter = styled.div<StyledFooterProps>`
  * components.
  */
 export function Card(props: CardProps): JSX.Element {
-  const { children, footer, footerAlign } = props;
+  const { children, footer, footerAlign, style } = props;
 
   return (
-    <StyledContainer>
+    <StyledContainer style={style}>
       <StyledContent>{children}</StyledContent>
       {footer && (
         <StyledFooter footerAlign={footerAlign || 'left'}>