From 822f006f95da474769bbf50d90b45182255fde98 Mon Sep 17 00:00:00 2001 From: Janne Koivistoinen Date: Tue, 12 Sep 2017 14:44:49 +0300 Subject: [PATCH] improving the avatars visuals and code --- src/components/Avatar/Avatar.css | 16 +++-- .../OrderDetailsPanel/OrderDetailsPanel.css | 2 - .../SaleDetailsPanel/SaleDetailsPanel.js | 6 +- .../TextInputField/TextInputField.css | 1 - .../TopbarDesktop/TopbarDesktop.css | 2 - src/containers/CheckoutPage/CheckoutPage.css | 2 - src/containers/InboxPage/InboxPage.css | 4 -- src/containers/ListingPage/ListingPage.css | 38 +++-------- src/containers/ListingPage/ListingPage.js | 7 +- src/marketplace.css | 47 +++++++++++--- src/marketplaceFonts.css | 65 +++++++------------ src/marketplaceIndex.css | 1 + 12 files changed, 90 insertions(+), 101 deletions(-) diff --git a/src/components/Avatar/Avatar.css b/src/components/Avatar/Avatar.css index 774532c7..f247cb4c 100644 --- a/src/components/Avatar/Avatar.css +++ b/src/components/Avatar/Avatar.css @@ -1,12 +1,13 @@ @import '../../marketplace.css'; :root { - --avatarSize: 100%; - --avatarSizeMedium: 61px; - --avatarSizeLarge: 120px; + --avatarSize: 40px; + --avatarSizeMedium: 60px; + --avatarSizeLarge: 96px; /* Base for all avatars */ --avatarBase: { + font-family: "sofiapro", Helvetica, Arial, sans-serif; border-radius: 50%; /* Position possible initials to the center of the component */ @@ -27,7 +28,6 @@ /* Font is specific to this component, but defining it in marketplace.css makes it easier * to change font if brand look-and-feel needs such changes. */ - @apply --marketplaceSmallAvatarFontStyles; @apply --avatarBase; /* Layout */ @@ -36,6 +36,8 @@ } .initials { + font-size: 14px; + font-weight: var(--fontWeightBold); padding-bottom: 4px; } @@ -43,7 +45,6 @@ /* Medium Avatar */ .mediumAvatar { - @apply --marketplaceMediumAvatarFontStyles; @apply --avatarBase; /* Fixed dimensions */ @@ -52,6 +53,8 @@ } .mediumAvatar .initials { + font-size: 20px; + font-weight: var(--fontWeightSemiBold); padding-bottom: 5px; } @@ -59,7 +62,6 @@ /* Large Avatar */ .largeAvatar { - @apply --marketplaceH1FontStyles; @apply --avatarBase; /* Fixed dimensions */ @@ -68,5 +70,7 @@ } .largeAvatar .initials { + font-size: 30px; + font-weight: var(--fontWeightSemiBold); padding-bottom: 6px; } diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.css b/src/components/OrderDetailsPanel/OrderDetailsPanel.css index 0813fc07..d4177d98 100644 --- a/src/components/OrderDetailsPanel/OrderDetailsPanel.css +++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.css @@ -57,8 +57,6 @@ /* Layout */ display: block; - width: 61px; - height: 61px; @media (--viewportLarge) { margin-left: 48px; diff --git a/src/components/SaleDetailsPanel/SaleDetailsPanel.js b/src/components/SaleDetailsPanel/SaleDetailsPanel.js index f8c2825c..f24eec47 100644 --- a/src/components/SaleDetailsPanel/SaleDetailsPanel.js +++ b/src/components/SaleDetailsPanel/SaleDetailsPanel.js @@ -5,7 +5,7 @@ import * as propTypes from '../../util/propTypes'; import { createSlug } from '../../util/urlHelpers'; import { ensureListing, ensureTransaction, ensureBooking, ensureUser } from '../../util/data'; import { - AvatarMedium, + AvatarLarge, BookingBreakdown, NamedLink, ResponsiveImage, @@ -195,11 +195,11 @@ const SaleDetailsPanel = props => { />
- +
- +

{title}

{message}

diff --git a/src/components/TextInputField/TextInputField.css b/src/components/TextInputField/TextInputField.css index 4c298e89..57177cec 100644 --- a/src/components/TextInputField/TextInputField.css +++ b/src/components/TextInputField/TextInputField.css @@ -1,7 +1,6 @@ @import '../../marketplace.css'; .root { - } .input { diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css index 1fcdb986..a978af93 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.css +++ b/src/components/TopbarDesktop/TopbarDesktop.css @@ -185,8 +185,6 @@ .avatar { margin: 16px 0; - width: 41px; - height: 41px; } .profileMenuContent { diff --git a/src/containers/CheckoutPage/CheckoutPage.css b/src/containers/CheckoutPage/CheckoutPage.css index 9aca1057..381416f8 100644 --- a/src/containers/CheckoutPage/CheckoutPage.css +++ b/src/containers/CheckoutPage/CheckoutPage.css @@ -129,8 +129,6 @@ /* Layout */ display: block; - width: 61px; - height: 61px; @media (--viewportLarge) { margin-left: 48px; diff --git a/src/containers/InboxPage/InboxPage.css b/src/containers/InboxPage/InboxPage.css index 1cce33fd..bc8dc403 100644 --- a/src/containers/InboxPage/InboxPage.css +++ b/src/containers/InboxPage/InboxPage.css @@ -209,10 +209,6 @@ } } -.itemAvatarImage { - border-radius: 50%; -} - .rowNotificationDot { width: 6px; height: 6px; diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index 91e922a6..95faede2 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/src/containers/ListingPage/ListingPage.css @@ -161,14 +161,7 @@ /* Rendering context to the same lavel as listing image */ position: relative; - /* Layout */ - display: block; - width: 61px; - height: 61px; - @media (--viewportMedium) { - width: 96px; - height: 96px; position: absolute; left: 60px; top: -48px; @@ -177,32 +170,17 @@ } } -.avatar { - /* Font */ - @apply --marketplaceAvatarFontStyles; - - /* Layout */ - width: 100%; - height: 100%; - border-radius: 50%; - margin-top: 0; - margin-bottom: 0; - - /* Position possible initials to the center of the component */ - display: flex; - align-items: center; - justify-content: center; - - /* Colors */ - background-color: var(--matterColorAnti); - color: var(--matterColorLight); +.responsiveAvatarMedium { + display: none; /* Hide the medium avatar from the bigger screens */ + @media screen and (max-width: 767px) { + display: flex; + } } -/* Align the avatar initials properly within the circle */ -.avatar span { - margin-bottom: 5px; +.responsiveAvatarLarge { + display: none; /* Hide the large avatar from the smaller screens */ @media (--viewportMedium) { - margin-bottom: 0; + display: flex; } } diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index ab3bc4f3..aaa19803 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -12,7 +12,8 @@ import { formatMoney } from '../../util/currency'; import { createResourceLocatorString, findRouteByRouteName } from '../../util/routes'; import { ensureListing, ensureUser } from '../../util/data'; import { - Avatar, + AvatarLarge, + AvatarMedium, Button, Map, ModalInMobile, @@ -268,9 +269,11 @@ export class ListingPageComponent extends Component { > +
- + +
diff --git a/src/marketplace.css b/src/marketplace.css index f1536cf8..f0df9cee 100644 --- a/src/marketplace.css +++ b/src/marketplace.css @@ -30,7 +30,10 @@ background-position-x: 80%; } - /* Colors */ + + +/* ================ Colors ================ */ + --marketplaceColor: #C0392B; --marketplaceColorLight: #FF4C38; --marketplaceColorDark: #8C291E; @@ -49,7 +52,10 @@ --matterColorLightTransparent: rgba(255,255,255,0.65); - /* Spacing units */ + + +/* ================ Spacing unites ================ */ + /* Multiples of mobile and desktop spacing units should be used with margins and paddings. */ --spacingUnit: 6px; --spacingUnitDesktop: 8px; @@ -64,25 +70,40 @@ --boxShadowButton: 0 4px 8px 0 rgba(0, 0, 0, 0.10); --boxShadowListingCard: 0 0 50px 0 rgba(0,0,0,0.1); - /* z-index base levels */ + + +/* ================ Z-index base levels ================ */ + /* small popups on UI should use z-indexes above 50 */ --zIndexPopup: 50; /* modals and UI overlays should use z-indexes above 100 */ --zIndexModal: 100; - /* Border radius */ + + +/* ================ Border radius ================ */ + --borderRadius: 2px; --borderRadiusMobileSearch: 3px; - /* Transitions */ + + +/* ================ Transition styles ================ */ + --transitionStyle: ease-in 0.2s; --transitionStyleButton: ease-in-out 0.1s; - /* Topbar */ + + +/* ================ Topbar heights ================ */ + --topbarHeight: 60px; --topbarHeightDesktop: 72px; - /* Links */ + + +/* ================ Links ================ */ + --marketplaceLinkStyles: { /* Position and dimensions */ @@ -105,7 +126,10 @@ } } - /* Buttons */ + + +/* ================ Buttons ================ */ + --marketplaceButtonFontStyles: { font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightSemiBold); @@ -189,7 +213,10 @@ } } - /* Inputs */ + + +/* ================ Inputs ================ */ + --marketplaceInputStyles: { /* Dimensions */ @@ -260,6 +287,8 @@ } } + + /* ================ Custom media queries ================ */ @custom-media --viewportMedium (min-width: 768px); diff --git a/src/marketplaceFonts.css b/src/marketplaceFonts.css index d653d0ec..c8c7b7ee 100644 --- a/src/marketplaceFonts.css +++ b/src/marketplaceFonts.css @@ -7,6 +7,9 @@ --fontWeightSemiBold: 600; --fontWeightBold: 700; + +/* ================ Default font ================ */ + --marketplaceDefaultFontStyles: { font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightMedium); @@ -21,6 +24,9 @@ } } + +/* ================ Body font ================ */ + --marketplaceBodyFontStyles: { font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightMedium); @@ -40,8 +46,10 @@ } } + +/* ================ Hero title ================ */ + --marketplaceHeroTitleFontStyles: { - font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightBold); font-size: 48px; line-height: 54px; @@ -59,8 +67,11 @@ margin-bottom: 31px; } } + + +/* ================ H1, H2, H3, H4, H5 & H6 ================ */ + --marketplaceH1FontStyles: { - font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightBold); font-size: 30px; line-height: 36px; @@ -79,8 +90,8 @@ margin-bottom: 24px; } } + --marketplaceH2FontStyles: { - font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightSemiBold); font-size: 24px; line-height: 30px; @@ -96,8 +107,8 @@ margin-bottom: 19px; } } + --marketplaceH3FontStyles: { - font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightSemiBold); font-size: 20px; line-height: 24px; @@ -112,8 +123,8 @@ margin-bottom: 16px; } } + --marketplaceH4FontStyles: { - font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightMedium); font-size: 16px; line-height: 24px; @@ -129,8 +140,8 @@ margin-bottom: 15px; } } + --marketplaceH5FontStyles: { - font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightRegular); font-size: 14px; line-height: 18px; @@ -140,15 +151,14 @@ margin-bottom: 8px; @media (--viewportMedium) { - font-size: 16px; line-height: 24px; /* margin-top + n * line-height + margin-bottom => x * 8px */ margin-top: 10px; margin-bottom: 14px; } } + --marketplaceH6FontStyles: { - font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightBold); font-size: 12px; line-height: 18px; @@ -165,6 +175,10 @@ margin-bottom: 6px; } } + + +/* ================ Other fonts ================ */ + --marketplaceTinyFontStyles: { font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightRegular); @@ -183,39 +197,9 @@ } } - /* This font is specific to Avatar component only */ - --marketplaceAvatarFontStyles: { - font-family: "sofiapro", Helvetica, Arial, sans-serif; - font-weight: var(--fontWeightSemiBold); - font-size: 20px; - line-height: 24px; - letter-spacing: -0.2px; - - @media (--viewportMedium) { - font-size: 30px; - line-height: 48px; - } - } - /* This font is specific to Avatar component only */ - --marketplaceSmallAvatarFontStyles: { - font-family: "sofiapro", Helvetica, Arial, sans-serif; - font-weight: var(--fontWeightBold); - font-size: 14px; - line-height: 18px; - letter-spacing: 0.1px; - } - /* This font is specific to Avatar component only */ - --marketplaceMediumAvatarFontStyles: { - font-family: "sofiapro", Helvetica, Arial, sans-serif; - font-weight: var(--fontWeightSemiBold); - font-size: 20px; - line-height: 24px; - letter-spacing: -0.2px; - } /* This font is specific to Modal's (Lightbox) titles */ --marketplaceModalTitle: { - font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightSemiBold); font-size: 30px; line-height: 36px; @@ -227,8 +211,10 @@ } } + +/* ================ Tabbed navigation font styles ================ */ + --marketplaceTabNavFontStyles { - font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightMedium); font-size: 16px; line-height: 24px; @@ -242,7 +228,6 @@ } --marketplaceTabNavHorizontalFontStyles { - font-family: "sofiapro", Helvetica, Arial, sans-serif; font-weight: var(--fontWeightMedium); font-size: 16px; line-height: 24px; diff --git a/src/marketplaceIndex.css b/src/marketplaceIndex.css index a945df18..83338b98 100644 --- a/src/marketplaceIndex.css +++ b/src/marketplaceIndex.css @@ -4,6 +4,7 @@ /* ================ Fonts ================ */ body { + font-family: "sofiapro", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; /* http://szafranek.net/blog/2009/02/22/font-smoothing-explained/ */ -moz-osx-font-smoothing: grayscale; /* http://szafranek.net/blog/2009/02/22/font-smoothing-explained/ */ text-rendering: optimizeSpeed;