chore: use css classes

frontend/src/app.sass

@@ -275,6 +275,9 @@ button:not(.btn-link),
   display: grid
   grid: min-content / auto-flow max-content
 
+.buttongroup--inline
+  display: inline-block
+
 input[type="submit"][disabled]:not(.btn-link),
 input[type="button"][disabled]:not(.btn-link),
 button[disabled]:not(.btn-link),
@@ -328,6 +331,14 @@ input[type="button"].btn-info:not(.btn-link):hover,
   &:not([disabled]):hover
     color: var(--color-link-hover)
 
+.button--favourite-toggle
+  font-size: 0.25em
+  vertical-align: top
+
+// STACK ICON STYLE
+.icon--stacked
+  vertical-align: top
+
 // GENERAL TABLE STYLES
 .table
   margin: 21px 0

src/Handler/Course/Show.hs

@@ -332,7 +332,7 @@ getCShowR tid ssh csh = do
           { formAction   = Just . SomeRoute $ CourseR tid ssh csh CFavouriteR
           , formEncoding = favouriteToggleEncoding
           , formSubmit   = FormNoSubmit
-          , formAttrs = [("class", "buttongroup"), ("style", "display: inline-block")]
+          , formAttrs = [("class", "buttongroup buttongroup--inline")]
           }
 
 
@@ -342,7 +342,7 @@ getCShowR tid ssh csh = do
           $if not courseVisible && mayEdit
             \ #{iconInvisible}
           $if isJust muid
-            <span style="font-size: 0.25em; vertical-align: top">
+            <span .button--favourite-toggle>
               ^{favouriteToggleWgt}
         |]
 

src/Utils/Icon.hs

@@ -209,7 +209,7 @@ iconStacked :: Icon -> Icon -> Markup
 iconStacked ic0 ic1
   = [shamlet|
     $newline never
-    <span .fa-stack style="vertical-align: top;">
+    <span .fa-stack .icon--stacked>
       <i .fas .fa-stack-2x .fa-#{iconText ic0}>
       <i .fas .fa-stack-2x .fa-#{iconText ic1}>
   |]