fix(Note): Expose --light-text CSS var, fixups (getsentry#260)

`Note` component was using `--light-text` CSS var, which was not exposed here. This made `Note`s look identical with regular content. This patch exposes the variable, fixing the issue. It also converts some notes to `Alert`s to get more attention and revises some grammar in them. Old: ![image](https://user-images.githubusercontent.com/126780/106499737-01245480-64d2-11eb-8a99-cc7cbaf5a478.png) New: ![image](https://user-images.githubusercontent.com/126780/106500052-6c6e2680-64d2-11eb-903f-f0d3638b8fcc.png)
mjaferDo · Feb 1, 2021 · f17e7bf · f17e7bf
1 parent 290af46
commit f17e7bf
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 59 deletions.
diff --git a/src/css/_includes/variables.scss b/src/css/_includes/variables.scss
@@ -9,64 +9,67 @@
 
 // A range of flame tones, from a saturated red to a light orange-peach.
 
-$flame0:                        #e03e2f; // ^ Red
-$flame1:                        #e54e39; // |
-$flame2:                        #ec5e44; // |
-$flame3:                        #f36e4f; // | Red-orange
-$flame4:                        #f58159; // |
-$flame5:                        #f79464; // |
-$flame6:                        #f9a66d; // | Orange-peach
-$flame7:                        #e6d1c1; // | Desat Peach
-$flame8:                        #feeee2; // v Peach
+$flame0: #e03e2f; // ^ Red
+$flame1: #e54e39; // |
+$flame2: #ec5e44; // |
+$flame3: #f36e4f; // | Red-orange
+$flame4: #f58159; // |
+$flame5: #f79464; // |
+$flame6: #f9a66d; // | Orange-peach
+$flame7: #e6d1c1; // | Desat Peach
+$flame8: #feeee2; // v Peach
 
 // A range of desaturated purples
 
-$desatPurple0:                  #16111c; // ^ Dark purple
-$desatPurple1:                  #241c2c; // |
-$desatPurple2:                  #342c3e; // |
-$desatPurple3:                  #463e52; // |
-$desatPurple4:                  #564f64; // |
-$desatPurple5:                  #675f76; // |
-$desatPurple6:                  #777088; // |
-$desatPurple7:                  #888099; // |
-$desatPurple8:                  #9990ab; // |
-$desatPurple9:                  #a8a1bd; // |
-$desatPurple10:                 #b9b2d0; // |
-$desatPurple11:                 #c9c2e1; // |
-$desatPurple12:                 #dbd3e9; // v Light purple
-$desatPurple13:                 #e4dff2;
-$desatPurple14:                 #f0e9ff;
-$desatPurple15:                 #faf8ff;
+$desatPurple0: #16111c; // ^ Dark purple
+$desatPurple1: #241c2c; // |
+$desatPurple2: #342c3e; // |
+$desatPurple3: #463e52; // |
+$desatPurple4: #564f64; // |
+$desatPurple5: #675f76; // |
+$desatPurple6: #777088; // |
+$desatPurple7: #888099; // |
+$desatPurple8: #9990ab; // |
+$desatPurple9: #a8a1bd; // |
+$desatPurple10: #b9b2d0; // |
+$desatPurple11: #c9c2e1; // |
+$desatPurple12: #dbd3e9; // v Light purple
+$desatPurple13: #e4dff2;
+$desatPurple14: #f0e9ff;
+$desatPurple15: #faf8ff;
 
 // A range of saturated purples
 
-$satPurple0:                    #6c5fc7;
-$satPurple1:                    #423b87;
+$satPurple0: #6c5fc7;
+$satPurple1: #423b87;
 
 // A pair of green/teal colors
 
-$jewel0:                        #57be8c; // Light green-teal
-$jewel1:                        #2e7d6f; // Dark green-teal
-
+$jewel0: #57be8c; // Light green-teal
+$jewel1: #2e7d6f; // Dark green-teal
 
 /*
 
   Color variables
 
 */
 
-$white:                         #ffffff;
-$linkColor:                     #5d91c9;
-$highlightPurple:               $satPurple0;
-$lightPurple:                   $desatPurple11;
-$lightestPurple:                $desatPurple12;
-$mediumPurple:                  $desatPurple6;
-$darkestPurple:                 $desatPurple0;
-$darkPurple:                    $desatPurple2;
-$boldRed:                       $flame0;
-$textDecorationPurple:          $satPurple1;
-$lightestPurpleBackground:      rgba($desatPurple12, .2);
-$successGreen:                  $jewel0;
-$lightText:                     #9093c1;
-
-$transition-time:               0.125s;
+$white: #ffffff;
+$linkColor: #5d91c9;
+$highlightPurple: $satPurple0;
+$lightPurple: $desatPurple11;
+$lightestPurple: $desatPurple12;
+$mediumPurple: $desatPurple6;
+$darkestPurple: $desatPurple0;
+$darkPurple: $desatPurple2;
+$boldRed: $flame0;
+$textDecorationPurple: $satPurple1;
+$lightestPurpleBackground: rgba($desatPurple12, 0.2);
+$successGreen: $jewel0;
+$lightText: #9093c1;
+
+$transition-time: 0.125s;
+
+:root {
+  --light-text: #{$lightText};
+}
diff --git a/src/docs/config.mdx b/src/docs/config.mdx
@@ -70,14 +70,11 @@ sentry config generate-secret-key
 
 Sentry logs to two major places — `stdout`, and its internal project. To disable logging to the internal project, add a logger whose only handler is `'console'` and disable propagating upwards.
 
-<Note><markdown>
-
-Explained below are the CLI flag and environment variable. They override the
-root logger and anything in `LOGGING.overridable`. Be very careful with this
-in a production system, because the Celery logger can be extremely verbose
-when set to INFO or DEBUG.
-
-</markdown></Note>
+<Alert level="warning">
+You will find the CLI flag and the environment variables related to logging below. They override the
+root logger and anything in <code>LOGGING.overridable</code>. Be very careful with these
+in a production system, because the Celery logger can be extremely verbose when set to INFO or DEBUG.
+</Alert>
 
 <ConfigValue name="-l/--loglevel" location="cli"><markdown>
 
@@ -113,9 +110,9 @@ LOGGING['default_level'] = 'WARNING'
 
 If logging in a particular module is not showing up when you expect it to, you should check the log level for that module in `src/sentry/conf/server.py` in the `LOGGING` variable.
 
-<Note>
-If you are a Sentry employee who is looking for logs in Kibana and they aren't showing up when you expect them to, one potential reason is that a field in the log message does not match Elasticsearch's schema. See the index patterns <a href="https://kibana.getsentry.net/app/kibana#/management/kibana/indices/0ba261d0-97ca-11e9-90db-dfacda4da93b?_g=()&_a=(tab:indexedFields)">here</a>.
-</Note>
+<Note><markdown>
+If you are a Sentry employee looking for logs in Kibana and they aren't showing up when as expected, one potential reason is that a field in the log message does not match Elasticsearch's schema. Check <a href="https://kibana.getsentry.net/app/kibana#/management/kibana/indices/0ba261d0-97ca-11e9-90db-dfacda4da93b?_g=()&_a=(tab:indexedFields)">the index patterns</a> to see whether this is the reason.
+</markdown></Note>
 
 </markdown></ConfigValue>
 
@@ -269,9 +266,9 @@ The secret used to verify GitHub App Webhook event.
 
 Your app's private key.
 
-<Note>
-Make sure to replace newlines them with `\n` to preserve them.
-</Note>
+<Alert level="warning">
+Replace the newlines with `\n` to preserve them.
+</Alert>
 
 </markdown></ConfigValue>