diff --git a/app/styles/app/components/sync-button.sass b/app/styles/app/components/sync-button.sass index da56a48d..cb4c8ed4 100644 --- a/app/styles/app/components/sync-button.sass +++ b/app/styles/app/components/sync-button.sass @@ -1,6 +1,10 @@ .sync-button vertical-align: middle + display: flex + flex-flow: row-reverse wrap .button + position: relative + z-index: 2 height: 2.6rem padding: 0.6em 0.8em background-color: $agate-blue @@ -9,11 +13,27 @@ font-size: 14px &:hover background-color: $oxide-blue + .sync-last + position: relative + z-index: -1 + transition: transform 150ms ease, opacity 250ms ease + transform: translateX(80%) + opacity: 0 + .button:hover ~ .sync-last + transform: translateX(0) + opacity: 1 + z-index: 1 .is-syncing background-color: $oxide-blue .icon-trigger + @extend %icon-line-trigger-white + @extend %icon + width: 1.5em + height: 1.5em + margin-right: 0.3em + .loading-indicator--white vertical-align: top @@ -24,3 +44,4 @@ margin: 0 1em 0 color: $asphalt-grey text-align: right + line-height: 2.6 diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass index a85daedd..66166a47 100644 --- a/app/styles/app/layouts/dashboard.sass +++ b/app/styles/app/layouts/dashboard.sass @@ -4,12 +4,14 @@ .dashboard-header + width: 100% display: flex flex-flow: column-reverse wrap justify-content: space-between padding: 2em 0 @media #{$medium-up} flex-direction: row + align-items: baseline .dashboard-repos margin-bottom: 5rem diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass index d191f1e7..fb10e33b 100644 --- a/app/styles/app/layouts/profile.sass +++ b/app/styles/app/layouts/profile.sass @@ -13,23 +13,17 @@ header h1 margin: 0 1.7rem 0 0 - color: #808080 - font-size: 35px + color: $asphalt-grey + font-size: 36px font-weight: 400 - line-height: 1.45 - p:not(.sync-last) - font-size: $font-size-sm - color: $cement-grey - margin: 2rem 0 1rem 0 - a - color: $cement-grey - text-decoration: underline + @media #{$medium-up} - .profile-header, .sync-button + .profile-header display: inline-block vertical-align: middle .sync-button - margin-top: .5em + float: right + margin-top: .4em @media #{$large-up} .profile-header position: relative @@ -39,13 +33,6 @@ &:after @include fadeOut(right, -90deg, white) - .loading-indicator--white - vertical-align: top - margin-right: .5em - p - font-size: $font-size-m - color: $cement-grey - .cta-btn text-align: right @@ -111,9 +98,8 @@ .profile-orgs h1 - color: #898b8c font-size: $font-size-sm - border-bottom: solid 2px $cream-dark + border-bottom: solid 2px $pebble-grey .profile-user margin: 1rem 0 2rem @@ -196,14 +182,10 @@ p.profile-user-last .profile-additional - border-top: solid 2px #f3f2f2 + border-top: solid 2px $pebble-grey .profile-text, -.profile-additional p - color: #adaaab - line-height: $line-height-m - a - color: #adaaab - text-decoration: underline +.profile-additional + +linkStyle .hooks-error width: 100%; diff --git a/app/styles/app/mixins.sass b/app/styles/app/mixins.sass index 3d2fb2db..27e64b4f 100644 --- a/app/styles/app/mixins.sass +++ b/app/styles/app/mixins.sass @@ -48,12 +48,12 @@ =linkStyle a text-decoration: none - border-bottom: 1px solid #bfc0c1 + border-bottom: 1px solid $cement-grey padding-bottom: 0.1rem transition: color 200ms ease, border 200ms ease &:hover, &:active - color: #303030 + color: $cement-grey text-decoration: none border-color: transparent diff --git a/app/templates/components/sync-button.hbs b/app/templates/components/sync-button.hbs index c52668e0..ffac0beb 100644 --- a/app/templates/components/sync-button.hbs +++ b/app/templates/components/sync-button.hbs @@ -3,8 +3,8 @@ Syncing from GitHub {{else}} -
Last synced {{format-time user.syncedAt}}
+Last synced {{format-time user.syncedAt}}
{{/if}}