Merge pull request #771 from opentripplanner/account-page-contrast

Account page contrast
opentripplanner · Feb 8, 2023 · 0e99fdd · 0e99fdd
2 parents 31d4152 + d301850
commit 0e99fdd
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 36 deletions.
diff --git a/lib/components/user/delete-user.js b/lib/components/user/delete-user.js
diff --git a/lib/components/user/delete-user.tsx b/lib/components/user/delete-user.tsx
@@ -0,0 +1,34 @@
+import { Button } from 'react-bootstrap'
+import { FormattedMessage } from 'react-intl'
+import React from 'react'
+import styled from 'styled-components'
+
+import { RED_ON_WHITE } from '../util/colors'
+
+interface Props {
+  onDelete: () => void
+}
+
+const DeleteButton = styled(Button)`
+  background-color: white;
+  border-color: ${RED_ON_WHITE};
+  color: ${RED_ON_WHITE};
+  :active,
+  :focus,
+  :focus:active,
+  :hover {
+    border-color: ${RED_ON_WHITE};
+    color: ${RED_ON_WHITE};
+  }
+`
+
+/**
+ * Renders a delete user button for the account settings page.
+ */
+const DeleteUser = ({ onDelete }: Props): JSX.Element => (
+  <DeleteButton block bsSize="large" onClick={onDelete}>
+    <FormattedMessage id="components.DeleteUser.deleteMyAccount" />
+  </DeleteButton>
+)
+
+export default DeleteUser
diff --git a/lib/components/user/places/favorite-place-list.js b/lib/components/user/places/favorite-place-list.js
@@ -14,7 +14,7 @@ import {
 import { isBlank } from '../../../util/ui'
 import { UnpaddedList } from '../../form/styled'
 
-import { FavoritePlace } from './styled'
+import { StyledFavoritePlace as FavoritePlace } from './styled'
 
 /**
  * Renders an editable list user's favorite locations, and lets the user add a new one.

diff --git a/lib/components/user/places/styled.js → lib/components/user/places/styled.ts b/lib/components/user/places/styled.js → lib/components/user/places/styled.ts
@@ -1,6 +1,7 @@
-import React from 'react'
 import styled from 'styled-components'
 
+import { GRAY_ON_WHITE } from '../../util/colors'
+
 import Place, {
   ActionButton,
   ActionButtonPlaceholder,
@@ -16,7 +17,9 @@ import Place, {
 
 const FAVORITE_PLACE_HEIGHT_PX = '60px'
 
-const StyledFavoritePlace = styled(Place)`
+export const StyledFavoritePlace = styled(Place).attrs({
+  largeIcon: true
+})`
   align-items: stretch;
   display: flex;
   height: ${FAVORITE_PLACE_HEIGHT_PX};
@@ -26,20 +29,29 @@ const StyledFavoritePlace = styled(Place)`
     align-items: center;
     display: flex;
     flex: 1 0 0;
-    overflow: hidden;
     text-align: left;
-    text-overflow: ellipsis;
   }
   ${PlaceContent} {
-    display: inline-block;
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
     margin-left: 10px;
+    /* overflow is needed here for the nested overflow to take effect. */
+    overflow: hidden;
   }
   ${PlaceDetail} {
-    color: #888;
+    color: ${GRAY_ON_WHITE};
+  }
+
+  ${PlaceName},
+  ${PlaceDetail} {
     display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
   }
   ${IconWrapper} {
-    color: #888;
+    color: ${GRAY_ON_WHITE};
     flex-shrink: 0;
   }
   ${ActionButton}, ${ActionButtonPlaceholder} {
@@ -48,10 +60,6 @@ const StyledFavoritePlace = styled(Place)`
   }
 `
 
-export const FavoritePlace = (props) => (
-  <StyledFavoritePlace largeIcon {...props} />
-)
-
 // Styles and exports for the place component
 // used in the main panel.
 

diff --git a/lib/components/util/colors.ts b/lib/components/util/colors.ts
@@ -0,0 +1,11 @@
+/**
+ * A red color similar to Bootstrap's "alert" background #d9534f,
+ * but with enough contrast over white backgrounds
+ */
+export const RED_ON_WHITE = '#d1332e'
+
+/**
+ * A gray color similar to #808080 or #888,
+ * but with enough contrast on white backgrounds.
+ */
+export const GRAY_ON_WHITE = '#757575'