diff --git a/src/header.pug b/src/header.pug
index 8c0f8c48f534f54db70f3b940a2926061cc0ed7c..d4d9e1177da5aa87a6bdf26f04ca31654c5145e8 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -5,20 +5,20 @@
span.tag.beta.reversed.color-primary(data-trans='header.beta')
-.segment.lg-quarter.float-right
- .segment.lg-auto.float-left
+.segment.lg-auto.float-right
+ .segment.lg-auto.float-left.margin-right
solid-notifications.notLoggedIn(
nested-field="inbox"
bind-user
)
- .segment.lg-auto.float-right
- details#user-controls.notLoggedIn
- summary(tabindex='0' role='button')
+ .segment.lg-auto.float-left.margin-left.text-bold.text-small.text-color-heading
+ details#user-controls.notLoggedIn.segment
+ summary.segment.padding(tabindex='0' role='button')
solid-display#user-controls__profile(
fields='first_name, account.picture'
- class-first_name='flex'
- class-account.picture='avatar'
+ class-first_name='text-letter-spacing-large'
+ class-account.picture='avatar small margin-right-small'
widget-account.picture='hubl-user-avatar'
bind-user
)
@@ -27,12 +27,12 @@
ul
if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
li
- solid-link(next='profile' data-trans='header.myProfile')
+ solid-link.segment.padding(next='profile' data-trans='header.myProfile')
li
- solid-link(next='admin' data-trans='header.admin')
+ solid-link.segment.padding(next='admin' data-trans='header.admin')
li
- solid-link(next='about' data-trans='header.about')
- button(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
+ solid-link.segment.padding(next='about' data-trans='header.about')
+ button.segment.padding.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
button.loggedIn.segment.float-right(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn')
diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index 5c63612199af6bbc0490011e5d063ddda294d978..088c5ec616659620664a25716168ab6f057d2604 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -3,7 +3,7 @@
--color-primary: #FF0055;
--color-secondary: #0068FF;
--color-third: #00E3B4;
- --color-gray: #636363;
+ --color-grey: #636363;
--color-heading: #2E3F58;
--color-complementary: #5BB4CE;
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index fd7326b28379a7dff61ac1673835a94d64c70b51..c6a342f212b5ee394b814632c2c6318525abe4b6 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -82,7 +82,7 @@
/* General styling for both notification and user's panel */
details {
- position: relative;
+ /*position: relative;*/
summary {
@@ -134,7 +134,7 @@ solid-notifications {
}
span {
- color: var(--color-notification-counter-number);
+ color: white;
}
}
}
@@ -189,7 +189,7 @@ solid-notifications {
position: absolute;
left: auto;
right: -2.3em;
- top: 3.99em;
+ top: 3.95em;
width: 347px;
}
@@ -215,7 +215,7 @@ solid-notifications {
/* End of custom scrollbar */
.solid-notifications__item {
- border-bottom: 1px solid var(--color-notification-item-border);
+ /*border-bottom: 1px solid var(--color-notification-item-border);*/
.solid-notification {
padding: 1.2rem 0 1.5rem;
@@ -251,6 +251,7 @@ solid-notifications {
font-family: Open Sans, sans-serif;
.solid-notification__title {
+ color: var(--color-heading);
font-size: 1.3rem;
font-weight: 600;
@@ -264,7 +265,7 @@ solid-notifications {
}
.solid-notification__summary {
- color: var(--color-notification-summary);
+ color: var(--color-grey);
font-size: 1.2rem;
line-height: 1.7rem;
margin: 1.1rem 0 0;
@@ -302,11 +303,11 @@ solid-notifications {
&:focus {
background-color: transparent;
- color: var(--color-user-panel-header-text-open);
+ color: white;
outline: none;
@include breakpoint(lg) {
- background-color: var(--color-user-panel-header-background-open);
+ background-color: var(--color-heading);
}
}
}
@@ -321,14 +322,14 @@ solid-notifications {
}
hubl-user-avatar {
- height: 3.3rem;
+ /*height: 3.3rem;
margin-right: 0;
- width: 3.3rem;
+ width: 3.3rem;*/
@include breakpoint(lg) {
- height: 4.8rem;
- margin-right: 2rem;
- width: 4.8rem;
+ /*margin-right: 16px;*/
+ /*height: 4.8rem;
+ width: 4.8rem;*/
}
}
@@ -337,8 +338,6 @@ solid-notifications {
align-items: center;
display: none;
flex-direction: row-reverse;
- font-size: 1.8rem;
- font-weight: 600;
&::before {
margin-left: 1.5rem;
@@ -362,11 +361,11 @@ solid-notifications {
@include breakpoint (lg) {
width: 100%;
- top: 83px;
+ top: 72px;
}
> nav {
- background-color: var(--color-user-panel-list-background);
+ background-color: white;
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
position: absolute;
right: 0;
@@ -381,35 +380,34 @@ solid-notifications {
li {
solid-link {
- color: var(--color-grey-4);
display: block;
- border-bottom: 1px solid var(--color-user-panel-list-border);
- margin-right: 0;
- padding: 1.6rem 1.3rem;
+ border-bottom: 1px solid #E4E8ED;
+ /*margin-right: 0;*/
+ /*padding: 1.6rem 1.3rem;*/
&:hover {
- color: var(--color-user-panel-list-text-hover);
+ color: var(--color-secondary);
}
}
}
}
button {
- color: var(--color-grey-4);
- padding: 1.6rem 1.3rem;
+ /*color: var(--color-grey-4);
+ padding: 1.6rem 1.3rem;*/
text-align: left;
width: 100%;
&:hover {
- color: var(--color-user-panel-list-text-hover);
+ color: var(--color-secondary);
}
}
}
}
&[open] {
- background-color: var(--color-user-panel-header-background);
- color: var(--color-user-panel-header-text);
+ /*background-color: var(--color-heading);*/
+ color: var(--color-heading);
#user-controls__profile {
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index d2d4b7da00fe4b914ad76762678e2c97dc3d79af..c5a9362a163744277df963eaf1ca0cbe2e14289e 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -63,12 +63,97 @@
&.float-right {
float: right;
}
+ &.margin-left {
+ margin-left: 20px;
+ }
+ &.margin-right {
+ margin-right: 20px;
+ }
+ &.padding {
+ padding: 14px;
+ }
+}
+
+.avatar {
+ border-radius: 50%;
+ object-fit: cover;
+ height: 50px;
+ width: 50px;
+
+ &.xsmall {
+ height: 31px;
+ width: 31px;
+ }
+ &.small {
+ height: 44px;
+ width: 44px;
+ }
+ &.large {
+ height: 180px;
+ width: 180px;
+ }
+ &.xlarge {
+ height: 241px;
+ width: 241px;
+ }
+ &.margin-right-small {
+ margin-right: 16px;
+ }
}
.shadow {
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
}
+.text-bold {
+ font-weight: 600;
+}
+
+.text-xsmall {
+ font-size: 12px;
+}
+
+.text-small {
+ font-size: 14px;
+}
+
+.text-large {
+ font-size: 18px;
+}
+
+.text-xlarge {
+ font-size: 18px;
+}
+
+.text-color-primary {
+ color: var(--color-primary);
+}
+
+.text-color-secondary {
+ color: var(--color-secondary);
+}
+
+.text-color-third {
+ color: var(--color-third);
+}
+
+.text-color-heading {
+ color: var(--color-heading);
+}
+
+.text-letter-spacing-wide {}
+
+.text-letter-spacing-wider {}
+
+.text-letter-spacing-widest {}
+
+.text-letter-spacing-large {
+ letter-spacing: 0.38px;
+}
+
+.text-letter-spacing-larger {}
+
+
.logo {
height: 34px;
width: 220px;