add styling for fundraiser related components

Author: Rachel Lim

client/styles/abstracts/_variables.scss

@@ -50,6 +50,7 @@ $themes: (
     button-nav-inactive-color: $middle-gray,
     button-hover-color: $lightest,
     button-active-color: $lightest,
+    fundraiser-button-color: $p5js-pink,
     modal-background-color: $light,
     preferences-button-background-color: $medium-light,
     modal-border-color: $middle-light,

client/styles/components/_fundraiser.scss

@@ -0,0 +1,13 @@
+.fundraiser {
+    padding: #{20 / $base-font-size}rem;
+    margin-right: #{20 / $base-font-size}rem;
+    padding-bottom: #{40 / $base-font-size}rem;
+    width: #{500 / $base-font-size}rem;
+    text-align: center;
+    overflow-y: auto;
+}
+
+.fundraiser__description {
+    margin: #{20 / $base-font-size}rem 0;
+    font-size: #{20 / $base-font-size}rem;
+}

client/styles/components/_nav.scss

@@ -23,6 +23,15 @@
   align-items: center;
 }
 
+.nav__fundraiser-btn {
+  font-weight: bold;
+  font-size: #{14 / $base-font-size}rem;
+  @include themify() {
+    color: getThemifyVariable('fundraiser-button-color');
+  }
+}
+
+
 .preview-nav__editor-svg {
   @include icon();
 }

client/styles/main.scss

@@ -43,6 +43,7 @@
 @import 'components/asset-list';
 @import 'components/asset-size';
 @import 'components/keyboard-shortcuts';
+@import 'components/fundraiser';
 @import 'components/copyable-input';
 @import 'components/feedback';
 @import 'components/console-input';