Start moving towards semantic CSS class names

background.html

@@ -619,7 +619,7 @@
       <div class='clear-data-settings'>
         <h3>{{ clearDataHeader }}</h3>
         <div>
-          <button class='grey red clear-data'>{{ clearDataButton }}</button>
+          <button class='grey destructive clear-data'>{{ clearDataButton }}</button>
           <p>{{ clearDataExplanation }}</p>
         </div>
       </div>
@@ -650,8 +650,8 @@
         </div>
         <div class='nav'>
           <div>
-            <a class='button grey cancel'>{{ cancelButton }}</a>
-            <a class='button red delete-all-data'>{{ deleteButton }}</a>
+            <a class='button neutral cancel'>{{ cancelButton }}</a>
+            <a class='button destructive delete-all-data'>{{ deleteButton }}</a>
           </div>
         </div>
       </div>

stylesheets/_global.scss

@@ -836,11 +836,11 @@ input[type=text], input[type=search], textarea {
 
     font-size: 12pt;
 
-    &.grey {
+    &.neutral {
       color: black;
       background: #DEDEDE;
     }
-    &.red {
+    &.destructive {
       background: red;
     }
 

stylesheets/_settings.scss

@@ -39,7 +39,7 @@
       padding: 0 20px;
       margin: 0 0 20px 20px;
     }
-    .red {
+    .destructive {
       background-color: red;
       color: white;
     }