Branding: Add Microsoft logo to first loading screen (#9605)

* add msft logo to first loading screen * PR suggestion Co-authored-by: Joey Wunderlich <[email protected]> * add comment for background size --------- Co-authored-by: Joey Wunderlich <[email protected]>
microsoft · Jul 19, 2023 · cc42e9f · cc42e9f
1 parent 84b6668
commit cc42e9f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/theme/themes/pxt/elements/loader.overrides b/theme/themes/pxt/elements/loader.overrides
@@ -3,7 +3,7 @@
 *******************************/
 
 
-.ui.loader.main:before, 
+.ui.loader.main:before,
 .ui.loader.avatar:before {
    border: none;
    border-radius: 0px;
@@ -15,11 +15,16 @@
   box-shadow: none;
   border-radius: 0px;
   background: transparent @loaderImage no-repeat center center;
-  background-size: 100%;
+  background-size: @loaderImageSize;
  -webkit-animation: @loaderAnimation @loaderSpeed infinite linear;
  animation: @loaderAnimation @loaderSpeed infinite linear;
 }
 
+.ui.loader.main.msft:after {
+  background-image: @loaderMsftImage;
+  background-size: 99%; // Must be less than 100% to avoid being cut off
+}
+
 .ui.loader.avatar:after {
    border: none;
    box-shadow: none;

diff --git a/theme/themes/pxt/globals/site.variables b/theme/themes/pxt/globals/site.variables
@@ -111,6 +111,10 @@
 
 @loaderImageUrl: "../docs/static/loader.svg";
 @loaderImage: data-uri(@loaderImageUrl);
+@loaderImageSize: 100%;
+
+@loaderMsftImageUrl: "../docs/static/orglogowide.png";
+@loaderMsftImage: data-uri(@loaderMsftImageUrl);
 
 @includePoweredByLogos: false;
 @poweredBySmallUrl: "../docs/static/logo/Powered-By-Microsoft-logo-small.png";

diff --git a/webapp/public/index.html b/webapp/public/index.html
@@ -34,7 +34,7 @@
 
 <body class="main">
     <div id='loading' class="ui active dimmer">
-        <div class="ui large main loader"></div>
+        <div class="ui large main loader msft"></div>
     </div>
 
     <div id='custom-content'>