diff --git a/services/web/app/src/Features/StaticPages/StaticPagesRouter.js b/services/web/app/src/Features/StaticPages/StaticPagesRouter.js index 7c3ff4f2e2..beb35b9deb 100644 --- a/services/web/app/src/Features/StaticPages/StaticPagesRouter.js +++ b/services/web/app/src/Features/StaticPages/StaticPagesRouter.js @@ -38,10 +38,6 @@ module.exports = { '/style', HomeController.externalPage('style_guide', 'Style Guide') ) - webRouter.get( - '/ol-style', - HomeController.externalPage('ol_style_guide', 'Overleaf Style Guide') - ) webRouter.get('/jobs', HomeController.externalPage('jobs', 'Jobs')) webRouter.get( diff --git a/services/web/app/views/_metadata.pug b/services/web/app/views/_metadata.pug index ec25b7f953..9f1c5d37bd 100644 --- a/services/web/app/views/_metadata.pug +++ b/services/web/app/views/_metadata.pug @@ -100,4 +100,4 @@ if metadata && metadata.viewport link(rel="icon", href="/" + settings.brandPrefix + "favicon.ico") link(rel="icon", sizes="192x192", href="/" + settings.brandPrefix + "touch-icon-192x192.png") link(rel="apple-touch-icon-precomposed", href="/" + settings.brandPrefix + "apple-touch-icon-precomposed.png") -link(rel="mask-icon", href="/" + settings.brandPrefix + "mask-favicon.svg", color=settings.brandPrefix === 'sl-' ? "#a93529" : "#4f9c45") +link(rel="mask-icon", href="/" + settings.brandPrefix + "mask-favicon.svg", color=settings.brandPrefix === 'sl-' ? "#a93529" : "#138A07") diff --git a/services/web/public/img/homepage.png b/services/web/public/img/homepage.png index 052206d0a7..fe68c915e5 100644 Binary files a/services/web/public/img/homepage.png and b/services/web/public/img/homepage.png differ diff --git a/services/web/public/img/homepage@2x.png b/services/web/public/img/homepage@2x.png index 87f4687271..b6825eef8a 100644 Binary files a/services/web/public/img/homepage@2x.png and b/services/web/public/img/homepage@2x.png differ diff --git a/services/web/public/img/ol-brand/overleaf-o.svg b/services/web/public/img/ol-brand/overleaf-o.svg index 223203dc8f..1dee8c7bdf 100644 --- a/services/web/public/img/ol-brand/overleaf-o.svg +++ b/services/web/public/img/ol-brand/overleaf-o.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/services/web/public/img/ol-brand/overleaf.svg b/services/web/public/img/ol-brand/overleaf.svg index a1ba347f3a..0204321849 100644 --- a/services/web/public/img/ol-brand/overleaf.svg +++ b/services/web/public/img/ol-brand/overleaf.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_google.svg b/services/web/public/img/other-brands/logo_google.svg index 728b6fa185..428f771ae2 100644 --- a/services/web/public/img/other-brands/logo_google.svg +++ b/services/web/public/img/other-brands/logo_google.svg @@ -1 +1,6 @@ -Shape-Copy \ No newline at end of file + + + + + + \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_google_alt.svg b/services/web/public/img/other-brands/logo_google_alt.svg deleted file mode 100644 index 3c7a7228ae..0000000000 --- a/services/web/public/img/other-brands/logo_google_alt.svg +++ /dev/null @@ -1 +0,0 @@ -Shape-Copy \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_google_white.svg b/services/web/public/img/other-brands/logo_google_white.svg new file mode 100644 index 0000000000..b8566a44f0 --- /dev/null +++ b/services/web/public/img/other-brands/logo_google_white.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_ieee.svg b/services/web/public/img/other-brands/logo_ieee.svg index 29fc90e1a7..301514c646 100644 --- a/services/web/public/img/other-brands/logo_ieee.svg +++ b/services/web/public/img/other-brands/logo_ieee.svg @@ -1 +1 @@ -Asset 2 \ No newline at end of file +Asset 2 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_ieee_white.svg b/services/web/public/img/other-brands/logo_ieee_white.svg new file mode 100644 index 0000000000..29fc90e1a7 --- /dev/null +++ b/services/web/public/img/other-brands/logo_ieee_white.svg @@ -0,0 +1 @@ +Asset 2 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_orcid.svg b/services/web/public/img/other-brands/logo_orcid.svg index 98107f2e5e..82affd04de 100644 --- a/services/web/public/img/other-brands/logo_orcid.svg +++ b/services/web/public/img/other-brands/logo_orcid.svg @@ -1 +1 @@ -Asset 1 \ No newline at end of file +Asset 1 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_orcid_alt.svg b/services/web/public/img/other-brands/logo_orcid_alt.svg deleted file mode 100644 index 82affd04de..0000000000 --- a/services/web/public/img/other-brands/logo_orcid_alt.svg +++ /dev/null @@ -1 +0,0 @@ -Asset 1 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_orcid_white.svg b/services/web/public/img/other-brands/logo_orcid_white.svg new file mode 100644 index 0000000000..98107f2e5e --- /dev/null +++ b/services/web/public/img/other-brands/logo_orcid_white.svg @@ -0,0 +1 @@ +Asset 1 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_sharelatex.svg b/services/web/public/img/other-brands/logo_sharelatex.svg index e59e2db80d..bdfa8cab20 100644 --- a/services/web/public/img/other-brands/logo_sharelatex.svg +++ b/services/web/public/img/other-brands/logo_sharelatex.svg @@ -1 +1 @@ -Asset 4 \ No newline at end of file +Asset 4 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_sharelatex_white.svg b/services/web/public/img/other-brands/logo_sharelatex_white.svg new file mode 100644 index 0000000000..e59e2db80d --- /dev/null +++ b/services/web/public/img/other-brands/logo_sharelatex_white.svg @@ -0,0 +1 @@ +Asset 4 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_twitter.svg b/services/web/public/img/other-brands/logo_twitter.svg index 6a00726c0c..4590acb688 100644 --- a/services/web/public/img/other-brands/logo_twitter.svg +++ b/services/web/public/img/other-brands/logo_twitter.svg @@ -1 +1 @@ -Asset 3 \ No newline at end of file +Asset 3 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_twitter_white.svg b/services/web/public/img/other-brands/logo_twitter_white.svg new file mode 100644 index 0000000000..6a00726c0c --- /dev/null +++ b/services/web/public/img/other-brands/logo_twitter_white.svg @@ -0,0 +1 @@ +Asset 3 \ No newline at end of file diff --git a/services/web/public/stylesheets/app/homepage.less b/services/web/public/stylesheets/app/homepage.less index 5092f9fae7..35a578cad5 100644 --- a/services/web/public/stylesheets/app/homepage.less +++ b/services/web/public/stylesheets/app/homepage.less @@ -165,8 +165,15 @@ } } -.hp-login-btn { +.hp-login-btn when (@is-overleaf = true) { + .login-btn; min-width: 220px; + + background-color: @ol-blue-gray-3; + + &:hover, &:focus, &:active { + background-color: darken(@ol-blue-gray-3, 8%); + } } .hp-register-form-email-pwd { diff --git a/services/web/public/stylesheets/app/login-register.less b/services/web/public/stylesheets/app/login-register.less index ddecb4f2a4..4f300d6cbe 100644 --- a/services/web/public/stylesheets/app/login-register.less +++ b/services/web/public/stylesheets/app/login-register.less @@ -1,40 +1,9 @@ @brand-ieee-color : #00629B; -@brand-google-color : #4885ED; +@brand-google-color : #276fea; // Not the "official" color but modified for a11y @brand-twitter-color : #1DA1F2; @brand-orcid-color : #A6CE39; @brand-sharelatex-color : #A93529; -.make-login-register-brand-btn(@bg-color) { - background-color: @bg-color; - text-indent: -10px; - padding-left: 0; - padding-right: 0; - &:focus, - &:hover { - background-color: darken(@bg-color, 8%); - } - &:active { - background-color: darken(@bg-color, 16%); - } -} - -.make-login-register-brand-btn-alt(@color) { - background-color: #FFF; - color: @color; - text-indent: -10px; - padding-left: 0; - padding-right: 0; - &:focus, - &:hover { - background-color: #FFF; - color: darken(@color, 8%); - } - &:active { - background-color: #FFF; - color: darken(@color, 16%); - } -} - .login-register-container { max-width: 400px; margin: 0 auto; @@ -120,64 +89,53 @@ } } - .login-btn-ieee { - .make-login-register-brand-btn(@brand-ieee-color); + .login-btn { + .btn; + .btn-default; + position: relative; + padding-left: 20px; + padding-right: 0; } - .login-btn-google { - .make-login-register-brand-btn(@brand-google-color); - } - - .login-btn-google-alt { - .make-login-register-brand-btn-alt(@brand-google-color); - } - - .login-btn-twitter { - .make-login-register-brand-btn(@brand-twitter-color); - } - - .login-btn-orcid { - .make-login-register-brand-btn(@brand-orcid-color); - } - - .login-btn-orcid-alt { - .make-login-register-brand-btn-alt(darken(@brand-orcid-color, 6%)); - } - .login-btn-sharelatex { - .make-login-register-brand-btn(@brand-sharelatex-color); + background-color: @brand-sharelatex-color; + &:focus, + &:hover { + background-color: darken(@brand-sharelatex-color, 8%); + } + &:active { + background-color: darken(@brand-sharelatex-color, 16%); + } } - .login-btn-icon { - display: inline-block; - float: left; - margin-left: 5px; - background: url(/img/brand/lion.svg) center/contain no-repeat; - width: 24px; + .login-btn-icon { + position: absolute; + top: 4px; + left: 4px; + background: #FFF url(/img/brand/lion.svg) center/20px no-repeat; + border-radius: 99999px; + width: 26px; + height: 26px; + &::before { content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome. } } + .login-btn-icon-ieee { background-image: url(/img/other-brands/logo_ieee.svg); } .login-btn-icon-google { background-image: url(/img/other-brands/logo_google.svg); } - .login-btn-icon-google-alt { - background-image: url(/img/other-brands/logo_google_alt.svg); - } .login-btn-icon-twitter { background-image: url(/img/other-brands/logo_twitter.svg); } .login-btn-icon-orcid { background-image: url(/img/other-brands/logo_orcid.svg); } - .login-btn-icon-orcid-alt { - background-image: url(/img/other-brands/logo_orcid_alt.svg); - } .login-btn-icon-sharelatex { - background-image: url(/img/other-brands/logo_sharelatex.svg); + background-size: 22px; } .login-register-header-heading { diff --git a/services/web/public/stylesheets/components/daterange-picker.less b/services/web/public/stylesheets/components/daterange-picker.less index f0dcc01d27..95f6bbfe8d 100644 --- a/services/web/public/stylesheets/components/daterange-picker.less +++ b/services/web/public/stylesheets/components/daterange-picker.less @@ -34,7 +34,7 @@ @daterangepicker-in-range-bg-color: #ebf4f8; @daterangepicker-active-color: #fff; -@daterangepicker-active-bg-color: #4F9C45; +@daterangepicker-active-bg-color: #138A07; @daterangepicker-active-border-color: transparent; @daterangepicker-unselected-color: #999; diff --git a/services/web/public/stylesheets/core/ol-light-variables.less b/services/web/public/stylesheets/core/ol-light-variables.less index 9fb0507aed..ab099d6e82 100644 --- a/services/web/public/stylesheets/core/ol-light-variables.less +++ b/services/web/public/stylesheets/core/ol-light-variables.less @@ -7,9 +7,9 @@ @ol-blue-gray-5 : #2C3645; @ol-blue-gray-6 : #1E2530; -@ol-green : #4F9C45; -@ol-dark-green : #1C5B26; -@ol-blue : #4B7FD1; +@ol-green : #138A07; +@ol-dark-green : #004A0E; +@ol-blue : #3E70BB; @ol-dark-blue : #2857A1; @ol-red : #C9453E; @ol-dark-red : #A6312B; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 6aba10b70f..07a9e1e83f 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -14,9 +14,9 @@ @ol-blue-gray-5 : #2C3645; @ol-blue-gray-6 : #1E2530; -@ol-green : #4F9C45; -@ol-dark-green : #1C5B26; -@ol-blue : #4B7FD1; +@ol-green : #138A07; +@ol-dark-green : #004A0E; +@ol-blue : #3E70BB; @ol-dark-blue : #2857A1; @ol-red : #C9453E; @ol-dark-red : #A6312B; @@ -55,6 +55,7 @@ @link-hover-color-alt : @ol-dark-green; @hr-border : @ol-blue-gray-1; @hr-border-alt : @gray-lighter; +@blockquote-small-color: @ol-blue-gray-3; // Button colors and sizing @btn-border-width : 0; @@ -114,7 +115,7 @@ // Tags @tag-border-radius : 9999px; -@tag-color : lighten(@ol-blue-gray-3, 10%); +@tag-color : @ol-blue-gray-4; @tag-bg-color : @ol-blue-gray-1; @tag-bg-hover-color : darken(@ol-blue-gray-1, 5%); @tag-top-adjustment : 2px; @@ -353,7 +354,7 @@ @history-toolbar-bg-color : @editor-toolbar-bg; @history-toolbar-color : #FFF; @history-file-badge-bg : rgba(255, 255, 255, .25); -@history-file-badge-color: : @file-tree-item-color; +@history-file-badge-color : @file-tree-item-color; // Screens // added -size to not conflict with common_variables @screen-size-sm-max : 767px;