Merge pull request #2222 from lindapaiste/chore/delete-unused-css

Delete unused CSS classes, variables, and theme properties.

client/styles/abstracts/_variables.scss

@@ -3,19 +3,13 @@ $base-font-size: 12;
 //colors
 $p5js-pink: #ed225d;
 $p5js-pink-opacity: #ed225d80;
-$processing-blue: #007BBB;
 $p5js-active-pink: #f10046;
 $white: #fff;
 $black: #000;
 $yellow: #F5DC23;
-$orange: #ffa500;
-$red: #ff0000;
-$lightsteelblue: #B0C4DE;
 $dodgerblue: #1E90FF;
-// $icon-hover-color: #333;
 $p5-contrast-pink: #FFA9D9;
 
-$border-color: #B5B5B5;
 $outline-color: #0F9DD7;
 
 // Grayscale values
@@ -43,7 +37,6 @@ $themes: (
     primary-text-color: $dark,
     secondary-text-color: $medium-dark,
     inactive-text-color: $middle-dark,
-    dropzone-text-color: $dark,
     modal-button-color: $dark,
     background-color: $lighter,
     button-background-color: $light,
@@ -67,15 +60,10 @@ $themes: (
     console-background-color: $light,
     console-input-background-color: $lightest,
     console-color: $darker,
-    console-logged-times-color: $lightest,
     console-arrow-color: $middle-gray,
     console-active-arrow-color: #0071AD,
     console-header-background-color: $medium-light,
     console-header-color: $darker,
-    console-info-background-color: #5276B7,
-    console-warn-background-color: #996B00,
-    console-debug-background-color: #0071AD,
-    console-error-background-color: #D11518,
     ide-border-color: $medium-light,
     editor-gutter-color: $lighter,
     file-hover-color: $light,
@@ -99,9 +87,6 @@ $themes: (
     codefold-icon-open: url("../images/triangle-arrow-down.svg?byUrl"),
     codefold-icon-closed: url("../images/triangle-arrow-right.svg?byUrl"),
 
-    primary-button-color: $lightest,
-    primary-button-background-color: $p5js-pink,
-
     table-button-color: $lightest,
     table-button-background-color: $middle-gray,
     table-button-active-color: $lightest,
@@ -146,7 +131,6 @@ $themes: (
     logo-background-color: $lightest,
     heavy-text-color: $lightest,
     primary-text-color: $lightest,
-    dropzone-text-color: $black,
     modal-button-color: $lightest,
     secondary-text-color: $medium-light,
     inactive-text-color: $middle-light,
@@ -172,15 +156,10 @@ $themes: (
     console-background-color: $dark,
     console-input-background-color: $darker,
     console-color: $lightest,
-    console-logged-times-color: $dark,
     console-arrow-color: $medium-light,
     console-active-arrow-color: #097BB3,
     console-header-background-color: $medium-dark,
     console-header-color: $lightest,
-    console-info-background-color: #5276B7,
-    console-warn-background-color: #966C08,
-    console-error-background-color: #DD3134,
-    console-debug-background-color: #097BB3,
     ide-border-color: $middle-dark,
     editor-gutter-color: $darker,
     file-hover-color: $dark,
@@ -204,9 +183,6 @@ $themes: (
     codefold-icon-open: url("../images/triangle-arrow-down-white.svg?byUrl"),
     codefold-icon-closed: url("../images/triangle-arrow-right-white.svg?byUrl"),
 
-    primary-button-color: $lightest,
-    primary-button-background-color: $p5js-pink,
-
     table-button-color: $lightest,
     table-button-background-color: $middle-gray,
     table-button-active-color: $lightest,
@@ -249,7 +225,6 @@ $themes: (
     logo-background-color: $darker,
     heavy-text-color: $yellow,
     primary-text-color: $lightest,
-    dropzone-text-color: $black,
     modal-button-color: $dark,
     secondary-text-color: $lighter,
     inactive-text-color: $light,
@@ -275,15 +250,10 @@ $themes: (
     console-background-color: $dark,
     console-input-background-color: $darker,
     console-color: $lightest,
-    console-logged-times-color: $darker,
     console-arrow-color: $lightest,
     console-active-arrow-color: $dodgerblue,
     console-header-background-color: $medium-dark,
     console-header-color: $lightest,
-    console-info-background-color: $lightsteelblue,
-    console-warn-background-color: $orange,
-    console-debug-background-color: $dodgerblue,
-    console-error-background-color: $red,
     ide-border-color: $middle-dark,
     editor-gutter-color: $darker,
     file-hover-color: $dark,
@@ -307,9 +277,6 @@ $themes: (
     codefold-icon-open: url("../images/triangle-arrow-down-white.svg?byUrl"),
     codefold-icon-closed: url("../images/triangle-arrow-right-white.svg?byUrl"),
 
-    primary-button-color: $lightest,
-    primary-button-background-color: $p5js-pink,
-
     table-button-color: $dark,
     table-button-background-color: $middle-gray,
     table-button-active-color: $dark,
@@ -352,13 +319,3 @@ $themes: (
 $toast-background-color: $medium-dark;
 $toast-text-color: $lightest;
 
-$light-console-error-color: #D11518;
-$light-console-warn-color: #FAAF00;
-$light-console-debug-color: #0071AD;
-
-$dark-console-error-color: #DF3A3D;
-$dark-console-warn-color: #F5BC38;
-$dark-console-debug-color: #0C99E2;
-
-$about-play-background-color: rgba(255, 255, 255, 0.7);
-$about-button-border-color: rgba(151, 151, 151, 0.7);

client/styles/components/_about.scss

@@ -6,35 +6,6 @@
   }
 }
 
-// hello p5 video link button css
-
-// .about__play-video {
-//   padding-top: #{9 / $base-font-size}rem;
-//   padding-left: #{5 / $base-font-size}rem;
-// }
-
-// .about__play-video-button {
-//   @include themify() {
-//     @extend %toolbar-button;
-//     width: #{32 / $base-font-size}rem;
-//     height: #{32 / $base-font-size}rem;
-//     line-height: #{34 / $base-font-size}rem;
-//     border-radius: #{24 / $base-font-size}rem;
-//     background-color: $about-play-background-color;
-//     border: solid 0.5px $about-button-border-color;
-//     &:hover {
-//       border-color: getThemifyVariable('button-background-hover-color');
-//     }
-//   }
-//   padding-left: 2px;
-//   margin-right: #{9 / $base-font-size}rem;
-//   svg {
-//     width: #{11 / $base-font-size}rem;
-//     height: #{11 / $base-font-size}rem;
-//     margin-left: #{1 / $base-font-size}rem;
-//   }
-// }
-
 .about__content {
   display: flex;
   flex-direction: row;
@@ -105,12 +76,3 @@
 .about__footer-list {
   padding-top: #{12 / $base-font-size}rem;
 }
-
-.about__ok-button {
-  @include themify() {
-    @extend %button;
-    padding: #{7 / $base-font-size}rem #{13 / $base-font-size}rem;
-    font-size: #{16 / $base-font-size}rem;
-    border: #{0.5 / $base-font-size}rem solid $toast-background-color;
-  }
-}

client/styles/components/_console.scss

@@ -34,10 +34,6 @@
 	font-weight: normal;
 }
 
-.preview-console__icon {
-	padding-right: #{20 / $base-font-size}rem;
-}
-
 .preview-console__messages {
 	display: flex;
 	flex: 1;

client/styles/components/_copyable-input.scss

@@ -2,14 +2,6 @@
   position: relative;
 }
 
-.copyable-input__tooltip {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
 .copyable-input__value {
   width: 100%;
   font-size: #{16 / $base-font-size}rem;

client/styles/components/_dashboard-header.scss

@@ -13,14 +13,6 @@
   width: 100%;
 }
 
-.dashboard-header--no-vertical-padding {
-  padding: 0 66px;
-}
-
-.dashboard-header--no-vertical-padding {
-  padding: 0 66px;
-}
-
 .dashboard-header__switcher {
   flex: 1;
 }

client/styles/components/_modal.scss

@@ -45,13 +45,6 @@
   flex: 1;
 }
 
-input.new-file-form__submit,
-input.new-folder-form__submit {
-  @include themify() {
-    background-color: getThemifyVariable("button-secondary-background-color");
-  }
-}
-
 .modal__divider {
   text-align: center;
   margin: #{20 / $base-font-size}rem 0;

client/styles/components/_nav.scss

@@ -153,21 +153,6 @@
   }
 }
 
-.nav__announce {
-  position: absolute;
-  top: #{40 / $base-font-size}rem;
-  right: #{88 / $base-font-size}rem;
-  width: #{398 / $base-font-size}rem;
-  padding: #{5 / $base-font-size}rem 0;
-  text-transform: uppercase;
-  background-color: #ffbc00;
-  color: white;
-  text-align: center;
-  padding: #{7 / $base-font-size}rem #{8 / $base-font-size}rem;
-  line-height: 145%;
-  z-index: 0;
-}
-
 .nav__item-logo {
   position: relative;
   height: #{42 / $base-font-size}rem;